Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-49 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h1>
We Are The
<span class="text-bg1">Perfect</span>
<span class="text-bg2">Solution</span>
For Your Project
</h1>
<p>Creating an agency is a long-term commitment and requires hard work, dedication, and
patience. But with the right planning and execution, we can build a successful and thriving
agency.</p>
<div class="hero-bottom">
<a class="theme-btn" href="#">
Get Started
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071C11.9024 19.3166 11.9024 18.6834 12.2929 18.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L12.2929 5.70711C11.9024 5.31658 11.9024 4.68342 12.2929 4.29289Z"
fill="#fff" />
</svg>
</a>
<ul>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-1.jpg" alt=""></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-2.jpg" alt=""></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-3.jpg" alt=""></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-4.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="right-area">
<div class="hero-thumb">
<div class="thumb-column-1">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/1-1.jpg" alt="">
</div>
<div class="thumb-column-2">
<img class="top-img" src="http://cdn.codemela.com/wp-content/uploads/2024/08/2.jpg" alt="">
<img class="bottom-img" src="http://cdn.codemela.com/wp-content/uploads/2024/08/3.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: middle;
}
.cm-item-49.hero-section {
padding: 120px 0 80px;
position: relative;
overflow: hidden;
}
.cm-item-49.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-49.hero-section .content-wrapper {
display: flex;
gap: 30px;
}
.cm-item-49.hero-section .content-wrapper .left-area {
width: 50%;
position: relative;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 {
color: #000B47;
font-size: 80px;
font-weight: 700;
margin-bottom: 25px;
position: relative;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg1 {
display: inline-block;
position: relative;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg1::after {
content: "";
background: #D0D8FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 301px;
width: 105%;
height: 70px;
z-index: -1;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg2 {
display: inline-block;
position: relative;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg2::after {
content: "";
background: #FFF2C2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 301px;
width: 105%;
height: 70px;
z-index: -1;
}
.cm-item-49.hero-section .content-wrapper .left-area p {
color: #525252;
font-size: 20px;
font-weight: 400;
line-height: 35px;
margin-bottom: 0;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom {
margin-top: 50px;
display: flex;
align-items: center;
gap: 40px;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom .theme-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 30px;
border: 0;
text-transform: capitalize;
z-index: 1;
position: relative;
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 35px;
border-radius: 10px;
background: #233FD6;
text-decoration: none;
transition: all .3s;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom .theme-btn:hover {
background: #1f39c0;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom ul {
display: flex;
align-items: center;
gap: 15px;
list-style: none;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom ul li {
border-radius: 100%;
width: 80px;
background-color: #E7EAFF;
padding: 5px;
margin: 0 2px;
}
.cm-item-49.hero-section .content-wrapper .right-area {
width: 50%;
overflow: hidden;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb {
display: flex;
align-items: center;
gap: 20px;
width: 610px;
height: 577px;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-1 {
max-width: 300px;
height: 100%;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-1 img {
max-width: 300px;
height: 100%;
border-bottom-left-radius: 150px;
border-top-right-radius: 150px;
object-fit: cover;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 {
display: flex;
gap: 20px;
flex-direction: column;
object-fit: cover;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 .top-img {
border-bottom-right-radius: 150px;
border-top-left-radius: 150px;
height: 280px;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 .bottom-img {
border-bottom-right-radius: 150px;
object-fit: cover;
}
@media (max-width: 600px) {
.cm-item-49.hero-section {
padding: 60px 0;
}
.cm-item-49.hero-section .content-wrapper {
display: block;
}
.cm-item-49.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 {
font-size: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg1::after {
height: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg2::after {
height: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area p {
font-size: 18px;
line-height: 20px;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom {
display: block;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom ul {
margin-top: 20px;
justify-content: center;
}
.cm-item-49.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb {
width: 100%;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-1 {
margin: 0 auto;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 {
display: none;
}
}
@media (min-width: 600px) and (max-width: 991px) {
.cm-item-49.hero-section {
padding: 60px 0;
}
.cm-item-49.hero-section .content-wrapper {
display: block;
}
.cm-item-49.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 {
font-size: 40px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg1::after {
height: 45px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg2::after {
height: 45px;
}
.cm-item-49.hero-section .content-wrapper .left-area p {
font-size: 18px;
line-height: 20px;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom {
display: block;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom ul {
margin-top: 20px;
justify-content: center;
}
.cm-item-49.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb {
width: 520px;
height: 540px;
margin: 0 auto;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-1 img {
max-width: 250px;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 .top-img{
border-bottom-right-radius: 0;
}
}
@media (min-width: 991px) and (max-width: 1300px){
.cm-item-49.hero-section .content-wrapper .left-area h1 {
font-size: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg1::after {
height: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area h1 .text-bg2::after {
height: 50px;
}
.cm-item-49.hero-section .content-wrapper .left-area p {
font-size: 18px;
line-height: 20px;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom {
display: block;
}
.cm-item-49.hero-section .content-wrapper .left-area .hero-bottom ul {
margin-top: 20px;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb {
width: 520px;
height: 540px;
margin: 0 auto;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-1 img {
max-width: 250px;
}
.cm-item-49.hero-section .content-wrapper .right-area .hero-thumb .thumb-column-2 .top-img{
border-bottom-right-radius: 0;
}
}
</style>