"card layout"
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/ThomasDaubenton/pen/QMqaBN?limit=all&page=50&q=contact+" /> <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=Montserrat'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <style class="cp-pen-styles">body { padding: 5%; background-color: #F5F5F5; } .container { padding:0; background-color: #FFF; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); height: 700px; } /* ===== MENU ===== */ .menu { float: left; height: 700px;; width: 70px; background: #4768b5; background: -webkit-linear-gradient(#4768b5, #35488e); background: -o-linear-gradient(#4768b5, #35488e); background: -moz-linear-gradient(#4768b5, #35488e); background: linear-gradient(#4768b5, #35488e); box-shadow: 0 10px 20px rgba(0,0,0,0.19); } .menu .items { list-style:none; margin: auto; padding: 0; } .menu .items .item { height: 70px; border-bottom: 1px solid #6780cc; display:flex; justify-content: center; align-items: center; color: #9fb5ef; font-size: 17pt; } .menu .items .item-active { background-color:#5172c3; color: #FFF; } .menu .items .item:hover { cursor: pointer; background-color: #4f6ebd; color: #cfe5ff; } /* === CONVERSATIONS === */ .discussions { width: 35%; height: 700px; box-shadow: 0px 8px 10px rgba(0,0,0,0.20); overflow: hidden; background-color: #87a3ec; display: inline-block; } .discussions .discussion { width: 100%; height: 90px; background-color: #FAFAFA; border-bottom: solid 1px #E0E0E0; display:flex; align-items: center; cursor: pointer; } .discussions .search { display:flex; align-items: center; justify-content: center; color: #E0E0E0; } .discussions .search .searchbar { height: 40px; background-color: #FFF; width: 70%; padding: 0 20px; border-radius: 50px; border: 1px solid #EEEEEE; display:flex; align-items: center; cursor: pointer; } .discussions .search .searchbar input { margin-left: 15px; height:38px; width:100%; border:none; font-family: 'Montserrat', sans-serif;; } .discussions .search .searchbar *::-webkit-input-placeholder { color: #E0E0E0; } .discussions .search .searchbar input *:-moz-placeholder { color: #E0E0E0; } .discussions .search .searchbar input *::-moz-placeholder { color: #E0E0E0; } .discussions .search .searchbar input *:-ms-input-placeholder { color: #E0E0E0; } .discussions .message-active { width: 98.5%; height: 90px; background-color: #FFF; border-bottom: solid 1px #E0E0E0; } .discussions .discussion .photo { margin-left:20px; display: block; width: 45px; height: 45px; background: #E6E7ED; -moz-border-radius: 50px; -webkit-border-radius: 50px; background-position: center; background-size: cover; background-repeat: no-repeat; } .online { position: relative; top: 30px; left: 35px; width: 13px; height: 13px; background-color: #8BC34A; border-radius: 13px; border: 3px solid #FAFAFA; } .desc-contact { height: 43px; width:50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .discussions .discussion .name { margin: 0 0 0 20px; font-family:'Montserrat', sans-serif; font-size: 11pt; color:#515151; } .discussions .discussion .message { margin: 6px 0 0 20px; font-family:'Montserrat', sans-serif; font-size: 9pt; color:#515151; } .timer { margin-left: 15%; font-family:'Open Sans', sans-serif; font-size: 11px; padding: 3px 8px; color: #BBB; background-color: #FFF; border: 1px solid #E5E5E5; border-radius: 15px; } .chat { width: calc(65% - 85px); } .header-chat { background-color: #FFF; height: 90px; box-shadow: 0px 3px 2px rgba(0,0,0,0.100); display:flex; align-items: center; } .chat .header-chat .icon { margin-left: 30px; color:#515151; font-size: 14pt; } .chat .header-chat .name { margin: 0 0 0 20px; text-transform: uppercase; font-family:'Montserrat', sans-serif; font-size: 13pt; color:#515151; } .chat .header-chat .right { position: absolute; right: 40px; } .chat .messages-chat { padding: 25px 35px; } .chat .messages-chat .message { display:flex; align-items: center; margin-bottom: 8px; } .chat .messages-chat .message .photo { display: block; width: 45px; height: 45px; background: #E6E7ED; -moz-border-radius: 50px; -webkit-border-radius: 50px; background-position: center; background-size: cover; background-repeat: no-repeat; } .chat .messages-chat .text { margin: 0 35px; background-color: #f6f6f6; padding: 15px; border-radius: 12px; } .text-only { margin-left: 45px; } .time { font-size: 10px; color:lightgrey; margin-bottom:10px; margin-left: 85px; } .response-time { float: right; margin-right: 40px !important; } .response { float: right; margin-right: 0px !important; margin-left:auto; /* flexbox alignment rule */ } .response .text { background-color: #e3effd !important; } .footer-chat { width: calc(65% - 66px); height: 80px; display:flex; align-items: center; position:absolute; bottom: 0; background-color: transparent; border-top: 2px solid #EEE; } .chat .footer-chat .icon { margin-left: 30px; color:#C0C0C0; font-size: 14pt; } .chat .footer-chat .send { color:#fff; background-color: #4f6ebd; position: absolute; right: 50px; padding: 12px 12px 12px 12px; border-radius: 50px; font-size: 14pt; } .chat .footer-chat .name { margin: 0 0 0 20px; text-transform: uppercase; font-family:'Montserrat', sans-serif; font-size: 13pt; color:#515151; } .chat .footer-chat .right { position: absolute; right: 40px; } .write-message { border:none !important; width:60%; height: 50px; margin-left: 20px; padding: 10px; } .footer-chat *::-webkit-input-placeholder { color: #C0C0C0; font-size: 13pt; } .footer-chat input *:-moz-placeholder { color: #C0C0C0; font-size: 13pt; } .footer-chat input *::-moz-placeholder { color: #C0C0C0; font-size: 13pt; margin-left:5px; } .footer-chat input *:-ms-input-placeholder { color: #C0C0C0; font-size: 13pt; } .clickable { cursor: pointer; }</style></head><body> <body> <div class="container"> <div class="row"> <nav class="menu"> <ul class="items"> <li class="item"> <i class="fa fa-home" aria-hidden="true"></i> </li> <li class="item"> <i class="fa fa-user" aria-hidden="true"></i> </li> <li class="item"> <i class="fa fa-pencil" aria-hidden="true"></i> </li> <li class="item item-active"> <i class="fa fa-commenting" aria-hidden="true"></i> </li> <li class="item"> <i class="fa fa-file" aria-hidden="true"></i> </li> <li class="item"> <i class="fa fa-cog" aria-hidden="true"></i> </li> </ul> </nav> <section class="discussions"> <div class="discussion search"> <div class="searchbar"> <i class="fa fa-search" aria-hidden="true"></i> <input type="text" placeholder="Search..."></input> </div> </div> <div class="discussion message-active"> <div class="photo" style="background-image: url(https://image.noelshack.com/fichiers/2017/38/2/1505775062-1505606859-portrait-1961529-960-720.jpg);"> <div class="online"></div> </div> <div class="desc-contact"> <p class="name">Megan Leib</p> <p class="message">9 pm at the bar if possible

Related: See More


Questions / Comments: