Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-39 hero-section">
<div class="hero-shade-1"></div>
<div class="hero-shade-2"></div>
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h1>
Creative
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/pie-icon.svg" alt=""> Digital
Agency for Mindful New Brands!
</h1>
<p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus eget
ultrices pretium amet facilisis vulputate cursus vivamus.</p>
<a class="theme-btn" href="#">Get Started</a>
</div>
<div class="right-area">
<div class="hero-thumb-icons">
<img class="hero-thumb-icon-1" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-1.svg" alt="">
<img class="hero-thumb-icon-2" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-2.svg" alt="">
<img class="hero-thumb-icon-3" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-3.svg" alt="">
<img class="hero-thumb-icon-4" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-4.svg" alt="">
<img class="hero-thumb-icon-5" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-5.svg" alt="">
<img class="hero-thumb-icon-6" src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-icon-6.png" alt="">
</div>
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero-right-image.png" alt="">
</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-39.hero-section {
padding: 100px 0 70px;
overflow: hidden;
position: relative;
}
.cm-item-39.hero-section .hero-shade-1 {
position: absolute;
background: linear-gradient(209.85deg, rgba(128, 0, 255, 0.3) 18.23%, rgba(143, 0, 255, 0) 96.18%);
position: absolute;
width: 557px;
height: 557px;
right: 0;
top: -57px;
filter: blur(150px);
z-index: -1;
border-radius: 50%;
}
.cm-item-39.hero-section .hero-shade-2 {
position: absolute;
background: linear-gradient(209.85deg, rgba(0, 255, 25, 0.3) 18.23%, rgba(143, 0, 255, 0) 96.18%);
filter: blur(150px);
bottom: 0;
left: -36px;
width: 557px;
height: 557px;
filter: blur(150px);
z-index: -1;
border-radius: 50%;
}
.cm-item-39.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-39.hero-section .content-wrapper {
display: flex;
gap: 50px;
align-items: center;
}
.cm-item-39.hero-section .content-wrapper .left-area {
width: 50%;
position: relative;
}
.cm-item-39.hero-section .content-wrapper .left-area h1 {
font-size: 60px;
color: #000248;
margin-bottom: 30px;
}
.cm-item-39.hero-section .content-wrapper .left-area p {
font-size: 20px;
margin-bottom: 40px;
color: #757589;
}
.cm-item-39.hero-section .content-wrapper .left-area .theme-btn {
background: #ff2759;
border-radius: 10px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 600;
letter-spacing: 0px;
line-height: 1;
margin-bottom: 0;
padding: 17px 29px;
text-align: center;
text-transform: capitalize;
transition: all 0.4s ease-out 0s;
position: relative;
z-index: 1;
overflow: hidden;
text-decoration: none;
}
.cm-item-39.hero-section .content-wrapper .left-area .theme-btn::before {
position: absolute;
content: "";
width: 19px;
height: 19px;
background-color: #e81244;
border-radius: 50%;
right: 0;
bottom: 0;
transition: all 0.4s ease-out 0s;
z-index: -1;
transform: scale(1) rotate(0);
}
.cm-item-39.hero-section .content-wrapper .left-area .theme-btn:hover::before {
transition: all 0.6s ease-out 0s;
transform: scale(25) rotate(180deg);
}
.cm-item-39.hero-section .content-wrapper .right-area {
width: 50%;
position: relative;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-1 {
position: absolute;
top: 147px;
left: 117px;
border-radius: 50%;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-2 {
position: absolute;
top: 29px;
left: 82px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-3 {
position: absolute;
top: -9px;
left: 228px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-4 {
position: absolute;
top: 81px;
left: 195px;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-5 {
position: absolute;
top: -29px;
left: 477px;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons .hero-thumb-icon-6 {
position: absolute;
top: 105px;
right: 10px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
@media (max-width: 600px){
.cm-item-39.hero-section{
padding: 60px 0;
}
.cm-item-39.hero-section .content-wrapper{
display: block;
}
.cm-item-39.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-39.hero-section .content-wrapper .left-area h1{
font-size: 35px;
}
.cm-item-39.hero-section .content-wrapper .left-area h1 img{
max-width: 40px;
}
.cm-item-39.hero-section .content-wrapper .left-area p {
font-size: 18px;
}
.cm-item-39.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
.cm-item-39.hero-section .content-wrapper .right-area .hero-thumb-icons{
display: none;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-39.hero-section{
padding: 60px 0;
}
.cm-item-39.hero-section .content-wrapper{
display: block;
}
.cm-item-39.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-39.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-39.hero-section .content-wrapper .left-area h1{
font-size: 35px;
}
.cm-item-39.hero-section .content-wrapper .left-area h1 img{
max-width: 40px;
}
.cm-item-39.hero-section .content-wrapper .left-area p {
font-size: 18px;
}
}
</style>