<section>
<div class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6 pull-left">
<h1>About property villa</h1>
<h4>
lorem ipsuim dolor sit amet, consectetur adipiscinc elit. licula convallis, vel tincidunt ipsum posuere
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipicing elit.Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere, Fusce sodales lacus ut pellentes sollicitudin. Duis iaculis, arcu ut hendrit pharetra,elit augue pulvinar magna,a consectetur eros quam eu orci.
</p>
<a class="btn btn-primary" href="#" >about us more</a>
</div>
<div class="col-lg-6 pull-left">
<ul>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/property_icon.png" alt="home">
<figcaption>Property Age</figcaption>
</figure>
<h3>Built Year</h3>
<h2>2015</h2>
</li>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/sq_ft.png" alt="sqft">
<figcaption>IN Sq.ft</figcaption>
</figure>
<h3>area</h3>
<h2>2790</h2>
</li>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/bed.png" alt="bed">
<figcaption>Number of</figcaption>
</figure>
<h3>Bedroom</h3>
<h2>3</h2>
</li>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/bath.png" alt="bathroom" class="bottom">
<figcaption>Number of</figcaption>
</figure>
<h3>Bathroom</h3>
<h2>3</h2>
</li>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/floor.png" alt="floor" class="bottom">
<figcaption>Total</figcaption>
</figure>
<h3>Floors</h3>
<h2>2</h2>
</li>
<li>
<figure>
<img src="https://www.tolmatol.com/uploads-images/free-bootstrap-about-snippets/garage.png" alt="garage" class="bottom">
<figcaption>Parking</figcaption>
</figure>
<h3>Garage</h3>
<h2>1</h2>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.about-section {
min-height: 615px;
width: 100%;
float: left;
padding-top: 120px;
}
.about-section h1 {
margin-top: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 27px;
text-transform: uppercase;
color: #435061;
font-weight: bold;
position: relative;
}
.about-section h1::before {
background: #238eca none repeat scroll 0 0;
bottom: -20px;
content: "";
height: 3px;
position: absolute;
width: 50px;
}
.about-section h4 {
margin-top: 38px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #7e8c99;
font-weight: bold;
line-height: 1.9;
margin-bottom: 10px;
}
.about-section p {
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #7e8c99;
line-height: 1.9;
margin-top: 5px;
}
.about-section ul {
margin: 0px;
padding: 0px;
list-style: none;
width: 550px;
margin: auto;
}
.about-section ul li {
display: inline-block;
height: 185px;
text-align: center;
width: 180px;
float: left;
}
.about-section ul li img {
margin-top: 5px;
width: 32px;
height: 32px;
}
.about-section ul li .bottom {
margin-top: 45px;
}
.about-section ul li {
border-right: 1px solid #e1e6ec;
}
.about-section ul li:nth-child(1), .about-section ul li:nth-child(2), .about-section ul li:nth-child(3) {
border-bottom: 1px solid #e1e6ec;
}
.about-section ul li:last-child, .about-section ul li:nth-child(3) {
border-right: none;
}
.about-section ul li figcaption {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #7e8c99;
line-height: 3;
text-transform: uppercase;
margin-top: 5px;
}
.about-section ul li h3 {
margin-top: 0px;
text-transform: uppercase;
color: #435061;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px
}
.about-section ul li h2 {
color: #435061;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: 0px;
}
@media screen and (max-width: 639px) {
.about-section ul li {
border: none !important;
width: 100%;
}
}
</style>
