cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <article>
  
  <h1 class="grapes">Grapes</h1>
  
  <p>The cultivation of the domesticated grape began 6,000–8,000 years ago in the Near East. Yeast, one of the earliest domesticated microorganisms, occurs naturally on the skins of grapes, leading to the innovation of alcoholic drinks such as wine. The earliest archeological evidence for a dominant position of wine-making in human culture dates from 8,000 years ago in Georgia.</p>
  
  <img src="http://labs.jensimmons.com/examples/images/grapes.jpg" class="grapes">
  
  <p>The oldest winery was found in Armenia, dating to around 4000 BC. By the 9th century AD the city of Shiraz was known to produce some of the finest wines in the Middle East. Thus it has been proposed that Syrah red wine is named after Shiraz, a city in Persia where the grape was used to make Shirazi wine. Ancient Egyptian hieroglyphics record the cultivation of purple grapes, and history attests to the ancient Greeks, Phoenicians, and Romans growing purple grapes for both eating and wine production. The growing of grapes would later spread to other regions in Europe, as well as North Africa, and eventually in North America. In North America, native grapes belonging to various species of the Vitis genus proliferate in the wild across the continent, and were a part of the diet of many Native Americans, but were considered by European colonists to be unsuitable for wine. Vitis vinifera cultivars were imported for that purpose.</p>
  
  <p>Grapes are a type of fruit that grow in clusters of 15 to 300, and can be crimson, black, dark blue, yellow, green, orange, and pink. "White" grapes are actually green in color, and are evolutionarily derived from the purple grape. Mutations in two regulatory genes of white grapes turn off production of anthocyanins, which are responsible for the color of purple grapes. Anthocyanins and other pigment chemicals of the larger family of polyphenols in purple grapes are responsible for the varying shades of purple in red wines. Grapes are typically an ellipsoid shape resembling a prolate spheroid.</p>

</article>
            
          
!
            
              * {box-sizing: border-box;}
html {
  font-family: georgia, serif;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  text-size-adjust: 100%;
  font-family: Georgia, serif;
  font-size: 18px;
}
body {
  width: 80%;
  margin: 8rem 15% 5rem 5%; 
  max-width: 800px;
}
h1 {
  font-size: 5rem;
  color: #6e8e21;
  margin: 0;
  line-height: 1.1em;
}
p {
  line-height: 1.75em;
}
h1, h2, h3, p {
  margin-left: 20vw;
}
img {
  float: left;
  margin: 1em;    
  width: 50vw;
  shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%, 0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%);
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console