C15 - Modular styles

In this example below you will see how to do a C15 - Modular styles with some HTML / CSS and Javascript

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

Technologies

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

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

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'>
<link rel='stylesheet prefetch' href='css/xgpgvg.css'>

  
  
</head>

<body>

  <section class="trunc">
  <div class="page-title">
    <h1>About</h1>
    <span class="underline">
      <svg class="title-svg" version="1.1" width="0" height="15" xmlns="http://www.w3.org/2000/svg">
        <line class="title-line" 
              x1="0" 
              x2="0" 
              y1="7.5" 
              y2="7.5" 
              stroke="white" 
              stroke-width="3"/>
        <circle class="title-circle" 
                cx="0" 
                cy="7.5" 
                r="7.5"/>
      </svg>
    </span>
  </div>
  <div class="page-intro">
    <p>Hoodie mustache mixtape, pop-up meggings blog cred Etsy pork belly gastropub organic 3 wolf moon farm-to-table bicycle rights paleo.</p>
  </div>
  <p>
    <a href="#" class="button leaf dark">Learn More</a>
  </p>
</section>

<section>
  <article>
    <div class="column">
      <div class="column-pad gray-bg">
        <p>Quinoa flannel Blue Bottle High Life chillwave, irony biodiesel 8-bit Portland sriracha Pitchfork. Truffaut leggings blog dreamcatcher jean shorts. Cardigan umami farm-to-table, lomo heirloom keffiyeh brunch distillery Marfa Echo Park listicle synth Carles.</p>
        <a href="#" class="button night">Technology</a>
      </div>
    </div>
    <div class="column">
      <div class="column-pad gray-bg">
        <p>Quinoa flannel Blue Bottle High Life chillwave, irony biodiesel 8-bit Portland sriracha Pitchfork. Truffaut leggings blog dreamcatcher jean shorts. Cardigan umami farm-to-table, lomo heirloom keffiyeh brunch distillery Marfa Echo Park listicle synth Carles.</p>
        <a href="#" class="button dreamsicle">Management Team</a>
      </div>
    </div>
    <div class="column">
      <div class="column-pad gray-bg">
        <p>Quinoa flannel Blue Bottle High Life chillwave, irony biodiesel 8-bit Portland sriracha Pitchfork. Truffaut leggings blog dreamcatcher jean shorts. Cardigan umami farm-to-table, lomo heirloom keffiyeh brunch distillery Marfa Echo Park listicle synth Carles.</p>
        <a href="#" class="button grass">History</a>
      </div>
    </div>
  </article>
</section>

<section style="overflow:hidden; margin-bottom:1.5em;">
  <div class="pallette-box">
    <div class="pallette-color mustard"></div>
    <label>mustard</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color leaf"></div>
    <label>leaf</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color grass"></div>
    <label>grass</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color emerald"></div>
    <label>emerald</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color petrol"></div>
    <label>petrol</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color night"></div>
    <label>night</label>
  </div>
</section>
<section style="overflow:hidden">
  <div class="pallette-box">
    <div class="pallette-color butter"></div>
    <label>butter</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color persimmon"></div>
    <label>persimmon</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color dreamsicle"></div>
    <label>dreamsicle</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color reef"></div>
    <label>reef</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color pool"></div>
    <label>pool</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color seaglass"></div>
    <label>seaglass</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color bubblegum"></div>
    <label>bubblegum</label>
  </div>
  <div class="pallette-box">
    <div class="pallette-color paprika"></div>
    <label>paprika</label>
  </div>
</section>

<section style="background:white; padding:3em;">
  <h1>h1 Style</h1>
  <h2>h2 Style</h2>
  <h3>h3 Style</h3>
  <h4>h4 Style</h4>
  <p>Paragraph style, <a href="#">link style</a>. Cardigan umami farm-to-table, lomo heirloom keffiyeh brunch distillery Marfa Echo Park listicle synth harles. Quinoa flannel Blue Bottle High Life chillwave, irony biodiesel 8-bit Portland sriracha Pitchfork. Truffaut leggings blog dreamcatcher jean shorts.</p>
</section>

<section>
  <div class="column">
    <div class="column-pad gray-bg">
      <div class="cta">
        <h2>Hoodie mustache mixtape, pop-up meggings blog cred Etsy pork belly?</h2>
        <a href="#" class="button">Let's Dance</a>
    </div>
  </div>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mcurren/c15-modular-styles-MwOVdd */
$('.page-title').each(function(){
  var titleWidth = $(this).children('h1').outerWidth() + 6;
  var lineWidth = titleWidth - 7.5;
  
  $(this).find('.title-svg').attr('width', titleWidth);
  $(this).find('.title-line').attr('x2', lineWidth);
  $(this).find('.title-circle').attr('cx', lineWidth);
});

$(document).ready(function() {
  $('.underline').addClass('animate');
  $('.page-intro').delay(500).addClass('fade-in');
});

Comments