HTML
<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">Editors Pick</div>
<div class="headline">
The Art of the Impossible
</div>
<div class="content">
</div>
<div class="footline">Inside the 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="headline">
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> by <a href="https://codepen.io/IlyasR">IlyasR</a>
</div>
</div>
</div>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Raleway');
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
$max-width-panel: 920px;
$grid-gap: 40px;
$body-color: #f4f4f4;
body {
background-color: $body-color;
font-family: 'Open Sans', sans-serif;
position: relative;
}
.wrapper {
margin: 0 auto;
min-width: 400px;
max-width: $max-width-panel;
position: relative;
&.blur {
filter: blur(4px);
}
}
.top-status-bar {
padding: 5px 8px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index:10;
max-width: $max-width-panel;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color: $body-color;
color: #555;
font-size: .65em;
font-weight: 900;
transform: translate3d(0, 0, 0);
.name {
&::after {
content: '\f1eb';
font-family: FontAwesome;
margin-left: 5px;
}
}
.battery-status {
&::before {
content: '\f124 \f294';
font-family: FontAwesome;
margin-right: 5px;
}
&::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 {
margin-bottom: 5px;
color: #aaa;
text-transform: uppercase;
font-size: .8em;
}
.day {
font-size: 1.8em;
font-weight: 900;
}
}
.grid-container {
padding: 20px;
.gc-1 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: $grid-gap;
@media screen and (max-width: 550px) {
grid-template-columns: 1fr;
}
@media screen and (min-width: 550px) and (max-width: 950px) {
grid-template-columns: 1fr 1fr;
}
}
.gc-2 {
margin-top: $grid-gap;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: $grid-gap;
@media screen and (max-width: 550px) {
grid-template-columns: 1fr;
}
@media screen and (min-width: 550px) and (max-width: 950px) {
grid-template-columns: 1fr 1fr;
}
}
.grid {
height: 300px;
padding: 20px;
border: 1px solid #f4f4f4;
border-radius: 15px;
box-shadow: 2px 2px 40px -12px #999;
cursor: pointer;
position: relative;
.upper-headline {
text-transform: uppercase;
font-size: .8em;
word-spacing: 2px;
color: #999;
margin-bottom: 5px;
}
.headline {
font-size: 1.5em;
font-weight: 900;
line-height: 1.3;
margin-bottom: 5px;
}
.content {
&.atd {
margin-top: 30px;
text-transform: uppercase;
font-size: 3em;
font-weight: 900;
}
}
.footline {
font-size: .85em;
position: absolute;
bottom: 15px;
font-family: 'Raleway', sans-serif;
.head {
font-weight: 900;
margin-bottom: 5px;
}
}
}
}
.footer-menu {
max-width: $max-width-panel;
margin: 0 auto;
padding: 15px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
background-color: #f4f4f4;
color: #aaa;
@media screen and (max-width: 550px) {
font-size: 12px;
}
.menu {
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
font-size: .9em;
&:before {
font-family: FontAwesome;
margin-right: 8px;
font-size: 22px;
font-weight: 100;
}
&.active {
color: #007bff;
}
}
.today {
&::before {
content: '\f073';
}
}
.game {
&::before {
content: '\f135';
}
}
.apps {
&::before {
content: '\f179';
}
}
.updates {
&::before {
content: '\f0ed';
}
}
.search {
&::before {
content: '\f002';
}
}
}
.content-modal {
position: absolute;
top: 0;
left: 0;
z-index:20;
width: 100vw;
height: 100%;
user-select: none;
box-shadow: 3px 2px 3px #444;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease-in-out, transform .5s ease-in-out .2s;
transform: translate(-5px, -5px) scale(1.01);
&.active {
opacity: 1;
visibility: visible;
transform: translate(0, 0) scale(1);
}
.modal-body {
background-color: #fff;
width: 700px;
height: 500px;
border-radius: 10px;
padding: 30px;
margin: 90px auto;
.header {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-weight: 900;
}
.icon {
padding: 8px;
cursor: pointer;
font-size: 1.2em;
color: #bbb;
align-self: flex-start;
}
// additonal for header
.upper-headline {
text-transform: uppercase;
font-size: .8em;
word-spacing: 2px;
color: #999;
margin-bottom: 5px;
}
.headline {
font-size: 1.5em;
font-weight: 900;
line-height: 1.3;
margin-bottom: 5px;
}
}
.body-content {
overflow-y: scroll;
height: 420px;
line-height: 2;
word-spacing: 2px;
color: #777;
font-family: 'Raleway', sans-serif;
a {
color: #777;
text-decoration: none;
&:hover, &:focus, &:visited {
text-decoration: none;
}
&:hover {
color: #444;
}
}
}
.ajduke {
text-align: center;
font-weight: 900;
.fa-heart {
color: tomato;
padding: 0 5px;
}
a {
text-decoration: none;
border-bottom: 1px dotted;
&:hover, &:visited, &.active {
color: inherit;
}
}
}
}
}
ES6
$('.grid').click(()=>{
$('.content-modal').addClass('active')
$('.wrapper').addClass('blur')
$("html, body").animate({ scrollTop: 0 }, "slow");
})
$('.content-modal .icon').click(()=>{
$('.content-modal').removeClass('active')
$('.wrapper').removeClass('blur')
})
