cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               <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}
 }
            
          
!
999px
Loading ..................

Console