"Profile Box"
Bootstrap 3.2.0 Snippet by pvbbogdan

<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"> <div class="col-md-4 bg_blur "> <img src="http://data2.whicdn.com/images/139218968/large.jpg" class="img-thumbnail"/> </div> <div class="col-md-8 col-xs-12"> <div class="header"> <h1>LOUTANIS HOTEL</h1> <p>Hotelul Loutanis este situat in statiunea Kolymbia, la aproximativ 23 km fata de Rodos, 12 km fata de Faliraki si 6 km fata de Golful Afandou. Distanta fata de plaja din Afandou este de 600 m, iar fata de cea din Kolymbia este de 700 m. Oaspeţii beneficiază de transfer gratuit la plajele Limanaki și Kolymbia din apropiere. Copiii au la dispoziţie o piscină pentru copii și un loc de joacă. A/C contra cost: 5 euro/camera/noapte.</p> </div> <div class="row nav"> <div class="col-md-12"> <div class="col-md-4 col-xs-4 well"><i class="fa fa-weixin fa-lg"></i> 16</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-heart-o fa-lg"></i> 14</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-thumbs-o-up fa-lg"></i> 26</div> </div> </div> </div> </div>
*{ font-family: 'Open Sans', sans-serif; } .well { background-color:#007FBD; border:2px solid #0077B2; text-align:center; cursor:pointer; font-size: 25px; padding: 15px; border-radius: 0px !important; } .well:hover { background-color:#0077B2; border:2px solid #0077B2; 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 { margin-left:-15px; background-size: cover; } .header{ color : #808080; margin-left:10%; margin-top:70px; } .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; } }

Related: See More


Questions / Comments: