iOS 11 App Store on iPad

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') })
Expand for more options Login