various font-sizes

In this example below you will see how to do a various font-sizes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mephysto, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mephysto ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>various font-sizes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container">
  <p>10px orem ipsum dolor amet chambray PBR&B banh mi neutra. Selvage master cleanse cray, tacos typewriter venmo retro hell of gastropub kogi ennui next level marfa drinking vinegar. Messenger bag drinking vinegar synth readymade, mlkshk celiac trust fund small batch sriracha. Ennui kickstarter lo-fi, post-ironic shabby chic edison bulb man bun lumbersexual hexagon chartreuse gluten-free.</p>
  <p>11px Neutra street art activated charcoal ramps try-hard letterpress shabby chic fixie mumblecore paleo flexitarian +1 poutine. Stumptown bespoke slow-carb, waistcoat palo santo trust fund iPhone. Direct trade squid disrupt meggings glossier cold-pressed etsy. Craft beer pok pok hella jean shorts food truck venmo messenger bag stumptown taxidermy twee neutra kombucha pickled quinoa. Tattooed wolf franzen beard tbh, hella semiotics umami leggings glossier. Meggings cornhole pok pok mlkshk. Succulents messenger bag affogato tofu pork belly whatever cloud bread tumblr banjo chia readymade cardigan.</p>
  <p>12px Tattooed microdosing bitters mumblecore, adaptogen irony everyday carry distillery shoreditch taiyaki four dollar toast kickstarter occupy four loko tumblr. Biodiesel paleo iceland, pork belly ramps austin heirloom squid lo-fi lyft. Narwhal knausgaard bushwick tofu, fingerstache adaptogen chambray selvage. Man braid cardigan tumblr butcher la croix sustainable kogi listicle meh selvage. Truffaut +1 hexagon photo booth, direct trade tumblr pour-over mlkshk flannel cray church-key actually aesthetic. Venmo taxidermy snackwave gochujang listicle. Man braid wayfarers beard master cleanse, artisan sartorial occupy intelligentsia lyft kogi.</p>
  <p>13px Keytar cliche before they sold out woke small batch palo santo VHS glossier gentrify flexitarian tilde church-key celiac next level. Mixtape vinyl actually air plant health goth. Slow-carb man braid iceland activated charcoal cronut. 90's woke pickled, before they sold out cardigan meggings lo-fi readymade knausgaard direct trade. Flexitarian brunch tilde migas selfies kale chips tumeric mixtape marfa man bun locavore kickstarter meggings gochujang. Next level quinoa thundercats disrupt pabst, narwhal retro enamel pin sartorial actually hexagon.</p>
  <p>14px Hammock tbh echo park, vaporware hoodie vape meditation. Shaman scenester messenger bag, salvia cred you probably haven't heard of them gluten-free taxidermy small batch flannel neutra blue bottle. Glossier chambray mlkshk kombucha wayfarers. Salvia literally roof party, ennui you probably haven't heard of them poutine tbh before they sold out palo santo fanny pack. Cronut enamel pin quinoa, narwhal chambray forage 8-bit.</p>
  <p>15px orem ipsum dolor amet chambray PBR&B banh mi neutra. Selvage master cleanse cray, tacos typewriter venmo retro hell of gastropub kogi ennui next level marfa drinking vinegar. Messenger bag drinking vinegar synth readymade, mlkshk celiac trust fund small batch sriracha. Ennui kickstarter lo-fi, post-ironic shabby chic edison bulb man bun lumbersexual hexagon chartreuse gluten-free.</p>
  <p>16px Neutra street art activated charcoal ramps try-hard letterpress shabby chic fixie mumblecore paleo flexitarian +1 poutine. Stumptown bespoke slow-carb, waistcoat palo santo trust fund iPhone. Direct trade squid disrupt meggings glossier cold-pressed etsy. Craft beer pok pok hella jean shorts food truck venmo messenger bag stumptown taxidermy twee neutra kombucha pickled quinoa. Tattooed wolf franzen beard tbh, hella semiotics umami leggings glossier. Meggings cornhole pok pok mlkshk. Succulents messenger bag affogato tofu pork belly whatever cloud bread tumblr banjo chia readymade cardigan.</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mephysto/various-font-sizes-PawVrj */
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #333;
  padding-left: 10px;
  padding-right: 10px;
}

.container {
  padding-left: 10px;
  padding-right: 10px;
  flex: 0 0 auto;
  background: white;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container {
    max-width: 1200px;
  }
}
.container p {
  line-height: 2;
}
.container p:nth-child(1) {
  font-size: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(1) {
    font-size: 20px;
  }
}
.container p:nth-child(2) {
  font-size: 11px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(2) {
    font-size: 22px;
  }
}
.container p:nth-child(3) {
  font-size: 12px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(3) {
    font-size: 24px;
  }
}
.container p:nth-child(4) {
  font-size: 13px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(4) {
    font-size: 26px;
  }
}
.container p:nth-child(5) {
  font-size: 14px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(5) {
    font-size: 28px;
  }
}
.container p:nth-child(6) {
  font-size: 15px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(6) {
    font-size: 30px;
  }
}
.container p:nth-child(7) {
  font-size: 16px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container p:nth-child(7) {
    font-size: 32px;
  }
}

h1 {
  margin: 0;
  color: white;
}


/*Downloaded from https://www.codeseek.co/mephysto/various-font-sizes-PawVrj */
var timeline = new TimelineMax()
  .add(TweenMax.staggerTo('.item', 1, {x: 50, ease: Power2.easeIn, transformOrigin:'50% 50%'}, .05))
  .to('h1', 4, {y: 50, ease: Power0.easeNone}, 0)

Comments