Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-53 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h5>Business Advisor</h5>
<h1>Grow business <br>with grat <span class="relative">advice</span></h1>
<p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret
suitable he followed speedily.</p>
<a class="theme-btn" href="#">Get Started</a>
</div>
<div class="right-area">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/09/2.jpg" alt="">
</div>
<div class="grow-graph">
<h6>Profit $23,600</h6>
<img src="http://cdn.codemela.com/wp-content/uploads/2024/09/7.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-53.hero-section {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/09/5.png);
background-position: center top;
padding: 100px 0 80px;
background-repeat: no-repeat;
position: relative;
width: 100%;
overflow: hidden;
background-size: 100%;
}
.cm-item-53.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-53.hero-section .content-wrapper {
display: flex;
align-items: center;
}
.cm-item-53.hero-section .content-wrapper .left-area {
width: 50%;
}
.cm-item-53.hero-section .content-wrapper .left-area h5 {
font-size: 22px;
line-height: 1.2;
margin-bottom: 15px;
}
.cm-item-53.hero-section .content-wrapper .left-area h1 {
font-size: 70px;
line-height: 1;
margin-bottom: 30px;
}
.cm-item-53.hero-section .content-wrapper .left-area h1 span {
display: inline-block;
position: relative;
}
.cm-item-53.hero-section .content-wrapper .left-area h1 span::before {
content: '';
position: absolute;
background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/09/6-1.png);
width: 100%;
height: 30px;
left: 3px;
bottom: -15px;
background-repeat: no-repeat;
z-index: -1;
}
.cm-item-53.hero-section .content-wrapper .left-area p {
margin-bottom: 25px;
color: #666666;
font-size: 17px;
}
.cm-item-53.hero-section .content-wrapper .left-area .theme-btn {
padding: 18px 52px;
font-size: 16px;
background-color: #246bfd;
color: #fff;
border-radius: 30px;
display: inline-block;
position: relative;
margin-top: 20px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
overflow: hidden;
z-index: 1;
transition: all 0.35s ease-in-out;
}
.cm-item-53.hero-section .content-wrapper .left-area .theme-btn::after {
content: "";
position: absolute;
top: inherit;
right: inherit;
bottom: inherit;
left: -5%;
height: 150px;
width: 115%;
z-index: -999;
background-color: #1f2b38;
transition: all 0.25s ease-in-out;
transform: translateY(-45%) skew(25deg) scale(0);
}
.cm-item-53.hero-section .content-wrapper .left-area .theme-btn:hover::after {
transform: translateY(-45%) skew(25deg) scale(1.2);
}
.cm-item-53.hero-section .content-wrapper .right-area {
width: 50%;
padding-left: 60px;
position: relative;
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb {
position: relative;
z-index: 1;
border-radius: 50%;
background: #f9f9f9;
padding: 20px;
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb img {
border-radius: 50%;
padding: 30px;
background: #fff;
}
.cm-item-53.hero-section .content-wrapper .right-area .grow-graph {
background: #fff;
box-shadow: 0 25px 70px rgb(0 0 0 / 7%);
text-align: center;
width: auto;
display: inline-block;
padding: 30px;
border-radius: 30px;
position: absolute;
right: -50px;
bottom: 60px;
padding-bottom: 15px;
padding-top: 40px;
z-index: 999;
}
.cm-item-53.hero-section .content-wrapper .right-area .grow-graph h6 {
background: linear-gradient(90deg, #246BFD 0%, #3e00a7 100%);
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 30px;
color: #fff;
margin-bottom: 20px;
}
.cm-item-53.hero-section .content-wrapper .right-area .grow-graph img {
height: 100px;
}
@media (max-width: 600px) {
.cm-item-53.hero-section {
background: linear-gradient(90deg, #246BFD 0%, #3e00a7 100%);
}
.cm-item-53.hero-section .content-wrapper {
display: block;
}
.cm-item-53.hero-section .content-wrapper .left-area {
width: 100%;
color: #fff;
text-align: center;
}
.cm-item-53.hero-section .content-wrapper .left-area h1 {
font-size: 40px;
}
.cm-item-53.hero-section .content-wrapper .left-area p {
color: #fff;
}
.cm-item-53.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
padding: 0;
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb {
margin-top: 50px;
background: rgba(255, 255, 255, 0.2);
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb img {
background: rgba(0, 0, 0, 0.3);
}
.cm-item-53.hero-section .content-wrapper .right-area .grow-graph {
display: none;
}
}
@media (min-width: 600px) and (max-width: 767px) {
.cm-item-53.hero-section {
background: linear-gradient(90deg, #246BFD 0%, #3e00a7 100%);
}
.cm-item-53.hero-section .content-wrapper {
display: block;
}
.cm-item-53.hero-section .content-wrapper .left-area {
width: 100%;
color: #fff;
text-align: center;
}
.cm-item-53.hero-section .content-wrapper .left-area p {
color: #fff;
}
.cm-item-53.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
padding: 0;
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb {
margin-top: 50px;
background: rgba(255, 255, 255, 0.2);
}
.cm-item-53.hero-section .content-wrapper .right-area .hero-thumb img {
background: rgba(0, 0, 0, 0.3);
}
}
@media (min-width: 767px) and (max-width: 991px){
.cm-item-53.hero-section .content-wrapper {
display: block;
}
.cm-item-53.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-53.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
padding: 0;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-53.hero-section .content-wrapper .left-area h1 {
font-size: 40px;
}
.cm-item-53.hero-section .content-wrapper .right-area .grow-graph {
display: none;
}
.cm-item-53.hero-section .content-wrapper .right-area{
padding: 0;
}
}
</style>