Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-15 hero-section">
<div class="hero-container">
<div class="hero-shape">
<div class="hero-shape-1">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/banner-three__shape1.png" alt="">
</div>
<div class="hero-shape-2">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/banner-three__shape2.png" alt="">
</div>
<div class="hero-shape-3">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/banner-three__shape3.png" alt="">
</div>
</div>
<div class="content-wrapper">
<div class="left-area">
<h6>Welcome To Diligent</h6>
<h1>Digital agency for growth</h1>
<p>There are many variations of passages of available, but the
majority have suffered alterationd.</p>
<a class="cm-btn" href="#">get started</a>
</div>
<div class="right-area">
<div class="hero-img-1">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/banner-three__img1-1.jpg" alt="">
</div>
<div class="hero-img-2">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/banner-three__img2.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cm-item-15.hero-section {
position: relative;
display: block;
background-color: #F6FAE7;
padding: 100px 0;
overflow: hidden;
z-index: 10;
}
.cm-item-15.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-15.hero-section .hero-container .hero-shape .hero-shape-1 {
position: absolute;
top: 130px;
left: 80px;
z-index: 1;
animation-name: cm-left-right-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes cm-left-right-animation {
0% {
transform: translateX(20px);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(20px);
}
}
.cm-item-15.hero-section .hero-container .hero-shape .hero-shape-2 {
position: absolute;
top: 75px;
right: 285px;
z-index: 1;
animation-name: cm-up-down-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes cm-up-down-animation {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(-20px);
}
}
.cm-item-15.hero-section .hero-container .hero-shape .hero-shape-3 {
position: absolute;
left: 45%;
bottom: 130px;
animation-name: cm-up-down-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.cm-item-15.hero-section .hero-container .content-wrapper {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: -140px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area {
position: relative;
width: 45%;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area h6 {
position: relative;
display: inline-block;
background: linear-gradient(90deg, #CAF333 0%, rgba(202, 243, 51, 0.00) 86.35%);
padding-left: 10px;
margin-bottom: 9px;
font-size: 25px;
line-height: 45px;
font-weight: 600;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 88px;
line-height: 1.3em;
font-weight: 700;
text-transform: capitalize;
margin: 20px 0;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area p {
color: rgb(20, 20, 20, 0.8);
font-size: 20px;
line-height: 30px;
font-weight: 500;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area .cm-btn {
position: relative;
display: inline-flex;
align-items: center;
overflow: hidden;
padding: 10px 40px;
background-color: #000;
color: #fff;
font-size: 18px;
line-height: 40px;
text-transform: capitalize;
text-decoration: none;
margin-top: 20px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area .cm-btn:hover {
background-color: #CAF333;
color: #000;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area {
position: relative;
display: flex;
gap: 20px;
width: 52%;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area .hero-img-1 {
position: relative;
display: block;
overflow: hidden;
border-radius: 300px;
background: linear-gradient(180deg, rgba(202, 243, 51, 0.30) 0%, rgba(202, 243, 51, 0.00) 78.09%);
padding: 24px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area .hero-img-1 img {
border-radius: 300px;
max-width: 100%;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area .hero-img-2 {
position: relative;
display: block;
overflow: hidden;
border-radius: 200px;
background: linear-gradient(180deg, rgba(202, 243, 51, 0.00) 24.55%, rgba(202, 243, 51, 0.28) 100%);
padding: 24px;
margin-top: auto;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area .hero-img-2 img {
border-radius: 200px;
max-width: 100%;
}
@media (max-width: 600px) {
.cm-item-15.hero-section .hero-container .hero-shape-1,
.hero-shape-2,
.hero-shape-3 {
display: none;
}
.cm-item-15.hero-section .hero-container .content-wrapper {
display: block;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area {
width: 100%;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area h6 {
font-size: 20px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 40px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area {
width: 100%;
margin-top: 50px;
overflow: hidden;
text-align: center;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area .hero-img-1 {
display: none;
}
}
@media (min-width: 601px) and (max-width: 1020px) {
.cm-item-15.hero-section .hero-container .content-wrapper {
display: block;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area {
width: 100%;
}
.cm-item-15.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 60px;
}
.cm-item-15.hero-section .hero-container .content-wrapper .right-area {
width: 100%;
margin-top: 50px;
overflow: hidden;
text-align: center;
}
}
</style>