<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container" style="margin-top: 20px; margin-bottom: 20px;"> <div class="row panel" style="background:#2e2a2d"> <div class="col-md-4 bg_blur "> <a href="#" class="follow_btn hidden-xs">Follow</a> </div> <div class="col-md-8 col-xs-12"> <img src="http://www.pinkvilla.com/files/imagecache/ContentPreview/deepika-harper2.jpg" class="img-thumbnail picture hidden-xs" /> <img src="http://www.pinkvilla.com/files/imagecache/ContentPreview/deepika-harper2.jpg" class="img-thumbnail visible-xs picture_mob" /> <div class="header"> <h1 style="color:#e84141">DEEPIKA PADUKONE</h1> <h4 style="color:#fbc725">Bollywood ACtress</h4> <div class="timeline-panel"> <div class="hr-left"></div> <div class="btn-group"> <button type="button" disabled="" class="btn btn-info">POLLS</button> <button type="button" disabled="" class="btn btn-default">255</button> </div> <div class="btn-group"> <button type="button" disabled="" class="btn btn-success">BLOGS</button> <button type="button" disabled="" class="btn btn-default">52</button> </div> <div class="btn-group"> <button type="button" disabled="" class="btn btn-danger">Groups</button> <button type="button" disabled="" class="btn btn-default">0</button> </div> <div class="btn-group"> <button type="button" disabled="" class="btn btn-warning">Survey</button> <button type="button" disabled="" class="btn btn-default">2</button> </div> <div class="btn-group"> <button type="button" disabled="" class="btn btn-primary">Phone</button> <button type="button" disabled="" class="btn btn-default">023-2314 1231</button> </div> </div> </div> </div> </div> </div>

*{ font-family: 'Open Sans', sans-serif; } .well { margin-top:-20px; background-color:#2e2a2d; border:2px solid #2C272A; text-align:center; cursor:pointer; font-size: 25px; padding: 15px; border-radius: 0px !important; color:#fbc725; } .well:hover { margin-top:-20px; background-color:#2e2a2d; border:2px solid #2C272A; text-align:center; cursor:pointer; font-size: 25px; padding: 15px; border-radius: 0px !important; border-bottom : 2px solid rgba(97, 203, 255, 0.65); } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #fff; background-color: #F1F1F1; } .bg_blur { background-image:url('http://ste.india.com/sites/default/files/2014/08/02/172471-dp-503.jpg'); height: 300px; background-size: cover; } .follow_btn { text-decoration: none; position: absolute; left: 35%; top: 42.5%; width: 35%; height: 15%; background-color: #007FBE; padding: 10px; padding-top: 6px; color: #fff; text-align: center; font-size: 20px; border: 4px solid #007FBE; } .follow_btn:hover { text-decoration: none; position: absolute; left: 35%; top: 42.5%; width: 35%; height: 15%; background-color: #007FBE; padding: 10px; padding-top: 6px; color: #fff; text-align: center; font-size: 20px; border: 4px solid rgba(255, 255, 255, 0.8); } .header{ color : #808080; margin-left:10%; margin-top:70px; } .picture{ height:150px; width:150px; position:absolute; top: 75px; left:-75px; } .picture_mob{ position: absolute; width: 35%; left: 35%; bottom: 70%; } .btn-style{ color: #fff; background-color: #007FBE; border-color: #adadad; width: 33.3%; } .btn-style:hover { color: #333; background-color: #3D5DE0; border-color: #adadad; width: 33.3%; } @media (max-width: 767px) { .header{ text-align : center; } .nav{ margin-top : 30px; } }