Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-21 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h6>
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/title_left.svg" alt="">
Growth Accel erato
</h6>
<h1>Transform Your Business Into Profession</h1>
<p>A business consultant is a professional who provides expert advice and
guidance to businesses on various aspects such</p>
<div class="btn-wrapper">
<a class="cm-btn-1" href="#">Learn More <img src="http://cdn.codemela.com/wp-content/uploads/2024/08/right-icon.svg" alt=""></a>
<a class="cm-btn-2" href="#">Our Services</a>
</div>
</div>
<div class="right-area">
<div class="hero-img-wrapper">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero_thumb_1_1.png" alt="">
</div>
<div class="hero-shape-1"></div>
<div class="hero-shape-2"></div>
<div class="hero-shape-3"></div>
<div class="hero-shape-4"></div>
<div class="hero-shape-5"></div>
</div>
</div>
</div>
<div class="hero-item-content">
<div class="hero-card-wrapper">
<div class="hero-card">
<div class="icon">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/1.svg" alt="">
</div>
<div class="desc">
<h4>Growth Acceler</h4>
<p>A business consultant</p>
</div>
</div>
<div class="hero-card">
<div class="icon">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/2.svg" alt="">
</div>
<div class="desc">
<h4>Growth Acceler</h4>
<p>Consultan professional</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cm-item-21.hero-section {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/08/hero_bg_1_1.png);
position: relative;
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
padding-top: 80px;
background-color: #EBF3EE;
}
.cm-item-21.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-21.hero-section .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.cm-item-21.hero-section .content-wrapper .left-area {
width: 50%;
}
.cm-item-21.hero-section .content-wrapper .left-area h6 {
color: #196164;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
font-size: 19px;
line-height: 23px;
position: relative;
margin-top: -0.28em;
margin-bottom: 25px;
}
.cm-item-21.hero-section .content-wrapper .left-area h1 {
font-size: 80px;
line-height: 1.2em;
}
.cm-item-21.hero-section .content-wrapper .left-area p {
font-size: 18px;
font-weight: 400;
margin-top: 20px;
margin-bottom: 40px;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1 {
position: relative;
z-index: 2;
display: inline-block;
border: none;
border-radius: 10px;
text-align: center;
background-color: #196164;
color: #fff;
font-weight: 600;
font-size: 16px;
text-transform: capitalize;
line-height: 1;
padding: 20px 30px;
overflow: hidden;
transition: 0.3s;
text-decoration: none;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1 img {
margin-left: 7px;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1::before {
content: "";
width: 50%;
height: 0;
background: #19352D;
border-radius: 10px 0 0 10px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: 0.3s;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1::after {
content: "";
width: 50%;
height: 0;
background: #19352D;
position: absolute;
top: auto;
left: auto;
bottom: 0;
right: 0;
z-index: -1;
transition: 0.3s;
border-radius: 0 10px 10px 0;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1:hover::before {
height: 100%;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-1:hover::after {
height: 100%;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2 {
position: relative;
z-index: 2;
display: inline-block;
border: 1px solid #196164;
border-radius: 10px;
text-align: center;
background-color: transparent;
color: #000;
font-weight: 600;
font-size: 16px;
text-transform: capitalize;
line-height: 1;
padding: 20px 30px;
overflow: hidden;
transition: 0.3s;
text-decoration: none;
margin-left: 20px;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2::before {
content: "";
width: 50%;
height: 0;
background: #196164;
border-radius: 10px 0 0 10px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: 0.3s;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2::after {
content: "";
width: 50%;
height: 0;
background: #196164;
position: absolute;
top: auto;
left: auto;
bottom: 0;
right: 0;
border-radius: 0 10px 10px 0;
z-index: -1;
transition: 0.3s;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2:hover {
color: #fff;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2:hover::before {
height: 100%;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2:hover::after {
height: 100%;
}
.cm-item-21.hero-section .content-wrapper .right-area {
width: 50%;
position: relative;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb {
position: relative;
width: 580px;
height: 641px;
display: block;
margin-left: auto;
clip-path: path("M580 352C580 511.61 450.163 641 290 641C129.837 641 0 511.61 0 352C0 192.39 145.337 0 305.5 0C465.663 0 580 192.39 580 352Z");
text-align: center;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
max-width: 100%;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-1 {
position: absolute;
bottom: 0px;
right: 0;
width: 585px;
height: 585px;
background: #fff;
border-radius: 50%;
z-index: -1;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-2 {
position: absolute;
top: 25%;
right: 14%;
width: 63.09px;
height: 63.09px;
border-radius: 50%;
background-color: #196164;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-3 {
position: absolute;
top: 33%;
left: 23%;
width: 40.56px;
height: 40.56px;
border-radius: 50%;
background-color: #196164;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-4 {
position: absolute;
left: 23%;
bottom: 22%;
width: 390px;
height: 390px;
background: #C4F500;
clip-path: path("M236.5 0L472.492 390H0.508072L236.5 0Z");
z-index: -1;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-5 {
position: absolute;
top: 43%;
left: 20%;
width: 63.07px;
height: 63.07px;
border: 0.612211px solid #196164;
transform: rotate(45deg);
animation: spin 15s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
.cm-item-21.hero-section .hero-item-content {
max-width: 630px;
margin-left: auto;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper {
position: relative;
display: flex;
justify-content: space-around;
background: #EBF3EE;
padding: 28px 28px 24px 28px;
border-radius: 13px;
z-index: 2;
margin-top: 28px;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper::before {
content: "";
width: calc(100% - 2px);
height: calc(100% - 2px);
position: absolute;
top: 1px;
left: 1px;
background-color: #EBF3EE;
z-index: -1;
border-radius: 13px;
transition: 0.4s ease-in-out;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper::after {
content: "";
position: absolute;
background-color: #EBF3EE;
border-radius: 13px;
transition: 0.4s ease-in-out;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(25, 97, 100, 0.47) 0%, rgba(255, 255, 255, 0) 80%);
z-index: -2;
top: 0;
left: 0;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper .hero-card {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper .hero-card .desc h4 {
font-size: 22px;
margin-bottom: 5px;
}
@media (max-width: 600px) {
.cm-item-21.hero-section .content-wrapper {
display: block;
}
.cm-item-21.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-21.hero-section .content-wrapper .left-area h6 {
justify-content: center;
margin-bottom: 10px;
}
.cm-item-21.hero-section .content-wrapper .left-area h1 {
font-size: 45px;
}
.cm-item-21.hero-section .content-wrapper .left-area .btn-wrapper .cm-btn-2{
margin-left: 0;
margin-top: 10px;
}
.cm-item-21.hero-section .content-wrapper .right-area {
width: 100%;
margin-top: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb {
width: 350px;
height: 350px;
margin: auto;
clip-path: none;
background-color: #fff;
border-radius: 50%;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-1 {
display: none;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-4{
display: none;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper{
display: block;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper .hero-card:not(:last-child){
margin-bottom: 20px;
}
}
@media (min-width: 600px) and (max-width: 768px){
.cm-item-21.hero-section .content-wrapper {
display: block;
}
.cm-item-21.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-21.hero-section .content-wrapper .left-area h6 {
justify-content: center;
margin-bottom: 10px;
}
.cm-item-21.hero-section .content-wrapper .left-area h1 {
font-size: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area {
width: 100%;
margin-top: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb {
width: 450px;
height: 450px;
margin: auto;
clip-path: none;
background-color: #fff;
border-radius: 50%;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-1 {
display: none;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-4{
display: none;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper{
display: block;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper .hero-card:not(:last-child){
margin-bottom: 20px;
}
}
@media (min-width: 768px) and (max-width: 991px){
.cm-item-21.hero-section .content-wrapper {
display: block;
}
.cm-item-21.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-21.hero-section .content-wrapper .left-area h6 {
justify-content: center;
margin-bottom: 10px;
}
.cm-item-21.hero-section .content-wrapper .left-area h1 {
font-size: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area {
width: 100%;
margin-top: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb {
width: 550px;
height: 550px;
margin: auto;
clip-path: none;
background-color: #fff;
border-radius: 50%;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-1 {
display: none;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-4{
display: none;
}
.cm-item-21.hero-section .hero-item-content .hero-card-wrapper .hero-card:not(:last-child){
margin-bottom: 20px;
}
}
@media (min-width: 992px) and (max-width: 1400px){
.cm-item-21.hero-section .content-wrapper .left-area h1 {
font-size: 50px;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-thumb {
width: 450px;
height: 450px;
margin: auto;
clip-path: none;
background-color: #fff;
border-radius: 50%;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-1 {
display: none;
}
.cm-item-21.hero-section .content-wrapper .right-area .hero-img-wrapper .hero-shape-4{
display: none;
}
}
</style>