<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/Lance-Jernigan/pen/yJbXOK?depth=everything&order=popularity&page=99&q=mobile&show_forks=false" />
<style class="cp-pen-styles">body {
background: #732bde;
padding-top: 50px;
font-family: Helvetica;
}
body * {
box-sizing: border-box;
}
.wrapper {
width: 320px;
height: 568px;
background: #fff;
margin: auto;
position: relative;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
}
.statusBar {
height: 20px;
width: 100%;
background: #21294a;
position: absolute;
top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
z-index: 10;
}
.signal {
margin: 5px 5px;
padding: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50px;
}
.signal > span {
display: inline-block;
border-radius: 5px;
width: 5px;
height: 5px;
border: solid 1px #fff;
margin: 0px 1px;
}
.signal > span.active {
background: #fff;
z-index: 3;
}
.clock p {
color: #fff;
font-weight: 100;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.battery {
margin: 3px 5px;
width: 50px;
}
.battery span {
display: block;
height: 7px;
width: 17px;
border-radius: 1px;
background: #fff;
position: relative;
float: right;
}
.battery span:after {
content: " ";
display: inline-block;
width: 3px;
height: 4px;
background: #fff;
border-radius: 4px;
position: absolute;
right: -2px;
top: 1px;
}
.header {
padding: 5px 15px 15px 15px;
width: 100%;
background: #21294a;
position: absolute;
top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
z-index: 10;
border-bottom: solid 1px #424a63;
}
.header:after {
content: " ";
display: block;
height: 4px;
width: 85%;
background: -webkit-linear-gradient(left, #5a6ab8 0%,#4bafcd 100%);
background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
position: absolute;
bottom: -4px;
left: 0px;
right: 0px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
}
.hamburgerWrapper {
margin: 0px;
padding: 0px;
width: 50px;
}
.hamburger {
width: 13px;
}
.hamburger.active {
cursor: pointer;
}
.hamburger span {
display: block;
margin: 2px auto;
height: 2px;
width: 100%;
background: #467797;
border-radius: 9px;
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.hamburger.active span:nth-child(1) {
-webkit-transform: rotate(-45deg) translate(-4px, -2px);
transform: rotate(-45deg) translate(-4px, -2px);
width: 75%;
}
.hamburger.active span:nth-child(3) {
-webkit-transform: rotate(45deg) translate(-3px, 2px);
transform: rotate(45deg) translate(-3px, 2px);
width: 75%;
}
.headerLabel h1 {
color: #fff;
font-size: 15px;
font-weight: 100;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.headerMenu {
width: 50px;
text-align: right;
}
.headerMenu h2 {
color: #467797;
font-size: 12px;
font-weight: 600;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: -webkit-linear-gradient(top, #313a5a 0%,#424a6b 100%);
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
-webkit-transition: all .3s;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.EmailSearch {
width: 90%;
margin: auto;
padding: 65px 0px 20px 0px;
}
.EmailSearch input {
width: 100%;
font-size: 12px;
font-weight: 100;
color: rgba(255, 255, 255, .5);
outline: none;
background: transparent;
border: none;
padding: 15px 0px;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.EmailSearch input::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
font-weight: 100;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
-webkit-transition: all .3s;
transition: all .3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.light {
background: rgba(255, 255, 255, .4);
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
.Email .ImgWrapper {
width: 20%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.Email .img {
width: 40px;
height: 40px;
background: #fff;
border-radius: 100%;
position: relative;
}
.Email .img.notif:before {
content: " ";
display: block;
width: 12px;
height: 12px;
background: #5bc3e4;
border-radius: 100%;
border: 2px solid #868b9d;
position: absolute;
top: -2px;
left: -2px;
opacity: 1;
-webkit-transition: all .3s;
transition: all .3s;
}
.Email.active .img.notif:before {
opacity: 0;
}
.EmailTitle {
width: 80%;
position: relative;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.EmailTitle .EmailTime {
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
font-weight: 100;
margin: 0px;
padding: 5px;
}
.EmailTitle h1 {
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1em;
font-weight: 500;
width: 100%;
}
.EmailTitle h2 {
margin: 0px;
padding: 3px 0px;
font-size: 12px;
line-height: 1em;
font-weight: 300;
}
.EmailTitle p.EmailPreview {
margin: 5px 0px;
max-height: 25px;
padding: 0px;
font-size: 12px;
font-weight: 100;
opacity: .8;
overflow: hidden;
-webkit-transition: all .3s;
transition: all .3s;
}
.Email.active .EmailTitle p.EmailPreview {
max-height: 0px;
}</style></head><body>
<div class="wrapper">
<div class="statusBar">
<div class="signal">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="clock">
<p>10:15 AM</p>
</div>
<div class="battery">
<span></span>
</div>
</div>
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headerLabel">
<h1>INBOX</h1>
</div>
<div class="headerMenu">
<h2>EDIT</h2>
</div>
</div>
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailSearch">
<input type="text" placeholder="Search Messages" />
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<div class="img">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >"use strict";
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation
$(function () {
$(".Email").on("click", function () {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".headerLabel h1").text("MESSAGE");
});
$(".hamburgerWrapper").on("click", function () {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
});
});
//# sourceURL=pen.js
</script>
</body></html>
