"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/mariacheline/pen/bBgLzp?depth=everything&order=popularity&page=53&q=pack&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Libre+Franklin:100,300,400,500,700'> <style class="cp-pen-styles">*{ box-sizing: border-box; margin: 0; padding: 0; list-style-type: none; } html { overflow: scroll; overflow-x: hidden; } ::-webkit-scrollbar { width: 0px; background: transparent; } ::-webkit-scrollbar-thumb { background: transparent; } body{ font: normal 16px/1.5 'Libre Franklin', Helvetica, Georgia, sans-serif, serif; background-color-gradient(blue, green); height: 100vh; background: linear-gradient(#e8e6fd, #fff); } #pagewrap{ max-width: 360px; margin: 3vh auto; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } header{ width: 100%; display: flex; justify-content: space-between; padding: 20px 15px; color: #666; background-color: #f5f8f9; } header a{color: inherit; text-decoration: none; font-size: 1.5em; vertical-align: middle;} header h3{font-weight: 400;} .chatbox{ background-color: #f5f8f9; padding: 10px 20px; width: 100%; height: 350px; overflow-y: scroll; } .time{ text-align: center; font-size: .70em; color: #666; margin-top: 30%; letter-spacing: 1.2px; word-spacing: 2px; } #message{ width: 100%; } .matt-line{ max-width: 70%; min-width: 10%; display: inline-block; font-size: .85em; position: relative; margin: 20% 0 3% 0; animation: scaler 150ms ease-out; } .matt-line p:after { content: ""; display: block; position: absolute; left: -10px; top: 0; width: 0; border-width: 10px 10px 0; border-style: solid; border-color: #444 transparent; } .matt-line p{ background-color: #444; color: #fff; padding: 10px; border-radius: 10px; word-wrap: break-word; font-weight: 500; } #message:before, #message:after{ content: ""; display: block; clear: both; } #message li{ background-color: #e5eaec; color: #222; font-size: .85em; border-radius: 10px; position: relative; padding: 10px; margin: 1% 0; max-width: 70%; min-width: 10%; float: right; word-wrap: break-word; clear: both; animation: scaler 150ms ease-out; font-weight: 500; } #message .first:after{ content: ""; display: block; position: absolute; right: -10px; top: 0; width: 0; border-width: 10px 10px 0; border-style: solid; border-color: #e5eaec transparent; } .reply{ padding: 15px 0; background-color: #f5f8f9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .reply:before, .reply:after{ content: ""; display: block; clear: both; } .material-icons, input, button{ float: left; margin: 3px; -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; } .material-icons{ color: #444; font-size: 1.8em; padding-top: 10px; transform: rotate(-60deg); cursor: pointer; } input{ width: 72%; padding: 10px; border: none; font-size: 1.2em; background-color: inherit; } input:focus, button:focus{ outline: 0; } button{ background-color: #222; color: #fff; padding: 15px 10px; width: 20%; vertical-align: middle; border: none; cursor: pointer; letter-spacing: 1.2px; } .scroll{ position: absolute; bottom: 0; } @keyframes scaler{ 0%{transform: scale(0)} 100%{transform: scale(1)} }</style></head><body> <div id="pagewrap"> <header> <a href="#"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a> <h3 class="name">Matt Damon</h3> <a href="#"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a> </header> <section class="chatbox"> <ul id="message"> <div class="time"><p></p></div> <div class="matt-line"><p>If anybody wanted to photograph my life, they'd get bored in a day. </p></div> <li class="first">You gotteh be kiddin mi.</li> </ul> </section> <section class="reply" id="reply"> <i class="material-icons">attachment</i></i> <form> <input type="text" placeholder="Type something"> <button>Send</button> </form> </section> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >var main = function() { $('form').submit(function(event) { var $input = $(event.target).find('input'); var message = $input.val(); if (message != "") { var html = $('<li>').text(message); html.appendTo('#message'); $input.val(""); $('#message')[0].scrollIntoView(false); } return false; }); var currentdate = new Date(); var datetime = currentdate.getDate() + "/" +(currentdate.getMonth()+1) + "/" + currentdate.getFullYear() + " at " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); $('.time').html(datetime); } $(document).ready(main); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: