LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

The dropcaps need to hang half-way into the margins and the text needs to line up right next to the dropcap.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vero officia quo nulla culpa laboriosam amet ratione magni dolorem. Repellat natus inventore iure error numquam incidunt tempore ipsum nulla beatae cumque at laboriosam pariatur dolorem corporis maiores non, ad. Neque rem voluptates consectetur itaque nobis accusantium error numquam voluptate minus. Tempore voluptatibus fuga voluptates beatae soluta saepe et veritatis, culpa sequi voluptatum accusamus molestias earum natus obcaecati illo sit sint quia eius. Qui perferendis magnam non maiores vitae libero quam quod cum voluptatem amet. Nesciunt unde, cupiditate exercitationem fuga consectetur ea, nobis eius recusandae consequatur. Culpa est dolores tempora nulla, omnis quod commodi iusto harum laudantium, dignissimos autem quis itaque natus quaerat consequuntur rem alias dolorum sunt doloribus quisquam et totam! Excepturi deserunt sequi omnis necessitatibus, ullam, aperiam blanditiis. Dignissimos aperiam, tenetur soluta quod delectus perferendis non neque numquam minus vitae sapiente praesentium dolorem repellat esse totam rerum illo doloribus quasi, ex magnam libero quibusdam. Enim quasi magnam ad, ipsa ipsum quibusdam asperiores nesciunt alias doloribus deserunt sunt nobis facere excepturi eius nam corporis, ea quidem cumque adipisci ipsam illum in. Mollitia facilis, adipisci. Neque necessitatibus vitae assumenda, voluptatem doloremque illum optio ab cum, est nostrum, qui, dignissimos. Modi, optio!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vero officia quo nulla culpa laboriosam amet ratione magni dolorem. Repellat natus inventore iure error numquam incidunt tempore ipsum nulla beatae cumque at laboriosam pariatur dolorem corporis maiores non, ad. Neque rem voluptates consectetur itaque nobis accusantium error numquam voluptate minus. Tempore voluptatibus fuga voluptates beatae soluta saepe et veritatis, culpa sequi voluptatum accusamus molestias earum natus obcaecati illo sit sint quia eius. Qui perferendis magnam non maiores vitae libero quam quod cum voluptatem amet. Nesciunt unde, cupiditate exercitationem fuga consectetur ea, nobis eius recusandae consequatur. Culpa est dolores tempora nulla, omnis quod commodi iusto harum laudantium, dignissimos autem quis itaque natus quaerat consequuntur rem alias dolorum sunt doloribus quisquam et totam! Excepturi deserunt sequi omnis necessitatibus, ullam, aperiam blanditiis. Dignissimos aperiam, tenetur soluta quod delectus perferendis non neque numquam minus vitae sapiente praesentium dolorem repellat esse totam rerum illo doloribus quasi, ex magnam libero quibusdam. Enim quasi magnam ad, ipsa ipsum quibusdam asperiores nesciunt alias doloribus deserunt sunt nobis facere excepturi eius nam corporis, ea quidem cumque adipisci ipsam illum in. Mollitia facilis, adipisci. Neque necessitatibus vitae assumenda, voluptatem doloremque illum optio ab cum, est nostrum, qui, dignissimos. Modi, optio!

CSS
/* Works on modern browsers that scale text well */
.scale { 
  font-size: 4em;
  line-height: 1.6;
  float: left;
  transform:scale(2);
  transform-origin:100% 50%;
}

/* Works on older browsers that don't scale text well */
.no-scale { 
  color: transparent;
  font-size: 4em;
  line-height: 1.6;
  float: left;
  position:relative;
}
.no-scale::after {
  content: attr(data-letter);
  color:black;
  position: absolute;
  top:0;
  right:0;
  font-size:2em;
  line-height:0.8;
}



/* Demo styles */
body { 
  background:#456270; 
  font-size:1.2em;
  line-height:1.2em;
}
.content {
  max-width: 40rem;
  padding:5px 70px;
  margin: 2em auto;
  background:#EEE7D7; 
}
JS
// For more check out zachsaucier.com
Host Instantly Drag and Drop Website Builder

 

Description

A group of us involved in the web design chatroom on SO were trying to figure this out based on Scott Kellum's challenge https://twitter.com/ScottKellum/status/558625850099523584
Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID
Pen ID