Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-10 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h6>Limited-time offer until Friday: $1.99 per month</h6>
<h1>Place your trust in the world's no.1 web hosting provider.</h1>
<p>Already have a website? Revive it with our industry-leading load times.</p>
<a class="cm-btn" href="#">$3.95 per month</a>
</div>
<div class="right-area">
<div class="hero-img">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/07/4-CqCL2pFu.svg" alt="hero-image">
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
*{
margin:0;
padding:0;
}
:root {
--cm-translate-x: .5rem;
--cm-translate-y: -.5rem;
--cm-rotate: 0;
--cm-skew-x: 0;
--cm-skew-y: 0;
--cm-scale-x: 1;
--cm-scale-y: 1;
}
.cm-item-10.hero-section {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/07/bg-1-BVx-W3eB.png);
height: auto;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.cm-item-10.hero-section .hero-container {
max-width: 90%;
margin: 0 auto;
}
.cm-item-10.hero-section .hero-container .content-wrapper {
display: flex;
justify-content: space-between;
padding: 120px 0 80px;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area {
width: 41%;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area h6 {
font-size: 18px;
line-height: 20px;
font-weight: 400;
border: 1px solid #a39e9e;
display: inline-block;
padding: 5px;
border-radius: 3px;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area h1 {
font-size: 62px;
line-height: 1.25;
margin: 30px 0;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area p {
font-size: 18px;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area .cm-btn {
background-color: #ea580c;
display: inline-block;
padding: 20px 40px;
margin-top: 30px;
text-decoration: none;
font-size: 22px;
color: #fff;
font-weight: 600;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
position: relative;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area .cm-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
opacity: 1;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area .cm-btn:hover::after {
transform: translate(var(--cm-translate-x), var(--cm-translate-y)) rotate(var(--cm-rotate)) skew(var(--cm-skew-x)) skewY(var(--cm-skew-y)) scaleX(var(--cm-scale-x)) scaleY(var(--cm-scale-y))
}
.cm-item-10.hero-section .hero-container .content-wrapper .right-area {
width: 58%;
overflow: hidden;
}
.cm-item-10.hero-section .hero-container .content-wrapper .right-area .hero-img img {
max-width: 100%;
}
@media (max-width: 767px){
.cm-item-10.hero-section .hero-container .content-wrapper{
padding: 60px 0;
display: block;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area{
width: 100%;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area h6{
font-size: 15px;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area h1{
font-size: 35px;
line-height: 1.10;
margin: 20px 0;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area .cm-btn{
font-size: 18px;
}
.cm-item-10.hero-section .hero-container .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 768px) and (max-width: 1020px){
.cm-item-10.hero-section .hero-container .content-wrapper{
padding: 60px 0;
display: block;
}
.cm-item-10.hero-section .hero-container .content-wrapper .left-area{
width: 100%;
}
.cm-item-10.hero-section .hero-container .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 1021px) and (max-width: 1400px){
.cm-item-10.hero-section .hero-container .content-wrapper .left-area{
width: 50%;
}
.cm-item-10.hero-section .hero-container .content-wrapper .right-area{
width: 50%;
margin-top: 50px;
}
}
</style>