"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/Devpaps/pen/eBmQgy?limit=all&page=59&q=app" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet"> <script src="https://use.fontawesome.com/5bde50c5c5.js"></script> <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'> <style class="cp-pen-styles">@charset "UTF-8"; * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #EFEBFB; font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; height: 100%; width: 100%; } #app-container { margin: 2rem auto; width: 414px; height: 736px; overflow: hidden; background: #fff; -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); } #app-container .info-cont { height: 200px; } #app-container .info-cont .info-img { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/511975/pexels-photo-191830.jpeg) no-repeat; background-color: #543F78; background-blend-mode: soft-light; width: 100%; height: 200px; position: relative; } #app-container .info-cont .info-img .top-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.5em 0.5em; color: #fff; } #app-container .info-cont .info-img .top-bar .circles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #app-container .info-cont .info-img .top-bar .circles span { width: 7px; height: 7px; background: #fff; border: 1px solid #fff; border-radius: 50%; } #app-container .info-cont .info-img .top-bar .circles span:nth-child(n+4) { background: transparent; } #app-container .info-cont .info-img .top-bar .circles span:nth-child(1n+2) { margin-left: 2px; } #app-container .info-cont .info-img .top-bar span.time { margin-right: 25px; } #app-container .info-cont .info-img .middle-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1em 1em; color: #fff; } #app-container .info-cont .info-img .middle-bar i { font-size: 35px; line-height: 0.2; cursor: pointer; } #app-container .info-cont .info-img .middle-bar span.options { cursor: pointer; line-height: 0.5; } #app-container .info-cont .info-img .bottom-bar p { position: relative; top: 50px; color: #fff; font-size: 25px; font-weight: 400; margin-left: 20px; letter-spacing: 1px; } #app-container .content { position: relative; font-family: "Lato", sans-serif; } #app-container .content .add { position: absolute; right: 20px; } #app-container .content .add btn.add { position: absolute; right: 20px; bottom: -25px; width: 50px; height: 50px; background: #FF3A4F; border-radius: 50%; cursor: pointer; } #app-container .content .add btn.add i { font-family: "Material Icons"; color: #fff; position: relative; left: 13px; top: 13px; } #app-container .content .column-1 { margin-left: 20px; } #app-container .content .column-1 .row-1 { display: inline-block; } #app-container .content .column-1 .row-1 p.day { text-transform: uppercase; color: #99A3BA; letter-spacing: 1px; display: inline-block; font-size: 14px; margin-top: 30px; } #app-container .content .column-1 .row-1 .text input { margin-right: 1.3em; } #app-container .content .column-1 .row-1 .text input[type='checkbox'] { width: 20px; height: 20px; } #app-container .content .column-1 .row-1 .text .comments { display: inline-block; position: relative; top: 6px; width: 320px; } #app-container .content .column-1 .row-1 .text .comments i.material-icons { line-height: 1.2; font-size: 35px; float: left; margin-right: 0.3em; color: #4A3E7F; } #app-container .content .column-1 .row-1 .text .comments p.header { color: #4A3E7F; display: inline; } #app-container .content .column-1 .row-1 .text .comments .star-1 { position: absolute; top: 10%; right: 0%; cursor: pointer; } #app-container .content .column-1 .row-1 .text .comments .star-1:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #FFC00C; } #app-container .content .column-1 .row-1 .text .comments p.comment { font-size: 14px; color: #99A3BA; margin-top: 5px; display: block; } #app-container .content .column-1 .row-1 .text .comments hr { border: 0; border-top: 2px solid #EBEDF3; margin-top: 20px; width: 110%; } #app-container .content .column-2 { margin-left: 20px; } #app-container .content .column-2 .row-2 { display: inline-block; } #app-container .content .column-2 .row-2 .text { margin-top: 1em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } #app-container .content .column-2 .row-2 .text input { margin: 1.8em 1.5em 0 0; } #app-container .content .column-2 .row-2 .text input[type='checkbox'] { width: 20px; height: 20px; } #app-container .content .column-2 .row-2 .text .comments { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; top: 10px; width: 320px; } #app-container .content .column-2 .row-2 .text .comments i.material-icons { font-size: 35px; margin-right: 0.3em; color: #4A3E7F; line-height: 1.5; } #app-container .content .column-2 .row-2 .text .comments p.header { color: #4A3E7F; } #app-container .content .column-2 .row-2 .text .comments .star { position: absolute; top: 23%; right: 0%; cursor: pointer; } #app-container .content .column-2 .row-2 .text .comments .star:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #E5E8EF; } #app-container .content .column-3 { margin-left: 20px; } #app-container .content .column-3 .row-3 p.day { text-transform: uppercase; color: #99A3BA; letter-spacing: 1px; font-size: 14px; margin-top: 30px; } #app-container .content .column-3 .row-3 .text { display: -webkit-box; display: -ms-flexbox; display: flex; } #app-container .content .column-3 .row-3 .text input { margin: 1.7em 1.5em 0 0; } #app-container .content .column-3 .row-3 .text input[type='checkbox'] { width: 20px; height: 20px; } #app-container .content .column-3 .row-3 .text .comments { display: -webkit-box; display: -ms-flexbox; display: flex; top: 9px; position: relative; width: 320px; } #app-container .content .column-3 .row-3 .text .comments i.material-icons { font-size: 35px; margin-right: 0.3em; color: #4A3E7F; line-height: 1.5; } #app-container .content .column-3 .row-3 .text .comments p.header { color: #4A3E7F; } #app-container .content .column-3 .row-3 .text .comments .star { position: absolute; top: 23%; right: 0%; cursor: pointer; } #app-container .content .column-3 .row-3 .text .comments .star:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #E5E8EF; } #app-container .content .column-3 .row-3 hr { border: 0; border-top: 2px solid #EBEDF3; margin-top: 20px; margin-left: 3em; width: 90%; } #app-container .content .column-4 { margin-left: 20px; } #app-container .content .column-4 .row-4 .text { display: -webkit-box; display: -ms-flexbox; display: flex; } #app-container .content .column-4 .row-4 .text input { margin: 1.7em 1.5em 0 0; } #app-container .content .column-4 .row-4 .text input[type='checkbox'] { width: 20px; height: 20px; } #app-container .content .column-4 .row-4 .text .comments { display: -webkit-box; display: -ms-flexbox; display: flex; top: 10px; position: relative; width: 320px; } #app-container .content .column-4 .row-4 .text .comments i.material-icons { font-size: 35px; margin-right: 0.3em; color: #4A3E7F; line-height: 1.5; } #app-container .content .column-4 .row-4 .text .comments p.header { color: #4A3E7F; } #app-container .content .column-4 .row-4 .text .comments .star { position: absolute; top: 23%; right: 0%; cursor: pointer; } #app-container .content .column-4 .row-4 .text .comments .star:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #E5E8EF; } #app-container .content .column-4 .row-4 hr { border: 0; border-top: 2px solid #EBEDF3; margin-top: 20px; margin-left: 3em; width: 90%; } #app-container .content .column-5 { margin-left: 20px; } #app-container .content .column-5 .row-5 .text { display: -webkit-box; display: -ms-flexbox; display: flex; } #app-container .content .column-5 .row-5 .text .comments { position: relative; top: 5px; width: 363px; } #app-container .content .column-5 .row-5 .text .comments p.header { color: #99A3BA; margin: 1em 0 1em 5.5em; text-decoration: line-through; } #app-container .content .column-5 .row-5 .text .comments .trash { position: absolute; top: 23%; right: 0%; cursor: pointer; } #app-container .content .column-5 .row-5 .text .comments .trash:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #E5E8EF; } #app-container .content .column-5 .row-5 hr { border: 0; border-top: 2px solid #EBEDF3; margin-top: 20px; margin-left: 3em; width: 90%; } #app-container .content .yellow { position: absolute; top: 23%; right: 0%; cursor: pointer; } #app-container .content .yellow:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #FFC00C; } #app-container .content .grey { position: absolute; top: 10%; right: 0%; cursor: pointer; } #app-container .content .grey:after { font-family: FontAwesome; content: ""; font-size: 25px; color: #E5E8EF; } </style></head><body> <div id="app-container"> <div class="info-cont"> <div class="info-img"> <div class="top-bar"> <div class="circles"><span></span><span></span><span></span><span></span><span></span></div><span class="time">10:15 AM</span><i class="fa fa-battery-full"></i> </div> <div class="middle-bar"><i class="fa fa-angle-left"></i><span class="options">• • •</span></div> <div class="bottom-bar"> <p>Remote Working</p> </div> </div> </div> <div class="content"> <div class="add"> <btn class="add"><i class="material-icons">add</i></btn> </div> <div class="column-1"> <div class="row-1"> <p class="day">Today</p> <div class="text"> <input type="checkbox"/> <label for="test1"></label> <div class="comments"><i class="material-icons">phone_iphone</i> <p class="header">Design onboarding screen</p> <div class="star-1"></div> <p class="comment">Discuss with the dev first</p> <hr/> </div> </div> </div> </div> <div class="column-2"> <div class="row-2"> <div class="text"> <input type="checkbox"/> <div class="comments"><i class="material-icons">create</i> <p class="header">Create a new icon set</p> <div class="star"></div> </div> </div> </div> </div> <div class="column-3"> <div class="row-3"> <p class="day">Tomorrow</p> <div class="text"> <input type="checkbox"/> <div class="comments"><i class="material-icons">code</i> <p class="header">Code a new portfolio web</p> <div class="star"></div> </div> </div> <hr/> </div> </div> <div class="column-4"> <div class="row-4"> <div class="text"> <input type="checkbox"/> <div class="comments"><i class="material-icons">mail</i> <p class="header">Send proposal email</p> <div class="star"></div> </div> </div> <hr/> </div> </div> <div class="column-5"> <div class="row-5"> <div class="text"> <div class="comments"> <p class="header">Design onboarding screen</p> <div class="trash"></div> </div> </div> <hr/> </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.1.0/jquery.min.js'></script> <script >$('.star').on('click', function(){ $(this).toggleClass('star').addClass('yellow'); }); $('.star-1').on('click', function(){ $(this).toggleClass('star-1').addClass('grey'); }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: