Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-51 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h6>Applying Data security</h6>
<h1>Security Analytics For Big Data.</h1>
<p>Consectetur adipiscing elit aenean scelerisque at augue vitae consequat quisque eget congue velit
in cursus leo sed sodales est eget turpis.</p>
<div class="btn-wrapper">
<a class="theme-btn-1" href="#">
Explore More
<span>
<svg fill="#fff" width="20px" height="20px" viewBox="0 0 24 24" id="right-arrow" data-name="Flat Line"
xmlns="http://www.w3.org/2000/svg" class="icon flat-line">
<line id="primary" x1="3" y1="12" x2="21" y2="12"
style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;">
</line>
<polyline id="primary-2" data-name="primary" points="18 15 21 12 18 9"
style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;">
</polyline>
</svg>
</span>
</a>
<a class="theme-btn-2" href="#">
<span>
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z"
fill="#fff" />
</svg>
</span>
Watch IT Video
</a>
</div>
</div>
<div class="right-area">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/09/hero-4.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
:root {
--cm-item-51-color-primary: #384bff;
--cm-item-51-color-secondary: #0f0d1d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img,svg {
max-width: 100%;
vertical-align: middle;
}
.cm-item-51.hero-section {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/09/section-bg.jpg);
padding-top: 100px;
padding-bottom: 80px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-position: 50%;
overflow: hidden;
}
.cm-item-51.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-51.hero-section .content-wrapper {
display: flex;
align-items: center;
}
.cm-item-51.hero-section .content-wrapper .left-area {
width: 50%;
}
.cm-item-51.hero-section .content-wrapper .left-area h6 {
color: var(--cm-item-51-color-primary);
font-size: 20px;
text-transform: uppercase;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
display: inline-block;
}
.cm-item-51.hero-section .content-wrapper .left-area h6::before {
content: "";
position: absolute;
top: 10px;
left: 0;
background-color: var(--cm-item-51-color-primary);
width: 30px;
height: 3px;
}
.cm-item-51.hero-section .content-wrapper .left-area h1 {
font-size: 70px;
margin-bottom: 30px;
}
.cm-item-51.hero-section .content-wrapper .left-area p {
font-size: 18px;
font-weight: 500;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper {
display: flex;
align-items: center;
gap: 30px;
margin-top: 50px;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1 {
background-color: var(--cm-item-51-color-primary);
color: #fff;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: 600;
padding: 24px 40px;
border-radius: 0;
text-transform: capitalize;
transition: all .3s ease-in-out;
position: relative;
z-index: 1;
line-height: 1;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1 span {
margin-left: 5px;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1::before {
content: "";
background-color: var(--cm-item-51-color-secondary);
width: 0;
height: 50%;
position: absolute;
transition: all .3s cubic-bezier(.785, .135, .15, .86);
z-index: -1;
top: 0;
left: 0;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1::after {
content: "";
background-color: var(--cm-item-51-color-secondary);
width: 0;
height: 50%;
position: absolute;
transition: all .3s cubic-bezier(.785, .135, .15, .86);
z-index: -1;
bottom: 0;
right: 0;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1:hover::after,
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-1:hover::before {
width: 100%;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-2 {
color: #0f0d1d;
text-decoration: none;
font-size: 16px;
font-weight: 600
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-2 span {
background-color: var(--cm-item-51-color-primary);
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
border-radius: 50%;
text-align: center;
position: relative;
margin-right: 10px;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-2 span::before {
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid var(--cm-item-51-color-primary);
content: "";
transform: translate(-50%, -50%);
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn-2 span::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(56, 75, 255, .2);
animation: rippleOne 3s infinite;
}
@keyframes rippleOne {
70% {
box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
}
}
.cm-item-51.hero-section .content-wrapper .right-area {
width: 50%;
}
.cm-item-51.hero-section .content-wrapper .right-area .hero-thumb {
text-align: center;
}
@media (max-width: 600px) {
.cm-item-51.hero-section {
padding: 60px 0;
}
.cm-item-51.hero-section .content-wrapper {
display: block;
}
.cm-item-51.hero-section .content-wrapper .left-area {
width: 100%;
text-align: center;
}
.cm-item-51.hero-section .content-wrapper .left-area h6 {
font-size: 18px;
text-align: center;
}
.cm-item-51.hero-section .content-wrapper .left-area h1 {
font-size: 36px;
}
.cm-item-51.hero-section .content-wrapper .left-area .btn-wrapper {
flex-direction: column;
justify-content: center;
}
.cm-item-51.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
}
}
@media (min-width: 600px) and (max-width: 991px) {
.cm-item-51.hero-section .content-wrapper {
display: block;
}
.cm-item-51.hero-section .content-wrapper .left-area {
width: 100%;
}
.cm-item-51.hero-section .content-wrapper .right-area {
margin-top: 50px;
width: 100%;
}
}
</style>