Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-30 hero-section">
<div class="bubbles-area">
<div class="bubble bubbles-1"></div>
<div class="bubble bubbles-2"></div>
<div class="bubble bubbles-3"></div>
<div class="bubble bubbles-4"></div>
<div class="bubble bubbles-5"></div>
<div class="bubble bubbles-6"></div>
<div class="bubble bubbles-7"></div>
<div class="bubble bubbles-8"></div>
<div class="bubble bubbles-9"></div>
<div class="bubble bubbles-10"></div>
</div>
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h6>We Are Goclean!</h6>
<h1>Best Cleaning Service in Town!</h1>
<p>Goclean is professionalism in the cleaning industry by providing top-quality cleaning and related
services</p>
<a class="cm-btn" href="#">Our Services</a>
</div>
<div class="right-area">
<div class="hero-img">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/hero_banner_bg_1.png" alt="">
</div>
<div class="hero-img-info">
<h2>10</h2>
<p>Years of Experience</p>
</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-30.hero-section {
background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/08/Main_Background.png);
background-size: cover;
background-repeat: no-repeat;
padding: 0px 0px 79px;
z-index: 0;
overflow: hidden;
}
.cm-item-30.hero-section .bubbles-area .bubble {
height: 1px;
width: 1px;
position: absolute;
background: url(http://cdn.codemela.com/wp-content/uploads/2024/08/bubble_1.png) no-repeat center center;
background-size: cover;
border-radius: 50%;
transform: translateX(-50%);
pointer-events: none;
animation: animate 10s infinite ease-in -6.57s;
z-index: 111;
}
.cm-item-30.hero-section .bubbles-area .bubbles-1 {
bottom: -5px;
left: 68%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-2 {
bottom: -71px;
left: 95%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-3 {
bottom: -71px;
left: 43%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-4 {
bottom: -30px;
left: 82%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-5 {
bottom: -73px;
left: 29%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-6 {
bottom: -71px;
left: 41%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-7 {
bottom: -79px;
left: 14%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-8 {
bottom: -114px;
left: 90%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-9 {
bottom: -44px;
left: 33%;
}
.cm-item-30.hero-section .bubbles-area .bubbles-10 {
bottom: -30px;
left: 59%;
}
@keyframes animate {
0% {
transform: translate3d(-80%, 0, 0) rotate(70deg);
width: 35px;
height: 35px;
}
100% {
transform: translate3d(-80%, -800px, 0) rotate(360deg);
width: 75px;
height: 75px;
}
}
.cm-item-30.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-30.hero-section .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.cm-item-30.hero-section .content-wrapper .left-area {
width: 50%;
}
.cm-item-30.hero-section .content-wrapper .left-area h6 {
font-size: 24px;
color: #fff;
line-height: 36px;
}
.cm-item-30.hero-section .content-wrapper .left-area h1 {
font-size: 75px;
color: #F7C02D;
padding: 10px 0px 20px;
font-weight: 700;
}
.cm-item-30.hero-section .content-wrapper .left-area p {
font-size: 20px;
color: #fff;
}
.cm-item-30.hero-section .content-wrapper .left-area .cm-btn {
display: inline-block;
margin-top: 50px;
border-radius: 10px 30px;
background: #F7C02D;
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
padding: 18px 30px;
transition: all 0.5s ease-in-out;
border: 0;
position: relative;
z-index: 1;
overflow: hidden;
text-decoration: none;
}
.cm-item-30.hero-section .content-wrapper .left-area .cm-btn::before {
content: '';
background: #007cfb;
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
right: auto;
transition: .8s;
z-index: -1;
}
.cm-item-30.hero-section .content-wrapper .left-area .cm-btn::after {
content: '';
background: #007cfb;
height: 100%;
width: 0;
position: absolute;
bottom: 0;
right: 0;
left: auto;
transition: .8s;
z-index: -1;
}
.cm-item-30.hero-section .content-wrapper .left-area .cm-btn:hover::before {
width: 100%;
right: 0;
left: auto;
transition: all 0.5s ease-in-out;
}
.cm-item-30.hero-section .content-wrapper .left-area .cm-btn:hover::after {
width: 100%;
right: auto;
left: 0;
transition: all 0.5s ease-in-out;
}
.cm-item-30.hero-section .content-wrapper .right-area {
width: 50%;
position: relative;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img img {
border-bottom-right-radius: 315px;
border-bottom-left-radius: 315px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info {
border-radius: 20px 60px;
height: 190px;
width: 190px;
background: #007CFB;
display: inline-flex;
flex-direction: column;
gap: 5px;
padding: 26px 46px;
text-align: center;
position: absolute;
bottom: 0;
animation: info-box 1s ease-in-out alternate infinite;
}
@keyframes info-box {
0% {
transform: translate(0%, -6%);
}
100% {
transform: translate(6%, 0%);
}
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info h2 {
font-size: 72px;
color: #FFF;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info p {
font-size: 18px;
color: #fff;
}
@media (max-width: 600px){
.cm-item-30.hero-section{
padding-top: 50px;
}
.cm-item-30.hero-section .content-wrapper{
display: block;
}
.cm-item-30.hero-section .content-wrapper .left-area{
width: 100%;
text-align: center;
}
.cm-item-30.hero-section .content-wrapper .left-area h6{
font-size: 20px;
}
.cm-item-30.hero-section .content-wrapper .left-area h1{
font-size: 45px;
}
.cm-item-30.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info{
height: 150px;
width: 150px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info h2{
font-size: 50px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info p{
font-size: 16px;
}
}
@media (min-width: 600px) and (max-width: 768px){
.cm-item-30.hero-section{
padding-top: 50px;
}
.cm-item-30.hero-section .content-wrapper{
display: block;
}
.cm-item-30.hero-section .content-wrapper .left-area{
width: 100%;
text-align: center;
}
.cm-item-30.hero-section .content-wrapper .left-area h6{
font-size: 20px;
}
.cm-item-30.hero-section .content-wrapper .left-area h1{
font-size: 60px;
}
.cm-item-30.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 768px) and (max-width: 1200px){
.cm-item-30.hero-section{
padding-top: 50px;
}
.cm-item-30.hero-section .content-wrapper .left-area h6{
font-size: 20px;
}
.cm-item-30.hero-section .content-wrapper .left-area h1{
font-size: 45px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info{
height: 150px;
width: 150px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info h2{
font-size: 50px;
}
.cm-item-30.hero-section .content-wrapper .right-area .hero-img-info p{
font-size: 16px;
}
}
</style>