<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 lang='en' 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/ajduke/pen/JJmZBL?limit=all&page=14&q=app" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Open+Sans|Raleway");
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #f4f4f4;
font-family: 'Open Sans', sans-serif;
position: relative;
}
.wrapper {
margin: 0 auto;
min-width: 400px;
max-width: 920px;
position: relative;
}
.wrapper.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.top-status-bar {
padding: 5px 8px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
max-width: 920px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #f4f4f4;
color: #555;
font-size: .65em;
font-weight: 900;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.top-status-bar .name::after {
content: '\f1eb';
font-family: FontAwesome;
margin-left: 5px;
}
.top-status-bar .battery-status::before {
content: '\f124 \f294';
font-family: FontAwesome;
margin-right: 5px;
}
.top-status-bar .battery-status::after {
content: '\f241';
font-family: FontAwesome;
margin-left: 5px;
font-weight: 100;
}
.content-wrapper:last-child {
margin-bottom: 100px;
}
.date-indicators {
margin: 0 30px 0;
padding-top: 50px;
font-family: 'Raleway', sans-serif;
}
.date-indicators .date {
margin-bottom: 5px;
color: #aaa;
text-transform: uppercase;
font-size: .8em;
}
.date-indicators .day {
font-size: 1.8em;
font-weight: 900;
}
.grid-container {
padding: 20px;
}
.grid-container .gc-1 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 40px;
}
@media screen and (max-width: 550px) {
.grid-container .gc-1 {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 550px) and (max-width: 950px) {
.grid-container .gc-1 {
grid-template-columns: 1fr 1fr;
}
}
.grid-container .gc-2 {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 40px;
}
@media screen and (max-width: 550px) {
.grid-container .gc-2 {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 550px) and (max-width: 950px) {
.grid-container .gc-2 {
grid-template-columns: 1fr 1fr;
}
}
.grid-container .grid {
height: 300px;
padding: 20px;
border: 1px solid #f4f4f4;
border-radius: 15px;
-webkit-box-shadow: 2px 2px 40px -12px #999;
box-shadow: 2px 2px 40px -12px #999;
cursor: pointer;
position: relative;
}
.grid-container .grid .upper-headline {
text-transform: uppercase;
font-size: .8em;
word-spacing: 2px;
color: #999;
margin-bottom: 5px;
}
.grid-container .grid .headline {
font-size: 1.5em;
font-weight: 900;
line-height: 1.3;
margin-bottom: 5px;
}
.grid-container .grid .content.atd {
margin-top: 30px;
text-transform: uppercase;
font-size: 3em;
font-weight: 900;
}
.grid-container .grid .footline {
font-size: .85em;
position: absolute;
bottom: 15px;
font-family: 'Raleway', sans-serif;
}
.grid-container .grid .footline .head {
font-weight: 900;
margin-bottom: 5px;
}
.footer-menu {
max-width: 920px;
margin: 0 auto;
padding: 15px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 5px;
background-color: #f4f4f4;
color: #aaa;
}
@media screen and (max-width: 550px) {
.footer-menu {
font-size: 12px;
}
}
.footer-menu .menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
font-size: .9em;
}
.footer-menu .menu:before {
font-family: FontAwesome;
margin-right: 8px;
font-size: 22px;
font-weight: 100;
}
.footer-menu .menu.active {
color: #007bff;
}
.footer-menu .today::before {
content: '\f073';
}
.footer-menu .game::before {
content: '\f135';
}
.footer-menu .apps::before {
content: '\f179';
}
.footer-menu .updates::before {
content: '\f0ed';
}
.footer-menu .search::before {
content: '\f002';
}
.content-modal {
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100vw;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-shadow: 3px 2px 3px #444;
box-shadow: 3px 2px 3px #444;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in-out, -webkit-transform .5s ease-in-out .2s;
transition: opacity .4s ease-in-out, -webkit-transform .5s ease-in-out .2s;
transition: opacity .4s ease-in-out, transform .5s ease-in-out .2s;
transition: opacity .4s ease-in-out, transform .5s ease-in-out .2s, -webkit-transform .5s ease-in-out .2s;
-webkit-transform: translate(-5px, -5px) scale(1.01);
transform: translate(-5px, -5px) scale(1.01);
}
.content-modal.active {
opacity: 1;
visibility: visible;
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
.content-modal .modal-body {
background-color: #fff;
width: 700px;
height: 500px;
border-radius: 10px;
padding: 30px;
margin: 90px auto;
}
.content-modal .modal-body .header {
margin-bottom: 10px;
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;
}
.content-modal .modal-body .header .label {
font-weight: 900;
}
.content-modal .modal-body .header .icon {
padding: 8px;
cursor: pointer;
font-size: 1.2em;
color: #bbb;
-ms-flex-item-align: start;
align-self: flex-start;
}
.content-modal .modal-body .header .upper-headline {
text-transform: uppercase;
font-size: .8em;
word-spacing: 2px;
color: #999;
margin-bottom: 5px;
}
.content-modal .modal-body .header .headline {
font-size: 1.5em;
font-weight: 900;
line-height: 1.3;
margin-bottom: 5px;
}
.content-modal .modal-body .body-content {
overflow-y: scroll;
height: 420px;
line-height: 2;
word-spacing: 2px;
color: #777;
font-family: 'Raleway', sans-serif;
}
.content-modal .modal-body .body-content a {
color: #777;
text-decoration: none;
}
.content-modal .modal-body .body-content a:hover, .content-modal .modal-body .body-content a:focus, .content-modal .modal-body .body-content a:visited {
text-decoration: none;
}
.content-modal .modal-body .body-content a:hover {
color: #444;
}
.content-modal .modal-body .ajduke {
text-align: center;
font-weight: 900;
}
.content-modal .modal-body .ajduke .fa-heart {
color: tomato;
padding: 0 5px;
}
.content-modal .modal-body .ajduke a {
text-decoration: none;
border-bottom: 1px dotted;
}
.content-modal .modal-body .ajduke a:hover, .content-modal .modal-body .ajduke a:visited, .content-modal .modal-body .ajduke a.active {
color: inherit;
}
</style></head><body>
<div class="wrapper">
<div class="top-status-bar">
<div class="name">iPad</div>
<div class="current-time">7:56 PM</div>
<div class="battery-status">80%</div>
</div>
<div class="content">
<div class="content-wrapper">
<div class="date-indicators">
<div class="date">
Saturday, 15 July
</div>
<div class="day">
Today
</div>
</div>
<div class="grid-container">
<div class="gc-1">
<div class="grid g1">
<div class="upper-headline">From the editors</div>
<div class="headline">
Welcome to the <br/> All-New App Store!
</div>
<div class="content">
</div>
</div>
<div class="grid g2">
<div class="upper-headline">World Premiere</div>
<div class="headline">
The Art of the Impossible
</div>
<div class="content">
</div>
<div class="footline">Inside the extraordinary world of Monument Valley 2</div>
</div>
</div>
<div class="gc-2">
<div class="grid g3">
<div class="upper-headline"></div>
<div class="headline">
</div>
<div class="content atd">
App of the day
</div>
<div class="footline">
<div class="head">Hitlist</div>
<div class="subhead">Cheap flights, airline tickets</div>
</div>
</div>
<div class="grid g4">
<div class="upper-headline">Collection</div>
<div class="headline">
The Perfect Coffee Break
</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
<div class="content-wrapper">
<div class="date-indicators">
<div class="date">
14 July
</div>
<div class="day">
Friday
</div>
</div>
<div class="grid-container">
<div class="gc-1">
<div class="grid g1">
<div class="upper-headline">Deep Dive</div>
<div class="headline">
It All Changes on Level 201
</div>
<div class="content">
</div>
<div class="footline">
<div class="subhead">Casuality bends space, time and your mind-- in a good way.</div>
</div>
</div>
<div class="grid g2">
<div class="upper-headline"></div>
<div class="headline">
</div>
<div class="content atd">
App of the day
</div>
<div class="footline">
<div class="head">WaterMinder</div>
<div class="subhead">Daily Water Reminder</div>
</div>
</div>
</div>
<div class="gc-2">
<div class="grid g3">
<div class="upper-headline"></div>
<div class="headline">
</div>
<div class="content atd">
Game of the day
</div>
<div class="footline">
<div class="head">Splitter Crittters</div>
<div class="subhead">Split Worlds and save critters</div>
</div>
</div>
<div class="grid g4">
<div class="upper-headline">The daily list</div>
<div class="headline">
Relax. Breathe. <br/> Zen out Anywhere.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-menu">
<div class="menu today active">Today</div>
<div class="menu game">Game</div>
<div class="menu apps">Apps</div>
<div class="menu updates">Updates</div>
<div class="menu search">Search</div>
</div>
</div>
<div class="content-modal">
<div class="modal-body">
<div class="header">
<div class="label">
<div class="upper-headline">From the editors</div>
<div class="headline">
Welcome to the <br/> All-New App Store!
</div>
</div>
<div class="icon">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div class="body-content">
<div>
Thanks for checking out this demo of upcoming iOS11 App Store for iPad (which is in beta as of writing this demo. [16-July-2017])
(<a target='_blank' href="https://developer.apple.com/app-store/whats-new/">more here</a>)
</div>
<div>The view which you looking into, it is the newly designed "Today" view.
</div>
<div>All contents are copied from app store as is from App Store. I do not own content which is written.</div>
<div>
I made as it fun activity over weekend and love for newly designed App store.
</div>
<div>Hope you are enjoying it.</div>
</div>
<div class="foot-content">
<div class='ajduke'>
Made with <i class="fa fa-heart" aria-hidden="true"></i> in India by <a href="https://codepen.io/ajduke/">ajduke</a>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script >$('.grid').click(function () {
$('.content-modal').addClass('active');
$('.wrapper').addClass('blur');
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$('.content-modal .icon').click(function () {
$('.content-modal').removeClass('active');
$('.wrapper').removeClass('blur');
});
//# sourceURL=pen.js
</script>
</body></html>
