Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-17 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/logo-icons.svg" alt="">
Top #1 SEO & Marketing Agency
</h6>
<h1>Elevate your brand with expert seo & digital marketing</h1>
<p>Welcome to SEOC where we specialize in revolutionizing your online
presence through expert SEO and digital marketing solutions.</p>
<div class="button-wrapper">
<a class="btn-1" href="#">Start Ranking Now</a>
<a class="btn-2" href="#">Contact Now</a>
</div>
</div>
<div class="right-area">
<div class="hero-img-wrapper">
<img class="hero-img" src="http://cdn.codemela.com/wp-content/uploads/2024/08/header-img1.png" alt="">
<img class="hero-bg" src="http://cdn.codemela.com/wp-content/uploads/2024/08/header-imgbg.png" alt="">
</div>
<div class="hero-shape">
<img class="shape-1" src="http://cdn.codemela.com/wp-content/uploads/2024/08/sound-icons1.svg" alt="">
<img class="shape-2" src="http://cdn.codemela.com/wp-content/uploads/2024/08/lite-icons1.svg" alt="">
<img class="shape-3" src="http://cdn.codemela.com/wp-content/uploads/2024/08/elements2.png" alt="">
<img class="shape-4" src="http://cdn.codemela.com/wp-content/uploads/2024/08/elements3.png" alt="">
<img class="shape-5" src="http://cdn.codemela.com/wp-content/uploads/2024/08/header-author-img1.png" alt="">
<img class="shape-6" src="http://cdn.codemela.com/wp-content/uploads/2024/08/header-author-img2.png" alt="">
</div>
</div>
</div>
</div>
<img class="element-1" src="http://cdn.codemela.com/wp-content/uploads/2024/08/elements1.png" alt="">
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cm-item-17.hero-section {
padding: 120px 0 80px;
position: relative;
background: url(http://cdn.codemela.com/wp-content/uploads/2024/08/header-bg1.png);
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
}
.cm-item-17.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-17.hero-section .hero-container .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area {
width: 48%;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area h6 {
color: #4E2FDA;
font-size: 18px;
line-height: 18px;
border-radius: 8px;
transition: all 0.4s;
padding: 6px 10px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 65px;
font-weight: 700;
line-height: 70px;
color: #090B0E;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area p {
font-size: 18px;
line-height: 26px;
color: #3D4C5E;
margin-top: 20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper {
margin-top: 30px;
display: flex;
gap: 20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper .btn-1 {
background: #4E2FDA;
color: #fff;
font-size: 18px;
line-height: 18px;
text-decoration: none;
padding: 15px 25px;
transition: all 0.4s;
border-radius: 30px;
position: relative;
z-index: 1;
font-weight: 700;
display: block;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper .btn-1:hover {
background-color: transparent;
color: #4E2FDA;
outline: 1px solid #4E2FDA;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper .btn-2 {
background-color: transparent;
color: #4E2FDA;
outline: 1px solid #4E2FDA;
font-size: 18px;
line-height: 18px;
text-decoration: none;
padding: 15px 25px;
transition: all 0.4s;
border-radius: 30px;
position: relative;
z-index: 1;
font-weight: 700;
display: block;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper .btn-2:hover {
background: #4E2FDA;
color: #fff;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area {
width: 48%;
position: relative;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-img-wrapper .hero-img {
max-width: 100%;
width: 480px;
display: block;
margin: 0 auto;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-img-wrapper .hero-bg {
max-width: 100%;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1 {
position: absolute;
top: 0;
animation-name: animation-1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-2 {
position: absolute;
top: 40%;
right: -20px;
animation-name: animation-1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-3 {
position: absolute;
top: 0;
right: 110px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-4 {
position: absolute;
bottom: 140px;
left: -44px
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-5 {
position: absolute;
bottom: 0;
left: -180px;
animation-name: animation-2;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-6 {
position: absolute;
top: -40px;
right: -60px;
animation-name: animation-2;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.cm-item-17.hero-section .element-1 {
position: absolute;
left: 0;
top: 3%;
animation-name: animation-1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
z-index: -1;
}
@keyframes animation-1 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(30px);
}
}
@keyframes animation-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50px);
}
}
@media (max-width: 600px){
.cm-item-17.hero-section{
padding: 60px 0;
}
.cm-item-17.hero-section .hero-container .content-wrapper{
display: block;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area{
width: 100%;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area h1{
font-size: 35px;
line-height: 40px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper{
display: block;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area .button-wrapper .btn-2{
margin-top: 20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area{
margin-top: 50px;
width: 100%;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1{
left: -20px;
top: -20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-3{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-4{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-5{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-6{
display: none;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-17.hero-section{
padding: 60px 0;
}
.cm-item-17.hero-section .hero-container .content-wrapper{
display: block;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area{
width: 100%;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area h1{
font-size: 45px;
line-height: 50px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area{
margin-top: 50px;
width: 100%;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1{
left: -20px;
top: -20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-3{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-4{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-5{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-6{
display: none;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-17.hero-section{
padding: 60px 0;
}
.cm-item-17.hero-section .hero-container .content-wrapper .left-area h1{
font-size: 35px;
line-height: 40px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1{
left: -20px;
top: -20px;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-3{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-4{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-5{
display: none;
}
.cm-item-17.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-6{
display: none;
}
}
</style>