<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 ----------> <!-- Font Awesome 4.7 --> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css "> <div class="container-fluid"> <div class="row"> <!-- Design Group 'No Member' --> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="card-style"> <div class="media"> <div class="media-left"> <img class="media-object img-thumbnail card-img" src="https://goo.gl/cJajax"> </div> <div class="media-body"> <a href="#"><h5 class="media-heading">Disc. Programação Internet Rica - 2016.2</h5></a> <div class="members pull-left"><small>1.235 Members</small></div><div class="btn btn-sm btn-danger pull-right btn-part">Join Group</div> </div> </div> </div> </div> </div> </div> <!-- Design Group 'pending request' --> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="card-style"> <div class="media"> <div class="media-left"> <img class="media-object img-thumbnail card-img" src="https://goo.gl/Xfk2oe"> </div> <div class="media-body"> <a href="#"><h5 class="media-heading">Disc. Programação Internet Rica - 2016.2</h5></a> <div class="members"><small>1.235 Members</small></div> <div class="btn btn-sm btn-primary btn-part">Pending Request</div> </div> </div> </div> </div> </div> </div> <!-- Design Group with badge activity counter (If you are already a member) --> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="card-style"> <div class="media"> <div class="media-left"> <img class="media-object img-thumbnail card-img" src="https://goo.gl/T99N2c"> </div> <div class="media-body"> <a href="#"><h5 class="media-heading">HTML5 + CSS3 Dev's</h5></a> <span class="members"><small>1.235 Members</small></span> <span class="badge">+99</span> </div> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Roboto'); body { font-family: 'Roboto', sans-serif; background-color: #dedede; margin: 20px; } .card-style { display: block; background-color: #fff; height: 100px; width: 350px; margin: 20px 0px; box-shadow: 1px 1px 8px #999; cursor: pointer; } .card-img { height: 100px; width: 100px; } .media-heading { margin-top: 10px; color: #444; } .media-heading:hover, a:link { color: #00C853; text-decoration: none; } .members { margin-top: 20px; color: #999; float: left; } .btn-part { display: inline-block; margin: 10px; float: right; } .badge { display: inline-block; background: #00C853; float: right; padding: 7px; border-radius: 50px; margin: 10px; }