css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm 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. We'll also process your JavaScript with Babel.

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

Code Indentation

     

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.

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="message">
  &check; Made by <a href="https://codepen.io/pieter-biesemans/" target="_blank" title="&check; check out my other work">Pieter Biesemans</a> with &#9749;, &#128420; &amp; &#8986;</i>
</div>

<div class="mail" id="mail">
  From: sue@boys.com<br>
  To: tellus@story.com<br>
  Date: Tue 27/03/2018 15:23<br>
  Subject: The story of my name<br>
  <br>
  -----
  <br><br>
Well, my daddy left home when I was three, and he didn't leave much to Ma and me, just this old guitar and a bottle of booze.<br>
Now I don't blame him because he run and hid, but the meanest thing that he ever did was before he left he went and named me Sue.<br>
<br>
Well, he must have thought it was quite a joke, and it got lots of laughs from a lot of folks, it seems I had to fight my whole life through. Some gal would giggle and I'd get red and some guy would laugh and I'd bust his head, I tell you, life ain't easy for a boy named Sue.<br>
<br>
Well, I grew up quick and I grew up mean. My fist got hard and my wits got keen.<br> Roamed from town to town to hide my shame, but I made me a vow to the moon and the stars, I'd search the honky tonks and bars and kill that man that gave me that awful name.<br>
<br>
But it was Gatlinburg in mid July and I had just hit town and my throat was dry.<br>
I'd thought i'd stop and have myself a brew.<br>
At an old saloon in a street of mud and at a table dealing stud sat the dirty, mangy dog that named me Sue.<br>
<br>
Well, I knew that snake was my own sweet dad from a worn-out picture that my mother had and I knew the scar on his cheek and his evil eye.<br>
He was big and bent and gray and old and I looked at him and my blood ran cold, and I said, "My name is Sue. How do you do? Now you're gonna die." Yeah, that's what I told him.<br>
<br>
Well, I hit him right between the eyes and he went down but to my surprise he came up with a knife and cut off a piece of my ear. But I busted a chair right across his teeth. And we crashed through the wall and into the street kicking and a-gouging in the mud and the blood and the beer.<br>
<br>
I tell you I've fought tougher men but I really can't remember when. He kicked like a mule and bit like a crocodile.<br>
I heard him laughin' and then I heard him cussin', he went for his gun and I pulled mine first. He stood there looking at me and I saw him smile.<br>
<br>
And he said, "Son, this world is rough and if a man's gonna make it, he's gotta be tough and I knew I wouldn't be there to help you along. So I gave you that name and I said 'Goodbye'. I knew you'd have to get tough or die. And it's that name that helped to make you strong."<br>
<br>
Yeah he said, "Now you have just fought one helluva fight, and I know you hate me and you've got the right to kill me now and I wouldn't blame you if you do. But you ought to thank me before I die for the gravel in your guts and the spit in your eye because I'm the guy that named you Sue."<br>
Yeah, what could I do? What could I do?<br>
<br>
I got all choked up and I threw down my gun, called him pa and he called me a son, and I came away with a different point of view and I think about him now and then.<br>
Every time I tried, every time I win and if I ever have a son I think I am gonna name him Bill or George - anything but Sue.
</div>

<div class="btn send" id="send-btn">
  <span>Send</span>
</div>

<iframe id="frame" width="560" height="315" src="https://www.youtube-nocookie.com/embed/WOHPuY88Ry4?rel=0&modestbranding=1&controls=0&showinfo
=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:700');

@mixin scrollbars($size, $foreground-color, $background-color) {
  ::-webkit-scrollbar-button{
    display: none;
  }
  ::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }
  ::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border: 1px solid lighten($foreground-color, 10%);
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background: $background-color;
    width: calc(#{$size} * 2);
    border: 2px solid lighten($background-color, 10%);
  }
  ::-webkit-scrollbar-track-piece {
    background: $background-color;
    width: calc(#{$size} / 2);
    border: 2px solid lighten($background-color, 10%);
  }
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

div{
  position: relative;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  &:before, &:after{
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
  }
}

@include scrollbars(2px, #aaa, transparent);

body{
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu Mono', monospace;
  font-size: 1vw;
  color: white;
  background: #333;
  overflow-x: hidden;
  
  & .message{
    position: absolute;
    right:  0.5vw;
    bottom: 1vw;
    max-width: 30vw;
    font-size: 0.75em;
    font-family: "Open Sans", sans-serif;
    color: white;

    & a{
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid #444;
      &:hover{
        border-width: 3px;
      }
    }

  }
  
  & .mail{
    width: 50vw;
    margin: 2em auto;
    transition: all 0.5s 0.25s ease;
    
    &.active{
      width: 0;
      font-size: 0;
    }
    
  }
  
  & .btn{
    left: 0;
    width: 8vw;
    height: 3.5vw;
    margin: 1em auto;
    border: 0.15vw solid white;
    border-radius: 0.5vw;
    text-align: center;
    font-size: 2em;
    line-height: 3vw;
    cursor: pointer;
    transition: all 0.5s ease;
    transform: skew(0, 0);
    z-index: 1;
    &:before, &:after{
      left: -0.25vw;
      width: 8vw;
      height: 8vw;
      border: 0vw solid white;
      border-radius: 0.5vw;
      background: #333;
      transform: rotate(-45deg);
    }
    &:before{
      top: -10vw;
      transition: all 0.5s 0.25s ease;
    }
    &:after{
      top: 6vw;
      transition: all 0.5s 0.35s ease;
      z-index: -1;
    }
    &:hover,&.active{
      border-width: 0.25vw;
      border-radius: 0.15vw;
      color: transparent;
    }
    &:hover:before,&.active:before{
      top: -7vw;
      border-width: 0.25vw;
    }
    &:hover:after,&.active:after{
      top: 2vw;
      border-width: 0.25vw;
    }
    &.active{
      transition: transform 0.25s 0.75s ease, left 0.5s 1s ease;
      left: 110%;
      transform: skew(-20deg, 0deg);
    }
  }
  
  & iframe{
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: top 1s ease;
    z-index: 1;
    &.active{
      top: 50%;
    }
  }
  
}
            
          
!
            
              /*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
*/

var btn = document.getElementById('send-btn'),
    mail = document.getElementById('mail'),
    frame = document.getElementById('frame'),
    clickCount = 0;

btn.onclick = function(){
  clickCount++;
  btn.classList.add('active');
  mail.classList.add('active');
  setTimeout(function(){
    btn.classList.remove('active');
    mail.classList.remove('active');
  }, 3000);
  if(clickCount === 5){
    frame.classList.add('active');
  }
};
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console