<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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 ----------> <div class="container"> <div class="row"> <div class="page"> <div class="marvel-device nexus5"> <div class="top-bar"></div> <div class="sleep"></div> <div class="volume"></div> <div class="camera"></div> <div class="screen"> <div class="screen-container"> <div class="status-bar"> <div class="time"></div> <div class="battery"> <span><img border="0" alt="#" src="https://cdn1.iconfinder.com/data/icons/technology-media-part-2/32/battery-high-512.png" height="30" width="30"></span> </div> <div class="network"> <span><img border="0" alt="#" src="http://www.themobimag.com/wp-content/uploads/2012/12/bars-green.png" height="30" width="30"></span> </div> <div class="wifi"> <span><img border="0" alt="#" src="http://www.medicaltourismcongress.com/wp-content/uploads/2013/07/wifi-icon1.png" height="30" width="30"></span> </div> <div class="star"> <span><img border="0" alt="#" src="http://files.softicons.com/download/holidays-icons/christmas-icon-set-by-iconshock/png/512/christmas_star.png" height="30" width="30"></span> </div> </div> <div class="chat"> <div class="chat-container"> <div class="user-bar"> <div class="back"> <span><img border="0" alt="#" src="http://www.free-icons-download.net/images/white-left-pointing-arrow-icon-2216.png" height="20" width="20"></span> </div> <div class="avatar"> <img src="http://mscorpnews.blob.core.windows.net/ncmedia/2015/06/YevaHyusyanB_W_2015Feat-e1438272396534.jpg" alt="#"> </div> <div class="name"> <span>CEO</span> <span class="status">Typing...</span> </div> <div class="actions more"> <span><img border="0" alt="#" src="https://cdn1.iconfinder.com/data/icons/vibrancie-action/30/action_041-detail-more-info-others-512.png" height="30" width="30"></span> </div> <div class="actions attachment" onclick="return gee();"> <span><img id="myAt" border="0" alt="#" src="http://icdn.pro/images/en/a/t/attachment-clip-icone-6307-96.png" height="20" width="20" class="dropbtn"></span> <div id="myDropdown" class="dropdown-content"> <a href="#"><img border="0" alt="#" src="https://cdn1.iconfinder.com/data/icons/ui-5/502/file-512.png" height="50" width="50"></a> <a href="#"><img border="0" alt="#" src="https://cdn2.recombu.com/media/mobile/news/legacy/M20316/1397732245_w200_h200.png" height="50" width="50"></a> <a href="#"><img border="0" alt="#" src="http://www.iconarchive.com/download/i99375/dtafalonso/android-lollipop/Photos.ico" height="50" width="50"></a> <a href="#"><img border="0" alt="#" src="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Headphones-Play-Music-icon.png" height="50" width="50"></a> <a href="#"><img border="0" alt="#" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIpPDmWyiWnIAa0CP_vHmMhhZF4G-qJXWTArguAcR289QmcMlZ" height="50" width="50"></a> <a href="#"><img border="0" alt="#" src="https://lh3.googleusercontent.com/H9yAIsZYqbIOh_E1ON90chVhO6SYSD6ucV-XirZXkMFDqLRjGoztobaxx1XS9CB4lfg=w300" height="50" width="50"></a> </div> </div> <div class="actions"> <span><img border="0" alt="#" src="http://www.iconsdb.com/icons/download/white/phone-68-512.png" height="20" width="20"></span> </div> </div> <div class="conversation"> <div class="conversation-container"> <div class="message sent"> hey boss would you put my code as the code of the day? <span class="metadata"> <span class="time"></span><span class="tick"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck-ack" x="2063" y="2076"><path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="#4fc3f7"/></svg></span> </span> </div> <div class="message received"> why should i?.

*, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; height: 100%; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Roboto", sans-serif; margin: 0 0 0 30%; padding: 0; height: 100%; width:40%; text-align:center; } .page { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .marvel-device .screen { text-align: left; } .screen-container { height: 100%; } /* Status Bar */ .status-bar { height: 25px; background: #004e45; color: #fff; font-size: 14px; padding: 0 8px; } .status-bar:after { content: ""; display: table; clear: both; } .status-bar div { float: right; position: relative; top: 50%; transform: translateY(-50%); margin: 0 0 0 8px; font-weight: 600; } /* Chat */ .chat { height: calc(100% - 69px); } .chat-container { height: 100%; } /* User Bar */ .user-bar { height: 55px; background: #000; color: white; padding: 8px; font-size: 24px; position: relative ; z-index: 1; } .user-bar:after { content: ""; display: table; clear: both; } .user-bar div { float: left; transform: translateY(-50%); position: relative; top: 50%; } back{ margin-left: 0; margin-top: 0; } .user-bar .actions { float: right; margin: 0 0 0 0px; } .user-bar .actions.more { margin: 0 0px 0 10px; } .user-bar .actions.attachment { margin: 0 0 0 10px; } .user-bar .actions.attachment i { display: block; transform: rotate(-45deg); margin-left: 4px; } .user-bar .avatar { margin: 0 0 0 5px; width: 36px; height: 36px; } .user-bar .avatar img { border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); display: block; width: 100%; } .user-bar .name { font-size: 14px; font-weight: 600; text-overflow: ellipsis; letter-spacing: 0.3px; margin: 0 0 0 5px; overflow: hidden; white-space: nowrap; width: 110px; } .user-bar .status { display: block; font-size: 8px; font-weight: 400; letter-spacing: 0; } /* Conversation */ .conversation { height: calc(100% - 12px); position: relative; background-color:#000; background-image:url('http://i2.wp.com/holidaysandobservances.net/wp-content/uploads/2015/09/6815031-wallpapers-for-iphone.jpg') ; background-repeat:no-repeat; background-size:cover; z-index: 0; } .conversation ::-webkit-scrollbar { transition: all .5s; width: 5px; height: 1px; z-index: 10; } .conversation ::-webkit-scrollbar-track { background: transparent; } .conversation ::-webkit-scrollbar-thumb { background: #b3ada7; } .conversation .conversation-container { height: calc(100% - 68px); box-shadow: inset 0 10px 10px -10px #000000; overflow-x: hidden; padding: 0 16px; margin-bottom: 5px; } .conversation .conversation-container:after { content: ""; display: table; clear: both; } /* Messages */ .message { color: #000; clear: both; line-height: 18px; font-size: 15px; padding: 8px; position: relative; margin: 8px 0; max-width: 85%; word-wrap: break-word; z-index: -1; } .message:after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; } .metadata { display: inline-block; float: right; padding: 0 0 0 7px; position: relative; bottom: -4px; } .metadata .time { color: rgba(0, 0, 0, .45); font-size: 11px; display: inline-block; } .metadata .tick { display: inline-block; margin-left: 2px; position: relative; top: 4px; height: 16px; width: 16px; } .metadata .tick svg { position: absolute; transition: .5s ease-in-out; } .metadata .tick svg:first-child { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } .metadata .tick svg:last-child { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } .metadata .tick-animation svg:first-child { -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0); } .metadata .tick-animation svg:last-child { -webkit-transform: perspective(800px) rotateY(-179.9deg); transform: perspective(800px) rotateY(-179.9deg); } .message:first-child { margin: 16px 0 8px; } .message.received { background: none; border-radius: 0px 5px 5px 5px; float: left; color: white; border: 1px outset white; } .message.received .metadata { padding: 0 0 0 16px; } .message.received:after { border-width: 0px 10px 10px 0; border-color: transparent #fff transparent transparent; top: 0; left: -10px; } .message.sent { background: none; border-radius: 5px 0px 5px 5px; float: right; border: 2px inset green; color: orange; } .message.sent:after { border-width: 0px 0 10px 10px; border-color: transparent transparent transparent #e1ffc7; top: 0; right: -10px; } /* Compose */ .conversation-compose { display: flex; flex-direction: row; align-items: flex-end; overflow: hidden; height: 40px; width: 100%; z-index: 2; } .conversation-compose div, .conversation-compose input { background: none ; height: 100%; color: white; } .conversation-compose .emoji { display: flex; align-items: center; justify-content: center; background: none; border-radius: 5px 0 0 5px; flex: 0 0 auto; margin-left: 8px; width: 48px; } .conversation-compose .input-msg { flex: 1 1 auto; font-size: 15px; margin: 0; outline: none; min-width: 50px; border-radius: 10px; padding-left: 20px; } .conversation-compose .photo { flex: 0 0 auto; border-radius: 0 0 5px 0; text-align: center; position: relative; width: 48px; } .conversation-compose .photo:after { border-width: 0px 0 10px 10px; border-color: transparent transparent transparent #000; border-style: solid; position: absolute; width: 0; height: 0; content: ""; top: 0; right: -10px; } .conversation-compose .photo i { display: block; color: #7d8488; font-size: 24px; transform: translate(-50%, -50%); position: relative; top: 20%; left: 50%; } .conversation-compose .send { background: transparent; border: 0; cursor: pointer; flex: 0 0 auto; margin-left: 8px; margin-right: 8px; padding: 0; position: relative; outline: none; } .conversation-compose .send .circle { background: none; border-radius: 50%; color: #fff; position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .conversation-compose .send .circle i { font-size: 24px; margin-left: 5px; } /* Small Screens */ @media (max-width: 768px) { .marvel-device.nexus5 { border-radius: 0; flex: none; padding: 0; max-width: none; overflow: hidden; height: 100%; width: 100%; } .marvel-device > .screen .chat { visibility: visible; } .marvel-device { visibility: hidden; } .marvel-device .status-bar { display: none; } .screen-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .conversation { height: calc(100vh - 55px); } .conversation .conversation-container { height: calc(100vh - 120px); } } .dropbtn { cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: none; } .actions.attachement { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;}