"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/LeFizzy/pen/jVXmrm?depth=everything&order=popularity&page=73&q=develop&show_forks=false" /> <style class="cp-pen-styles">body{ margin-top:10px; padding:0; } .mobile_screen { position:relative; margin-left:45%; width: 350px; height: 600px; background-color: #fff; border:3px solid black; border-top:35px solid black; border-bottom:50px solid black; border-radius:15px; overflow:hidden; } .app-top{ position:absolute; background-color:#8BC34A; width:100%; height:55px; } .app_name { position:absolute; left:30%; display:inline; color:#FFFFFF; } .chat-area { position:absolute; height:470px; overflow:scroll; padding:10px; width:100%; top:55px; background-color:#fff; } .client-text { position:absolute; width:100%; top:525px; height:100%; background-color:#fff; border-top:3px solid #8BC34A; } .received{ word-break:break-all; overflow:auto; padding:5px; width:150px; background-color:#B0BEC5; border-radius:10%; } .sent { word-break:break-all; color:#fff; margin-left:50%; padding:5px; width:150px; overflow:auto; background-color:#64B5F6; border-radius:10%; } input[type="text"] { padding-left:10px; font-size:20px; height:66px; width:70%; border:none; } .submitbtn{ height:75px; width:91px; background-color:#8BC34A; color:#fff; border:none; } .openModal { background-color:#8BC34A; border:none; } .SettingsHamb{ display:none; position:absolute; height:100%; width:80%; top:55px; background-color:rgba(138,209,146,0.9); z-index:888; color:#fff; } .redMaterial{ width:100%; color:#fff; background-color:rgba(209,136,136,0.9); height:10%; } .greenMaterial{ width:100%; color:#fff; background-color:rgba(102,181,100,0.9); height:10%; } @media (max-width:760px){ .mobile_screen { margin-left:0; margin-top:0; } }</style></head><body> <div class="mobile_screen"> <div class="app-top"> <button class="openModal"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/MenuResp_svg.svg/1024px-MenuResp_svg.svg.png" height="50px" width="50px"/></button> <h3 class="app_name">MussangerApp</h3> </div> <div class="chat-area"> <div class="received">Cya :)</div> <div class="sent">Welcome.</div> </div> <div class="client-text"> <form onsubmit="return false"> <input class="msgBox" type="text" placeholder="Text here.."/> <input class="submitbtn" type="submit" /> </form> </div> <div class="SettingsHamb"> <button class="redMaterial">Red Theme</button> <button class="greenMaterial">Green Theme</button> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-3.1.1.min.js'></script><script src='https://code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script> <script >$(document).ready(function(){ $(".openModal").click(function(){ $(".SettingsHamb").toggle({direction: "left"},500); }); $(".chat-area").click(function(){ $(".SettingsHamb").hide('slow') }); $(".redMaterial").click(function(){ $(".app-top").css("background-color", "#F44336"); $(".submitbtn").css("background-color","#F44336"); $(".client-text").css("border-top","3px solid #F44336"); $(".openModal").css("background-color","#F44336"); }); $(".greenMaterial").click(function(){ $(".app-top").css("background-color","#8BC34A"); }); $(".submitbtn").click(function(){ var messages = new Array("Hello","How's your day?","What are you doing?","LOL. :DD","What's up for the weekend?","Did you heard about the election?"); var random = Math.floor(Math.random() * messages.length); var out_message = messages[random]; var in_message = $(".msgBox").val(); if(in_message.startsWith("http")){ in_message = '<img src="' + in_message + '" alt="preview" width="100px" height="100px" />'; } $('<div />', {"class":"sent",text:in_message}).appendTo(".chat-area"); $('<div />', {"class":"received",text:out_message}).appendTo(".chat-area"); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit 2 PRO
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: