"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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/andytran/pen/WrPdoO" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style class="cp-pen-styles">.body { z-index: 1; position: relative; background: #FFF; width: 300px; height: 500px; border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin: 40px auto; overflow: hidden; } .app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow: hidden; } .app-overlay { z-index: 3; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); display: block; width: 200%; height: 200%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease; cursor: pointer; } .app-menu { z-index: 4; position: absolute; top: 0; left: -50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #FFF; width: 70%; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease; overflow: hidden; } .app-menu ul:last-child li { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.05); } .app-menu__item { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); color: #999; } .app-menu__item--active { color: #666; } .app-menu__item:hover a { background: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transform: scale(1.1); transform: scale(1.1); color: #666; } .app-menu__item a { display: block; width: 100%; padding: 15px 20px; box-sizing: border-box; color: inherit; text-decoration: none; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-header { z-index: 1; position: relative; padding: 20px 0 10px; text-align: center; } .app-header__icon { position: absolute; bottom: 10px; left: 10px; cursor: pointer; } .app-header__icon span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .app-header__icon span:before, .app-header__icon span:after { content: ""; display: block; width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 2px #5CA8E0; margin: 1px; } .app-header__title { color: #333; font-size: 18px; line-height: 1; } .app-body { z-index: 1; position: relative; height: 100%; } .app-tasks { height: 100%; padding: 10px 10px 100px; box-sizing: border-box; overflow: auto; } .app-tasks__item { background: #FFF; width: 100%; border-radius: 100px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); margin: 20px 0; } .app-tasks__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 15px 15px 15px 20px; box-sizing: border-box; } .app-tasks__label input { display: none; } .app-tasks__label input:checked ~ span { color: #999; text-decoration: line-through; } .app-tasks__label input:checked ~ .app-tasks__mark { background: #36D6B1; } .app-tasks__label span { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; color: #666; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-tasks__mark { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; background: #FFF; width: 20px; height: 20px; border: 0; border-radius: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-tasks__mark:before, .app-tasks__mark:after { content: ""; position: absolute; display: block; background: #FFF; width: 10px; height: 1px; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .app-tasks__mark:before { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: translate(-43%, -400%) rotate(-45deg); transform: translate(-43%, -400%) rotate(-45deg); } .app-tasks__mark:after { width: 6px; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: translate(-90%, -50%) rotate(45deg); transform: translate(-90%, -50%) rotate(45deg); } .app-panel { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-panel__overlay { position: absolute; bottom: 28px; left: 50%; background: #FFF; width: 56px; height: 56px; border-radius: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-panel form { position: relative; z-index: 1; width: 100%; padding: 10px; box-sizing: border-box; } .app-panel form p { padding: 10px 0 0; color: #333; font-size: 18px; text-align: center; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-panel input { outline: none; display: block; background: #FFF; width: 100%; border: 0; border-radius: 100px; margin: 20px 0; padding: 16px 20px; box-sizing: border-box; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); font-size: inherit; font-weight: inherit; line-height: normal; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-panel input[type="submit"] { background: #5CA8E0; color: #FFF; } .app-footer { z-index: 2; position: absolute; bottom: 0; width: 100%; background: rgba(255, 255, 255, 0.9); } .app-footer:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 120%; height: 40px; box-shadow: 0 -20px 20px rgba(255, 255, 255, 0.9); -webkit-transform: translateX(-10%); transform: translateX(-10%); } .app-footer__fab { position: relative; display: block; background: #5CA8E0; width: 56px; height: 56px; border-radius: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); margin: -28px auto 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-footer__fab:before, .app-footer__fab:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background: #FFF; width: 40%; height: 2px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-footer__fab:after { -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } #event-1 { display: none; } #event-1:checked ~ .body .app .app-overlay { opacity: 1; visibility: visible; } #event-1:checked ~ .body .app .app-menu { left: 0; opacity: 1; visibility: visible; } #event-2 { display: none; } #event-2:checked ~ .body .app .app-footer .app-footer__fab { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2); } #event-2:checked ~ .body .app .app-footer .app-footer__fab:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } #event-2:checked ~ .body .app .app-footer .app-footer__fab:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } #event-2:checked ~ .body .app .app-panel { z-index: 2; visibility: visible; } #event-2:checked ~ .body .app .app-panel__overlay { -webkit-transform: translateX(-50%) scale(40); transform: translateX(-50%) scale(40); } #event-2:checked ~ .body .app .app-panel form p { -webkit-transform: none; transform: none; opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } #event-2:checked ~ .body .app .app-panel form input { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } #event-2:checked ~ .body .app .app-panel form input:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } #event-2:checked ~ .body .app .app-panel form input:nth-child(3) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } #event-2:checked ~ .body .app .app-panel form input:nth-child(4) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } #event-2:checked ~ .body .app .app-panel form input:nth-child(5) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } html { width: 100%; height: 100%; } body { background: -webkit-linear-gradient(#5CB8F7, #357DEC) fixed; background: linear-gradient(#5CB8F7, #357DEC) fixed; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 300; } </style></head><body> <input id="event-#{number}" type="checkbox"/> <input id="event-#{number}" type="checkbox"/> <div class="body"> <div class="app"> <label class="app-overlay" for="event-1"></label> <div class="app-menu"> <ul> <li class="app-menu__item app-menu__item--active"><a href="#">All</a></li> <li class="app-menu__item"><a href="#">Category #1</a></li> <li class="app-menu__item"><a href="#">Category #2</a></li> <li class="app-menu__item"><a href="#">Category #3</a></li> </ul> <ul> <li class="app-menu__item"><a href="#">Settings</a></li> <li class="app-menu__item"><a href="#">Contact</a></li> <li class="app-menu__item"><a href="#">Privacy</a></li> </ul> </div> <div class="app-header"> <label class="app-header__icon" for="event-1"><span></span><span></span></label> <!-- Title (Element)--> <div class="app-header__title">All Task</div> </div> <div class="app-body"> <ul class="app-tasks"> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Create new project</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Working call</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Go to shop</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Meet with doctor</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Take the kids to school</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Finish dribbble marathon</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Walk the dog</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Meet with mother</span> <div class="app-tasks__mark"></div> </label> </li> <!-- Item (Elmenet)--> <li class="app-tasks__item"> <!-- Label (Element)--> <label class="app-tasks__label"> <input type="checkbox"/><span>Finish this pen</span> <div class="app-tasks__mark"></div> </label> </li> </ul> </div> <div class="app-panel"> <!-- Overlay (Element)--> <div class="app-panel__overlay"></div> <form> <p>Create a Task</p> <input type="text" placeholder="Name"/> <input type="text" placeholder="Category"/> <input type="text" placeholder="Due Date"/> <input type="submit" value="Create"/> </form> </div> <div class="app-footer"> <label class="app-footer__fab" for="event-2"></label> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://codepen.io/andytran/pen/vLmRVp.js'></script> <script >(function() { }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: