"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/abisz/pen/NAyWZQ?limit=all&page=39&q=mobile" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'> <style class="cp-pen-styles">body { max-width: 450px; margin: 50px auto; box-shadow: 0 0 20px #909090; font-family: "Roboto" sans-serif; color: #252525; } a.btn-icon { text-decoration: none; vertical-align: middle; float: left; } a.btn-icon.right { float: right; } a.btn-icon i:after { font-family: 'FontAwesome'; font-style: normal; color: #252525; font-size: 120%; } i.back:after { content: '\f053'; } i.edit:after { content: '\f044'; } i.send:after { content: '\f061'; } i.chat:after { content: '\f086'; } i.user:after { content: '\f007'; } i.settings:after { content: '\f1de'; } a.btn-big i:after { font-size: 200%; color: #aaa; } a.active i:after { color: #4BDB9C; } header { padding: 1.5em 1em; } .header-label { font-weight: 700; font-size: 120%; display: block; text-align: center; } #content { overflow-y: scroll; max-height: 600px; padding: 1em 2em 0; background: linear-gradient(#F4F5F7 30%, rgba(244, 245, 247, 0)), linear-gradient(rgba(244, 245, 247, 0), #F4F5F7 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%; background: linear-gradient(#F4F5F7 30%, rgba(244, 245, 247, 0)), linear-gradient(rgba(244, 245, 247, 0), #F4F5F7 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%; background-repeat: no-repeat; background-color: #F4F5F7; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } ::-webkit-scrollbar { display: none; } .message-container { margin-bottom: 3em; margin-left: 4em; position: relative; } .pic-container { position: absolute; left: -75px; } .pic-container img, .pic-container .status { border-radius: 50%; max-width: 60px; } .pic-container .status { background-color: #4BDB9C; width: 12px; height: 12px; border: solid 3px white; position: absolute; top: 0; } h3.name { margin: 0 0 0.8em; font-weight: 300; font-size: 110%; color: #252525; } .message { background: white; padding: 1em 1.3em; border-radius: 10px; } .message p { margin: 0; line-height: 180%; font-size: 100%; color: #6f6f6f; } .time { font-size: 90%; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.8em; color: #aaa; } input { padding: 1.5em 3em 1.5em 1em; border: none; width: 100%; box-sizing: border-box; } .editor { position: relative; border-bottom: solid 1px #aaa; } .editor a { position: absolute; right: 10px; top: 15px; } .tab { width: 32%; display: inline-block; } .tab a { width: 100%; padding: 1.5em 0; text-align: center; } .credits { position: absolute; bottom: 10px; left: 10px; color: #6f6f6f; font-size: 100%; } </style></head><body> <body> <header> <a href="#" class="btn btn-icon"><i class="back"></i></a> <a href="" class="btn btn-icon right"><i class="edit"></i></a> <span class="header-label">#Motion-Design</span> </header> <div id="content"> <div class="message-container"> <div class="pic-container"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg" alt="" class="profilePic" /> <div class="status"></div> </div> <h3 class="name">Scott Nash</h3> <div class="message"> <p>@austin: i'm gonna be late can you prepare the presentation without me? i owe you!</p> </div> <div class="time"><span>07:54 AM</span></div> </div> <div class="message-container"> <div class="pic-container"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcogomes/128.jpg" alt="" class="profilePic" /> <div class="status"></div> </div> <h3 class="name">Austin Burns</h3> <div class="message"> <p>Ok, I'll do it!</p> <p>Just make sure you you'll be here for the meeting</p> </div> <div class="time"><span>08:12 AM</span></div> </div> <div class="message-container"> <div class="pic-container"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/esthercrawford/128.jpg" alt="" class="profilePic" /> <div class="status"></div> </div> <h3 class="name">Ruth Mendoza</h3> <div class="message"> <p>It's always the same with you. Never on time!</p> </div> <div class="time"><span>08: 15 AM</span></div> </div> <div class="message-container"> <div class="pic-container"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg" alt="" class="profilePic" /> <div class="status"></div> </div> <h3 class="name">Scott Nash</h3> <div class="message"> <p>I'm really sorry, but this time it really wasn't my fault :(</p> </div> <div class="time"><span>08:16 AM</span></div> </div> </div> <footer> <div class="editor"> <input type="text" placeholder="Compose Message..." /> <a href="" class="btn btn-icon btn-big right"><i class="send"></i></a> </div> <div class="tab-container"> <div class="tab"> <a href="" class="btn btn-icon btn-big active"><i class="chat"></i></a> </div> <div class="tab"> <a href="" class="btn btn-icon btn-big"><i class="user"></i></a> </div> <div class="tab"> <a href="" class="btn btn-icon btn-big"><i class="settings"></i></a> </div> </div> </footer> </body> <a href="https://dribbble.com/shots/2841028-Introducing-New-Interface-for-Slack-Messaging-App" target="_blank" class="credits">original concept</a> </body></html>

Related: See More


Questions / Comments: