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.
<section id="options">
<nav id="navigation">
<button id="previous" class="btn" data-increment="-1">Previous</button>
<button id="next" class="btn" data-increment="1">Next</button>
</nav>
</section>
<section class="container">
<div id="carousel">
<figure class="cover"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
<figure class="region"></figure>
</div>
</section>
<div id="content">
<p><span class="first">F</span>ar out in the uncharted backwaters of the unfashionable end of
the western spiral arm of the Galaxy lies a small unregarded
yellow sun.</p>
<p>Orbiting this at a distance of roughly ninety-two million miles
is an utterly insignificant little blue green planet whose ape-
descended life forms are so amazingly primitive that they still
think digital watches are a pretty neat idea.</p>
<p>This planet has - or rather had - a problem, which was this: most
of the people on it were unhappy for pretty much of the time.
Many solutions were suggested for this problem, but most of these
were largely concerned with the movements of small green pieces
of paper, which is odd because on the whole it wasn't the small
green pieces of paper that were unhappy.</p>
<p>And so the problem remained; lots of the people were mean, and
most of them were miserable, even the ones with digital watches.</p>
<p>Many were increasingly of the opinion that they'd all made a big
mistake in coming down from the trees in the first place. And
some said that even the trees had been a bad move, and that no
one should ever have left the oceans.</p>
<p>And then, one Thursday, nearly two thousand years after one man
had been nailed to a tree for saying how great it would be to be
nice to people for a change, one girl sitting on her own in a
small cafe in Rickmansworth suddenly realized what it was that
had been going wrong all this time, and she finally knew how the
world could be made a good and happy place. This time it was
right, it would work, and no one would have to get nailed to
anything.</p>
<p>Sadly, however, before she could get to a phone to tell anyone
about it, a terribly stupid catastrophe occurred, and the idea
was lost forever.</p>
<p>This is not her story.</p>
<p>But it is the story of that terrible stupid catastrophe and some
of its consequences.</p>
<p>It is also the story of a book, a book called The Hitch Hiker's
Guide to the Galaxy - not an Earth book, never published on
Earth, and until the terrible catastrophe occurred, never seen or
heard of by any Earthman.</p>
<p>Nevertheless, a wholly remarkable book.</p>
<p>in fact it was probably the most remarkable book ever to come out
of the great publishing houses of Ursa Minor - of which no
Earthman had ever heard either.</p>
<p>Not only is it a wholly remarkable book, it is also a highly
successful one - more popular than the Celestial Home Care
Omnibus, better selling than Fifty More Things to do in Zero
Gravity, and more controversial than Oolon Colluphid's trilogy of
philosophical blockbusters Where God Went Wrong, Some More of
God's Greatest Mistakes and Who is this God Person Anyway?</p>
<p>In many of the more relaxed civilizations on the Outer Eastern
Rim of the Galaxy, the Hitch Hiker's Guide has already supplanted
the great Encyclopedia Galactica as the standard repository of
all knowledge and wisdom, for though it has many omissions and
contains much that is apocryphal, or at least wildly inaccurate,
it scores over the older, more pedestrian work in two important
respects.</p>
<p>First, it is slightly cheaper; and secondly it has the words
Don't Panic inscribed in large friendly letters on its cover.</p>
<p>But the story of this terrible, stupid Thursday, the story of its
extraordinary consequences, and the story of how these
consequences are inextricably intertwined with this remarkable
book begins very simply.</p>
<p>It begins with a house.</p>
</div>
@import "compass/css3";
body { background: #f8f6f4; font-family: "Georgia", serif; font-size: 1em; color: #333; }
#navigation { margin: 20px auto 0; width: 200px; }
.btn { background: #1eb4e6; border: none; color: #fff; padding: 8px 18px; border-radius: 3px; transition: all ease .3s; }
.btn:hover { background: darken(#1eb4e6,10%); }
#content {
-adobe-flow-into: carousel;
-webkit-flow-into: carousel;
}
#content p { line-height: 22px; }
.first { font-size: 40px; float: left; margin: -5px 0 -5px 0; }
.region {
-adobe-flow-from: carousel;
-webkit-flow-from: carousel;
}
.container {
width: 420px;
height: 320px;
position: relative;
margin: 30px auto;
perspective: 2200px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ( -549px );
transform-style: preserve-3d;
transition: transform 1s;
}
#carousel figure {
display: block;
position: absolute;
width: 380px;
height: 280px;
left: 10px;
top: 10px;
color: #333;
background: #fff;
padding: 10px;
border: 1px solid #eee;
}
#carousel .cover { background: url(https://s.cdpn.io/6035/hitchhikers_cover.jpg) no-repeat; }
$translateZ: 549px;
#carousel figure:nth-child(1) {
transform: rotateY( 0deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(2) {
transform: rotateY( 40deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(3) {
transform: rotateY( 80deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(4) {
transform: rotateY( 120deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(5) {
transform: rotateY( 160deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(6) {
transform: rotateY( 200deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(7) {
transform: rotateY( 240deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(8) {
transform: rotateY( 280deg ) translateZ( $translateZ );
}
#carousel figure:nth-child(9) {
transform: rotateY( 320deg ) translateZ( $translateZ );
}
/* Carousel is inspired by the great work of @desandro. */
var panelSize = 400,
panelCount = 9;
var tz = Math.round( ( panelSize / 2 ) /
Math.tan( Math.PI / panelCount ) );
var init = function() {
var carousel = document.getElementById('carousel'),
navButtons = document.querySelectorAll('#navigation button'),
panelCount = carousel.children.length,
transformProp = Modernizr.prefixed('transform'),
theta = 0,
onNavButtonClick = function( event ){
var increment = parseInt( event.target.getAttribute('data-increment') );
theta += ( 360 / panelCount ) * increment * -1;
carousel.style[ transformProp ] = 'translateZ( -549px ) rotateY(' + theta + 'deg)';
};
for (var i=0; i < 2; i++) {
navButtons[i].addEventListener( 'click', onNavButtonClick, false);
}
};
window.addEventListener( 'DOMContentLoaded', init, false);
//alert( tz );
Also see: Tab Triggers