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.

  <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>

              * {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%);
Loading ..................