cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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>
      <header>
        <h1>A secret weapon to fight climate change: dirt</h1>
      </header>
            
<div class="article-body">
  
<div class="publication-details">
  <span class="author">by Debbie Barker and Michael Pollan</span>
  <span class="publication"><cite>The Washington Post</cite></span>
  <time class="pubdate" datetime="2015-12-15T10:00:00-05:00" >December 15, 2015</time>
</div>

<p>When Will Allen is asked to name the most beautiful part of his <a title="cedarcirclefarm.org" href="https://cedarcirclefarm.org/">Vermont farm</a>, he doesn’t talk about the verdant, rolling hills or easy access to the Connecticut River. Though the space is a picturesque postcard of the agrarian idyll, Allen points down, to the dirt. “This precious resource not only grows food,” he says, “but is one of the best methods we have for sequestering carbon.”</p>

<p>We think of climate change as a consequence of burning fossil fuels. But a third of the carbon in the atmosphere today used to be in the soil, and modern farming is largely to blame. Practices such as the overuse of chemicals, excessive tilling and the use of heavy machinery disturb the soil’s organic matter, exposing carbon molecules to the air, where they combine with oxygen to create carbon dioxide. Put another way: Human activity has turned the living and fertile carbon system in our dirt into a toxic atmospheric gas.</p>

<aside class="pullquote">Climate change, quite simply, cannot be halted without fixing agriculture.</aside>

<p>It’s possible to halt and even reverse this process through better agricultural policies and practices. Unfortunately, the world leaders who <a title="www.washingtonpost.com" href="https://www.washingtonpost.com/business/economy/obama-urges-world-action-on-climate-change-hour-is-almost-upon-us/2015/11/30/2765bac4-975c-11e5-8917-653b65c809eb_story.html">gathered in Paris</a> this past week have paid little attention to the critical links between climate change and agriculture. That’s a huge mistake and a missed opportunity. Our unsustainable farming methods are a central contributor to greenhouse gas emissions. Climate change, quite simply, cannot be halted without fixing agriculture.</p>

<p>The industrialization of farming has allowed farmers to grow more crops more quickly. But modern techniques have also wreaked havoc on the earth, water and atmosphere. Intense plowing, for example, has introduced more oxygen into the soil, boosting the microbes that convert organic matter into carbon dioxide. The quest to wring every last dollar out of fields has put pressure on farmers to rely on chemical fertilizers. This often leaves fields more bare between growing seasons, allowing carbon to escape into the air. Scientists estimate that cultivated soil has lost <a title="e360.yale.edu" href="http://e360.yale.edu/feature/soil_as_carbon_storehouse_new_weapon_in_climate_fight/2744/">50 to 70 percent</a> of its carbon, speeding up climate change.</p>

<p>That loss has significantly degraded soil health, reducing our ability to grow food. Median crop yields are likely to decline by about <a title="www.centerforfoodsafety.org" href="http://www.centerforfoodsafety.org/press-releases/4139/un-must-include-soil-health-in-climate-mitigation-strategies">2 percent per decade through 2100</a>, according to the U.N. Intergovernmental Panel on Climate Change. At the same time, the world’s population is projected to jump from 7 billion to 9 billion by 2050.</p>

<p>Water availability is also at risk. Currently, <a title="water.worldbank.org" href="http://water.worldbank.org/topics/water-resources-management/water-and-climate-change">1.6 billion people</a> live in regions facing severe water scarcity; that number is expected to rise to 2.8 billion by 2025. Agriculture accounts for a whopping <a title="www.worldometers.info" href="http://www.worldometers.info/water/">70 percent</a> of all water consumption. That’s in large part because degraded soil doesn’t absorb water efficiently. Instead, water sits on top of the ground and runs off (along with farm chemicals) into nearby waterways, creating toxic nitrogen “dead zones.”</p>

<p>Remarkably, though, restoring carbon to the soil is not nearly as complicated as rethinking our transportation systems or replacing coal with renewable energy. Innovative farmers such as Allen already know the recipe.</p>

