<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!--Navbar--> <nav class="navbar navbar-default mq-navbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Muhammad Qasim</a> </div> <div class="navbar-header collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Portfolio <span class="caret"> </span> </a> <ul class="dropdown-menu mq-dropdown"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </li> </ul> </div> </nav> <!-- widgets --> <div class="container"> <div class="mq-panel-wrapper"> <div class="mq-panel-header"> <h3>Comments</h3> </div> <div class="mq-panel-body"> <ul class="mq-comment"> <li class="left clearfix"><span class="mq-comment-img pull-left"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </span> <div class="mq-comment-body clearfix"> <div class="header"> <strong class="primary-font">John Doe</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>1h mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> <ul class="mq-comment"> <li class="left clearfix"><span class="mq-comment-img pull-left"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/10891012_776850265697289_1379635530_n.jpg?ig_cache_key=ODk0MjE3NzczMTc2NTExMjg0.2" width="50" alt="User Avatar" class="img-circle" /> </span> <div class="mq-comment-body clearfix"> <div class="header"> <strong class="primary-font">Jane Bas</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>3h ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> <ul class="mq-comment"> <li class="left clearfix"><span class="mq-comment-img pull-left"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </span> <div class="mq-comment-body clearfix"> <div class="header"> <strong class="primary-font">John Doe</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>5h ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> <ul class="mq-comment"> <li class="left clearfix"><span class="mq-comment-img pull-left"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/10891012_776850265697289_1379635530_n.jpg?ig_cache_key=ODk0MjE3NzczMTc2NTExMjg0.2" width="50" alt="User Avatar" class="img-circle" /> </span> <div class="mq-comment-body clearfix"> <div class="header"> <strong class="primary-font">Jane Bas</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>6h ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> <ul class="mq-comment"> <li class="left clearfix"><span class="mq-comment-img pull-left"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </span> <div class="mq-comment-body clearfix"> <div class="header"> <strong class="primary-font">John Doe</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>12h ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> </div> <div class="mq-panel-wrapper"> <div class="mq-panel-header"> <h3>Friends</h3> </div> <div class="mq-panel-body"> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/10891012_776850265697289_1379635530_n.jpg?ig_cache_key=ODk0MjE3NzczMTc2NTExMjg0.2" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>Jon Snow </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>Mark Kellem </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/10891012_776850265697289_1379635530_n.jpg?ig_cache_key=ODk0MjE3NzczMTc2NTExMjg0.2" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>John Doe </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>Jane Bas </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>John </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>WFH </small> </div> </div> <div class="mq-friends thumbnail"> <div class="mq-friend-img text-center"> <img src="http://4vector.com/i/free-vector-self-portrait-by-jar_101306_Self_Portrait_by_Jar.png" width="50" alt="User Avatar" class="img-circle" /> </div> <div class="mq-friends-footer"> <small>PTO </small> </div> </div> </div> </div> </div>

.mq-navbar{ border-radius:0px; background-color:#2d2d2d; color:#fff; } .mq-dropdown{ margin-top:10px !important; padding:0px !important; background-color:#76b9ea; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #fff !important; background-color: #1c1c1c; } .mq-comment { list-style: none; margin-bottom: 10px; padding: 0; border-bottom:1px solid #ccc; } .comment li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; } .mq-comment-img{ margin-right:10px; } .mq-panel-wrapper{ width:45%; height:300px; background-color:#2d2d2d; margin:20px; float:left; border:1px solid #330033; box-shadow:0px 0px 20px 0px #2d2d2d; border-radius:0px 0px 5px 5px; } .mq-panel-header{ width:100%; height:60px; background-color:#1c1c1c; padding:10px; display:table; position:relative; } .mq-panel-header h3{ color:#fff; font-size:12pt; font-weight:300; letter-spacing:1px; display:table-cell; vertical-align:middle; } .mq-panel-body{ width:100%; max-height:238px; overflow-y:scroll; padding:10px; background-color:#eee; border-radius:0px 0px 5px 5px; } .mq-friends{ width:31.3%; height:100px; padding:0; position:relative; display:table; float:left; margin:0px 10px 10px 0px; } .mq-friends:hover{ transition:.6s; transform:scale(.9); } .mq-friend-img{ padding-top:10px; } .mq-friends-footer{ width:100%; background-color:#3399ff; position:absolute; bottom:0; text-align:center; color:#fff; }