Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-42 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h1>Find The Perfect Job For You</h1>
<p>Fill your job in hours, not weeks. Search for free.</p>
<form class="search-form" action="Get">
<div class="search-icon">
<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<input class="form-control" type="text" placeholder="Search Job Title" required>
<a class="theme-btn" href="#">Find Job</a>
</form>
<div class="popular-searches">
<strong class="subtitle">Popular Searches:</strong>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Video</a></li>
</ul>
</div>
</div>
<div class="right-area">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/image-banner2.png" alt="">
</div>
<div class="shapes">
<div class="shape-1">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/icon-pattern01.png" alt="">
</div>
<div class="shape-2">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/icon-pattern02.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
}
.cm-item-42.hero-section {
position: relative;
padding: 120px 0 80px;
background: transparent;
width: 100%;
overflow: hidden;
}
.cm-item-42.hero-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 40px;
width: 85%;
background: #203818 url("http://cdn.codemela.com/wp-content/uploads/2024/08/bg-visual2.jpg") no-repeat;
background-size: cover;
border-radius: 0 80px 80px 0;
z-index: -1;
}
.cm-item-42.hero-section::after {
content: "";
background: #d5fe68;
width: 30%;
position: absolute;
top: 40px;
right: 0;
bottom: 0;
transform: none;
border-radius: 80px 0 0 80px;
z-index: -1;
}
.cm-item-42.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-42.hero-section .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.cm-item-42.hero-section .content-wrapper .left-area {
width: 50%;
position: relative;
}
.cm-item-42.hero-section .content-wrapper .left-area h1 {
font-size: 55px;
color: #fff;
margin-bottom: 30px;
}
.cm-item-42.hero-section .content-wrapper .left-area p {
font-size: 20px;
color: #fff;
margin-bottom: 30px;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form {
margin-bottom: 80px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .search-icon {
position: absolute;
left: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .form-control {
display: block;
background-color: #fff;
width: 60%;
border: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 16px;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .form-control:focus {
outline: none;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .theme-btn {
background-color: #20ca6f;
display: block;
padding: 15px 30px;
text-decoration: none;
border-radius: 30px;
color: #fff;
font-size: 18px;
position: relative;
overflow: hidden;
z-index: 11;
text-align: center;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .theme-btn:hover{
color: #000;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .theme-btn::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background-color: #d5fe68;
border-radius: 40px;
transition: all 0.4s ease-in-out;
z-index: -1;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .theme-btn:hover::before{
width: 100%;
}
.cm-item-42.hero-section .content-wrapper .left-area .popular-searches .subtitle {
display: block;
font-weight: 600;
color: #e5e5e5;
font-size: 16px;
margin: 0 0 15px;
}
.cm-item-42.hero-section .content-wrapper .left-area .popular-searches ul {
list-style: none;
padding: 0;
display: flex;
flex-flow: row wrap;
font-size: 14px;
font-weight: 400;
gap: 15px;
}
.cm-item-42.hero-section .content-wrapper .left-area .popular-searches ul li a {
display: block;
color: #000;
background: #d5fe68;
border-radius: 25px;
padding: 7px 15px;
border: 1px solid #d5fe68;
transition: 0.3s;
text-decoration: none;
}
.cm-item-42.hero-section .content-wrapper .left-area .popular-searches ul li a:hover {
background-color: transparent;
border: 1px solid #d5fe68;
color: #fff;
}
.cm-item-42.hero-section .content-wrapper .right-area {
width: 50%;
position: relative;
z-index: 3;
}
.cm-item-42.hero-section .content-wrapper .right-area .shapes .shape-1 {
width: 306px;
position: absolute;
right: -110px;
top: 37px;
z-index: -1;
}
@media (max-width: 600px){
.cm-item-42.hero-section{
padding: 80px 0;
}
.cm-item-42.hero-section::before{
width: 100%;
}
.cm-item-42.hero-section::after{
display: none;
}
.cm-item-42.hero-section .content-wrapper{
display: block;
}
.cm-item-42.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-42.hero-section .content-wrapper .left-area h1{
font-size: 40px;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form{
display: block;
margin-bottom: 30px;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .search-icon{
display: none;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .form-control{
width: 100%;
margin-bottom: 20px;
}
.cm-item-42.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
.cm-item-42.hero-section .content-wrapper .right-area .shapes .shape-1{
display: none;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-42.hero-section{
padding: 80px 0;
}
.cm-item-42.hero-section .content-wrapper{
display: block;
}
.cm-item-42.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .theme-btn::before{
display: none;
}
.cm-item-42.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
.cm-item-42.hero-section .content-wrapper .right-area .shapes .shape-1{
display: none;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-42.hero-section .content-wrapper .left-area h1{
font-size: 40px;
}
.cm-item-42.hero-section .content-wrapper .left-area .search-form .form-control{
width: 60%;
}
.cm-item-42.hero-section .content-wrapper .right-area .shapes .shape-1{
display: none;
}
}
</style>