<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 }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.