<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/theaftermath87/pen/meZgzM?limit=all&page=2&q=mobile" />
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/d3a8c9b913/UntitledProject/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
margin: 0;
line-height: 1.4;
background: #E1E1E1;
}
.window {
position: relative;
display: block;
width: 360px;
height: 567px;
margin: 100px auto 0;
box-shadow: 0 0 65px 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
background: #F1F1F1;
}
.window .header {
position: absolute;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s ease-out, background 1s ease-out;
transition: all 0.5s ease-out, background 1s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 1;
}
.window .header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.window .header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #FFF;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
display: inline-block;
position: absolute;
height: 100%;
line-height: 50px;
width: 50px;
height: 50px;
text-align: center;
color: #FFF;
font-size: 22px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.window .header .icon.icon-bag {
right: 0;
top: 0;
left: auto;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.window .header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.window .header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
-webkit-transform: scale(1.15) translateY(-30px);
transform: scale(1.15) translateY(-30px);
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
display: block;
position: relative;
color: #FFF;
font-family: "Ek Mukta", sans-serif;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.window .header.menu-opened {
height: 100%;
background-color: #000;
-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
transition: all 0.3s ease-in, background 0.5s ease-in;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
-webkit-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.34s;
transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.41s;
transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.62s;
transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.69s;
transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
-webkit-transform: translateX(75px);
transform: translateX(75px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.window .content {
font-family: "Ek Mukta", sans-serif;
padding: 67px 4% 0;
text-align: justify;
overflow: scroll;
max-height: 100%;
}
.window .content::-webkit-scrollbar {
display: none;
}
.window .content h2 {
margin-bottom: 0px;
letter-spacing: 1px;
}
.window .content img {
width: 95%;
position: relative;
display: block;
margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
margin: 75px auto;
}
@media (max-width: 600px) {
.window {
width: 100%;
height: 100vh;
margin: 0;
border-radius: 0px;
}
.window .header {
position: fixed;
}
}
</style></head><body>
<div class="window">
<div class="header">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<div class="icon icon-apple"></div>
<ul class="menu">
<li class="menu-item"><a href="#">Mac</a></li>
<li class="menu-item"><a href="#">iPad</a></li>
<li class="menu-item"><a href="#">iPhone</a></li>
<li class="menu-item"><a href="#">Watch</a></li>
<li class="menu-item"><a href="#">TV</a></li>
<li class="menu-item"><a href="#">Music</a></li>
<li class="menu-item"><a href="#">Support</a></li>
</ul>
<div class="shop icon icon-bag"></div>
</div>
<div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
<h2>Thin. Light. Epic.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas recusandae ullam repellat, soluta, reprehenderit suscipit reiciendis minus ratione alias dolor eveniet rerum.</p><img src="https://images.apple.com/v/ipad-air-2/c/images/overview/design_large.png" alt=""/>
<p> Consectetur adipisicing elit. Est earum dicta officiis ratione qui non perspiciatis necessitatibus laborum culpa ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste explicabo laborum non vel, aperiam, nemo esse harum officiis, temporibus quae, delectus dolorem laboriosam eligendi exercitationem aliquam eveniet autem facilis? Iure pariatur iusto ipsum aut, accusantium rerum. Ipsum officiis voluptatibus assumenda placeat obcaecati. Voluptas explicabo optio repellendus minima sunt, ducimus suscipit, labore ratione eum officia molestias!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quidem magnam aut corporis voluptate! Et similique iste, molestiae illo nemo adipisci molestias, iure accusantium, sit expedita fugiat aliquam dolore! Odit perferendis, earum quaerat inventore ut error placeat sunt dignissimos dicta.</p>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >(function(){
var burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
}
}());
//# sourceURL=pen.js
</script>
</body></html>
