<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 ---------->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box">
<div class="box-icon">
<span class="fa fa-4x fa-html5"></span>
</div>
<div class="info">
<h4 class="text-center">Title</h4>
<table style="width: 100%;">
<tr>
<td style="width: 50%;" class="text-center">
ul. Przykładowa 1<br>
00-000 Miasto<br>
woj. pomorskie<br>
<p class="text-uppercase">Polska</p>
</td>
<td style="width: 50%;" class="text-center">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 000-000-000<br>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="#"> mail@mail.com</a><br>
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span><a href="#"> www.strona.com</a><br>
</td>
</tr>
<tr>
<td colspan="2">
<strong>Opis</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla
dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!</p>
</td>
</tr>
<tr>
<td colspan="2">
<strong>Mapa</strong><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9288.915170145243!2d18.630859049999998!3d54.40593575!2m3!1f0!2f
0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1486854841803" width="500" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body {
padding-top: 50px;
color: #717171;
font-size: 16px;
text-align: justify;
padding-bottom: 50px;
}
.box {
padding: 10px 25px;
margin: 0px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #428bca;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin-top: 80px;
}
.box-icon {
background-color: #428bca;
border-radius: 50%;
display: table;
height: 180px;
margin: 0 auto;
width: 180px;
margin-top: -110px;
}
.box-icon span {
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.info h4 {
font-size: 26px;
letter-spacing: 2px;
text-transform: uppercase;
}
.info > p {
color: #717171;
font-size: 16px;
padding-top: 10px;
text-align: justify;
}
.info > a {
background-color: #428bca;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: #fff;
transition: all 0.5s ease 0s;
}
.info > a:hover {
background-color: #0288d1;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
color: #fff;
transition: all 0.5s ease 0s;
}
