<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/TheAlexPorter/pen/ygMNPj?limit=all&page=49&q=mobile" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">*, html, body {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, ul, li, ol {
margin: 0;
padding: 0;
font-weight: 300;
}
body {
color: white;
font-weight: 300;
height: 100vh;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1443996104801-80c82e789b18?dpr=1&auto=format&fit=crop&w=1500&h=997&q=80&cs=tinysrgb&crop=);
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 580px;
height: 100%;
margin: 0 auto;
}
.app {
height: 490px;
width: 273px;
background: -webkit-linear-gradient(bottom, rgba(38, 49, 81, 0.95) 40%, rgba(115, 114, 172, 0.8));
background: linear-gradient(to top, rgba(38, 49, 81, 0.95) 40%, rgba(115, 114, 172, 0.8));
padding: 15px;
position: relative;
z-index: -3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 5px auto;
}
.top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-bars {
width: 15px;
height: 1px;
background: white;
position: relative;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.menu-bars:before {
content: "";
position: absolute;
width: 20px;
height: 1px;
background: white;
top: 7px;
left: 0;
}
.menu-bars:after {
content: "";
position: absolute;
width: 20px;
height: 1px;
background: white;
top: -7px;
left: 0;
}
.user {
width: 70px;
height: 45px;
border-bottom-right-radius: 3px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.user img {
width: 100%;
}
.center {
text-align: center;
}
.headline {
margin: 35px auto;
}
.headline p {
max-width: 130px;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 1.3;
}
.red-btn {
display: inline-block;
margin-top: 15px;
padding: 8px 15px;
border: 1px solid #F66691;
border-radius: 20px;
font-size: 12px;
}
.card-mini {
background: white;
height: 117px;
width: 222px;
margin: 0 auto;
border-radius: 3px;
padding: 15px;
position: relative;
color: black;
}
.card-mini-stack {
width: 222px;
height: 43px;
background: #EAEBEE;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
margin: 0 auto;
z-index: -1;
top: -1px;
position: relative;
color: black;
padding: 15px;
}
.card-mini-stack-2 {
width: 222px;
height: 43px;
background: #D4D6DC;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
margin: 0 auto;
z-index: -2;
top: -2px;
position: relative;
color: black;
padding: 15px;
}
.text {
max-width: 132px;
margin: 0 auto;
}
.text > * {
margin-bottom: 7px;
}
.text h6 {
color: #7372AC;
font-size: 10px;
line-height: 1.5;
}
.text h5 {
font-size: 11px;
line-height: 1.9;
color: #555;
}
.checkbox {
width: 10px;
height: 10px;
border-radius: 2px;
background: transparent;
border: 2px solid #F66691;
position: absolute;
margin-top: 4px;
}
.mini-card-notif {
color: #DBDBDF;
}
.mini-card-notif i {
margin-right: 3px;
}
.mini-card-notif span {
color: black;
font-size: 11px;
margin-right: 10px;
}
.card {
width: 222px;
border-radius: 3px;
background: -webkit-linear-gradient(top left, #947bb9, #263151 90%);
background: linear-gradient(to bottom right, #947bb9, #263151 90%);
margin: 0 auto;
margin-top: 40px;
position: relative;
}
.card-stack {
z-index: -1;
top: -10px;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 200px;
height: 50px;
background: #A6A4BF;
border-radius: 3px;
position: absolute;
}
.card-stack-2 {
z-index: -2;
top: -20px;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 178px;
height: 50px;
background: #8986aa;
border-radius: 3px;
position: absolute;
}
.dots {
width: 2px;
height: 2px;
border-radius: 50%;
background: #A8A5BD;
position: relative;
}
.dots:before {
content: "";
position: absolute;
border-radius: 50%;
width: 2px;
height: 2px;
background: #A8A5BD;
top: 5px;
left: 0;
}
.dots:after {
content: "";
position: absolute;
border-radius: 50%;
width: 2px;
height: 2px;
background: #A8A5BD;
top: -5px;
left: 0;
}
.item {
padding-top: 10px;
}
.item img {
max-width: 50%;
display: block;
margin: 0 auto;
-webkit-filter: drop-shadow(20px -10px 25px rgba(0, 0, 0, 0.5));
filter: drop-shadow(20px -10px 25px rgba(0, 0, 0, 0.5));
}
.description > * {
margin-bottom: 8px;
}
.description .title {
font-size: 13px;
}
.description .sub-text {
font-size: 11px;
color: #A8A5BD;
}
.card-bottom {
height: 65px;
width: 100%;
padding: 15px;
font-size: 8px;
background: white;
color: gray;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.avatar {
width: 22px;
height: 22px;
background: #ccc;
margin-right: 10px;
color: white;
font-size: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.avatar img {
min-height: 100%;
width: 100%;
}
footer {
position: absolute;
bottom: 10px;
left: 15px;
right: 15px;
padding-left: 10px;
padding-right: 10px;
}
.icon-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.card-icon-color {
color: #A8A5BD !important;
}
.icons {
font-size: 22px;
color: white;
}
.active {
color: #F66691;
}
.active-button {
width: 70px;
height: 45px;
background: #F66691;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
position: absolute;
bottom: -1;
right: -15px;
z-index: -1;
}
.active-bg {
background: #F66691;
}
.gutter {
padding: 15px;
}
.no-pad-btm {
padding-bottom: 0;
}
.card-shadow {
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
}
.transparent {
color: transparent;
}
.bottom-right {
position: absolute;
right: 15px;
bottom: 23px;
}
</style></head><body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" />
<main class="wrapper">
<section class="app card-shadow">
<div class="top">
<i class="icons ion-ios-search"></i>
<div class="menu-bars"></div>
</div>
<div class="center">Regiis Hyacinthinis</div>
<div class="card card-shadow">
<div class="card-stack card-shadow"></div>
<div class="card-stack-2 card-shadow"></div>
<div class="top gutter no-pad-btm">
<i class="icons ion-ios-checkmark-outline card-icon-color"></i>
<div class="dots"></div>
</div>
<div class="centerpiece">
<div class="item">
<img src="http://ostro.com/wp-content/uploads/OstroRoyal_round.png" alt="" />
</div>
<div class="description gutter">
<p class="title">An prodigiosus opus</p>
<p class="sub-text">Potes hoc legere?</p>
</div>
</div>
<div class="card-bottom">
<p>Amicus Album</p>
<div class="container">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar active-bg">+16</div>
</div>
</div>
</div>
<footer>
<div class="icon-row">
<i class="icons active ion-ios-home-outline"></i>
<i class="icons ion-person"></i>
<i class="icons ion-ios-bell-outline"></i>
<i class="icons ion-ios-settings-strong"></i>
</div>
</footer>
</section>
<section class="app card-shadow">
<div class="user">
<img src="https://images.unsplash.com/photo-1470406852800-b97e5d92e2aa?dpr=1&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop=" alt="" />
</div>
<div class="top">
<i class="icons ion-ios-search transparent"></i>
<div class="menu-bars"></div>
</div>
<div class="headline">
<p>Nemo enim ipsam voluptatem quia</p>
<div class="red-btn">Ut enim</div>
</div>
<div class="card-mini card-shadow">
<div class="checkbox"></div>
<div class="text">
<h4>Lorem ipsum quia</h4>
<h6>Ut enim ad minima veniam nostrum exercitationem ullam</h6>
<div class="mini-card-notif">
<i class="ion-heart"></i><span>11</span>
<i class="ion-ios-chatboxes"></i><span>4</span>
</div>
<div class="bottom-right">
<div class="dots"></div>
</div>
</div>
</div>
<div class="card-mini-stack card-shadow">
<div class="checkbox"></div>
<div class="text">
<h5>Dolores eos qui ratione</h5>
</div>
</div>
<div class="card-mini-stack-2 card-shadow">
<div class="checkbox"></div>
<div class="text">
<h5>Dolores eos qui ratione</h5>
</div>
</div>
<footer>
<div class="icon-row">
<i class="icons ion-ios-home-outline"></i>
<i class="icons ion-person"></i>
<i class="icons ion-ios-bell-outline"></i>
<i class="icons ion-plus"></i>
<div class="active-button"></div>
</div>
</footer>
</section>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// Inspired by https://dribbble.com/shots/3227788-Mobile-app-gallery-screen
//# sourceURL=pen.js
</script>
</body></html>
