Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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.

+ add another resource


Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<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>
        <span id="arrow" class="fa fa-angle-down fa-3x"></span>
  <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>


              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;

/* 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; }

	top: 100%; 
	background-position:50% 50%; 

#footer { top: 200%; left:0px; background-color:#fff; }

#hello, #goodbye
font-family: 'Courier New', Courier, monospace;

#hello > p, #goodbye > p { text-align:left !important; }