Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-52 hero-section">
<div class="hero-container">
<div class="content-wrapper">
<div class="left-area">
<h6>EDUCATION FOR EVERYONE</h6>
<h1>Innovative<span class="theme-gradient">Language Academic</span>Platform for Your Career.</h1>
<div class="total-student">
<div class="author-img">
<a href="#"><img src="http://cdn.codemela.com/wp-content/uploads/2024/09/client-04.webp" alt=""></a>
<a href="#"><img src="http://cdn.codemela.com/wp-content/uploads/2024/09/client-05.webp" alt=""></a>
<a href="#"><img src="http://cdn.codemela.com/wp-content/uploads/2024/09/client-06.webp" alt=""></a>
</div>
<div class="author-text">
<h5 class="total-join-students">Join Over 3000+ Students</h5>
<p class="subtitle">Have a new ideas every week.</p>
</div>
</div>
<div class="btn-wrapper">
<a class="theme-btn btn-1" href="#">Sign Up Now</a>
<a class="theme-btn btn-2" href="#">Find Courses</a>
</div>
</div>
<div class="right-area">
<div class="hero-thumb">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/09/language-club.webp" alt="">
</div>
<div class="card-info">
<div class="inner">
<div class="name">
Hillery. <span>/ USA</span>
</div>
<div class="ratting">
<svg fill="#ffa41b" width="16px" height="16px" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" class="icon" stroke="#ffa41b">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</g>
</svg>
<svg fill="#ffa41b" width="16px" height="16px" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" class="icon" stroke="#ffa41b">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</g>
</svg>
<svg fill="#ffa41b" width="16px" height="16px" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" class="icon" stroke="#ffa41b">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</g>
</svg>
<svg fill="#ffa41b" width="16px" height="16px" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" class="icon" stroke="#ffa41b">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</g>
</svg>
<svg fill="#ffa41b" width="16px" height="16px" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" class="icon" stroke="#ffa41b">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</g>
</svg>
(Google Review)
</div>
<div class="client-img">
<img src="http://cdn.codemela.com/wp-content/uploads/2024/09/client-12.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img,
svg {
max-width: 100%;
vertical-align: middle;
}
.cm-item-52.hero-section {
background: linear-gradient(#fff, #eff1ff);
padding: 100px 0 80px;
position: relative;
z-index: -2;
overflow: hidden;
}
.cm-item-52.hero-section::before,
.cm-item-52.hero-section::after {
content: "";
position: absolute;
bottom: auto;
z-index: -1;
width: 500px;
height: 500px;
border-radius: 1000px;
opacity: .2;
filter: blur(100px);
}
.cm-item-52.hero-section::before {
left: 0;
top: 250px;
right: auto;
background-image: linear-gradient(45deg, #2f57ef, #b966e7);
}
.cm-item-52.hero-section::after {
left: auto;
top: -250px;
right: 0;
background-image: linear-gradient(45deg, purple, #db7093);
}
.cm-item-52.hero-section .hero-container {
max-width: 85%;
margin: 0 auto;
}
.cm-item-52.hero-section .content-wrapper {
display: flex;
align-items: center;
}
.cm-item-52.hero-section .content-wrapper .left-area {
width: 50%;
}
.cm-item-52.hero-section .content-wrapper .left-area h6 {
font-size: 14px;
line-height: 15px;
font-weight: 600;
color: #2f57ef;
background-color: #2f57ef21;
margin-bottom: 15px;
padding: 10px 20px;
border-radius: 100px;
text-transform: uppercase;
display: inline-block;
}
.cm-item-52.hero-section .content-wrapper .left-area h1 {
margin-bottom: 34px;
font-size: 55px;
line-height: 1.3;
margin-top: 15px;
font-weight: 900;
}
.cm-item-52.hero-section .content-wrapper .left-area h1 .theme-gradient {
background: linear-gradient(90deg, #2f57ef, #b966e7);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: hsla(0, 0%, 100%, .001);
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student {
display: flex;
align-items: center;
gap: 20px;
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student .author-img a {
margin-left: -12px;
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student .author-img a:nth-child(1) {
margin-left: 0;
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student .author-img a img {
max-width: 60px;
border-radius: 100%;
border: 3px solid #fff;
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student .author-text h5 {
margin-bottom: 4px;
font-size: 18px;
font-weight: 600;
letter-spacing: -.5px;
}
.cm-item-52.hero-section .content-wrapper .left-area .btn-wrapper {
display: flex;
align-items: center;
gap: 30px;
margin-top: 50px;
}
.cm-item-52.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn {
padding: 0 26px;
height: 60px;
line-height: 60px;
font-size: 16px;
letter-spacing: .5px;
font-weight: 600;
display: inline-block;
position: relative;
transition: all .4s ease-in-out;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
}
.cm-item-52.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn.btn-1 {
background: linear-gradient(90deg, #2f57ef, #b966e7);
color: #fff;
}
.cm-item-52.hero-section .content-wrapper .left-area .btn-wrapper .theme-btn.btn-2 {
background-color: transparent;
color: #192335;
border: 1px solid #192335;
line-height: 58px;
}
.cm-item-52.hero-section .content-wrapper .right-area {
width: 50%;
position: relative;
}
.cm-item-52.hero-section .content-wrapper .right-area .hero-thumb {
text-align: center;
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info {
display: inline-block;
position: absolute;
bottom: 0;
z-index: 11111;
animation-duration: 4s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: bounceSlide;
}
@keyframes bounceSlide {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info .inner {
border-radius: 5px;
padding: 20px 30px;
background-color: #fff;
box-shadow: 0px 4px 26px 0px rgba(2, 5, 17, .14);
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info .inner .name {
font-size: 18px;
font-weight: 600;
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info .inner .name span {
font-size: 16px;
font-weight: normal;
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info .inner .ratting {
margin-top: 10px;
}
.cm-item-52.hero-section .content-wrapper .right-area .card-info .inner .client-img {
width: 100px;
border-radius: 100%;
position: absolute;
top: -50px;
left: -50px;
text-align: center;
height: 100px;
}
@media (max-width: 600px){
.cm-item-52.hero-section .content-wrapper{
display: block;
}
.cm-item-52.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-52.hero-section .content-wrapper .left-area h1{
font-size: 36px;
}
.cm-item-52.hero-section .content-wrapper .left-area .total-student{
flex-direction: column;
align-items: start;
}
.cm-item-52.hero-section .content-wrapper .left-area .btn-wrapper {
flex-direction: column;
align-items: start;
gap: 20px;
margin-top: 30px;
}
.cm-item-52.hero-section .content-wrapper .right-area{
margin-top: 50px;
width: 100%;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-52.hero-section .content-wrapper{
display: block;
}
.cm-item-52.hero-section .content-wrapper .left-area{
width: 100%;
}
.cm-item-52.hero-section .content-wrapper .right-area{
margin-top: 50px;
width: 100%;
}
}
@media (min-width: 991px) and (max-width: 1200px){
.cm-item-52.hero-section .content-wrapper .left-area h1{
font-size: 36px;
}
}
</style>