Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-5 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="bg-shape">
<img class="hero-right-big-shape" src="http://cdn.codemela.com/wp-content/uploads/2024/07/hero-big-shape-right.png" alt="">
<img class="hero-icon-right" src="http://cdn.codemela.com/wp-content/uploads/2024/07/hero-icon-right.png" alt="">
<img class="hero-icon-left" src="http://cdn.codemela.com/wp-content/uploads/2024/07/hero-icon-left.png" alt="">
</div>
<div class="left-area">
<div class="heading-style">
<span></span>
<h6>About Our Company</h6>
</div>
<h1>Insurance That Fits <br><span> Your Lifestyle! </span></h1>
<p>Our dedicated team of experts is here to guide you through every step of the insurance journey,
ensuring you make informed choices. </p>
<div class="btn-wrapper">
<button class="common-btn">learn-more</button>
</div>
</div>
<div class="right-area">
<div class="banner-img">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/hero-banner.png" alt="">
</div>
<div class="happy-customer">
<h4><span class="counter">20</span><span>K+</span></h4>
<img class="client-img" src="http://cdn.codemela.com/wp-content/uploads/2024/07/Screenshot_27.png" alt="">
<p>Happy Customers</p>
</div>
<div class="stay-safe">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/stay-safe.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--cm-item-5-color-primary: #FF322E;
--cm-item-5-color-secondary: #14133B;
}
.cm-item-5.hero-section {
position: relative;
height: auto;
overflow: hidden;
background-color: #F4F5F9;
}
.cm-item-5.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper {
display: flex;
justify-content: space-between;
align-items: start;
padding: 80px 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area {
width: 48%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style {
display: flex;
align-items: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style h6 {
color: var(--cm-item-5-color-secondary);
font-size: 20px;
line-height: 26px;
font-weight: 700;
margin-left: 10px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style span {
position: relative;
display: block;
height: 2px;
background: var(--cm-item-5-color-primary);
width: 43px;
border-radius: 30px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style span::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8.24px;
height: 8.24px;
border-radius: 50%;
background: var(--cm-item-5-color-primary);
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style span::after {
content: '';
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid var(--cm-item-5-color-primary);
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 65px;
line-height: 67px;
color: cm=var(--cm-item-5-color-secondary);
font-weight: 700;
margin-top: 25px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area h1 span {
color: var(--cm-item-5-color-primary);
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area p {
margin: 40px 0;
color: #7A7A7A;
line-height: 26px;
font-size: 18px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .common-btn {
background-color: var(--cm-item-5-color-primary);
font-size: 15px;
color: #fff;
font-weight: 700;
padding: 15px 40px;
text-transform: uppercase;
border-radius: 0;
border: 1px solid transparent;
transition: .4s all ease-in-out;
text-decoration: none;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .common-btn:hover {
background-color: transparent;
color: var(--cm-item-5-color-primary);
border: 1px solid var(--cm-item-5-color-primary);
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area {
width: 48%;
position: relative;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .banner-img {
text-align: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .banner-img img {
max-width: 450px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer {
width: 192px;
height: 206px;
background: url(http://cdn.codemela.com/wp-content/uploads/2024/07/happy-customer-bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
position: absolute;
bottom: 20px;
left: 0;
z-index: 3;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer h4 {
font-size: 22px;
font-weight: 700;
color: var(--cm-item-5-color-secondary);
margin: 30px 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer ul {
display: flex;
align-items: center;
list-style: none;
justify-content: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer .client-img {
width: 150px;
margin: 0 auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer p {
margin-top: 15px;
font-weight: 700;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .stay-safe {
position: absolute;
top: 15%;
left: 0;
z-index: 3;
height: 115px;
width: 115px;
background: var(--cm-item-5-color-primary);
border-radius: 50% 50% 0 50%;
border: 3px solid #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .stay-safe img {
max-width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-right-big-shape {
position: absolute;
right: 0;
bottom: 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-right {
position: absolute;
right: 10px;
bottom: 50px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-left {
position: absolute;
bottom: 0;
left: 22px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-left {
width: 250px;
}
@media (max-width: 600px) {
.cm-item-5.hero-section {
height: auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper {
display: flex;
flex-direction: column-reverse;
padding: 40px 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area {
width: 100%;
margin-top: 40px;
text-align: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area {
width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-right-big-shape {
display: none;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-left {
display: none;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .banner-img img {
max-width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .stay-safe {
height: 90px;
width: 90px;
top: 10%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer {
width: 150px;
height: 150px;
bottom: 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer h4 {
margin: 15px 0;
font-size: 16px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer .client-img {
width: 120px;
margin: 0 auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer p {
font-size: 13px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style {
justify-content: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 35px;
line-height: 40px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area p {
margin: 20px 0;
font-size: 15px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .common-btn {
font-size: 13px;
padding: 15px 30px;
}
}
@media (min-width:600px) and (max-width: 767px) {
.cm-item-5.hero-section {
height: auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper {
display: flex;
flex-direction: column-reverse;
padding: 40px 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area {
width: 100%;
margin-top: 40px;
text-align: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area {
width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .banner-img img {
max-width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-right-big-shape {
display: none;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-left {
display: none;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .stay-safe {
height: 100px;
width: 100px;
top: 10%;
left: 50px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer {
width: 170px;
height: 170px;
bottom: 10px;
left: 20px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer h4 {
margin: 15px 0;
font-size: 16px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer .client-img {
width: 120px;
margin: 0 auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer p {
font-size: 13px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .heading-style {
justify-content: center;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 38px;
line-height: 42px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area p {
margin: 20px 0;
font-size: 15px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .common-btn {
font-size: 13px;
padding: 15px 30px;
}
}
@media (min-width:767px) and (max-width: 1020px) {
.cm-item-5.hero-section {
height: auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-right-big-shape {
width: 72%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-left {
width: 150px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .bg-shape .hero-icon-right {
width: 100px;
bottom: 20px;
right: 30px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .banner-img img {
max-width: 100%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 38px;
line-height: 42px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area p {
font-size: 16px;
margin: 20px 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .common-btn {
font-size: 13px;
padding: 15px 20px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .stay-safe {
height: 90px;
width: 90px;
top: 10%;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer {
width: 150px;
height: 150px;
bottom: 0;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer h4 {
margin: 15px 0;
font-size: 16px;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer .client-img {
width: 120px;
margin: 0 auto;
}
.cm-item-5.hero-section .hero-container .content-wrapper .right-area .happy-customer p {
font-size: 13px;
}
}
</style>