"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 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/kharrop/pen/mELYmk?limit=all&page=20&q=mobile" /> <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style class="cp-pen-styles">html { display: flex; } body { margin: auto; background: #e9ecf3; -webkit-text-size-adjust: 100%; font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } input { -webkit-appearance: none; } li { list-style: none; } html, body { min-height: 100%; } *, *:after, *:before { box-sizing: border-box; margin: 0; padding: 0; } a { text-decoration: none; } .pen-description { margin: 60px 0; text-align: center; } .pen-description .summary { margin-bottom: 10px; } .pen-description .note { color: #555; font-size: .85rem; } html, body { min-height: 100%; } .container { background-color: #101F30; border-radius: 5px; display: flex; -webkit-display: flex; margin: 0 auto; width: 375px; } .card { background-color: #fff; border-radius: 5px; display: flex; display: -webkit-flex; flex-basis: 100%; flex-direction: column; height: 667px; position: relative; } h1 { font-size: .55rem; text-align: center; letter-spacing: 3px; text-transform: uppercase; } .status-bar { border-radius: 5px 5px 0 0; background-color: #18304A; height: 20px; } .card-header { background-color: #18304A; height: 44px; display: flex; display: -webkit-flex; } .card-header h1 { color: #fff; margin: auto; } .card-content { background-color: #101F30; flex-basis: 100%; -webkit-flex-basis: 100%; height: 560px; } .card-footer { background-color: #1568AC; border-radius: 0 0 5px 5px; box-shadow: 0 15px 30px #0f4d7f; cursor: pointer; display: flex; display: -webkit-flex; height: 64px; transition: all 0.2s ease-in-out; } .card-footer.enabled:hover, .card-footer.enabled:active { background-color: #115288; } .card-footer a { color: #fff; font-size: .75rem; font-weight: bold; letter-spacing: 5px; text-align: center; text-transform: uppercase; transition: all .2s ease-in-out; width: 100%; padding: 20px 0; } .card-footer a.in-focus { letter-spacing: 10px; } .list-group { display: flex; display: -webkit-flex; flex-direction: column; padding: 20px 0; height: 100%; } .player-card { border-radius: 3px; color: #fff; cursor: pointer; margin: 10px 20px; flex-basis: 33%; -webkit-flex-basis: 33%; padding: 30px; display: flex; display: -webkit-flex; position: relative; transition: all 0.2s ease-in-out; } .player-card:after { font-family: 'FontAwesome'; font-size: 3rem; margin: auto; padding-top: 5px; } .player-card .primary { font-size: 1.5rem; margin-bottom: 5px; } .player-card .secondary { font-size: .8rem; opacity: .7; } .player-card .player-wrapper { margin: auto; width: 100%; } .player-card.pink { background-color: #EB5252; } .player-card.pink:after { content: "\f06d"; } .player-card.purple { background-color: #986FE6; } .player-card.purple:after { content: "\f043"; } .player-card.orange { background-color: #F1AC4E; } .player-card.orange:after { content: '\f0e7'; } .disabled-text { opacity: .3; cursor: not-allowed; background-color: #1568AC !important; } .disabled { cursor: default; } .selected { flex-basis: 55%; } .selected:before { content: ""; background-image: url("http://cvcdn.zpld0wgit4phl1lqbbuos0bpw.netdna-cdn.com/wp-content/uploads/2016/04/WarcraftBlackhandFoundry.jpg"); opacity: .1; position: absolute; left: 0; top: 0; background-attachment: fixed; width: 100%; height: 100%; } .dimmed { opacity: .3; } </style></head><body> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'> <div class="container screen-1"> <div class="card"> <div class="status-bar"></div> <div class="card-header"> <h1>Choose your character</h1> </div> <div class="card-content"> <ul class="list-group"> <li class="player-card pink"> <div class="player-wrapper"> <div class="primary">Scorch</div> <div class="secondary">Fire</div> </div> </li> <li class="player-card purple"> <div class="player-wrapper"> <div class="primary">Slither</div> <div class="secondary">Venom</div> </div> </li> <li class="player-card orange"> <div class="player-wrapper"> <div class="primary">Spark</div> <div class="secondary">Lightning</div> </div> </li> </ul> </div> <div class="card-footer disabled"> <a href="#" class="footer-button disabled-text">Start a game</a> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script >$('.player-card').click(function(){ $('.player-card').removeClass('selected'); $('.player-card').addClass('dimmed'); $(this).addClass('selected'); $(this).removeClass('dimmed'); $('.card-footer a').removeClass('disabled-text'); $('.card-footer a').addClass('in-focus'); $('.card-footer').addClass('enabled'); $('.card-footer').remove('disabled'); }); $('.footer-button').click(function(e) { e.preventDefault(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Argon Design System
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: