<section data-description="bold/cursive">
  <div class="wrapper">
   <h1 class="beta uppercase montserrat regular line-after-heading">
    This shouldn't be so difficult 
    </h1>
    <p class="delta cardo regular italic">
    Wow, what a fine cofee flavor
    </p>
   </div>
 </section>
  
  <section data-description="thin/bold">
  <div class="wrapper">
   <h1 class="alpha lato thin thick-header-line uppercase ls-small">
    Nice web type
    </h1>
    <p class="mega open-sans bold uppercase">
    This shouldn't be<br> so difficult 
    </p>
   </div>
  </section>
  
  <section data-description="Add emphasis with color">
  <div class="wrapper">
   <h1 class="mega montserrat bold">
    Movement is <span class="color-emphasis-1">here.</span><br>
     And it is here <span class="color-emphasis-1">to stay.</span>
    </h1>
   </div>
  </section>
  
  <section data-description="Thin/Super bold/thin">
  <div class="wrapper">
   <h1 class="gamma lato thin uppercase ls-xlarge">
     Beautiful<br>
     <span class="open-sans tera ls-xlarge bold">Type</span><br>
     <span class="epsilon ls-medium">Yes it can be done</span>
    </h1>
   </div>
  </section>
  
  <section data-description="Playing with serifs">
  <div class="wrapper">
   <h1 class="gamma light merriweather italic text-left">
     Welcome to typography<br>
    <span class="tera uppercase text-left ls-large vollkorn bold normal">Paradise</span>
    </h1>
   </div>
  </section>
  
  <section data-description="Super contrast">
  <div class="wrapper">
   <h1 class="delta uppercase thin raleway color-emphasis-2 ls-medium">
     Please let me<br>
    <span class="supersize montserrat bold">Scale</span>
    </h1>
   </div>
  </section>
  
  <section data-description="Vertical text">
  <div class="wrapper">
   <h1 class="mega abril-fatface regular uppercase line-height-small ls-large">
     <span class="delta lato light ls-small">Just</span><br>
     T<br>
     yp<br>
     e<br>
     &amp;<br>
     fu<br>
     n
    </h1>
   </div>
  </section>
  
  <section data-description="Playful type">
  <div class="wrapper">
   <h1 class="giga bree-serif regular double-header-line">Just Being Playful</h1>
    <p class="delta oswald regular uppercase ls-large">You know you like it</p>
   </div>
  </section>
  
  <section data-description="Middle flourish">
  <div class="wrapper">
   <h1 class="mega regular ls-large libre-baskerville uppercase color-emphasis-3">
       Just <span class="decorative-span regular ls-small">The</span> Finest
   </h1>
   </div>
  </section>

  <section data-description="Overlay text">
  <div class="wrapper large-wrap">
    <h1 data-text="Wow, what a fine cofee flavor"  class="gigantic bold montserrat ls-xlarge uppercase text-overlay">
      Bold type
    </h1>
    </div>
  </section>

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400|Playfair+Display:400,700,400italic|Libre+Baskerville:400,700,400italic|Muli:300,400|Open+Sans:400,300,700|Oswald:400,700|Raleway:400,100,300,700|Montserrat:400,700|Merriweather:400,300,300italic,400italic,700|Bree+Serif|Vollkorn:400italic,400,700|Abril+Fatface|Cardo:400,400italic);

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Basically just a bunch of typeface classes, some helper classes(letter-spacing, font-weight, etc.), decorative classes(line-on-headers, double-lines, etc). Three types of bg, image, gradient and solid color. I do this for testing headings/hero-image typography. Now there are ten presets here, but you can mix everything. I know that this brings to classivitis, but I still didn't dwelved into Saas, it is next on my learning roadmap, but I will create a fork soon with Saas and variables. */


/* Preset 1 ---- Bold/cursive  */
/* Preset 2 ---- Thin/bold  */
/* Preset 3 ---- Add emphasis with color */
/* Preset 4 ---- Thin/Super bold/thin */
/* Preset 5 ---- Playing with serifs */
/* Preset 6 ---- Super contrast */
/* Preset 7 ---- Vertical text */
/* Preset 8 ---- Playful type */
/* Preset 9 ---- Middle flourish */
/* Preset 10 ---- Overlay text */

/* ==== Font sizes(based on Typeplate's scale) ==== */
html {
  font: normal 112.5%/1.65 serif; /* base font size 18px with 1.65 line-height */
  -moz-font-feature-settings: "liga=1, dlig=1"; /* common and discretionary ligatures */
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin-top: 0;
  color: #fff;
  display: inline-block;
  position: relative;
}
p{
  margin-top: 4rem;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1
}
.gigantic{font-size: 11rem;}
.supersize{font-size: 8rem;}
.tera {
  font-size: 6.5rem; /* 117 / 18 = 6.5 */
  margin-bottom: 0.25385rem;
}

.giga {
  font-size: 5rem; /* 90 / 18 = 5 */
  margin-bottom: 0.33rem;
}

.mega {
  font-size: 4rem; /* 72 / 18 = 4 */
  margin-bottom: 0.4125rem;
}

.alpha {
  font-size: 3.33333rem; /* 60 / 18 = 3.3333 */
  margin-bottom: 0.495rem;
}

.beta {
  font-size: 2.6667rem; /* 48 / 18 = 2.6667 */
  margin-bottom: 0.61875rem;
}

.gamma {
  font-size: 2rem; /* 36 / 18 = 2 */
  margin-bottom: 0.825rem;
}

.delta {
  font-size: 1.3333333333333333rem; /* 24 / 18 = 1.3333 */
  margin-bottom: 1.2375rem;
}

.epsilon {
  font-size: 1.16667rem; /* 21 / 18 = 1.1667 */
  margin-bottom: 1.41429rem;
}

.zeta {
  font-size: 1rem; /* 18 = 18 × 1 */
  margin-bottom: 1.65rem;
}
/* ==== Typefaces  ==== */

.open-sans{font-family: 'Open Sans';}
.lato{font-family: 'Lato'}
.playfair-display{font-family: 'Playfair Display'}
.libre-baskerville{font-family: 'Libre Baskerville'}
.oswald{font-family: 'Oswald'}
.montserrat{font-family: 'Montserrat'}
.vollkorn{font-family: 'Vollkorn'}
.bree-serif{font-family: 'Bree Serif'}
.raleway{font-family: 'Raleway'}
.merriweather{font-family: 'Merriweather'}
.cardo{font-family: 'Cardo'}
.abril-fatface{font-family: 'Abril Fatface'}
.muli{font-family: 'Muli'}

/* ==== Weights, styles, letterspacing, etc. ==== */

.thin{font-weight: 100;}
.light{font-weight: 300;}
.regular{font-weight: 400;}
.bold{font-weight: 700;}
.italic{font-style: italic;}
.normal{font-style: normal;}
.ls-small{letter-spacing: 2px;}
.ls-medium{letter-spacing: 4px;}
.ls-large{letter-spacing: 8px;}
.ls-xlarge{letter-spacing: 12px;}
.uppercase{text-transform: uppercase;}
.color-emphasis-1{color: #FF4056}
.color-emphasis-2{color: #000;}
.color-emphasis-3{color: #60547c}
.text-left{text-align: left;}
.line-height-small{line-height: 1.2}
.line-height-medium{line-height: 1.45}
.line-height-large{line-height: 1.65}


/* ===== Flourish, heading horizontal lines, etc. ==== */

.thick-header-line:before, .thick-header-line:after{
  content: "";
  display: block;
  position: absolute;
  width:7rem;
  height: 4px;
  background-color: #fff;
  top:50%;
  margin-bottom: -4px;
}
.thick-header-line:before{
  left: -7.5rem;
}
.thick-header-line:after{
  right: -7.5rem;
}

.thin-header-line:before, .thin-header-line:after{
  content: "";
  display: block;
  position: absolute;
  width:7rem;
  height: 1px;
  background-color: #fff;
  top:50%;
  margin-bottom: -1px;
}
.thin-header-line:before{
  left: -7.5rem;
}
.thin-header-line:after{
  right: -7rem;
}
.line-after-heading:before{
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  width:4rem;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: -2rem;
  
}
.double-header-line:before, .double-header-line:after{
  content: "";
  display: block;
  position: absolute;
  width:7rem;
  background-color: transparent;
  height: 4px;
  border-top: 1px solid #fff;
  border-bottom:1px solid #fff;
  top: 50%;
  margin-bottom: -4px;
}
.double-header-line:before{
  left: -7.5rem;
}
.double-header-line:after{
  right: -7.5rem;
}
.decorative-span{
  display: inline-block;
    font-size: 30px;
    line-height: 60px;
    margin: 0 10px;
    position: relative;
    vertical-align: middle;
  color: #fff;
}
.decorative-span:before, .decorative-span:after{
    background-color: #fff;
    bottom: 100%;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}
.decorative-span:after {
    top: 96%;
}

.text-overlay:before{
  content: attr(data-text);
  z-index: 99;
  width: 98%;
  height: 50px;
  background-color: hsla(0,0%,0%,0.6);
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  line-height: 50px;
  text-align: center;
  color:#f0ad00;
  font-family: 'bree serif';
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* ==== General styles ==== */
section{
  height: 600px;
  padding: 3rem 0;
  position: relative;
}
.wrapper{
  max-width: 53.33rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  transform: translateY(-50%);
  top:50%;
  text-align: center;
}
.wrapper.large-wrap{max-width: 100%;}
section:nth-of-type(3n+1){
  background-size: cover;
}
section:nth-of-type(1){
  background-image: url(https://download.unsplash.com/photo-1429277096327-11ee3b761c93);
}
section:nth-of-type(2){
  background: -webkit-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* W3C */
        
}
section:nth-of-type(3){
  background-color: #2A2C39;
}
section:nth-of-type(4){
  background-image: url(https://download.unsplash.com/photo-1428550670225-15f007f6f1ba)
}
section:nth-of-type(5){
  background: -webkit-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* W3C */
        
        
}
section:nth-of-type(6){
  background-color: #FCF751;
}
section:nth-of-type(7){
  background-image: url(https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=12d0ef05e407b1c9c85ad9875ece1a13)
}
section:nth-of-type(8){
  
  background: -webkit-linear-gradient(90deg, #485563 10%, #29323c 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #485563 10%, #29323c 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #485563 10%, #29323c 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #485563 10%, #29323c 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #485563 10%, #29323c 90%); /* W3C */
        
}
section:nth-of-type(9){
  background-color: #b78681;
}
section:nth-of-type(10){
  background-image: url(https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5)
}
section:before{
  content: attr(data-description);
  font-size: 0.9rem;
  font-family: 'oswald';
  color: #fff;
  position: absolute;
  z-index: 20;
  left: 2rem;
  top: 2rem;
}

/* Media queries */
 @media screen and (min-width: 1440px) {
   section{height:700px}
 }