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 URL's 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 it's URL and the proper URL extention.
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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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="container">
<div class="frame foreground" id="header">
<div id="hello">
<i class="fa fa-codepen fa-3x pull-left fa-border"></i>
<p><b>Parallax</b> is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.[1][2] The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.</p>
</div>
<span id="arrow" class="fa fa-angle-down fa-3x"></span>
</div>
<div class="frame background" id="background"></div>
<div class="frame foreground" id="footer">
<div id="goodbye" style="top:75px; padding-bottom:150px;">
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
<p>Deidre Howell 8.16.07
<p>I have lived in San Francisco practically my whole life. The City is interesting and wondrous, but to me, it is mostly that way for adults. Growing up here was just as hard as anywhere USA. The girls who were my best friends in elementary school taught me how to spell my words wrong to try and make me look bad. They were not good friends. My freshman year in high school, I started to do drama, but it was melding in with the people who did not fit in anywhere, which is not to say I had found my niche in friends, or in life. Still, alone.
<p>1996 in San Francisco, I was living with my friend on Twin Peaks and was not in a relationship, for the first time in along time and I was starting to go out and do things outside the little world I had created, where I still felt alone. My roommate/friend introduced me to a guy he had met. This guy and I hung out a bit. He was amazing ….full of fire and energy, blazing his trail in life. He did not try and tell me too much about Burning Man, but did tell me it was important that I go. He talked me into it. The Life-Sized Mousetrap was what he was working on. It took six flatbed trucks full of stuff to build it. He drove them up to the playa himself.
<p>Two of my female friends, maybe my only two female friends at the time, journeyed with me to the playa. We left San Francisco in the evening, met people in a Suzuki Samurai who were going to the Burn as well. They were five people in the little car and it was full of stuff. Our car had just finished packing our supplies when they pulled in. Conversation was struck and we decided to wait for them, since they had gone to the playa before and we were virgins. They came out of the store an hour or so later, and now had two grocery carts of stuff to pack into the car with them and their other stuff. That took another hour or two. Running out of room, they asked us to carry their rug. We did so.
<p>They had to stop every ten miles or so to pee. It was like watching a clown car: car stops, everyone jumps out, scuttles into the darkness, pees and then jumps back in. They are driving kind of fast and Samurais are known for their tippage factor, the car going up on two wheels, and we are wincing in fear for their lives.
<p>We drive up to the gates just an hour or so before dawn and they take back their rug, which confuses us, we are thinking, we will just see them on other side of the gate. Little did we know!!!!!
<p>At the gate, the gatekeeper greets us and says, watch your odometer, and five miles from now, you take a right and then you will be there…. Now, I am adventuresome, probably more than most, but “watch your odometer and take a right” is just not making me feel comfortable. What choice do we have? We start off in a line with five other cars, who also pass gate at about the same time. Soon we are enveloped in a huge cloud of dust from the other cars, which have passed us. I am driving and my friends start to shriek about running into the back of the cars ahead. We were fine, but it was like entering into another world, trusting a stranger at a random point on the desert, and driving miles off into the desert, with no idea of where I was going or what I was going to see.
<p>We kept on. Still in the dust cloud, I am trying to figure out how to make sure I am going straight, which was the other direction I received from gatekeeper, but figured that as long as I did not get too far off course, we would be ok. I think I asked my friend to watch the steering wheel to make sure I was not straying off course. At the mark, we turn right and lo and behold was The Man, standing in the sky, a beacon. I want to cry just thinking about that moment.
<p>It took quite a while to find my friend, who just said, look for a huge bunch of stuff, and I will be there. We drove around for hours and hours, there were no streets, no Porta-Potties could be seen. It was utterly wild! So unknown, it was like being installed into the twilight zone. We did eventually find him after hours of asking and circling.
<p>During the next few days, I helped build the Life-Sized Mouse Trap. Mark (my friend’s friend) still remembers me from those days and I also found out about Burning Man, the credos, and the people; coming home (Again, with the tears!).
<p>There were no music camps, just drum circles. I had a new friend I met on the playa, play music for me one night and I danced all night long on the edge of the playa. People came up to me for the rest of the weekend and asked me if it was me who was thrashing my body at the edge of the desert. I was drunk on red wine and high on desert. I had many amazing adventures. My friend built a two-story tower, which collapsed with me and eight other people on it. I met one friend who is still my friend today. One year, I found an old high school buddy. These things seem tame, but it is what makes up my home and heart.
<p>Burning Man, to me, is home. It is the place where I became part of the community I (my heart) was searching for. A group of people who recognize corporate power and want to bring that power back to the individuals. Who do things for the things’ sake or for plain desire to do, then burn it, or take it home after sharing it. Everyone gives hugs to each other. We are self reliant and responsible. Once we have that sorted, we have something left to share with others. People who enliven their dreams and do what they want to do, everyone be damned, especially the naysayers!
<p>I am proud to be human and my belief in humanity returns in full force every year I attend the event. When I read Jack Rabbit Speaks or think about the event too long or too hard, I cry. It moves me deeply. I have a home and all of you are my family, we live at home, in our hearts, Burning Man.</p>
</div>
</div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Hide the scrollbar... */
body::-webkit-scrollbar { display: none; }
/* Set 3d perspective property to the body element - perspective value of 1px makes relative Z distancing simply a factor of 1 */
body {
overflow-y: auto;
-moz-perspective: 1px;
-webkit-perspective: 1px;
perspective: 1px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body, body * {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* The container element and children must be 100% width to give the different layers the same vanishing point (by default the middle of the viewport) - otherwise they will be out of alignment */
.container {
padding: 0px;
width:100%;
height:100%;
position:absolute;
}
/* The translateZ value is -1px which equates to twice as distant as the foreground elements; the element thus needs to be scaled up to nullify the scaling of distance. Using the foo3d() transform functions - translate3d() - triggers hardware compositing to boost performance */
.container .background {
-moz-transform: translate3d(0px,0px,-1px) scale(2.0);
-ms-transform: translate3d(0px,0px,-1px) scale(2.0);
-webkit-transform: translate3d(0px,0px,-1px) scale(2.0);
transform: translate3d(0px,0px,-1px) scale(2.0);
z-index: -400;
}
.container .foreground {
-moz-transform: translate3d(0px,0px,0px) scale(1.0);
-ms-transform: translate3d(0px,0px,0px) scale(1.0);
-webkit-transform: translate3d(0px,0px,0px) scale(1.0);
transform: translate3d(0px,0px,0px) scale(1.0);
z-index: 200;
}
.container > * {
position: absolute;
}
.frame { width:100%; height:100%; text-align:center;}
.foreground { background:rgba(132,23,144,0.3); }
.background { background:rgba(192,53,104,0.9); }
#header { top: 0px; left:0px; background-color:#000; }
#background
{
top: 100%;
left:0px;
background-size:cover;
background-position:50% 50%;
background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-zJDZ6vN/0/X3/Trey%20Ratcliff%20-%20Burning%20Man%202012%20%28249%20of%20569%29-X3.jpg);
}
#footer { top: 200%; left:0px; background-color:#fff; }
#hello, #goodbye
{
position:absolute;
top:33%;
color:#14c095;
width:66%;
left:50%;
margin-left:-33%;
text-align:center;
font-family: 'Courier New', Courier, monospace;
}
#hello > p, #goodbye > p { text-align:left !important; }
#arrow
{
position:absolute;
bottom:35px;
color:#fff;
}
Also see: Tab Triggers