"tchat"
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/benjaminreid/pen/Cswcl?depth=everything&order=popularity&page=26&q=chat&show_forks=false" /> <style class="cp-pen-styles">.activity { border-left: solid 2px #7ED321; font: 12px/1.2 'Lucida Grande', sans-serif; color: #2C2C2C; padding: 6px; position: relative; } .activity a { text-decoration: none; } .activity--subscriber { background: #EBEBEB; border-left: none; border-right: solid 2px #2176D3; } .activity--notice { background-color: #e1f7c9; } .activity--notice.activity--subscriber { background-color: #c9dff7; } .activity__time { font-size: 10px; font-weight: normal; display: block; margin-bottom: 3px; margin-top: -3px; color: #97e245; } .activity__time--subscriber { color: #4590e2; } .activity__avatar { border-radius: 3px; vertical-align: bottom; position: absolute; } .activity__avatar--subscriber { right: 6px; } .activity__message { min-height: 35px; padding: 6px; padding-left: 46px; } .activity__message p { padding: 3px 0; margin: 0; } .activity__message p + img { margin-top: 6px; margin-bottom: 3px; } .activity__message p:first-child { padding-top: 0; } .activity__message p:last-child { padding-bottom: 0; } .activity__message img { width: 100%; max-width: 100%; } .activity__message--subscriber { padding-left: 6px; padding-right: 46px; text-align: right; } .activity__message--full { min-height: initial; text-align: center; padding-left: 6px; font-weight: bold; } .activity__file-name { color: #7E7E7E; display: block; padding: 3px 0 0 5px; font-size: 10px; } .activity-list { background: #FDFDFD; } .file-icon { width: 75px; height: 100px; display: block; text-align: center; line-height: 100px; text-transform: uppercase; border-radius: 5px; font-weight: bold; text-decoration: none; background: #F1734C; color: #FFF; font-size: 16px; } .file-icon:hover { background-color: #ef6134; } /* not part of the activities module */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font: 12px/1.2 'Helvetica Neue', sans-serif; background: #1D1D1D; width: 300px; margin: 0 auto; color: #fff; } </style></head><body> <div class="activity-list"> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <p>Hey there, welcome to this ace messaging thing?</p> </div> </div> <div class="activity activity--subscriber"> <img class="activity__avatar activity__avatar--subscriber" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg"> <div class="activity__message activity__message--subscriber"> <p>Pretty rad yeah, I wonder what it can do other than messages...</p> </div> </div> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <p>I think I've seen something like this before though.</p> <p>Where though, is anyone's guess.</p> </div> </div> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <a href="#"> <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/020/cache/yosemite-deep-valley_2013_600x450.jpg"> <span class="activity__file-name">yosemite.jpg</span> </a> </div> </div> <div class="activity activity--subscriber"> <img class="activity__avatar activity__avatar--subscriber" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg"> <div class="activity__message activity__message--subscriber"> <p>That looks like Yosemite!</p> </div> </div> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <p>Sure is.</p> </div> </div> <div class="activity activity--notice"> <div class="activity__message activity__message--full"> <time class="activity__time">Last Tuesday at 9:31 AM</time> <p>Brad Forst offered the lesson</p> </div> </div> <div class="activity activity--notice activity--subscriber"> <div class="activity__message activity__message--full"> <time class="activity__time activity__time--subscriber">Last Tuesday at 9:45 AM</time> <p>Harry Roberts accepted the lesson</p> </div> </div> <div class="activity activity--subscriber"> <img class="activity__avatar activity__avatar--subscriber" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg"> <div class="activity__message activity__message--subscriber"> <p>Right lesson time! Game faces on. Do you mind sending me that PDF over you were on about please?</p> </div> </div> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <p>Yep, one sec</p> </div> </div> <div class="activity activity--subscriber"> <img class="activity__avatar activity__avatar--subscriber" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg"> <div class="activity__message activity__message--subscriber"> <p>Come on, I don't have long!!</p> <img width="100" src="http://replygif.net/i/1129.gif"> <p>Waiting...</p> </div> </div> <div class="activity"> <img class="activity__avatar" width="35" height="35" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> <div class="activity__message"> <a href=""> <div class="file-icon"> .psd </div> <span class="activity__file-name">test.psd</span> </a> </div> </div> </div> </body></html>

Related: See More

Paper Kit

Questions / Comments: