<div class="codepen">
  <div class="body">
    <div class="top">
      <div>
        <div class="logo">
          <svg id="codepen-box" viewBox="0 0 100 100" width="100%" height="100%"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"></path></svg>
        </div>
        <div class="title" contentEditable>Untitled</div>
      </div>
      <div class="buttons">
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <a class="avatar" href="https://codepen.io/manz/"></a>
      </div>
    </div>
    <div class="mid">
      <div class="html tab"></div>
      <div class="css tab"></div>
      <div class="js tab"></div>
    </div>
    <div class="preview"></div>
    <div class="bottom"></div>
  </div>
  <svg class="feet" viewBox="0 0 50 40">
    <path d="m 33.865999,2.4621617 c 5.91069,24.0121503 -1.10825,35.4641003 -1.10825,35.4641003 h 11.08253"/>
    <path d="M 12.778709,2.4621617 C 6.8680187,26.474312 13.886959,37.926262 13.886959,37.926262 H 2.8044287"/>
  </svg>
</div>

<div class="data">
  <h1>Pen</h1>
  <h2>#Codevember</h2>
  <a class="ghost" href="https://twitter.com/Manz" target="_blank">Code by Manz</a>
  <a class="ghost" href="https://www.patreon.com/Bulby" target="_blank">Music by TobyFox/Bulby</a>
</div>

<audio autoplay loop>
  <source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/bonetrousle-tobyfox-by-bulby.mp3"/>
  <source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/bonetrousle-tobyfox-by-bulby.ogg"/>
</audio>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800');

.data {
  position:absolute;
  left:calc(50vw - 200px);
  z-index:-1;
  text-align:center;
  width:400px;
  margin:auto;
  padding:20px;
  opacity:0;
  bottom:400px;
  animation:moveup 8s ease 2s 1 forwards;
}

@keyframes moveup {
  0% { transform:translateY(125px); opacity:0 }
  100% { transform:translateY(-70px); opacity:1 }
}

h1, h2, .ghost {
  font-family:Montserrat;
  font-weight:600;  
  margin:0;
}
  
h1 {
  font-weight:800;
  letter-spacing:-2px;
  font-size:64px;
  color:#111;
}

h2 {
  font-size:24px;
  color:#FFF;
}

.ghost {
  font-weight:400;
  font-size:15px;
  color:#FFF;
  display:inline-block;
  margin:8px 2px;
  padding:8px;
  border:1px solid #111;
  text-decoration:none;
}

a.ghost:hover {
  transition:all .5s linear;
  background:#111;
  border-color:#111;
  color:#FFF;
}

html {
  background:linear-gradient(100deg, #444, #777);
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.codepen {
  position:absolute;
  left:calc(50vw - 300px);
  bottom:32px;
  height:472px;
}

.body {
  width:600px;
  margin:2em auto;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 15px #333;
  animation:dancing .75s ease 2s infinite;
}

@keyframes dancing {
  25% { transform:translateY(20px) skew(-2deg) }
  0%, 50%, 100% { transform:translateY(0) skew(0) }
  75% { transform:translateY(20px) skew(2deg) }
}

.top {
  height:40px;
  background:#000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px;
}

.top > div {
  display:flex
}

.logo {
  width:20px;
  height:20px;
  fill:#FFF;
}

.top .title {
  color:#FFF;
  padding-left:15px;
  font-family:Lato;
  position:relative;
  outline:0;
}
.top .title::after {
  position:absolute;
  right:-20px;
  top:1px;
  content:"✐";
  color:#FFF;
  display:block;
  transform:scale(-1);
}

.buttons {
  display:flex;
  align-items:center;
}

.buttons .button {
  background:#343436;
  width:70px;
  height:23px;
  margin:0 5px;
  border-radius:4px;
  border-top:2px solid #343436;
}
.button:nth-child(1) { width:50px; border-top:2px solid #fedd31 }
.button:nth-child(2) { width:60px }

.buttons .avatar {
  width:30px;
  height:25px;
  border-radius:3px;
  margin:0 5px;
  background:#FFF url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/154065/profile/profile-80.jpg);
  background-size:cover;
}

.mid {
  width:100%;
  background:#343436;
  display:flex;
  justify-content:center;
  position:relative;
}

.mid .tab {
  width:100%;
  height:125px;
  margin:10px;
  background:#1e1f21;
  border-top:20px solid #111;
}

.preview {
  background:#FFF;
  min-height:150px;
  position:relative;
}

.bottom {
  height:15px;
  background:#343436;
}

/* Face */

.mid::before,
.mid::after {
  content:" ";
  display:block;
  width:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(20px at 13px 10px, #FFF 20%, #000 30%);
  position:absolute;
  right:200px;
  top:100px;
}

.mid::before {
  left:200px;
  right:none;
  transform:scale(-1, 1);
}

.preview::after {
  content:" ";
  display:block;
  width:50px;
  height:30px;
  border-bottom-left-radius:50px;
  border-bottom-right-radius:50px;
  background:#000;
  position:absolute;
  left:calc(50% - 25px);
  bottom:105px;
}

.feet {
  width:200px;
  position:relative;
  left:205px;
  top:-90px;
  z-index:-1;
}

.feet, .mid::after, .mid::before, .preview::after {
  opacity:0;
  animation:appears .025s linear 1s 1 forwards;  
}

.feet path {
  fill:none;
  stroke:#111;
  stroke-width:4px;
  stroke-linecap:round;
}

@keyframes appears {
  0% { opacity:0 }
  100% { opacity:1 }
}