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.
<div class="wrapper">
<header>
<h3 class="ticker"><span>Better than hard cash</span> why bankers are talking about Bitcoin as a rival to real money</h3>
<div class="published">
<time>Tuesday 26.11.13</time>
<p>Published in London and Manchester</p>
<p><strong>£1.40</strong></p>
</div>
<header>
<h1 class="title"><span>The</span> Guardian</h1>
<h2 class="website"> theguardian.com</h2>
</header>
</header>
<div class="break"></div>
<div class="teaser-block">
<div class="student teasers">
<h1>World's most influential teenager?</h1>
<h2>Exeter student on fame and the web</h2>
<figure class="background"><img src="https://static.guim.co.uk/sys-images/Guardian/About/General/2013/11/25/1385391990499/Beth-Reekles-009.jpg"></figure>
</div>
<div class="pop teasers">
<h1>40 great facts about 1,000 No 1s</h1>
<h2>Peter Robinson's pop trivia special</h2>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/pop.png"></figure>
</div>
<div class="borgen teasers">
<h1>Life after borgen</h1>
<h2>Brigette Sørenson interview</h2>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/30BRIDGET0811.png"></figure>
<figure class="background"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/cast.png"></figure></div>
<div class="break"></div>
</div>
<div class="columns2">
<h1 class="headline">Energy giant axes £4bn UK turbine project</h1>
<h2 class="subhead">Green blow as RWE shelves offshore plan amid uncertainty over policy</h2>
<article class="cols2 just">
<div class="byline">Terry Macalister<br/><span>Energy editor</span></div>
<p>Britain's green ambitions have been dealt a blow as a big six energy company has pulled the plug on one of the world's largest offshore windfarms, with the political storm enveloping the industry threatening the multibillion-pound investments needed to meet emissions targets and head off a looming capacity crunch.</p>
<p>Weeks after warning that the government was treating environmental subsidies as a "political football", the German-owned RWE npower is pulling out of the £4bn Atlantic Array project in the Bristol Channel because the economics do not stack up.</p>
<p>
The move comes as figures show that energy firms reaped a 77% increase in profits per customer last year, due to bill increases that the big six say are partly due to government green levies.</p>
<p>The shelving of the Atlantic Array is a setback for the government, which is banking on bigger windfarms in deeper waters to help provide low-carbon power. The RWE cancellation is the first axing of a Round 3 windfarm - schemes such as those in Dogger Bank, Hornsea and East Anglia, which are supposed to help the government meet a target of generating 15% of energy from renewable sources by 2020. It will also raise further concerns about investors being frightened away by political rows and policy uncertainty.</p>
<p>The Renewable Energy Association (REA), which lobbies for more low-carbon power, said government infighting over subsidies was causing deep uncertainty in the industry.</p>
<p>Ahead of next week's autumn statement, the chancellor is looking to transfer the £1.6bn cost of the energy companies obligation (Eco) and the smaller warm home discount to the taxpayer, removing the burden from household bills.</p>
<p>"We need assurances from George Osborne in the autumn statement about where we stand," said a spokesman for the REA. "Nick Clegg says one thing about the green levies, Michael Fallon [the energy minister] another."</p>
<p>Last week David Cameron was reported to have talked about the need to get rid of "green crap" from energy bills. Number 10 said it did not recognise the phrase but did not deny the sentiment. Peter Atherton, a leading energy analyst, warned last week that investment in power generation was "killed stone dead" until the next election by Ed Miliband's call for a price freeze and government delays in introducing promised electricity market reform.</p>
<p>The political and public environment for power companies is set to become more hostile following the publication of figures on Monday showing that the average profit per customer for the big six rose from £30 to £53 last year. The industry watchdog said the rise was due to higher bills and increased energy use during a harsh winter, not due to cost reduction.</p>
<p>RWE indicated that the government might have to raise green subsidies - and thus increase bills or the burden on the taxpayer - after admitting that technical difficulties had pushed the price up so far that it could not be justified under the current subsidy regime.</p>
<p>"This is not a decision we have taken lightly; however, given the technological challenges and market conditions, now is not the right time for RWE to continue to progress with this project," said Paul Cowling, director of offshore wind at RWE Innogy.</p>
<p>The Atlantic Array would have provided clean energy for almost 1m homes and provided thousands of jobs in the construction phase. Cowling insisted RWE remained committed to offshore wind and would be proceeding with a range of other projects off the coast of Britain.</p>
<p>
The move comes as figures show that energy firms reaped a 77% increase in profits per customer last year, due to bill increases that the big six say are partly due to government green levies.</p>
<p>The shelving of the Atlantic Array is a setback for the government, which is banking on bigger windfarms in deeper waters to help provide low-carbon power. The RWE cancellation is the first axing of a Round 3 windfarm - schemes such as those in Dogger Bank, Hornsea and East Anglia, which are supposed to help the government meet a target of generating 15% of energy from renewable sources by 2020. It will also raise further concerns about investors being frightened away by political rows and policy uncertainty.</p>
<div class="cont">Continued on page 2 >> </div>
</article>
</div> <!-- ends cols2 -->
<div class="columns2 van-dyck">
<h2><span>Save for the nation </span>Van Dyck appeal</h2>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/Van-Dyck-portrait--014.jpg"><figcaption>The national Portrait gallery has launched a campaign to raise £12.5m so it can buy Anthony Van Dyck's self portait, ensuring the masterpiece stays in Britain <h3>13</h3></figcaption></figure>
</div>
<div class="columns1 slavery last just"><article>
<h1>Slavery case suspects linked to Maoist group</h1>
<div class="byline">Peter Walker and Josh Halliday</div>
<p>The couple accused of holding three women as domestic slaves in south London for 30 years had been leading lights in a cultlike far-left political group which worshipped the Chinese revolutionary Mao Zedong and believed that their area of south London was on the verge of being liberated by China's Red Army.</p>
<p>Aravindan Balakrishnan, 73, named for the first time on Monday, was a senior member of the tiny Communist party of England (Marxist-Leninist) in the early 1970s, before splitting away in 1974 to form an even more niche and hardline grouping, the Workers' Institute of Marxism-Leninism-Mao Zedong Thought.</p>
<p>His 67-year-old wife, Chanda, was part of the same grouping, which set itself up in 1976 in a library-cum-commune inside a large Victorian building in Brixton, south London, with about 25 members. Its leader, Balakrishnan, was known at the time as Comrade Bala.</p>
<p>Steve Rayner, an academic who studied the group, noted its cultlike attributes, in which there was little debate and the few members with jobs donated all their income to the organisation. Rayner, a professor at Oxford University, who studied Balakrishnan's group for a 1979 PhD thesis on leftwing groups, described the leader's "superior ability to manipulate" other members, who were mainly from overseas and appeared vulnerable.</p>
<p>Rayner's investigation found that members, who wore Mao badges at all times, believed that they and the rest of Brixton would soon be liberated by the Red Army. He said the group was the "clearest case of far-left millenarianism which I have encountered".</p>
<p>The couple were both arrested on suspicion of holding three women captive at a series of addresses in south London including, most recently, a council-owned flat in Peckford Place, Brixton. Police inquiries have since tied the group to more than a dozen properties around south London over the decades.</p>
<p>Aravindan Balakrishnan, 73, named for the first time on Monday, was a senior member of the tiny Communist party of England (Marxist-Leninist) in the early 1970s, before splitting away in 1974 to form an even more niche and hardline grouping, the Workers' Institute of Marxism-Leninism-Mao Zedong Thought.</p>
<p>His 67-year-old wife, Chanda, was part of the same grouping, which set itself up in 1976 in a library-cum-commune inside a large Victorian building in Brixton, south London, with about 25 members. Its leader, Balakrishnan, was known at the time as Comrade Bala.</p>
<div class="cont">Continued on page 4 >> </div>
</article>
</div>
<div class="break"></div>
<div class="foot">
<h1><span>Out and down</span> How hard has depression hit cricket?</h1>
<article class="cols4 columns4">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/mro2_fin_a_270484c.png">
<figcaption>Jonathan Trott is the latest in a string of top players to suffer publicly from stress. <strong>Mark Rice-Oxley</strong> asks if the game could be to blame</figcaption>
</figure>
<p><span class="firstcharacter">F</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt tincidunt commodo. Curabitur porta bibendum dolor non iaculis. Etiam malesuada ante et faucibus fermentum. Sed viverra bibendum neque, id cursus dolor egestas vitae. Ut convallis turpis eu mauris ullamcorper, in molestie metus laoreet. Donec sagittis in orci in rutrum. Duis consequat scelerisque mollis. Nullam porttitor laoreet velit. Vestibulum lacinia bibendum orci. Suspendisse hendrerit posuere metus ac pretium. Duis nec tempor urna. Vivamus vehicula erat in lobortis gravida.</p>
<p>Ut vitae ipsum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut placerat sem quis nunc placerat rhoncus. Quisque in est metus. Aenean faucibus libero in bibendum faucibus. Curabitur vel neque vel velit condimentum fermentum. Vivamus suscipit odio sit amet ligula posuere, a mattis urna placerat. Duis elementum quam nisl. Ut tincidunt ut sapien sit amet venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur elit non nulla volutpat, at rhoncus sapien semper. Morbi consectetur arcu in vehicula rhoncus. Sed pharetra metus venenatis consequat vulputate.</p>
<p>Nullam quis lectus euismod, pellentesque ipsum eu, varius velit. Aenean eu est ultrices, tincidunt enim quis, tristique est. Integer lobortis sem augue, id faucibus ipsum imperdiet vel. Vestibulum lobortis nulla a bibendum viverra. Nam eget nunc eget massa varius cursus. Morbi elementum, nisl interdum dictum faucibus, nunc eros sodales metus, quis pharetra libero quam sed ipsum. </p>
<div class="cont">Continued on page 99 >> </div>
</article>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124874/dfs.png" class="lastad">
<div class="break"></div>
</div>
body {
background: rgb(214, 187, 161);
}
h1, h2, h3 {
font-family: georgia, serif;
}
header h3.ticker {
margin: 0;
color: rgb(143, 141, 141);
font-size: 32px;
padding: 0 0 8px 0;
border-bottom: 1px solid #bbb;
}
header h3.ticker span {
color: rgb(255, 112, 0);
}
h1.headline {
font-weight: normal;
font-size: 71px;
margin: 0 0 58px 0;
}
.slavery h1 {
text-align: left;
font-weight: normal;
font-size: 43px;
margin: 0 0 1em 0;
}
h2.subhead {
font-weight: bold;
font-size: 26px;
}
.wrapper {
background: rgb(247, 246, 240);
position: relative;
margin: 0 auto;
width: 1400px;
padding: 10px 30px;
}
header {
}
div.break {
clear:both;
}
.columns1 {
margin: 0 10px;
height: 10px;
width: 264px;
float: left;
}
.columns2 {
width: 544px;
float: left;
padding-right: 6px;
border-right: 1px solid #BEB8B8;
margin-right: 6px;
position: relative;
}
article p {
margin: 0.25em 0;
line-height: 16px;
}
article.cols2 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;}
.byline {
border-bottom: 1px solid;
border-top: 1px solid;
padding: 6px 0;
font-weight: bold;
padding-bottom: 20px;
}
article.cols4 {
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: solid ;
-webkit-column-rule-width: 1px;}
.cols4 figure img {
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.cols4 figure {
width: 100%;
overflow: visible;
}
.cols4 figcaption {
font-weight: normal;
font-size: 19px;
font-family: georgia;
}
.columns4 {
width: 1088px;
float: left;
padding-right: 6px;
border-right: 1px solid #BEB8B8;
margin-right: 6px;
position: relative;
}
.columns {
}
.columns div:first-child {
margin: 0 10px 0 0;
}
.columns div:last-child {
margin: 0 0 0 10px ;
}
div.teasers {
width: 460px;
background: rgb(172, 162, 122);
height: 200px;
position: relative;
margin: 5em 0;
z-index: 2;
float: left;
margin: 0 5px;
}
div.teasers h1 {
color: white;
margin: 0;
padding: 5px;
font-size: 22px;
}
div.teasers h2 {
margin: -7px 0 0 0;
padding: 5px;
font-weight: normal;
font-size: 22px;
}
header header h1.title {
color: #004A83;
text-transform: lowercase;
margin: -15px 0 0 0;
padding: 0;
font-size: 164px;
}
header header h1.title span {
color: #98BCDB;
margin-right: -0.2em;
}
header header h2.website {
margin: -35px 0 48px 0;
color: #98BCDB;
}
header header {
text-align: right;
}
div.borgen {
margin: 0 0 0 5px;
}
div.student {
margin: 0 5px 0 0 ;
}
div.teasers figure {
position: absolute;
margin: 0;
bottom: 0;
right: 0px;
width: 230px;
overflow: hidden;
}
div.teasers figure img {
height: 250px;
display: block;
}
div.teasers figure.background {
position: absolute;
left: 0;
width: 100%;
z-index: -1;
height: 126px;
}
div.teasers figure.background img {
position: absolute;
top: -41px;
}
div.pop.teasers figure {
width: 479px;
height: 160px;
}
div.pop.teasers figure img {
height: auto;
}
div.student.teasers figure.background img {
width: 100%;
}
.published {
float: left;
display: block;
margin: 7px 0 0 0;
width: 155px;
font-family: georgia, serif;
}
.published p {
margin: 4px 0 10px 0;
}
.published time {
color: #004A83;
}
div.teaser-block {
border-bottom: 8px solid black;
padding-bottom: 6px;
margin-bottom: 6px;
}
figure {
overflow: hidden;
margin: 0;
padding: 0;
}
figure img {
}
figcaption {
position: relative;
font-weight: bold;
font-size: 15px;
}
.columns2.van-dyck h3 {
position: absolute;
right: 0;
z-index: 2;
top: -67px;
background: #f1f1f1;
padding: 6px;
font-size: 24px;
font-weight: normal;
}
.just {
text-align: justify;
}
.columns1.last {
margin: 0 0 0 10px;
width: 275px;
}
.columns2.van-dyck h2 {
background: #98BCDB;
color:#004A83;
font-size: 28px;
margin: 0;
padding: 2px 0 20px 6px;
}
.columns2.van-dyck h2 span {
color: white;
}
.cont {
border-top: 1px solid #BEB8B8;
margin: 10px 0;
padding: 4px 0;
font-weight: bold;
}
div.foot {
border-top: 3px solid black;
margin-top: 1em;
}
.firstcharacter { float: left; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
img.lastad {
width: 197px;
margin-left: 32px;
}
Also see: Tab Triggers