<header>
        <i class="material-icons search">search</i>
        <input type="search" placeholder="Search..." />
        <div class="logo_container">
            <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Facebook_New_Logo_%282015%29.svg/2000px-Facebook_New_Logo_%282015%29.svg.png" />
        </div>
        <div class="profile">
            <img src="https://scontent.ftun2-1.fna.fbcdn.net/v/t1.0-1/c0.0.160.160a/p160x160/45642398_556656484785196_5545450649182797824_n.jpg?_nc_cat=110&_nc_ht=scontent.ftun2-1.fna&oh=94697c7773d8e7becf36ef1b48a03870&oe=5CB8996C" />
            <span class="name">Hello, Rabii</span>
            <button><i class="material-icons">notifications</i><span>3</span></button>
            <button><i class="material-icons">mode_comment</i><span>3</span></button>
            <button><i class="material-icons">people</i><span>3</span></button>
        </div>
    </header>
    <div class="container">
        <div class="groups_header">
            <i class="material-icons">people</i>
            Groups
            <a href="#">Discover</a>
        </div>
        <div class="groups_body">
            <div class="group">
                <span class="status">Public group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">I am Programmer,I have no life.</span>
                    <span class="unread">5 unread posts</span>
                    <p></p>
                </div>
                <a href="#" class="action">join</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://www.cgu.edu/wp-content/uploads/2017/01/Rosie-Fernandez-CGU-600x600.jpg"/>
                    <img src="https://st2.depositphotos.com/1006318/10458/v/950/depositphotos_104583834-stock-illustration-business-man-profile-icon-male.jpg"/>
                    <img src="https://static1.squarespace.com/static/54f74f23e4b0952b4e0011c0/t/5ad5431e88251baeaac75f49/1523925845937/chris+hanna+bb.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Public group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">WordPress Developer & Web Designer</span>
                    <span class="unread">5 unread posts</span>
                    <p>Rules for WordPress Developer & Web Designer Group:<br>
                        Everything about WordPress & Web Design. Please take a note about the followings though -
                    </p>
                </div>
                <a href="#" class="action green">open</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://content-static.upwork.com/uploads/2014/10/02123010/profilephoto_goodcrop.jpg"/>
                    <img src="https://images.assetsdelivery.com/compings_v2/gmast3r/gmast3r1511/gmast3r151100776.jpg"/>
                    <img src="https://www.cgu.edu/wp-content/uploads/2017/01/Rosie-Fernandez-CGU-600x600.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Closed group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">Web Design and Development</span>
                    <span class="unread">5 unread posts</span>
                    <p>Those who are interested in their projects designing and development like Website,Games and Mobile applications (Android, IOS) contact us to develop that for you</p>
                </div>
                <a href="#" class="action green">open</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://images.assetsdelivery.com/compings_v2/gmast3r/gmast3r1511/gmast3r151100776.jpg"/>
                    <img src="https://files-chemistry-stanford-edu.s3-us-west-2.amazonaws.com/s3fs-public/6f7cfac1bb56a62439c00419a9325342.jpg?6OOJwSCOo8YnBgD_oHDZdeZLgCZbDHjU"/>
                    <img src="https://www.cgu.edu/wp-content/uploads/2017/01/Rosie-Fernandez-CGU-600x600.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Public group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">Graphic Design</span>
                    <span class="unread">5 unread posts</span>
                    <p>This group is for pure job posts for Graphic design background like Logo, Business Card, Book Covers, Magazines, Print Media, Flyers etc. All kind of job posts wither freelance or full time or part</p>
                </div>
                <a href="#" class="action green">open</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://i.dailymail.co.uk/i/pix/2016/05/23/22/348B850600000578-3605456-image-m-32_1464040491071.jpg"/>
                    <img src="https://files-chemistry-stanford-edu.s3-us-west-2.amazonaws.com/s3fs-public/6f7cfac1bb56a62439c00419a9325342.jpg?6OOJwSCOo8YnBgD_oHDZdeZLgCZbDHjU"/>
                    <img src="https://content-static.upwork.com/uploads/2014/10/02123010/profilephoto_goodcrop.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Closed group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">UI & UX Design</span>
                    <span class="unread">5 unread posts</span>
                    <p>Find out and share what's happening around the glob in UI & UX designs.</p>
                </div>
                <a href="#" class="action">join</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://content-static.upwork.com/uploads/2014/10/02123010/profilephoto_goodcrop.jpg"/>
                    <img src="https://static1.squarespace.com/static/54f74f23e4b0952b4e0011c0/t/5ad5431e88251baeaac75f49/1523925845937/chris+hanna+bb.jpg"/>
                    <img src="https://content-static.upwork.com/uploads/2014/10/01073427/profilephoto1.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Closed group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">PHP + MySQL en Español</span>
                    <span class="unread">5 unread posts</span>
                    <p>Este grupo tiene como finalidad unir a programadores hispanohablantes de PHP + MySQL, no importa de donde sean, solo unidos por el respeto, la buena onda y las ganas de colaborar con quienes aprendemos día a día en este mundo!
                    </p>
                </div>
                <a href="#" class="action">join</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://files-chemistry-stanford-edu.s3-us-west-2.amazonaws.com/s3fs-public/6f7cfac1bb56a62439c00419a9325342.jpg?6OOJwSCOo8YnBgD_oHDZdeZLgCZbDHjU"/>
                    <img src="https://i.dailymail.co.uk/i/pix/2016/05/23/22/348B850600000578-3605456-image-m-32_1464040491071.jpg"/>
                    <img src="https://content-static.upwork.com/uploads/2014/10/02123010/profilephoto_goodcrop.jpg"/>
                </div>
            </div>
            <div class="group">
                <span class="status">Public group</span>
                <button><i class="material-icons"> more_horiz </i></button>
                <div style="clear: both"></div>
                <div class="space">
                    <span class="name">Laravel + Vue.js Developers</span>
                    <span class="unread">5 unread posts</span>
                    <p>description</p>
                </div>
                <a href="#" class="action">join</a>
                <div class="members">
                    <span>+288</span>
                    <img src="https://files-chemistry-stanford-edu.s3-us-west-2.amazonaws.com/s3fs-public/6f7cfac1bb56a62439c00419a9325342.jpg?6OOJwSCOo8YnBgD_oHDZdeZLgCZbDHjU"/>
                    <img src="https://content-static.upwork.com/uploads/2014/10/01073427/profilephoto1.jpg"/>
                    <img src="https://static1.squarespace.com/static/54f74f23e4b0952b4e0011c0/t/5ad5431e88251baeaac75f49/1523925845937/chris+hanna+bb.jpg"/>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    outline: none;
}
body {
    padding-top: 60px;
    background: #E8EAEE;
}
.container {
    width: 1000px;
    margin: 0 auto;
}
/*****************/
/*****************/
header {
    position: fixed;
    top: 0;
    left: 0;
    background: #3B529A;
    height: 60px;
    width: 100%;
    padding: 0 60px;
}
header .search {
    float: left;
    height: 50px;
    line-height: 50px;
    width: 40px;
    color: #fff;
    margin: 5px 0;
}
header input {
    height: 60px;
    background: none;
    border: none;
    color: #fff;
    float: left;
    width: 360px;
    line-height: 60px;
    padding: 0;
    font-size: 16px;
}
header input::placeholder {
  color: #eee;
}
header .logo_container {
    width: calc(100% - 800px);
    display: block;
    float: left;
}
header .logo {
    height: 50px;
    width: auto;
    display: block;
    margin: 5px auto;
}
header button {
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    background: #fff;
    margin: 15px 30px 0 0;
    float: right;
    background: none;
    border: none;
    color: #fff;
}
header button span {
    position: relative;
    float: right;
    height: 16px;
    line-height: 16px;
    min-width: 16px;
    color: #fff;
    background: #f5365c;
    border-radius: 4px;
    top: -28px;
    right: -4px;
    font-size: 12px;
}
header .profile {
    width: 400px;
    float: right;
}
header .profile img {
    background: red;
    height: 40px;
    width: 40px;
    float: right;
    border-radius: 50%;
    margin: 10px;
}
header .profile .name {
    float: right;
    height: 60px;
    line-height: 60px;
    color: #fff;
    padding: 0 10px;
}
/*****************/
/*****************/
.groups_header {
    margin: 30px 0;
    color: #444;
    line-height: 60px;
    height: 60px;
    font-size: 26px;
}
.groups_header i {
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 50px;
    background: #4488ff;
    border-radius: 10px;
    float: left;
    margin: 5px 20px 0 0;
    text-align: center;
    font-size: 28px;
}
.groups_header a {
    height: 40px;
    width: auto;
    background: #4488ff;
    border-radius: 4px;
    float: right;
    margin: 10px 0 0 0;
    color: #fff;
    line-height: 40px;
    text-decoration: none;
    padding: 0 20px;
    font-size: 16px;
    
font-size: .875rem;
    transition: all .15s ease;
    letter-spacing: .025em;
    text-transform: uppercase;
    
        color: #fff;
    border-color: #3B529A;
    background-color: #3B529A;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    
}
.groups_body {
    margin-bottom: 50px;
}
/*****************/
/*****************/
.group {
    width: calc(100% / 3 - 40px / 3);
    height: 300px;
    background: #fff;
    padding: 15px;
    float: left;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
        border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)!important;
    border: .0625rem solid rgba(0,0,0,.05);
}
.group:nth-child(3n+2){
    margin: 20px;
}
.group .status {
    display: inline-block;
    float: left;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    border-color: #f5365c;
    background-color: #f5365c;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
.group button {
    float: right;
    height: 24px;
    width: 24px;
    background: none;
    border: none;
}
.group .name {
    display: block;
    line-height: 30px;
    padding: 10px 0 0 0;
    color: #444;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}
.group .unread {
    display: block;
    line-height: 20px;
    padding: 4px 0;
    color: #888;
    font-size: 14px;
    text-align: left;
}
.group .space {
    height: 195px;
}
.group p {
    display: block;
    line-height: 26px;
    padding: 4px 0;
    color: #666;
    font-size: 16px;
    text-align: left;
    height: 86px;
    overflow: hidden;
}
.group .action {
    display: block;
    float: left;
    width: 80px;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    border-radius: 3px;
    margin: 5px 0;
    text-align: center;
    border-color: #0099bb;
    background-color: #0099bb;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}
.group .action.green {
        border-color: #00aa55;
    background-color: #00aa55;   
}

.group .members {
    width: calc(100% - 100px);
    float: right;
    height: 46px;
}
.group .members img {
    height: 46px;
    width: 46px;
    float: right;
    margin: 0 -8px 0 0;
    background: red;
    border-radius: 50%;
    background: #f5365c;
    color: #fff;
    border: 2px solid #fff;
}
.group .members span {
    line-height: 42px;
    height: 46px;
    width: 46px;
    float: right;
    margin: 0 -8px 0 0;
    background: red;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: #f5365c;
    color: #fff;
    border: 2px solid #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.