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.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>US inflation, Guptas raided, robot skiing</title>
</head>
<body>
<head>
<!-- For Windows Phone 8. See http://bit.ly/1u4tj4v - Windows Phone 8 strips out DOCTYPE and renders emails in IE 5 mode by DEFAULT -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if gte mso 9]>
<style>
#email-body,#email-footer {
width:620px;
}
</style>
<![endif]-->
<style type="text/css">
body{
padding:0;
margin:0;
font-family:-apple-system,".SFNSDisplay-Regular",Roboto,Helvetica,Tahoma,sans-serif;
-ms-text-size-adjust:100%;
color:#333;
background:#fff;
}
p{
margin:1em 0;
}
a{
color:#168DD9;
text-decoration:none;
}
table{
border:0;
}
#email-body{
margin:auto;
max-width:620px;
padding:15px 20px;
font-size:19px;
line-height:1.4;
word-wrap:normal;
text-align:left;
}
#email-body h2{
font-size:15px;
color:#006AA4;
text-transform:uppercase;
margin:30px 0 20px;
padding:30px 0 0;
line-height:1.1;
border-top:1px solid #e2e2e2;
}
#email-body h2+p{
margin:5px 0 1em;
}
#email-body figure{
margin:1em 0;
padding:0;
}
.inline-image-credit{
font-size:14px;
color:#bebebe;
}
#email-sponsor-header,.email-sponsor-label{
color:#888;
font-size:13px;
}
#email-body img{
height:auto;
max-width:100%;
}
#email-header{
background:#000;
text-align:center;
padding:25px 0;
}
#email-logo{
width:230px;
}
#email-sponsor-header{
height:0;
padding:0;
text-align:center;
background:#262626;
}
#email-sponsor-header td table{
border:0;
margin:7px 0;
}
#email-sponsor-header img{
max-width:130px;
max-height:30px;
vertical-align:middle;
margin-left:10px;
}
.email-sponsor-name{
display:none !important;
width:0;
height:0;
text-indent:-9999px;
font-size:0;
mso-hide:all;
}
#email-footer-container{
background:#f4f4f4;
}
#email-footer{
padding:20px;
max-width:620px;
margin:auto;
}
#email-footer p{
margin:0 0 20px;
font-size:12px;
}
#email-body .sponsor-message-title{
color:#f1a33f;
}
#email-body .partner-message-title{
color:#a1a1a1;
}
#email-footer .constrain{
text-align:left;
padding:0 20px;
}
#email-footer p.last{
margin:0;
}
#email-body .first-headline:not(.sponsor-message-title){
margin-top:0;
padding-top:5px;
border:0 !important;
}
@media screen and (max-width:580px){
#email-body{
font-size:17px;
}
} @media screen and (max-width:580px){
.constrain{
max-width:100%;
padding:0 7%;
margin:0;
}
}</style><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet"><!--<![endif]--></head>
<body style="padding: 0;margin: 0;font-family: -apple-system,".SFNSDisplay-Regular",Roboto,Helvetica,Tahoma,sans-serif;-ms-text-size-adjust: 100%;color: #333;background: #fff;">
<table id="email-header" cellpadding="0" cellspacing="0" width="100%" style="border: 0;background: #000;text-align: center;padding: 25px 0;">
<tbody>
<tr>
<td><a href="https://qz.com/" title="Quartz - qz.com" target="_blank" style="color: #168DD9;text-decoration: none;"><img id="email-logo" width="230" src="https://gallery.mailchimp.com/610c6c88d981c23e5c6638b14/images/ba0ea940-719d-43f6-8e3f-a23481fc390b.png" alt="Quartz - qz.com" style="width: 230px;"></a></td>
</tr>
</tbody>
</table>
<table id="email-sponsor-header" cellpadding="0" cellspacing="0" width="100%" style="border: 0;color: #888;font-size: 13px;height: 0;padding: 0;text-align: center;background: #262626;">
<tbody></tbody>
</table>
<table id="email-body-container" cellpadding="0" cellspacing="0" width="100%" style="border: 0;">
<tbody>
<tr>
<td align="center">
<table id="email-body" cellpadding="0" cellspacing="0" style="border: 0;margin: auto;max-width: 620px;padding: 15px 20px;font-size: 19px;line-height: 1.4;word-wrap: normal;text-align: left;">
<tbody><tr>
<td><p style="margin: 1em 0;">Good morning, Quartz readers!</p>
<h2 class="first-headline " style="font-size: 15px;color: #006AA4;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;margin-top: 0;padding-top: 5px;border: 0 !important;">What to watch for today</h2>
<p style="margin: 5px 0 1em;"><strong>Markets walk a tightrope on US inflation and VIX data.</strong> The US consumer price index is expected to show a slight downtick, but any surprises <a href="https://www.bloomberg.com/news/articles/2018-02-13/u-s-cpi-report-takes-on-bigger-importance-after-markets-plunge?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">could trigger another big market sell-off</a>. Separately, <a href="https://www.bloomberg.com/news/articles/2018-02-13/vix-could-be-volatile-on-expiration-even-if-stocks-are-flat?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">monthly options will expire</a> for the closely watched CBOE Volatility Index, making bigger swings more likely.</p>
<p style="margin: 1em 0;"><strong>Boris Johnson offers a Brexit valentine. </strong>In London, the British foreign minister <a href="https://www.politico.eu/article/boris-johnson-brexit-speech-london-betrayal-would-be-disastrous-mistake/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">will deliver a speech</a> that sets out a new vision for post-Brexit Britain, as the government tries to win over people who voted to remain in the EU. It will be the first of six “Road to Brexit” speeches over the coming weeks.</p>
<p style="margin: 1em 0;"><strong>Cisco Systems is about to turn a corner.</strong> At least, analysts are feeling optimistic that the networks company will return to quarterly <a href="https://www.marketwatch.com/story/cisco-earnings-high-hopes-pinned-to-return-to-revenue-growth-2018-02-12?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">revenue growth</a> after six straight quarters of declines.</p>
<h2 style="font-size: 15px;color: #006AA4;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;">While you were sleeping</h2>
<p style="margin: 5px 0 1em;"><strong>Police raided the home of a powerful family with ties to Jacob Zuma.</strong> The elite Hawks unit swept into the <a href="https://uk.reuters.com/article/uk-safrica-politics/south-african-police-raid-gupta-home-pressure-cranks-up-on-zuma-idUKKCN1FY0I1?il=0&mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">Gupta family compound</a> in Johannesburg. The Gupta brothers are believed to have corrupt links with the embattled South African president. Meanwhile, Zuma still hasn’t stepped down despite expectations that he would this morning.</p>
<p style="margin: 1em 0;"><strong>Donald Trump’s lawyer said he paid Stormy Daniels out of his own pocket.</strong> Michael Cohen told the New York Times that he had paid <a href="https://www.nytimes.com/2018/02/13/us/politics/stormy-daniels-michael-cohen-trump.html?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">$130,000 to porn actress</a> (paywall) Stephanie Clifford—who claimed she had an affair with Trump—in the run up to the 2016 election. Cohen said that he wasn’t reimbursed for it, but wouldn’t say if Trump had been aware of the payment.</p>
<p style="margin: 1em 0;"><strong>The Israeli opposition called for Benjamin Netanyahu’s resignation.</strong> Israeli police on Monday recommended charging the prime minister with bribery, over allegations <a href="https://www.apnews.com/164fe9cee9964886bc97e9a70baa37d6/The-Latest:-Israel-opposition-calls-on-Netanyahu-to-resign?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">he took expensive gifts</a> from wealthy businessmen. Netanyahu then went on TV to accuse the police of conducting a witch hunt, and vowed to keep leading the country.</p>
<p style="margin: 1em 0;"><strong>Punjab National Bank uncovered fraud to the tune of $1.8 billion.</strong> India’s <a href="https://qz.com/1206812/punjab-national-bank-duped-of-nearly-a-third-of-its-market-value-from-a-single-branch/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">second-largest state bank</a> said it had detected fraudulent and unauthorized transactions at a single branch in Mumbai—that’s the equivalent of eight times its 2017 net income. Other banks are also likely to be affected.</p>
<p style="margin: 1em 0;"><strong>Germany ended 2017 on a high.</strong> The juggernaut economy reported 0.6% growth in the fourth quarter from the year before and <a href="https://www.ft.com/content/57287e10-1156-11e8-8cb6-b9ccc4c4dbbb?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">2.2% overall in 2017</a> (paywall). As expected, robust exports powered the growth—the Federal Statistics Office said household consumption was more or less flat.</p>
<h2 style="font-size: 15px;color: #006AA4;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;">Quartz obsession interlude</h2>
<p style="margin: 5px 0 1em;"><strong>Dan Kopf on the foolish strategies people use to pay down credit card debt. </strong>“The best way to pay off credit card debt is simple. If you can’t pay the full balance for all the cards, pay the minimum monthly payment for each, and then devote the rest to repaying the card with the highest interest rate. Following this rule, you incur the least interest and save the most money. Very few people do this.” <a href="https://qz.com/1205124/the-foolish-strategies-people-often-use-to-pay-back-credit-card-debt/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">Read more here</a>.</p>
<h2 style="font-size: 15px;color: #006AA4;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;">Matters of debate</h2>
<p style="margin: 5px 0 1em;"><strong>“Smart cities” are a pipe dream.</strong> Gadgetry won’t make urban living <a href="https://www.theatlantic.com/technology/archive/2018/02/stupid-cities/553052/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">more affordable or resilient</a>.</p>
<p style="margin: 1em 0;"><strong>Nobody knows what’s causing stock meltdowns. </strong>Understanding why something happened in the market is <a href="https://qz.com/1205782/nobody-really-knows-why-stock-markets-went-haywire-last-week/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">only slightly easier</a> than grasping the meaning of life.</p>
<p style="margin: 1em 0;"><strong>South Africa’s political crisis could taint an entire continent. </strong>If the nation fails to recover, cynicism about Africa <a href="https://www.ft.com/content/3ff7e280-0fd5-11e8-8cb6-b9ccc4c4dbbb?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">will spread across the rest of the world</a> (paywall).</p>
<h2 class="partner-message-title" style="font-size: 15px;color: #a1a1a1;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;">Message from our Partner</h2>
<p style="margin: 5px 0 1em;"><b>Sign up for a revolutionary new book club made for people in search of the next big idea.</b> <a href="https://www.nextbigideaclub.com/home-spring-1" target="_blank" style="color: #168DD9;text-decoration: none;">Subscribers</a> to the Next Big Idea Club receive groundbreaking new nonfiction books hand-selected by Malcolm Gladwell, Susan Cain, Adam Grant, and Daniel Pink each season, as well as author interviews, video insights, and two books donated on their behalf to underresourced students.</p>
<h2 style="font-size: 15px;color: #006AA4;text-transform: uppercase;margin: 30px 0 20px;padding: 30px 0 0;line-height: 1.1;border-top: 1px solid #e2e2e2;">Surprising discoveries</h2>
<p style="margin: 5px 0 1em;"><strong>Robots had their own Winter Olympics in South Korea.</strong> Eight teams sent <a href="https://qz.com/1206297/a-robot-skiing-competition-in-south-korea-reminds-us-how-far-away-the-apocalypse-is/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">autonomous humanoids</a> down a 70-meter ski slope, with very mixed results.</p>
<p style="margin: 1em 0;"><strong>South Korea bankrolled North Korea’s trip to the Winter Olympics.</strong> Seoul signed off on $2.64 million to cover personnel costs for <a href="https://in.reuters.com/article/olympics-2018-northkorea-payment/south-korea-approves-record-2-6-million-budget-for-north-koreans-olympic-visit-idINKCN1FY09A?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">hundreds of North Koreans</a>.</p>
<p style="margin: 1em 0;"><strong>A scientist captured an impossible photo of a single atom. </strong>The award-winning image <a href="https://qz.com/1205279/photo-of-an-atom-a-scientist-captured-an-incredible-photograph/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">shows a glowing strontium atom</a> suspended in a web of lab machinery.</p>
<p style="margin: 1em 0;"><strong>China banned touching penguins in Antarctica. </strong>Ill-mannered tourists have been <a href="https://www.independent.co.uk/environment/antarctica-china-tourists-dont-touch-penguins-travel-environment-latest-a8203981.html?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">flocking to the continent</a>.</p>
<p style="margin: 1em 0;"><strong>The Amazon molly can clone itself without any male DNA. </strong>The <a href="https://qz.com/1205980/the-amazon-molly-is-all-female-fish-species-thats-changing-scientific-thinking-on-asexual-reproduction/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">all-female fish species</a> is upending how scientists think about asexual reproduction.</p>
<p style="margin: 1em 0;">Our best wishes for a productive day. Please send any news, comments, Valentine’s Day messages, and atom pics to <a href="mailto:[email protected]" style="color: #168DD9;text-decoration: none;" target="_blank">[email protected]</a>. You can follow us <a href="https://twitter.com/qz/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">on Twitter</a> for updates throughout the day or download our <a href="https://itunes.apple.com/us/app/quartz-news-in-a-whole-new-way/id1076683233?mt=8&mc_cid=de482d20e8&mc_eid=70835afaec&mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">apps for iPhone</a> and <a href="https://play.google.com/store/apps/details?id=com.qz.android&mc_cid=de482d20e8&mc_eid=70835afaec&mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">Android</a>. Today’s Daily Brief was written by Jill Petzinger and edited by Lianna Brinded.</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
<table id="email-footer-container" cellpadding="0" cellspacing="0" width="100%" style="border: 0;background: #f4f4f4;">
<tbody>
<tr>
<td align="center">
<table id="email-footer" cellpadding="0" cellspacing="0" style="border: 0;padding: 20px;max-width: 620px;margin: auto;">
<tbody>
<tr>
<td><p style="margin: 0 0 20px;font-size: 12px;">Enjoying the Daily Brief? Forward it to a friend! They can <a href="https://qz.com/newsletters/daily-brief/?utm_source=dbfwdfooter&utm_medium=nl&utm_campaign=dbsignups&mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">click here to sign up.</a></p><p style="margin: 0 0 20px;font-size: 12px;">If you click a link to an e-commerce site and make a purchase, we may receive a small cut of the revenue, which helps support our ambitious journalism. See <a href="https://qz.com/about/ethicsandadvertisingguidelines/?mc_cid=e4f60bcd15&mc_eid=f70f6e7360" style="color: #168DD9;text-decoration: none;" target="_blank">here</a> for more information.</p><p style="margin: 0 0 20px;font-size: 12px;">Want to receive the Daily Brief at a different time? <a href="#" style="color: #168DD9;text-decoration: none;" target="_blank">Click here</a> to change your edition. To unsubscribe entirely, <a href="#" style="color: #168DD9;text-decoration: none;" target="_blank">click here</a>.</p><p class="last" style="margin: 0;font-size: 12px;"><b>Quartz</b> | 675 Avenue of the Americas, 4th Fl | New York, NY 10011 | United States</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</body>
</html>
Also see: Tab Triggers