"panel"
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 lang='en' 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/brandonfujii/pen/oxRBjd?depth=everything&order=popularity&page=77&q=chat&show_forks=false" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic); ul { margin: 0; padding: 0; } #slack-container { font-family: 'Lato', Helvetica, sans-serif; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2); height: 600px; width: 1000px; margin: 0 auto; border-radius: 5px; overflow: hidden; } #slack-container #sidebar { float: left; color: #fff; display: inline-block; height: 100%; float: left; width: 30%; background: #4E394C; } #slack-container #sidebar #team-picker { margin-right: 15px; float: left; display: inline-block; height: 100%; width: 80px; background: #3f2e3e; } #slack-container #sidebar #team-picker .teams { width: 100%; height: 100%; margin: 0; padding: 0; padding-top: 25px; } #slack-container #sidebar #team-picker .teams .team { list-style: none; width: 45px; height: 45px; background: #fff; margin: 0 auto; margin-bottom: 25px; border-radius: 5px; overflow: hidden; } #slack-container #sidebar #team-name { display: inline-block; } #slack-container #sidebar #team-name h1 { font-size: 16px; margin: 0; margin-top: 10px; } #slack-container #sidebar #username { display: block; } #slack-container #sidebar #username .status { display: inline-block; width: 8px; height: 8px; border-radius: 10px; background-color: #4C9689; } #slack-container #sidebar #username h2 { display: inline-block; opacity: 0.5; font-size: 14px; font-weight: 300; margin: 0; } #slack-container #sidebar #channels { display: block; padding-top: 25px; } #slack-container #sidebar #channels h4 { margin: 0; margin-bottom: 10px; padding: 0; text-transform: uppercase; font-weight: 400; font-size: 12px; opacity: 0.5; } #slack-container #sidebar #channels .channel { padding-left: 10px; display: block; font-weight: 300; } #slack-container #sidebar #channels .channel p { font-size: 13px; margin: 0; padding-top: 2.5px; padding-bottom: 2.5px; opacity: 0.5; } #slack-container #sidebar #channels .channel p i { font-style: normal; opacity: 0.45; } #slack-container #sidebar #channels .channel.unread { font-weight: 700; } #slack-container #sidebar #channels .channel.unread p { opacity: 1; } #slack-container #sidebar #channels .channel.unread p i { font-weight: 300; } #slack-container #sidebar #channels .channel.selected { width: 92%; border-radius: 3px; background: #4C9689; padding-bottom: 3px; } #slack-container #sidebar #channels .channel.selected p { opacity: 1; } #slack-container #sidebar #direct-messages { display: block; padding-top: 40px; } #slack-container #sidebar #direct-messages h4 { margin: 0; margin-bottom: 10px; padding: 0; text-transform: uppercase; font-weight: 400; font-size: 12px; opacity: 0.5; } #slack-container #sidebar #direct-messages .direct-message { padding-left: 10px; display: block; font-weight: 300; } #slack-container #sidebar #direct-messages .direct-message .status { display: inline-block; width: 8px; height: 8px; border-radius: 10px; background-color: #4C9689; } #slack-container #sidebar #direct-messages .direct-message .status.inactive { background: transparent; width: 6px; height: 6px; border: 1px solid #fff; opacity: 0.5; } #slack-container #sidebar #direct-messages .direct-message p { display: inline-block; font-size: 13px; margin: 0; padding-top: 2.5px; padding-bottom: 2.5px; opacity: 0.5; } #slack-container #chat { position: relative; width: 70%; height: 100%; float: left; display: inline-block; } #slack-container #chat .header-bar { width: 100%; padding-left: 10px; border-bottom: 1px solid #ddd; } #slack-container #chat .header-bar h1 { font-size: 16px; margin-bottom: 0; } #slack-container #chat .header-bar h3 { font-weight: 400; display: inline-block; font-size: 12px; opacity: 0.3; padding-right: 7px; margin-top: 0; } #slack-container #chat .header-bar .purpose { border-left: 1px solid #ccc; padding-left: 7px; } #slack-container #chat #chatbox { width: 100%; } #slack-container #chat #chatbox .messages { width: 100%; } #slack-container #chat #chatbox .messages .message { padding: 10px 10px 10px 20px; display: block; font-size: 14px; } #slack-container #chat #chatbox .messages .message .user-icon { position: relative; top: 4px; margin-right: 7px; width: 35px; height: 35px; border-radius: 4px; overflow: hidden; background: #4E394C; display: inline-block; } #slack-container #chat #chatbox .messages .message .user-icon img { width: 550%; height: auto; } #slack-container #chat #chatbox .messages .message .body { display: inline-block; } #slack-container #chat #chatbox .messages .message .body .username { font-weight: 700; padding-bottom: 3px; } #slack-container #chat #chatbox .messages .message .body .text { color: #252525; } #slack-container #chat .input-bar { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; padding: 3%; } #slack-container #chat .input-bar form input { outline: none; border-radius: 5px; border: 2px solid #dedede; height: 25px; width: 92%; padding: 5px; font-size: 13px; } </style></head><body> <div id="slack-container"> <div id="sidebar"> <div id="team-picker"> <ul class="teams"> <li class="team"></li> <li class="team"></li> </ul> </div> <div id="team-name"> <h1>Team Awesome</h1> </div> <div id="username"> <div class="status"> </div> <h2>brandonfujii</h2> </div> <ul id="channels"> <h4>channels</h4> <li class="channel selected"> <p> <i># </i>general</p> </li> <li class="channel unread"> <p> <i># </i>marketing</p> </li> <li class="channel"> <p> <i># </i>tech</p> </li> <li class="channel"> <p> <i># </i>branding</p> </li> <li class="channel"> <p> <i># </i>exec</p> </li> </ul> <ul id="direct-messages"> <h4>Direct Messages</h4> <li class="direct-message"> <div class="status"> </div> <p>slackbot</p> </li> <li class="direct-message"> <div class="status"> </div> <p>navin</p> </li> <li class="direct-message"> <div class="status"> </div> <p>edys</p> </li> <li class="direct-message"> <div class="status"> </div> <p>kimberlygo</p> </li> <li class="direct-message"> <div class="status inactive"></div> <p>alexandra</p> </li> </ul> </div> <div id="chat"> <div class="header-bar"> <h1>#general</h1> <div class="details"> <h3 class="members">5 members</h3> <h3 class="purpose">Sometimes we do cool stuff</h3> </div> </div> <div id="chatbox"> <ul class="messages"> <li class="message"> <div class="user-icon"><img src="http://socialmediaweek.org/wp-content/blogs.dir/1/files/slack-pattern-940x492.jpg"/></div> <div class="body"> <div class="username">kimberlygo</div> <div class="text">@channel hey guys, update the slides pls</div> </div> </li> <li class="message"> <div class="user-icon"><img src="http://socialmediaweek.org/wp-content/blogs.dir/1/files/slack-pattern-940x492.jpg"/></div> <div class="body"> <div class="username">navin</div> <div class="text">@kimberlygo: okay, i'll do it! </div> </div> </li> </ul> </div> <div class="input-bar"> <form> <input type="text" placeholder=""/> </form> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> </body></html>

Related: See More

Now UI Dashboard React
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments: