<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/adri_zag/pen/KdJXXZ?depth=everything&order=popularity&page=61&q=movie&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* apply a natural box layout model to all elements */
*,*::before,*::after,*:before,*:after {
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
}
/* inputs */
input,button,textarea,select {
color:inherit;
font-size:inherit;
font-style:inherit;
font-family:inherit;
-webkit-border-radius:0;
border-radius:0;
-webkit-padding-start:0;
align-items:flex-start;
text-index:0;
border:none;
outline:none;
background:none;
padding:0;
margin:0;
width:auto;
height:auto;
line-height:1em;
}
/* inputs appearance (not for every input) */
input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
input[type=submit],input[type=reset],input[type=color],input[type=file],
button,textarea,select {
height:1em;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
/* input color width */
input[type=color] {
width:1em;
}
/* IE clear cross */
input::-ms-clear {
display:none;
}
/* details and summary */
details, summary {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
/* text size adjusting */
body {
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
text-size-adjust:100%;
}
/* mark */
mark {background:none;}
/* Font smoothing */
*,*::before,*::after,*:before,*:after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* hr */
hr {
height:1px;
margin:0;padding:0;
}
/* u */
u {
text-decoration:none;
}
/* th */
table th {
text-align:left;
}
/* a */
a {
color:inherit;
outline:none;
}
* {
box-sizing: border-box;
}
/*@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,500,700,900,900italic,700italic);*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background-color: #1e243b;
color: #fefefe;
font-family: 'Open Sans', sans-serif;
/* font-family: 'Roboto', sans-serif;*/
}
.phone {
width: 320px;
height: 580px;
background: #489be3;
margin: 80px auto;
overflow: hidden;
}
header.intro {
height: 20px;
}
header.intro .network {
display: inline-block;
}
header.intro .network ul {
padding-left: 10px;
}
ul li {
display: inline-block;
}
header.intro ul li span {
background: #fefefe;
height: 6px;
width: 6px;
display: inline-block;
border: thin solid #fefefe;
}
header.intro ul li span.empty {
background: transparent;
height: 6px;
width: 6px;
display: inline-block;
border: thin solid #fefefe;
}
header.intro .hours {
display: inline-block;
position: relative;
bottom: 15px;
float: left;
width: 100%;
text-align: center;
font-weight: 100;
font-size: 0.75rem;
padding-top: 3px;
}
header.intro .battery {
display: inline-block;
float: right;
position: relative;
bottom: 31px;
right: 5px;
}
.tasks {
text-align: center;
margin-bottom: 15px;
}
.tasks p {
display: inline-block;
font-size: 0.85rem;
padding: 0 10px;
font-weight: 600;
opacity: 0.5;
cursor: pointer;
}
.tasks p.active {
opacity: 1;
}
.cards {
margin-top: 30px;
}
.cards .categories {
font-weight: 300;
font-size: 0.8rem;
margin-bottom: 15px;
margin-top: -5px;
}
.cards .card {
-webkit-animation-name: mymove;
animation-name: mymove;
-webkit-animation-duration: 3s;
animation-duration: 3s;
transition: transform 0.15s;
background: #fefefe;
border-radius: 0.25rem;
height: 60px;
margin: 10px 0;
}
.cards .card div {
display: inline-block;
}
.cards .card .icon {
color: #489be3;
height: 50px;
width: 50px;
text-align: center;
margin-top: 5px;
}
.cards:nth-child(1) .card .icon {}
.cards .card .icon i.fa {
margin: auto;
padding: 10px;
font-size: 2rem;
}
.cards .card .content {
color: #2a235c;
font-size: 0.9rem;
font-weight: 100;
}
.card .bold {
font-weight: 700;
padding-bottom: 5px;
vertical-align: top;
}
nav.nav-bar {
background: #2a3246;
width: 100%;
height: 60px;
position: relative;
top: 27px;
}
nav.nav-bar ul li {
width: calc(100%/5);
float: left;
text-align: center;
height: 60px;
}
nav.nav-bar ul li:nth-child(3) {
background: #FED460!important;
}
nav.nav-bar i {
font-size: 1.6rem;
padding: 15px;
color: #7B849D;
}
nav.nav-bar ul li.active {
background: #1e243b;
}
.cards .card.slide {
transform: translateX(-70px) translateY(0);
}
.cards .card button {
top: 5px;
position: fixed;
right: -70px;
height: 50px;
width: 60px;
border-radius: 0.25rem;
color: #fefefe;
background: #ff5555;
visibility: hidden;
}
.cards .card button.show {
visibility: visible;
}
.card:nth-child(2) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.card:nth-child(3) {
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;
}
.card:nth-child(4) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mymove {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*SET UP BASICS*/
.container {
width: 90%;
margin: auto;
}
.circle {
border-radius: 50%;
}
.inline {
display: inline-block!important;
}
</style></head><body>
<div class="phone">
<div class="container">
<header class="intro">
<div class="network">
<ul>
<li><span class="circle "></span></li>
<li><span class="circle "></span></li>
<li><span class="circle "></span></li>
<li><span class="circle empty"></span></li>
<li><span class="circle empty"></span></li>
</ul>
</div>
<div class="hours">
<p>9:41 AM</p>
</div>
<div class="battery"><i class="fa fa-battery-full"></i>
</div>
</header>
<nav class="tasks">
<p class="active">Open Tasks</p>
<p>Past Tasks</p>
</nav>
<div class="cards">
<div class="categories">
<p>NOW</p>
</div>
<div class="card">
<div class="icon" style="transform: rotate(-45deg);"><i class="fa fa-plane"></i>
</div>
<div class="content">
<p class="bold">Air ticket to New York</p>
<p>i need a ticket to NY for...</p>
</div>
<button>Cancel</button>
</div>
<div class="card">
<div class="icon"><i class="fa fa-cutlery"></i>
</div>
<div class="content">
<p class="bold">Buy me a lunch right now</p>
<p>i would like to have a BK...</p>
</div>
<button>Cancel</button>
</div>
<div class="card">
<div class="icon"><i class="fa fa-coffee"></i>
</div>
<div class="content">
<p class="bold">Get me a latte at Starbucks</p>
<p>One latte,non-fat milk, less...</p>
</div>
<button>Cancel</button>
</div>
</div>
<div class="cards">
<div class="categories">
<p>SCHEDULED</p>
</div>
<div class="card">
<div class="icon"><i class="fa fa-folder"></i>
</div>
<div class="content">
<p class="bold">Help me to send packages</p>
<p>Hey i need people to send...</p>
</div>
<button>Cancel</button>
</div>
<div class="card">
<div class="icon"><i class="fa fa-ticket"></i>
</i>
</div>
<div class="content">
<p class="bold">Help me buy movie ticket</p>
<p>i want to watch Spectre 007...</p>
</div>
<button>Cancel</button>
</div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li class="active"><a href="#"><i class="fa fa-home "></i></a></li>
<li><a href="#"><i class="fa fa-bell-o"></i></a></li>
<li><a href="#"><i class="fa fa-commenting-o"></i></a></li>
<li><a href="#"><i class="fa fa-user"></i></a></li>
<li><a href="#"><i class="fa fa-gear"></i></a></li>
</ul>
</nav>
</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 () {
var fixBottom = 27;
$(this).find("button").click(function () {
fixBottom += 70;
$(this).parent().remove();
$("nav.nav-bar").css("top", fixBottom + "px");
});
$(".tasks p").click(function () {
$(".tasks p").toggleClass("active");
});
$(".cards .card").click(function () {
$(this).toggleClass("slide");
$(this).find("button").toggleClass("show");
});
$(".nav-bar li").click(function () {
$(".nav-bar li").removeClass("active");
$(this).toggleClass("active");
})
$("a").click(function (event) {
event.preventDefault();
});
});
//# sourceURL=pen.js
</script>
</body></html>
