<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 ----------> <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"> <div class="col-md-4 bg_blur "> <a href="#" class="follow_btn hidden-xs"><i class="fa fa-share"></i> Share</a> </div> <div class="col-md-8 col-xs-12"> <img src="http://us.battle.net/static-render/us/emerald-dream/130/90867842-avatar.jpg" class="img-thumbnail picture hidden-xs" /> <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail visible-xs picture_mob" /> <div class="header"> <h1>Carilliya</h1> <h4>Emerald Dream</h4> <span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span> </div> </div> </div> <div class="row nav"> <div class="col-md-4"></div> <div class="col-md-8 col-xs-12" style="margin: 0px;padding: 0px;"> <div class="col-md-4 col-xs-4 well"><i class="fa fa-star fa-lg"></i> Level 66</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-flag fa-lg"></i> 855 Achievements pts</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-bullseye fa-lg"></i> 134 hon. kills</div> </div> </div> </div>

*{ font-family: 'Open Sans', sans-serif; } .well { margin-top:-20px; background-color:#007FBD; border:2px solid #0077B2; text-align:center; cursor:pointer; font-size: 16px; padding: 15px; border-radius: 0px !important; } .well:hover { margin-top:-20px; background-color:#0077B2; border:2px solid #0077B2; text-align:center; cursor:pointer; 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://data2.whicdn.com/images/139218968/large.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: 18px; 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; 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; } }