Style 1
Flexible private offices
Fully custom spaces
<div class="row mb-2-9 mt-n1-9">
<div class="col-sm-6 mt-1-9">
<div class="d-flex align-items-center me-md-1-9 me-lg-0">
<div class="flex-shrink-0 me-4">
<img src="img/icons/icon-01.png" alt="...">
</div>
<div class="flex-grow-1">
<h3 class="h5 mb-0 font-weight-700">Flexible private offices</h3>
</div>
</div>
</div>
<div class="col-sm-6 mt-1-9">
<div class="d-flex align-items-center me-md-1-9 me-lg-0">
<div class="flex-shrink-0 me-4">
<img src="img/icons/icon-02.png" alt="...">
</div>
<div class="flex-grow-1">
<h3 class="h5 mb-0 font-weight-700">Fully custom spaces</h3>
</div>
</div>
</div>
</div>
Style 2
High-Speed Internet
24 Hr Access
Meeting & Conference
<div class="bg-secondary p-1-9">
<div class="row mt-n1-9 g-xxl-5 justify-content-center">
<div class="col-sm-6 col-xl-4 mt-1-9">
<div class="card card-style2 dark border-0 rounded-0">
<div class="card-body position-relative z-index-9">
<div class="d-flex align-items-center">
<img src="img/icons/icon-03.png" alt="..." class="me-4">
<h3 class="h5 mb-0 text-white">High-Speed Internet</h3>
</div>
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4 mt-1-9">
<div class="card card-style2 dark border-0 rounded-0">
<div class="card-body position-relative z-index-9">
<div class="d-flex align-items-center">
<img src="img/icons/icon-04.png" alt="..." class="me-4">
<h3 class="h5 mb-0 text-white">24 Hr Access</h3>
</div>
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4 mt-1-9">
<div class="card card-style2 dark border-0 rounded-0">
<div class="card-body position-relative z-index-9">
<div class="d-flex align-items-center">
<img src="img/icons/icon-05.png" alt="..." class="me-4">
<h3 class="h5 mb-0 text-white">Meeting & Conference</h3>
</div>
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
</div>
</div>
</div>
</div>
Style 3
<div class="bg-secondary p-1-9">
<ul class="footer-list mb-0">
<li class="py-2"><i class="ti-mobile text-primary display-28 me-3"></i>(+44) 123 456 789</li>
<li class="py-2"><i class="ti-email text-primary display-28 me-3"></i>info@example.com</li>
<li class="py-2"><i class="ti-location-pin text-primary display-28 me-3"></i>66 Guild Street, North Town.</li>
</ul>
</div>
Style 4
01
Choose Service
New features is exactly what our business has been lacking.
02
Fill Booking Form
New features is exactly what our business has been lacking.
03
Confirmation
New features is exactly what our business has been lacking.
<div class="row mt-n1-9 g-lg-0">
<div class="col-sm-6 col-lg-4 mt-1-9">
<div class="process-style1">
<div class="mb-1-6 mb-lg-2-2">
<img src="img/icons/icon-11.png" alt="...">
</div>
<div class="process-content">
<div class="process-count position-relative">
<span>01</span>
<div class="line"></div>
</div>
<h4 class="h5">Choose Service</h4>
<p class="mb-0 display-30 w-90 w-lg-80">New features is exactly what our business has been lacking.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mt-1-9">
<div class="process-style1">
<div class="mb-1-6 mb-lg-2-2">
<img src="img/icons/icon-12.png" alt="...">
</div>
<div class="process-content">
<div class="process-count position-relative">
<span>02</span>
<div class="line"></div>
</div>
<h4 class="h5">Fill Booking Form</h4>
<p class="mb-0 display-30 w-90 w-lg-80">New features is exactly what our business has been lacking.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mt-1-9">
<div class="process-style1">
<div class="mb-1-6 mb-lg-2-2">
<img src="img/icons/icon-13.png" alt="...">
</div>
<div class="process-content">
<div class="process-count position-relative">
<span>03</span>
<div class="line"></div>
</div>
<h4 class="h5">Confirmation</h4>
<p class="mb-0 display-30 w-90 w-lg-80">New features is exactly what our business has been lacking.</p>
</div>
</div>
</div>
</div>