<p>He and his team place “cover crops” in their fields, planting things like oats, rye and beans between rows of vegetables. This practice keeps carbon, nitrogen and other organic nutrients in the soil. “Keeping as much ground covered with plants as long as possible allows photosynthesis to draw down atmospheric carbon into soils,” Allen says. A bare field, in contrast, represents a waste of photosynthetic potential. Allen also composts, limits plowing and avoids synthetic chemicals like nitrogen fertilizers. In combination, these efforts have increased soil organic matter by 3 to 4 percent in just three years. Allen also sells some of his cover crops, adding farm income.</p>

<p>Allen’s results are not unusual. <a title="www.esa.org" href="http://www.esa.org/esa/wp-content/uploads/2012/12/carbonsequestrationinsoils.pdf">Studies</a> have <a title="www.moralactiononclimate.org" href="http://www.moralactiononclimate.org/index.php/downloads/biodiversity-for-a-livable-climate/31-climate-restoration-solutions-healthy-soils-fact-sheet-1/file">shown</a> that cover cropping, crop rotation and no-till farming could restore global soil health while significantly decreasing farms’ carbon footprint. Some scientists project that 75 to 100 parts per million of CO2 could be drawn out of the atmosphere over the next century if existing farms, pastures and forestry systems were managed to maximize carbon sequestration. That’s significant when you consider that CO2 levels passed 400 ppm this spring. Scientists agree that the safe level of carbon dioxide in the atmosphere is <a title="400.350.org" href="http://400.350.org/">350 ppm</a>.</p>

<p>Regenerative farming would also increase the fertility of the land, making it more productive and better able to absorb and hold water, a critical function especially in times of climate-related floods and droughts. Carbon-rich fields require less synthetic nitrogen fertilizer and generate more productive crops, cutting farmer expenses…</p>

<footer>Isn't this a cool article? I borrowed the first part of it to make this web page layout example. You should go <a href="http://michaelpollan.com/articles-archive/a-secret-weapon-to-fight-climate-change-dirt/">read the rest on Michael Pollan's website</a>.</footer>

    </div>
    
    </article>

            
          
!
            
              html {
  font-family: 'AdobeGaramondW01-Regula', georgia, serif;
  font-size: 18px;
}

// Header --------------------------------------------------

header {
  background: #2E1811;
  background-image: url('http://labs.jensimmons.com/examples/images/dirt.jpg');
  background-size: cover;
  padding: 2rem 0;
  color: #fff;
  text-shadow: 0px 1px 6px rgba(0,0,0,0.6);
}
h1 {
  font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;  
  width: 80%;
  margin: 0 auto;
  line-height: 1.1em;
  font-size: 2rem;
  @media (min-width: 500px) {
    font-size: 4rem;
  }
}


// Publication Details -------------------------------------

.publication-details {
  border-top: 1px solid rgba(0,0,0,0.7);
  border-bottom: 1px solid rgba(0,0,0,0.7);
  padding: 0.5em 0 0.3333em;
  margin-bottom: 2em;
  text-align: center;
}
.author,
.publication,
.pubdate {
  padding: 0.1em 0.25em;
  margin: 0.25em 0;
}
.author::after,
.publication::after {
  content: " ⋄ ";
  opacity: 0.7;
  margin-left: 0.5em;
}
cite {
  font-style: italic;
}

// Article body --------------------------------------------

.article-body {
  width: 80%;
  margin: 2rem auto;
  p {
    line-height: 1.6em;
    text-indent: 1em;
  }
  a {
    color: green;
  }
}
.pullquote {
  margin: 1em 0;
  font-family: 'BauerBodoniW01-BoldDisp', georgia, serif; 
  font-size: 2rem;
  @media (min-width: 500px) {
    font-size: 3rem;
  }
}
footer {
  padding: 0.8em 1em;
  background: #e1f3cc;
  font-style: italic;
}

// Now let's add some things
header {
  display: flex;
  height: 100vh;
}
h1 {
  margin: auto;
}
            
          
!
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