Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-48 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h1>Find the dream job that suit your talent <span class="text-outlined">here.</span></h1>
<p>Search all the open positions on the web. Get your own personalized salary estimate.</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"></path>
</svg>
</div>
<input class="form-control" type="text" placeholder="Search Job Title" required="">
<a class="theme-btn" href="#">Find Job</a>
</form>
<div class="user-box">
<strong class="title">14k active candidate</strong>
<ul class="users-list">
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-avatar05.jpg" alt="User"></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-avatar06.jpg" alt="User"></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-avatar07.jpg" alt="User"></li>
<li><img src="http://cdn.codemela.com/wp-content/uploads/2024/08/img-avatar08.jpg" alt="User"></li>
</ul>
</div>
</div>
<div class="right-area">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/08/image-banner3.png" alt="">
</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-48.hero-section {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/08/bg-visual-blue.jpg);
padding: 80px 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 111;
}
.cm-item-48.hero-section::after {
content: "";
position: absolute;
top: 0;
bottom: -1px;
background: transparent;
right: 0;
width: auto;
border-style: solid;
border-width: 0 0 340px 100vw;
border-color: transparent transparent #fff transparent;
z-index: -1;
}
.cm-item-48.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-48.hero-section .content-wrapper {
display: flex;
align-items: center;
}
.cm-item-48.hero-section .content-wrapper .left-area {
width: 50%;
position: relative;
}
.cm-item-48.hero-section .content-wrapper .left-area h1 {
font-size: 65px;
color: #fff;
position: relative;
}
.cm-item-48.hero-section .content-wrapper .left-area h1 span {
position: relative;
color: #f9ab00;
}
.cm-item-48.hero-section .content-wrapper .left-area h1 span::after {
content: "";
width: 100%;
height: 16px;
position: absolute;
left: 0;
bottom: -7px;
background: url("http://cdn.codemela.com/wp-content/uploads/2024/08/outline-yellow.png") no-repeat;
background-size: auto;
background-size: 100% 100%;
}
.cm-item-48.hero-section .content-wrapper .left-area p {
margin: 20px 0 40px;
font-size: 20px;
color: #fff;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form {
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .search-icon {
position: absolute;
left: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.cm-item-48.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-48.hero-section .content-wrapper .left-area .search-form .form-control:focus {
outline: none;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .theme-btn {
background-color: #f9ab00;
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-48.hero-section .content-wrapper .left-area .search-form .theme-btn::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background-color: #fab826;
border-radius: 40px;
transition: all 0.4s ease-in-out;
z-index: -1;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .theme-btn:hover::before {
width: 100%;
}
.cm-item-48.hero-section .content-wrapper .left-area .user-box strong {
color: #fff;
font-size: 15px;
font-weight: 600;
}
.cm-item-48.hero-section .content-wrapper .left-area .user-box .users-list {
list-style: none;
padding: 0;
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.cm-item-48.hero-section .content-wrapper .left-area .user-box .users-list li img {
border-radius: 100%;
}
.cm-item-48.hero-section .content-wrapper .right-area {
width: 50%;
}
@media (max-width: 600px){
.cm-item-48.hero-section::after{
border-width: 0 0 80px 100vw;
}
.cm-item-48.hero-section .content-wrapper{
display: block;
}
.cm-item-48.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-48.hero-section .content-wrapper .left-area h1{
font-size: 35px;
}
.cm-item-48.hero-section .content-wrapper .left-area h1 span::after{
height: 6px;
}
.cm-item-48.hero-section .content-wrapper .left-area p{
font-size: 18px;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form{
display: block;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .form-control{
width: 100%;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .search-icon{
display: none;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .theme-btn{
margin-top: 20px;
}
.cm-item-48.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-48.hero-section::after{
border-width: 0 0 80px 100vw;
}
.cm-item-48.hero-section .content-wrapper{
display: block;
}
.cm-item-48.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-48.hero-section .content-wrapper .right-area{
width: 100%;
margin-top: 50px;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-48.hero-section::after{
border-width: 0 0 80px 100vw;
}
.cm-item-48.hero-section .content-wrapper .left-area h1{
font-size: 35px;
}
.cm-item-48.hero-section .content-wrapper .left-area h1 span::after{
height: 6px;
}
.cm-item-48.hero-section .content-wrapper .left-area p{
font-size: 18px;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form{
display: block;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .form-control{
width: 100%;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .search-icon{
display: none;
}
.cm-item-48.hero-section .content-wrapper .left-area .search-form .theme-btn{
margin-top: 20px;
}
}
</style>