<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/potterbm/pen/MYXLRX?depth=everything&order=popularity&page=18&q=shop&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900);
body {
background-color: #eeeeee;
}
#container {
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
display: block;
margin: 50px auto;
height: 720px;
width: 480px;
overflow: hidden;
position: relative;
}
header {
background-color: #222222;
font-size: 15px;
line-height: 2;
display: block;
height: 60px;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
header h1 {
color: #eee;
font-family: 'Source Sans Pro', sans-serif;
font-size: 26px;
line-height: 60px;
font-weight: 300;
text-align: center;
display: block;
margin: 0;
padding: 0;
position: relative;
z-index: 0;
}
.hamburger-icon,
.search-icon
{
font-size: 60px;
line-height: 1;
box-sizing: border-box;
display: block;
padding: 15px;
height: 1em;
width: 1em;
position: absolute;
top: 0;
left: 15px;
z-index: 1;
}
.hamburger-icon .bar {
background-color: #DDCAA7;
border-radius: 1px;
display: block;
margin: 6px 0;
padding: 0;
height: 2px;
width: 25px;
}
.hamburger-icon .bar.short {
width: 20px;
}
.search-icon {
left: auto;
right: 15px;
}
.search-icon:before {
border: 2px solid #DDCAA7;
border-radius: 50%;
content: "";
display: block;
margin: 0;
padding: 0;
height: 15px;
width: 15px;
position: absolute;
top: 15px;
left: 15px;
}
.search-icon:after {
background-color: #DDCAA7;
content: "";
display: block;
margin: 0;
padding: 0;
height: 2px;
width: 15px;
position: absolute;
top: 35px;
left: 29px;
transform-origin: 50% 50%;
transform: rotateZ(45deg);
}
nav {
background-color: #222222;
opacity: 0;
display: block;
margin: 0;
padding: 0;
height: auto;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transform: translateX(-100%);
transition: opacity 0.3s ease-in-out 0.7s, transform 0.0001s linear 0.9s;
}
.nav-open nav {
opacity: 1;
transform: translateX(0);
transition: opacity 0.3s ease-in-out, transform 0.0001s linear 0s;
}
nav .close-icon {
display: block;
margin: 0;
padding: 0;
height: 30px;
width: 30px;
position: absolute;
top: 15px;
left: 15px;
}
nav .close-icon:before,
nav .close-icon:after
{
background-color: #DDCAA7;
content: "";
display: block;
margin: 0;
padding: 0;
height: 2px;
width: 25px;
position: absolute;
top: 14px;
left: 2.5px;
transform-origin: 50% 50%;
transform: rotateZ(45deg);
}
nav .close-icon:after {
transform: rotateZ(-45deg);
}
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
color: #eeeeee;
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 26px;
font-weight: 300;
text-align: center;
display: block;
margin: 1em 0;
transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
nav li:nth-child(1) {
transition-delay: 0.2s, 0.2s, 0.2s;
}
nav li:nth-child(2) {
transition-delay: 0.3s, 0.3s, 0.3s;
}
nav li:nth-child(3) {
transition-delay: 0.4s, 0.4s, 0.4s;
}
nav li:nth-child(4) {
transition-delay: 0.5s, 0.5s, 0.5s;
}
nav li:nth-child(5) {
transition-delay: 0.6s, 0.6s, 0.6s;
}
nav li:nth-child(6) {
transition-delay: 0.7s, 0.7s, 0.7s;
}
nav li.selected {
color: #DDCAA7;
}
.nav-open li {
opacity: 1;
margin: 3em 0;
transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.nav-open nav li:nth-child(6) {
transition-delay: 0.2s, 0.2s, 0.2s;
}
.nav-open nav li:nth-child(5) {
transition-delay: 0.3s, 0.3s, 0.3s;
}
.nav-open nav li:nth-child(4) {
transition-delay: 0.4s, 0.4s, 0.4s;
}
.nav-open nav li:nth-child(3) {
transition-delay: 0.5s, 0.5s, 0.5s;
}
.nav-open nav li:nth-child(2) {
transition-delay: 0.6s, 0.6s, 0.6s;
}
.nav-open nav li:nth-child(1) {
transition-delay: 0.7s, 0.7s, 0.7s;
}
section {
display: block;
margin-top: 60px;
}
.coffee-shop {
transition: opacity 0.4s ease-in-out, transform 0.5s linear;
transition-delay: 0.5s, 0.65s;
}
.coffee-shop + .coffee-shop {
transition-delay: 0.7s, 0.85s;
}
.hidden .coffee-shop,
.nav-open .coffee-shop
{
transform: translateY(150px);
opacity: 0;
transition-delay: 0s, 0.15s;
}
.hidden .coffee-shop + .coffee-shop,
.nav-open .coffee-shop + .coffee-shop
{
transition-delay: 0.2s, 0.35s;
}
.coffee-shop .image {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
display: block;
margin: 0;
padding: 0;
height: 400px;
transition: background-position 0.5s ease-in-out;
transition-delay: 0.65s;
}
.hidden .coffee-shop .image,
.nav-open .coffee-shop .image
{
transition-delay: 0.15s;
}
.coffee-shop + .coffee-shop .image {
transition-delay: 0.85s;
}
.hidden .coffee-shop + .coffee-shop .image,
.nav-open .coffee-shop + .coffee-shop .image
{
transition-delay: 0.35s;
}
.coffee-shop .image.blue-bottle {
background-image: url("http://www.clubantietam.com/wp-content/uploads/2011/09/IMG_9218dm.jpg");
}
.coffee-shop .image.little-owl {
background-image: url("http://www.sugarcubebuilding.com/wp-content/uploads/2012/08/tl-horizontal_main.jpg");
}
.hidden .coffee-shop .image,
.nav-open .coffee-shop .image
{
background-position: 50% 35%;
}
.coffee-shop h2 {
color: #222222;
font-family: 'Source Sans Pro', snas-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 26px;
line-height: 1.4;
letter-spacing: -0.01em;
text-align: center;
display: block;
margin-bottom: 0.25em;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
transition-delay: 0.85s, 0.85s;
}
.hidden .coffee-shop h2,
.nav-open .coffee-shop h2
{
transition-delay: 0.35s, 0.35s;
}
.coffee-shop + .coffee-shop h2 {
transition-delay: 1.05s, 1.05s;
}
.hidden .coffee-shop + .coffee-shop h2,
.nav-open .coffee-shop + .coffee-shop h2
{
transition-delay: 0.55s, 0.55s;
}
.hidden .coffee-shop h2,
.hidden .coffee-shop p,
.nav-open .coffee-shop h2,
.nav-open .coffee-shop p
{
opacity: 0;
transform: translateY(75%);
}
.coffee-shop h2:after {
background-color: #DDCAA7;
content: "";
display: block;
margin: 0.25em auto;
padding: 0;
height: 2px;
width: 0.8em;
transition: transform 0.4s ease-in-out;
transition-delay: 1s;
}
.hidden .coffee-shop h2:after,
.nav-open .coffee-shop h2:after
{
transition-delay: 0.5s;
}
.coffee-shop + .coffee-shop h2:after {
transition-delay: 1.2s;
}
.hidden .coffee-shop + .coffee-shop h2:after,
.nav-open .coffee-shop + .coffee-shop h2:after
{
transition-delay: 0.7s;
}
.hidden .coffee-shop h2:after,
.nav-open .coffee-shop h2:after
{
transform: scale(0.25);
}
.coffee-shop p {
color: #888888;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
font-weight: 300;
text-align: center;
display: block;
margin: 0;
margin-bottom: 2em;
padding: 0;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
transition-delay: 1.05s, 1.05s;
}
.hidden .coffee-shop p,
.nav-open .coffee-shop p
{
transition-delay: 0.55s, 0.55s;
}
.coffee-shop + .coffee-shop p {
transition-delay: 1.25s, 1.25s;
}
.hidden .coffee-shop + .coffee-shop p,
.nav-open .coffee-shop + .coffee-shop p
{
transition-delay: 0.75s, 0.75s;
}
</style></head><body>
<div id="container" class="hidden">
<header>
<span class="hamburger-icon">
<div class="bar"></div>
<div class="bar short"></div>
<div class="bar"></div>
</span>
<h1>Discover</h1>
<span class="search-icon"></span>
</header>
<nav>
<div class="close-icon"></div>
<ul>
<li class="selected">Discover</li>
<li>Top Coffee Shops</li>
<li>My Saved Places</li>
<li>Search Shops</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</nav>
<section>
<div class="coffee-shop">
<div class="image blue-bottle"></div>
<h2>Blue Bottle Coffee</h2>
<p>San Francisco, CA</p>
</div>
<div class="coffee-shop">
<div class="image little-owl"></div>
<h2>Little Owl Coffee</h2>
<p>Denver, CO</p>
</div>
</section>
</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 >$(document).ready(function(e) {
$(".hidden").removeClass("hidden");
$(".hamburger-icon").click(function(e) {
e.preventDefault();
$("#container").addClass("nav-open");
});
$("nav").click(function(e) {
e.preventDefault();
$("#container").removeClass("nav-open");
});
});
//# sourceURL=pen.js
</script>
</body></html>
