HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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/2016/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;
}
Also see: Tab Triggers