slack desing

This bootstrap snippet called "slack desing" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: slack,chat,list,messages

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab



    <div class="header">
        <div class="team-menu">Team Awesome</div>
        <div class="channel-menu"><span class="channel-menu_name"><span class="channel-menu_prefix">#</span> admin</span>
        </div>
    </div>
    <div class="main">
        <div class="listings">
            <div class="listings_channels">
                <h2 class="listings_header">Channels</h2>
                <ul class="channel_list">
                    <li class="channel active"><a class="channel_name"><span class="unread">0</span><span><span class="prefix">#</span>admin</span></a></li>
                    <li class="channel"><a class="channel_name"><span class="unread">10</span><span><span class="prefix">#</span>general</span></a></li>
                </ul>
            </div>
            <div class="listings_direct-messages">
                <h2 class="listings_header">Direct Messages</h2>
                <ul class="channel_list">
                    <li class="channel"><a class="channel_name"><span class="unread">20</span><span><span class="prefix"> </span>kryton</span></a></li>
                </ul>
            </div>
        </div>
        <div class="message-history">
            <div class="message"><a class="message_profile-pic" href=""></a><a class="message_username" href="">Chika</a><span class="message_timestamp">1:31 AM</span><span class="message_star"></span><span class="message_content">Slack Technologies, Inc. (originally Tiny Speck) is a computer software startup founded in 2009, with personnel located in Vancouver, San Francisco and Dublin. The core team is largely drawn from the founders of Ludicorp, the company that created Flickr. Slack is the fastest company to receive a billion dollar valuation.</span></div>
            <div
                class="message"><a class="message_profile-pic" href=""></a><a class="message_username" href="">Chika</a><span class="message_timestamp">1:31 AM</span><span class="message_star"></span><span class="message_content">Rather than trying to make your own, use RocketMail instead.</span></div>
    </div>
    </div>
    <div class="footer">
        <div class="user-menu"><span class="user-menu_profile-pic"></span><span class="user-menu_username">Chika</span><img class="connection_icon" src="data:image/png;base64,iVBORw0KGgoAAAAN..." /><span class="connection_status">online</span></div>
        <div class="input-box"><input class="input-box_text" type="text" /></div>
    </div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


.reset, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

.reset_2, caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

html {
    line-height: 1;
    position: relative;
    height: 100%;
    font-size: 16px;
    font-family: Lato, sans-serif;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding-top: 53px;
    padding-bottom: 64px;
}

blockquote {
    quotes: none;
}

blockquote:before {
    content: "";
    content: none;
}

blockquote:after {
    content: "";
    content: none;
}

a img {
    border: none;
}

q {
    quotes: none;
}

q:before {
    content: "";
    content: none;
}

q:after {
    content: "";
    content: none;
}

ol {
    list-style: none;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article {
    display: block;
}

aside {
    display: block;
}

details {
    display: block;
}

figure {
    display: block;
}

figcaption {
    display: block;
}

footer {
    display: block;
}

header {
    display: block;
}

hgroup {
    display: block;
}

menu {
    display: block;
}

nav {
    display: block;
}

section {
    display: block;
}

summary {
    display: block;
}

main {
    display: block;
}

* {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 53px;
    width: 100%;
}

.main {
    height: 100%;
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 64px;
    width: 100%;
}

.team-menu {
    position: relative;
    width: 220px;
    height: 53px;
    line-height: 53px;
    font-weight: 900;
    padding: 0 1rem;
    color: #ffffff;
    background: #3e313c;
    border-bottom: 2px solid #372c36;
    float: left;
    cursor: pointer;
}

.channel-menu_name {
    display: inline-block;
    padding: 0 .5rem 0 1.5rem;
    color: #555459;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 53px;
    cursor: pointer;
}

.channel-menu_prefix {
    color: #9e9ea6;
    padding-right: .1rem;
    font-weight: 500;
}

.listings {
    height: 100%;
    width: 220px;
    float: left;
    color: #ab9ba9;
    background-color: #4d394b;
    overflow-y: auto;
    overflow-x: hidden;
}

.message-history {
    margin-left: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 0 18px 1rem 1.5rem;
    overflow: scroll;
    overflow-x: hidden;
}

.listings_channels {
    margin: 1rem 0 2rem;
}

.listings_header {
    text-align: left;
    font-size: .8rem;
    line-height: 1.25rem;
    margin: 0 1rem .1rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #ab9ba9;
    width: 165px;
    position: relative;
}

.channel_list {
    list-style-type: none;
    text-align: left;
    color: #ab9ba9;
}

.channel {
    height: 24px;
    line-height: 24px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    margin-right: 17px;
    color: #ffffff;
    padding-left: 1rem;
}

.channel.active {
    background: #4c9689;
}

.unread {
    color: #ffffff;
    background: #eb4d5c;
    border-radius: 9px;
    padding: 2px 9px;
    font-size: .8rem;
    line-height: 14px;
    font-weight: 700;
    vertical-align: baseline;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    float: right;
    margin-right: 3px;
    margin-top: 3px;
}

.channel_prefix {
    color: #b2d5c9;
}

.disclaimer {
    font-size: 0.8rem;
    padding-left: 1rem;
    margin-right: 17px;
}

.message {
    position: relative;
    margin-top: .5rem;
    padding: .25rem 2rem .1rem 3rem;
    min-height: 36px;
}

.message_profile-pic {
    position: absolute;
    left: 0;
    display: block;
    border-radius: 0.2rem;
    width: 36px;
    height: 36px;
    background-image: url(http://findicons.com/icon/download/102283/fh02/300/png);
    background-size: cover;
}

.message_username {
    font-weight: 900;
    padding-right: .25rem;
    color: #3d3c40 !important;
    margin-left: 0;
    font-style: normal;
    text-decoration: none;
}

.message_timestamp {
    text-align: left;
    display: inline;
    position: relative;
    top: 0;
    left: 0;
    color: #babbbf;
    font-size: 12px;
    line-height: 1.2rem;
    width: 36px;
    margin-right: 0;
    margin-left: 0;
}

.message_content {
    color: #8b898f;
    font-style: italic;
    display: block;
    min-height: 1rem;
}

.user-menu {
    float: left;
    width: 220px;
    height: 100%;
    cursor: pointer;
    background: #3e313c;
    border-top: 2px solid #372c36;
    padding: 7px 0 9px 8px;
    height: 4rem;
    position: fixed;
    bottom: 0;
    left: 0;
}

.user-menu_profile-pic {
    display: inline-block;
    float: left;
    border-radius: 0.2rem;
    width: 48px;
    height: 48px;
    background-image: url(http://findicons.com/icon/download/102283/fh02/300/png);
    background-size: cover;
    margin-right: 8px;
}

.user-menu_username {
    display: block;
    color: #ffffff;
    font-weight: 900;
    line-height: 1.5rem;
    margin-top: .2rem;
    max-width: 120px;
}

.connection_icon {
    width: 12px;
    height: 12px;
}

.connection_status {
    color: #ab9ba9;
}

.input-box {
    height: 100%;
    margin-left: 220px;
}

.input-box_text {
    font-size: .95rem;
    width: 90%;
    margin-left: 2%;
    margin-bottom: auto;
    line-height: 1.2rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.2rem;
    background-clip: padding-box;
    color: #3d3c40;
    box-shadow: none;
    outline: 0;
    bottom: 0;
    min-height: 41px !important;
    padding: 9px 5px 9px 8px;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.0.0

Created: Jun 9th, 09:56

Views: 32