<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mattboldt/pen/blDmo?limit=all&page=3&q=mac" />
<style class="cp-pen-styles">body{
font-family: "Helvetica Neue", sans-serif;
background:url(https://i.imgur.com/W8IdvVk.jpg);
background-size:2000px 1000px;
background-position:top center;
}
a{
color:#fff;
text-decoration: none;
text-shadow:#000 0px 1px 3px;
}
.wrap{
width:600px;
margin:auto;
text-align: center;
opacity:0.8;
}
.wrap:hover{
opacity:1;
}
.login-wrap{
width:290px;
height:320px;
margin:15% auto 0;
position: relative;
}
.login{
display: block;
margin:auto;
padding:40px 40px 30px;
position: absolute;
background-color:#f8f8f8;
background-image:-webkit-linear-gradient(top, #f0f0f0, #ddd);
background-image:-moz-linear-gradient(top, #f0f0f0, #ddd);
background-image:linear-gradient(top, #f0f0f0, #ddd);
border-radius:5px;
border:#fff 1px solid;
box-shadow: rgba(0,0,0,0.5) 0px 3px 20px;
text-align: center;
}
.avatar{
display:block;
margin:0 auto 15px;
width:100px;
height:100px;
border-radius:100%;
border:#fff 3px solid;
box-shadow:rgba(0,0,0,0.4) 0px 2px 4px, inset rgba(0,0,0,0.4) 0px 3px 2px;
overflow:hidden;
background-image:-webkit-linear-gradient(top left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%), url("https://www.mattboldt.com/assets/img/avatar.jpg");
background-image:-moz-linear-gradient(top left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%), url("https://www.mattboldt.com/assets/img/avatar.jpg");
background-image:linear-gradient(top left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%), url("https://www.mattboldt.com/assets/img/avatar.jpg");
background-size: auto, 100%;
}
.user{
padding:10px 0;
font-size: 0.95em;
text-shadow:rgba(255,255,255,0.7) 0px 1px 0px;
}
.pass{
display: block;
width:170px;
margin:20px auto;
padding:10px 25px 10px 10px;
border-radius:3px;
border:#CCC 1px solid;
}
.login-form{
position: relative;
}
.arrow{
position: absolute;
right:10px;
top:8px;
display: block;
z-index:999;
color:#999;
opacity:0;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
.init-shake{
-webkit-animation:shake 0.7s ease-in-out;
-moz-animation:shake 0.7s ease-in-out;
animation:shake 0.7s ease-in-out;
}
.hint{
position: absolute;
bottom:0;
left:0;
padding:20px;
color:#fff;
text-shadow:#000 0px 1px 5px;
}
.info{
display:block;
color:#CCC;
margin:10px 0;
font-size:0.95em;
}
@-webkit-keyframes shake{
0% { left:0; }
20% { left:10px; }
40% { left:-10px; }
60% { left:10px; }
80% { left:-10px; }
100% { left:0px; }
}
@-moz-keyframes shake{
0% { left:0; }
20% { left:10px; }
40% { left:-10px; }
60% { left:10px; }
80% { left:-10px; }
100% { left:0px; }
}
@keyframes shake{
0% { left:0; }
20% { left:10px; }
40% { left:-10px; }
60% { left:10px; }
80% { left:-10px; }
100% { left:0px; }
}</style></head><body>
<div class="login-wrap">
<div class="login">
<div class="avatar">
</div>
<span class="user">Matt Boldt</span>
<form id="login" class="login-form">
<input type="password" placeholder="Password" class="pass"/><span class="arrow">→</span>
</form>
</div>
</div>
<div class="wrap">by <a href="https://www.mattboldt.com">Matt Boldt</a><br /><span class="info">Check out the history of Apple.com's Nav bar <a href="https://www.mattboldt.com/demos/css-apple-nav/">here</a> or <a href="https://codepen.io/mattboldt/pen/fJgDj">here</a>.</span></div>
<div class="hint">Press enter!</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script > $(function(){
$("#login").submit(function(e){
e.preventDefault();
$(".login").addClass("init-shake");
setTimeout(function(){
$(".login").removeClass("init-shake");
}, 1000);
});
$(".pass").on("keypress", function(){
$(".arrow").css("opacity", "1");
});
})
//# sourceURL=pen.js
</script>
</body></html>
