Style 1
Save Nature
The point is to accomplish an economy that is as one with nature and the climate.
Join Volunteer
The point is to accomplish an economy that is as one with nature and the climate.
<div class="row position-relative z-index-9 mt-n1-9">
<div class="col-md-6 mt-1-9">
<div class="card card-style4 bg-light border-radius-10">
<div class="card-body text-center py-1-9 py-sm-5 px-1-9">
<div class="features-icon position-relative mb-4 d-inline-block">
<img src="img/icons/icon-01.png" alt="...">
</div>
<h3 class="h5">Save Nature</h3>
<p class="mb-0"> The point is to accomplish an economy that is as one with nature and the climate.</p>
</div>
</div>
</div>
<div class="col-md-6 mt-1-9">
<div class="card card-style4 bg-light border-radius-10">
<div class="card-body text-center py-1-9 py-sm-5 px-1-9">
<div class="features-icon position-relative mb-4 d-inline-block">
<img src="img/icons/icon-02.png" alt="...">
</div>
<h3 class="h5">Join Volunteer</h3>
<p class="mb-0"> The point is to accomplish an economy that is as one with nature and the climate.</p>
</div>
</div>
</div>
</div>
Style 2
Recycle Project
Tree Plantation
Charity For Live
<div class="bg-dark p-1-9">
<div class="row mt-n1-9">
<div class="col-sm-6 col-lg mt-1-9">
<div class="card card-style5 text-center border-0">
<div class="card-body p-5">
<img src="img/icons/icon-14.png" alt="..." class="mb-4">
<h3 class="h5 mb-0 text-white">Recycle Project</h3>
</div>
</div>
</div>
<div class="col-sm-6 col-lg mt-1-9">
<div class="card card-style5 text-center border-0">
<div class="card-body p-5">
<img src="img/icons/icon-15.png" alt="..." class="mb-4">
<h3 class="h5 mb-0 text-white">Tree Plantation</h3>
</div>
</div>
</div>
<div class="col-sm-6 col-lg mt-1-9">
<div class="card card-style5 text-center border-0">
<div class="card-body p-5">
<img src="img/icons/icon-16.png" alt="..." class="mb-4">
<h3 class="h5 mb-0 text-white">Charity For Live</h3>
</div>
</div>
</div>
</div>
</div>
Style 3
- info@example.com
- (+44) 123 456 789
- 66 Guild Street 512B, Great North Town.
<ul class="list-unstyled mb-1-9">
<li class="mb-3 d-flex align-items-baseline">
<a href="#!" class="text-primary-hover"><i class="far fa-envelope text-primary display-25 me-4"></i>info@example.com</a>
</li>
<li class="mb-3 d-flex align-items-baseline">
<a href="#!" class="text-primary-hover"><i class="fas fa-mobile-alt text-primary display-25 me-4"></i>(+44) 123 456 789</a>
</li>
<li class="d-flex align-items-baseline">
<i class="fas fa-map-marker-alt text-primary display-25 me-4"></i>66 Guild Street 512B, Great North Town.
</li>
</ul>
Style 4
+1 (888) 123-5678
(+44) 123 456 789
info@example.com
contact@example.com
<div class="contact-info second-info">
<div class="row mt-n1-9">
<div class="col-lg-6 mt-1-9">
<div class="border py-1-9 pe-1-9 ps-1-9 ps-sm-6 border-radius-10">
<div class="d-flex">
<div class="flex-shrink-0 icon position-relative">
<i class="fa fa-phone text-primary fs-1 pt-3 ps-2"></i>
</div>
<div class="flex-grow-1 ps-4">
<span class="d-block mb-1">+1 (888) 123-5678</span>
<span>(+44) 123 456 789</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6 mt-1-9">
<div class="border py-1-9 pe-1-9 ps-1-9 ps-sm-6 border-radius-10">
<div class="d-flex">
<div class="flex-shrink-0 icon position-relative">
<i class="far fa-envelope-open text-primary fs-1 pt-3 ps-2"></i>
</div>
<div class="flex-grow-1 ps-4">
<span class="d-block mb-1">info@example.com</span>
<span>contact@example.com</span>
</div>
</div>
</div>
</div>
</div>
</div>