Hero Sections
A hero sections is a full screen section typically consisting of a background image, or video, or illustrations, or animations, with text.
Hero #1
🚀
Empower Your Learning Journey Today
The #1 Courses Learning Platform
Hands-on training, and certifications to help you get the most from Geeks Learning.
- Expert Instructors
- Flexible Learning
- Supportive Community
50+ Courses
Certified Courses
Online Project
70,324+
Students Preparing with us
<!--Hero Section-->
<section class="py-xl-8 py-6">
<div class="container py-xl-6">
<div class="row align-items-center gy-6 gy-xl-0">
<div class="col-lg-5 col-xxl-5 col-12">
<div class="d-flex flex-column gap-5">
<div class="d-flex flex-row gap-2 align-items-center">
<span>🚀</span>
<span class="text-primary fw-semibold">
<span>Empower Your Learning Journey Today</span>
</span>
</div>
<div class="d-flex flex-column gap-3">
<div class="d-flex flex-column gap-2">
<h1 class="mb-0 display-2 fw-bolder">The #1 Courses Learning Platform</h1>
<p class="mb-0">Hands-on training, and certifications to help you get the most from Geeks Learning.</p>
</div>
<ul class="list-unstyled mb-0 d-flex flex-column gap-2">
<li class="d-flex flex-row gap-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span>Expert Instructors</span>
</li>
<li class="d-flex flex-row gap-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span>Flexible Learning</span>
</li>
<li class="d-flex flex-row gap-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span>Supportive Community</span>
</li>
</ul>
</div>
<div class="d-grid d-md-flex flex-row gap-2">
<a href="#!" class="btn btn-primary btn-lg">Join For Free</a>
<a href="#!" class="btn btn-outline-secondary btn-lg">Explore Courses</a>
</div>
</div>
</div>
<div class="col-xxl-6 offset-xxl-1 col-lg-7 col-12">
<div class="row gx-0 gy-4 gy-lg-0">
<div class="col-md-6 flex-column justify-content-start align-items-center d-none d-md-flex">
<div class="position-relative me-n7">
<div class="position-absolute bottom-25 start-0 ms-n8 end-0 d-flex flex-column align-items-start">
<div class="bg-white rounded-pill py-2 px-3 shadow mb-2 d-inline-block">
<svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.9688 3.0378H8.29689C7.3189 3.0378 6.38097 3.4263 5.68942 4.11784C4.99788 4.80939 4.60938 5.74732 4.60938 6.72531V26.0848C4.60938 26.3293 4.7065 26.5638 4.87939 26.7366C5.05227 26.9095 5.28676 27.0066 5.53125 27.0066H22.1251C22.3696 27.0066 22.6041 26.9095 22.7769 26.7366C22.9498 26.5638 23.047 26.3293 23.047 26.0848C23.047 25.8403 22.9498 25.6058 22.7769 25.4329C22.6041 25.26 22.3696 25.1629 22.1251 25.1629H6.45313C6.45313 24.6739 6.64739 24.2049 6.99316 23.8592C7.33893 23.5134 7.8079 23.3191 8.29689 23.3191H23.9688C24.2133 23.3191 24.4478 23.222 24.6207 23.0491C24.7936 22.8762 24.8907 22.6418 24.8907 22.3973V3.95967C24.8907 3.71518 24.7936 3.48069 24.6207 3.30781C24.4478 3.13492 24.2133 3.0378 23.9688 3.0378ZM13.8282 4.88155H19.3594V13.1785L17.1458 11.5191C16.9862 11.3994 16.7921 11.3347 16.5927 11.3347C16.3932 11.3347 16.1991 11.3994 16.0395 11.5191L13.8282 13.1785V4.88155ZM23.047 21.4754H8.29689C7.64944 21.4745 7.0133 21.6451 6.45313 21.9697V6.72531C6.45313 6.23632 6.64739 5.76735 6.99316 5.42158C7.33893 5.07581 7.8079 4.88155 8.29689 4.88155H11.9844V15.0222C11.9844 15.1934 12.0321 15.3612 12.1221 15.5069C12.2121 15.6525 12.3409 15.7702 12.494 15.8468C12.6471 15.9233 12.8186 15.9558 12.9891 15.9404C13.1596 15.925 13.3225 15.8624 13.4594 15.7597L16.5938 13.4089L19.7293 15.7597C19.8886 15.8792 20.0822 15.9439 20.2813 15.9441C20.5258 15.9441 20.7603 15.847 20.9332 15.6741C21.1061 15.5012 21.2032 15.2667 21.2032 15.0222V4.88155H23.047V21.4754Z"
fill="#F59E0B" />
</svg>
<span class="text-dark fw-semibold">50+ Courses</span>
</div>
<div class="bg-white rounded-pill py-2 px-3 shadow mb-2 d-inline-block">
<svg width="24" height="25" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.5782 15.2724C28.5792 14.2137 28.3197 13.171 27.8226 12.2363C27.3255 11.3016 26.606 10.5035 25.7277 9.91249C24.8493 9.32146 23.839 8.95561 22.7859 8.8472C21.7328 8.73879 20.6691 8.89115 19.6888 9.29084C18.7084 9.69054 17.8415 10.3253 17.1644 11.1391C16.4873 11.953 16.0208 12.9209 15.8061 13.9576C15.5913 14.9943 15.635 16.0679 15.9331 17.0837C16.2313 18.0996 16.7748 19.0265 17.5157 19.7827V26.3349C17.5156 26.4922 17.5557 26.6468 17.6322 26.7842C17.7087 26.9215 17.819 27.037 17.9528 27.1197C18.0865 27.2024 18.2391 27.2495 18.3962 27.2566C18.5532 27.2636 18.7095 27.2304 18.8501 27.16L22.1251 25.5214L25.4001 27.16C25.5407 27.2304 25.6969 27.2636 25.854 27.2566C26.011 27.2495 26.1637 27.2024 26.2974 27.1197C26.4311 27.037 26.5415 26.9215 26.618 26.7842C26.6945 26.6468 26.7346 26.4922 26.7345 26.3349V19.7827C27.9169 18.5793 28.579 16.9595 28.5782 15.2724ZM22.1251 10.663C23.0367 10.663 23.9279 10.9333 24.6859 11.4398C25.4439 11.9463 26.0347 12.6662 26.3836 13.5085C26.7325 14.3507 26.8238 15.2775 26.6459 16.1716C26.4681 17.0658 26.0291 17.8871 25.3844 18.5317C24.7398 19.1764 23.9185 19.6154 23.0243 19.7932C22.1302 19.9711 21.2034 19.8798 20.3611 19.5309C19.5189 19.182 18.799 18.5913 18.2925 17.8332C17.786 17.0752 17.5157 16.1841 17.5157 15.2724C17.5157 14.0499 18.0013 12.8775 18.8657 12.0131C19.7302 11.1486 20.9026 10.663 22.1251 10.663ZM22.5376 23.6661C22.4095 23.602 22.2683 23.5686 22.1251 23.5686C21.9819 23.5686 21.8406 23.602 21.7125 23.6661L19.3594 24.8438V21.1021C20.2236 21.5126 21.1684 21.7255 22.1251 21.7255C23.0818 21.7255 24.0265 21.5126 24.8907 21.1021V24.8438L22.5376 23.6661ZM15.6719 22.6474C15.6719 22.8919 15.5748 23.1264 15.4019 23.2993C15.229 23.4722 14.9945 23.5693 14.7501 23.5693H4.60938C4.12039 23.5693 3.65142 23.3751 3.30565 23.0293C2.95988 22.6835 2.76563 22.2145 2.76562 21.7256V6.97549C2.76562 6.48649 2.95988 6.01752 3.30565 5.67175C3.65142 5.32598 4.12039 5.13173 4.60938 5.13173H24.8907C25.3797 5.13173 25.8487 5.32598 26.1945 5.67175C26.5402 6.01752 26.7345 6.48649 26.7345 6.97549C26.7345 7.21998 26.6374 7.45447 26.4645 7.62735C26.2916 7.80024 26.0571 7.89737 25.8126 7.89737C25.5681 7.89737 25.3336 7.80024 25.1607 7.62735C24.9878 7.45447 24.8907 7.21998 24.8907 6.97549H4.60938V21.7256H14.7501C14.9945 21.7256 15.229 21.8227 15.4019 21.9956C15.5748 22.1684 15.6719 22.4029 15.6719 22.6474ZM13.8282 16.1943C13.8282 16.4388 13.731 16.6733 13.5582 16.8461C13.3853 17.019 13.1508 17.1162 12.9063 17.1162H8.2969C8.0524 17.1162 7.81792 17.019 7.64503 16.8461C7.47215 16.6733 7.37502 16.4388 7.37502 16.1943C7.37502 15.9498 7.47215 15.7153 7.64503 15.5424C7.81792 15.3695 8.0524 15.2724 8.2969 15.2724H12.9063C13.1508 15.2724 13.3853 15.3695 13.5582 15.5424C13.731 15.7153 13.8282 15.9498 13.8282 16.1943ZM13.8282 12.5068C13.8282 12.7513 13.731 12.9857 13.5582 13.1586C13.3853 13.3315 13.1508 13.4286 12.9063 13.4286H8.2969C8.0524 13.4286 7.81792 13.3315 7.64503 13.1586C7.47215 12.9857 7.37502 12.7513 7.37502 12.5068C7.37502 12.2623 7.47215 12.0278 7.64503 11.8549C7.81792 11.682 8.0524 11.5849 8.2969 11.5849H12.9063C13.1508 11.5849 13.3853 11.682 13.5582 11.8549C13.731 12.0278 13.8282 12.2623 13.8282 12.5068Z"
fill="#139A74" />
</svg>
<span class="text-dark fw-semibold">Certified Courses</span>
</div>
<div class="bg-white rounded-pill py-2 px-3 shadow">
<svg width="24" height="25" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9492 12.9114L13.4179 9.22386C13.2791 9.13121 13.1176 9.078 12.9509 9.06992C12.7842 9.06185 12.6184 9.0992 12.4712 9.17799C12.324 9.25678 12.201 9.37406 12.1153 9.5173C12.0295 9.66055 11.9843 9.82438 11.9844 9.99132V17.3664C11.9843 17.5333 12.0295 17.6971 12.1153 17.8404C12.201 17.9836 12.324 18.1009 12.4712 18.1797C12.6184 18.2585 12.7842 18.2958 12.9509 18.2878C13.1176 18.2797 13.2791 18.2265 13.4179 18.1338L18.9492 14.4463C19.0757 14.3622 19.1794 14.2481 19.2511 14.1142C19.3228 13.9803 19.3603 13.8307 19.3603 13.6788C19.3603 13.5269 19.3228 13.3774 19.2511 13.2435C19.1794 13.1096 19.0757 12.9955 18.9492 12.9114ZM13.8282 15.6436V11.7198L16.7759 13.6788L13.8282 15.6436ZM24.8907 5.38193H4.60938C4.12039 5.38193 3.65142 5.57618 3.30565 5.92195C2.95988 6.26772 2.76563 6.73669 2.76562 7.22569V20.132C2.76563 20.621 2.95988 21.09 3.30565 21.4357C3.65142 21.7815 4.12039 21.9757 4.60938 21.9757H24.8907C25.3797 21.9757 25.8487 21.7815 26.1945 21.4357C26.5402 21.09 26.7345 20.621 26.7345 20.132V7.22569C26.7345 6.73669 26.5402 6.26772 26.1945 5.92195C25.8487 5.57618 25.3797 5.38193 24.8907 5.38193ZM24.8907 20.132H4.60938V7.22569H24.8907V20.132ZM26.7345 24.7414C26.7345 24.9859 26.6374 25.2204 26.4645 25.3933C26.2916 25.5661 26.0571 25.6633 25.8126 25.6633H3.6875C3.44301 25.6633 3.20852 25.5661 3.03564 25.3933C2.86275 25.2204 2.76563 24.9859 2.76562 24.7414C2.76562 24.4969 2.86275 24.2624 3.03564 24.0895C3.20852 23.9166 3.44301 23.8195 3.6875 23.8195H25.8126C26.0571 23.8195 26.2916 23.9166 26.4645 24.0895C26.6374 24.2624 26.7345 24.4969 26.7345 24.7414Z"
fill="#E53E3E" />
</svg>
<span class="text-dark fw-semibold">Online Project</span>
</div>
</div>
<svg width="205" height="189" viewBox="0 0 205 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.0391235 179.983C0.0391235 80.8399 80.4107 0.468323 179.554 0.468323H189.034C197.318 0.468323 204.033 7.18386 204.033 15.4679V166.407C204.033 178.626 194.127 188.532 181.908 188.532H8.58745C3.86634 188.532 0.0391235 184.704 0.0391235 179.983Z"
fill="#139A74" />
</svg>
</div>
</div>
<div class="col-md-6 mt-8 mt-md-0">
<div class="bg-warning d-flex justify-content-center rounded-4 position-relative" style="padding-bottom: 150px; padding-top: 100px">
<img src="../assets/images/landing-immigration/college-student-holding-laptop-pointing-right.png" alt="" class="position-absolute bottom-0 me-8" />
</div>
</div>
<div class="col-md-6 flex-column justify-content-end d-none d-md-flex">
<div class="bg-primary d-flex justify-content-center rounded-4 position-relative mx-5" style="padding-bottom: 150px; padding-top: 100px">
<img src="../assets/images/landing-immigration/front-view-young-man-going-university-with-bag.png" alt="" class="position-absolute bottom-0" />
</div>
</div>
<div class="col-md-6 d-none d-md-block">
<div class="position-relative mt-5">
<svg width="204" height="189" viewBox="0 0 204 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M203.994 9.01663C203.994 108.16 123.622 188.532 24.4789 188.532H14.9995C6.71548 188.532 -3.05176e-05 181.816 -3.05176e-05 173.532V22.5934C-3.05176e-05 10.374 9.90572 0.468292 22.1251 0.468292H195.446C200.167 0.468292 203.994 4.29552 203.994 9.01663Z"
fill="#EF8E70" />
</svg>
<div class="bg-white rounded-4 p-3 position-absolute bottom-10 start-10 mb-3 shadow">
<div class="avatar-group mb-2">
<span class="avatar avatar-md">
<!-- avatar -->
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle" />
</span>
</div>
<div class="text-dark fw-bold fs-4">70,324+</div>
<div class="text-gray-500">Students Preparing with us</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Hero Section-->Hero #2
Welcome to the Geeks Abroad Study
Powering Your Global Education Dream
Explore top universities and unique cultural experiences worldwide.
Enquire now
4.8
Engaged Students
Highly Qualified Teachers
Online and Offline classes
International Recognition
<section class="bg-light">
<div class="container">
<div style="background: url(../assets/images/landing-immigration/map.svg); background-repeat: no-repeat; background-size: auto; background-position: right">
<div class="row py-8 align-items-center">
<div class="col-xl-5 col-lg-5">
<div>
<span class="text-primary fw-semibold">Welcome to the Geeks Abroad Study</span>
<h1 class="display-3 my-3">Powering Your Global Education Dream</h1>
<p class="mb-5 fs-3">Explore top universities and unique cultural experiences worldwide.</p>
<a href="#" class="btn btn-primary btn-lg">Enquire now</a>
<div class="mt-4 d-flex gap-3 align-items-center">
<div class="avatar-group">
<span class="avatar avatar-md">
<!-- avatar -->
<img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle" />
</span>
<!-- avatar -->
<span class="avatar avatar-md">
<img alt="avatar" src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle" />
</span>
</div>
<div class="">
<div class="d-flex align-items-center gap-2 fs-4 lh-0 mb-1">
<div class="text-dark fw-semibold">4.8</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
<div>Engaged Students</div>
</div>
</div>
</div>
</div>
<div class="offset-xl-1 col-xl-6 col-lg-7 d-flex justify-content-center py-6">
<div class="text-center position-relative">
<div class="position-relative">
<img src="../assets/images/landing-immigration/circle.png" alt="" class="position-relative img-fluid bg-invert" />
<div class="position-absolute top-0 ms-n8 mt-n6">
<img src="../assets/images/landing-immigration/plane.png" alt="" />
</div>
<div class="position-absolute top-25 mt-4 z-1 ms-xl-n8 d-none d-md-block">
<div class="bg-white border rounded-pill px-3 py-2 d-inline-block fw-medium shadow-lg">Highly Qualified Teachers</div>
</div>
<div class="position-absolute top-50 z-1 ms-n5 ms-xl-n8 mt-n4 d-none d-md-block">
<div class="bg-white border rounded-pill px-3 py-2 d-inline-block fw-medium shadow-lg">Online and Offline classes</div>
</div>
<div class="position-absolute top-60 z-1 mt-2 ms-xl-n8 d-none d-md-block">
<div class="bg-white border rounded-pill px-3 py-2 d-inline-block fw-medium shadow-lg">International Recognition</div>
</div>
<div class="position-absolute top-50 start-50 translate-middle">
<svg width="315" height="315" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.06323" y="2.99145" width="308.4" height="308.4" rx="154.2" fill="white" />
<rect x="3.06323" y="2.99145" width="308.4" height="308.4" rx="154.2" fill="#F20000" />
<rect x="3.06323" y="2.99145" width="308.4" height="308.4" rx="154.2" stroke="var(--gk-gray-200)" stroke-width="5.81886" />
</svg>
<div class="position-absolute start-50 translate-middle" style="top: 35% !important">
<img src="../assets/images/landing-immigration/girl.png" alt="" />
</div>
</div>
<div class="position-absolute top-0 start-50 ms-n8 mt-n8 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="35" viewBox="0 0 73 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3128)">
<path
d="M36.4297 72C56.3119 72 72.4297 55.8823 72.4297 36C72.4297 16.1177 56.3119 0 36.4297 0C16.5474 0 0.429688 16.1177 0.429688 36C0.429688 55.8823 16.5474 72 36.4297 72Z"
fill="#F0F0F0" />
<path d="M7.87186 14.079C5.04404 17.7582 2.91174 21.9987 1.67017 26.6055H20.3983L7.87186 14.079Z" fill="#0052B4" />
<path d="M71.1908 26.6059C69.9492 21.9993 67.8168 17.7588 64.9891 14.0796L52.4629 26.6059H71.1908Z" fill="#0052B4" />
<path d="M1.67017 45.3907C2.91189 49.9973 5.04418 54.2378 7.87187 57.9169L20.3979 45.3907H1.67017Z" fill="#0052B4" />
<path d="M58.3464 7.43933C54.6672 4.61151 50.4268 2.47921 45.8201 1.23749V19.9655L58.3464 7.43933Z" fill="#0052B4" />
<path d="M14.5117 64.5531C18.1909 67.3809 22.4314 69.5132 27.038 70.7549V52.027L14.5117 64.5531Z" fill="#0052B4" />
<path d="M27.0379 1.23749C22.4313 2.47921 18.1907 4.6115 14.5117 7.43919L27.0379 19.9654V1.23749Z" fill="#0052B4" />
<path d="M45.8201 70.7549C50.4267 69.5132 54.6672 67.3809 58.3462 64.5532L45.8201 52.027V70.7549Z" fill="#0052B4" />
<path d="M52.4629 45.3907L64.9891 57.917C67.8168 54.2379 69.9492 49.9973 71.1908 45.3907H52.4629Z" fill="#0052B4" />
<path
d="M72.125 31.3044H41.1256H41.1254V0.304734C39.5883 0.104625 38.0211 0 36.4297 0C34.838 0 33.2711 0.104625 31.7341 0.304734V31.3041V31.3043H0.734422C0.534313 32.8414 0.429688 34.4085 0.429688 36C0.429688 37.5917 0.534313 39.1586 0.734422 40.6956H31.7338H31.7339V71.6953C33.2711 71.8954 34.838 72 36.4297 72C38.0211 72 39.5883 71.8955 41.1253 71.6953V40.6959V40.6957H72.125C72.3251 39.1586 72.4297 37.5917 72.4297 36C72.4297 34.4085 72.3251 32.8414 72.125 31.3044Z"
fill="#D80027" />
<path d="M45.8208 45.3938L61.8852 61.4582C62.6241 60.7196 63.3289 59.9475 64.0014 59.147L50.248 45.3936H45.8208V45.3938Z" fill="#D80027" />
<path d="M27.0382 45.3936H27.0379L10.9736 61.4579C11.7122 62.1968 12.4844 62.9016 13.2848 63.574L27.0382 49.8204V45.3936Z" fill="#D80027" />
<path d="M27.0377 26.6073V26.6071L10.9733 10.5425C10.2345 11.281 9.52965 12.0532 8.85718 12.8537L22.6107 26.6072H27.0377V26.6073Z" fill="#D80027" />
<path d="M45.8208 26.6106L61.8854 10.5459C61.1468 9.80701 60.3747 9.1022 59.5742 8.42987L45.8208 22.1834V26.6106V26.6106Z" fill="#D80027" />
</g>
<defs>
<clipPath id="clip0_7973_3128">
<rect x="0.429688" width="72" height="72" rx="16.6253" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="position-absolute top-0 start-50 ms-8 mt-n4 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="36" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3131)">
<path d="M2.94214 49.2542C8.02869 62.9629 21.2242 72.7325 36.703 72.7325C52.1817 72.7325 65.3772 62.9629 70.4638 49.2542L36.703 46.1239L2.94214 49.2542Z" fill="#FFDA44" />
<path d="M36.703 0.731812C21.2242 0.731812 8.02869 10.5013 2.94214 24.2101L36.703 27.3405L70.4638 24.21C65.3772 10.5013 52.1817 0.731812 36.703 0.731812Z" fill="black" />
<path
d="M2.94254 24.2068C1.49551 28.1067 0.703369 32.3249 0.703369 36.7285C0.703369 41.132 1.49551 45.3502 2.94254 49.2501H70.4643C71.9114 45.3502 72.7034 41.132 72.7034 36.7285C72.7034 32.3249 71.9114 28.1067 70.4642 24.2068H2.94254Z"
fill="#D80027" />
</g>
</svg>
</div>
<div class="position-absolute top-10 start-60 mt-8 ms-4 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="36" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3127)">
<path
d="M72.9531 36.9873C72.9531 56.8694 56.8353 72.9873 36.9531 72.9873C17.071 72.9873 0.953125 56.8694 0.953125 36.9873C0.953125 36.9957 36.9531 0.991383 36.9531 0.987305C56.8353 0.987305 72.9531 17.1052 72.9531 36.9873Z"
fill="#0052B4" />
<path d="M36.8564 36.9885H36.953C36.953 36.9558 36.953 36.9246 36.953 36.892C36.9208 36.9243 36.8887 36.9564 36.8564 36.9885Z" fill="#F0F0F0" />
<path
d="M36.9524 19.7723C36.9524 13.4379 36.9524 9.28704 36.9524 0.989746H36.9463C17.0669 0.99298 0.952393 17.1093 0.952393 36.9896H19.735V26.4129L30.3116 36.9896H36.8562C36.8884 36.9575 36.9204 36.9255 36.9525 36.8933C36.9525 34.4679 36.9525 32.3038 36.9525 30.3491L26.3757 19.7723H36.9524Z"
fill="#F0F0F0" />
<path
d="M19.1666 5.68442C13.5361 8.89053 8.85528 13.5714 5.64917 19.2019V36.9888H15.0405V15.0759V15.0758H36.9536C36.9536 12.1138 36.9536 9.29201 36.9536 5.68442H19.1666V5.68442Z"
fill="#D80027" />
<path
d="M36.9543 32.562L24.1641 19.7719H19.7371C19.7371 19.7717 19.7371 19.7719 19.7371 19.7719L36.9542 36.989H36.9543C36.9543 36.989 36.9543 33.9367 36.9543 32.562Z"
fill="#D80027" />
<path
d="M22.666 43.2466L24.6418 47.3779L29.1034 46.3467L27.1054 50.4673L30.6933 53.3126L26.226 54.3195L26.2385 58.8988L22.666 56.0338L19.0935 58.8988L19.106 54.3195L14.6387 53.3126L18.2267 50.4673L16.2284 46.3467L20.6903 47.3779L22.666 43.2466Z"
fill="#F0F0F0" />
<path
d="M54.8544 51.0734L55.8423 53.139L58.0732 52.6234L57.074 54.6837L58.8681 56.1064L56.6344 56.6098L56.6406 58.8995L54.8544 57.4669L53.0682 58.8995L53.0744 56.6098L50.8408 56.1064L52.6348 54.6837L51.6358 52.6234L53.8665 53.139L54.8544 51.0734Z"
fill="#F0F0F0" />
<path
d="M45.6636 29.1615L46.6514 31.2273L48.8822 30.7115L47.8832 32.7718L49.6772 34.1945L47.4436 34.6979L47.4497 36.9876L45.6636 35.555L43.8774 36.9876L43.8834 34.6979L41.6499 34.1945L43.4439 32.7718L42.4449 30.7115L44.6757 31.2273L45.6636 29.1615Z"
fill="#F0F0F0" />
<path
d="M54.8544 16.6401L55.8423 18.7059L58.0732 18.1902L57.0742 20.2505L58.868 21.6731L56.6344 22.1767L56.6406 24.4663L54.8544 23.0338L53.0682 24.4663L53.0744 22.1767L50.8408 21.6731L52.6346 20.2505L51.6358 18.1902L53.8665 18.7059L54.8544 16.6401Z"
fill="#F0F0F0" />
<path
d="M62.8799 26.0306L63.8677 28.0964L66.0985 27.5806L65.0995 29.6409L66.8935 31.0636L64.6598 31.5672L64.666 33.8567L62.8799 32.4243L61.0937 33.8567L61.0998 31.5672L58.8662 31.0636L60.6602 29.6409L59.6612 27.5806L61.8919 28.0964L62.8799 26.0306Z"
fill="#F0F0F0" />
<path
d="M57.141 36.9883L57.9179 39.3798H60.4326L58.3982 40.8579L59.1754 43.2492L57.141 41.7712L55.1067 43.2492L55.8837 40.8579L53.8494 39.3798H56.3639L57.141 36.9883Z"
fill="#F0F0F0" />
</g>
</svg>
</div>
<div class="position-absolute top-10 end-10 end-md-10 end-lg-0 me-md-n4 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="36" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3133)">
<path
d="M36.4492 72.501C56.3315 72.501 72.4492 56.3832 72.4492 36.501C72.4492 16.6187 56.3315 0.500977 36.4492 0.500977C16.567 0.500977 0.449219 16.6187 0.449219 36.501C0.449219 56.3832 16.567 72.501 36.4492 72.501Z"
fill="#F0F0F0" />
<path d="M8.67798 13.5902H64.2204C62.1689 11.1061 59.7895 8.90319 57.1502 7.04483H15.7482C13.1088 8.90291 10.7296 11.1059 8.67798 13.5902Z" fill="#F0F0F0" />
<path
d="M0.449219 36.5026C0.449219 37.6061 0.501672 38.6971 0.598844 39.7754H72.2996C72.3968 38.6971 72.4492 37.6061 72.4492 36.5026C72.4492 35.3991 72.3968 34.3082 72.2996 33.23H0.598844C0.501672 34.3082 0.449219 35.3991 0.449219 36.5026Z"
fill="#F0F0F0" />
<path d="M4.37573 52.8648H68.5243C69.5844 50.7912 70.4489 48.6015 71.0944 46.3196H1.80566C2.45099 48.6015 3.31584 50.7913 4.37573 52.8648Z" fill="#F0F0F0" />
<path d="M15.7482 65.9552H57.15C59.7894 64.0969 62.1688 61.894 64.2202 59.4098H8.67798C10.7296 61.8937 13.1088 64.0969 15.7482 65.9552Z" fill="#F0F0F0" />
<path d="M1.80542 26.6846H71.0944C70.449 24.4025 69.5843 22.2127 68.5242 20.1392H4.37562C3.31573 22.2127 2.45089 24.4025 1.80542 26.6846Z" fill="#F0F0F0" />
<path d="M17.6648 7.04655H57.1484C51.2927 2.92371 44.1532 0.50116 36.4474 0.50116C31.7518 0.50116 23.5204 2.92371 17.6648 7.04655Z" fill="#D80027" />
<path d="M34.8838 20.1368H68.5232C67.3261 17.7949 65.8802 15.6013 64.2201 13.5914H34.8838V20.1368Z" fill="#D80027" />
<path d="M34.8838 33.2264H72.2993C72.0968 30.9789 71.6899 28.7903 71.0935 26.681H34.8838V33.2264Z" fill="#D80027" />
<path d="M1.80366 46.3219H71.0924C71.6889 44.2128 72.0959 42.0239 72.2984 39.7765H0.597656C0.800156 42.0239 1.20713 44.2126 1.80366 46.3219Z" fill="#D80027" />
<path d="M8.67715 59.4115H64.2195C65.8796 57.4013 67.3255 55.2078 68.5227 52.8661H4.37402C5.57116 55.208 7.01707 57.4016 8.67715 59.4115Z" fill="#D80027" />
<path d="M36.4471 72.5024C44.1529 72.5024 51.2924 70.0798 57.1481 65.9569H15.7461C21.6017 70.0798 28.7412 72.5024 36.4471 72.5024Z" fill="#D80027" />
<path d="M1.80474 26.6815C1.2082 28.7909 0.801377 30.9795 0.598877 33.2269H36.4492V0.499695C19.9708 0.499695 6.07861 11.5714 1.80474 26.6815Z" fill="#0052B4" />
<path
d="M21.8802 9.89255L24.211 17.0665H31.755L25.6521 21.5007L27.9829 28.6751L21.8802 24.2412L15.7772 28.6751L18.1085 21.5007L12.0056 17.0665H19.5492L21.8802 9.89255Z"
fill="#F0F0F0" />
</g>
<defs>
<clipPath id="clip0_7973_3133">
<rect x="0.449219" y="0.500977" width="72" height="72" rx="36" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="position-absolute top-25 end-0 end-xl-20 me-xl-n8 mt-8 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="35" viewBox="0 0 73 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3128)">
<path
d="M36.4297 72C56.3119 72 72.4297 55.8823 72.4297 36C72.4297 16.1177 56.3119 0 36.4297 0C16.5474 0 0.429688 16.1177 0.429688 36C0.429688 55.8823 16.5474 72 36.4297 72Z"
fill="#F0F0F0" />
<path d="M7.87186 14.079C5.04404 17.7582 2.91174 21.9987 1.67017 26.6055H20.3983L7.87186 14.079Z" fill="#0052B4" />
<path d="M71.1908 26.6059C69.9492 21.9993 67.8168 17.7588 64.9891 14.0796L52.4629 26.6059H71.1908Z" fill="#0052B4" />
<path d="M1.67017 45.3907C2.91189 49.9973 5.04418 54.2378 7.87187 57.9169L20.3979 45.3907H1.67017Z" fill="#0052B4" />
<path d="M58.3464 7.43933C54.6672 4.61151 50.4268 2.47921 45.8201 1.23749V19.9655L58.3464 7.43933Z" fill="#0052B4" />
<path d="M14.5117 64.5531C18.1909 67.3809 22.4314 69.5132 27.038 70.7549V52.027L14.5117 64.5531Z" fill="#0052B4" />
<path d="M27.0379 1.23749C22.4313 2.47921 18.1907 4.6115 14.5117 7.43919L27.0379 19.9654V1.23749Z" fill="#0052B4" />
<path d="M45.8201 70.7549C50.4267 69.5132 54.6672 67.3809 58.3462 64.5532L45.8201 52.027V70.7549Z" fill="#0052B4" />
<path d="M52.4629 45.3907L64.9891 57.917C67.8168 54.2379 69.9492 49.9973 71.1908 45.3907H52.4629Z" fill="#0052B4" />
<path
d="M72.125 31.3044H41.1256H41.1254V0.304734C39.5883 0.104625 38.0211 0 36.4297 0C34.838 0 33.2711 0.104625 31.7341 0.304734V31.3041V31.3043H0.734422C0.534313 32.8414 0.429688 34.4085 0.429688 36C0.429688 37.5917 0.534313 39.1586 0.734422 40.6956H31.7338H31.7339V71.6953C33.2711 71.8954 34.838 72 36.4297 72C38.0211 72 39.5883 71.8955 41.1253 71.6953V40.6959V40.6957H72.125C72.3251 39.1586 72.4297 37.5917 72.4297 36C72.4297 34.4085 72.3251 32.8414 72.125 31.3044Z"
fill="#D80027" />
<path d="M45.8208 45.3938L61.8852 61.4582C62.6241 60.7196 63.3289 59.9475 64.0014 59.147L50.248 45.3936H45.8208V45.3938Z" fill="#D80027" />
<path d="M27.0382 45.3936H27.0379L10.9736 61.4579C11.7122 62.1968 12.4844 62.9016 13.2848 63.574L27.0382 49.8204V45.3936Z" fill="#D80027" />
<path d="M27.0377 26.6073V26.6071L10.9733 10.5425C10.2345 11.281 9.52965 12.0532 8.85718 12.8537L22.6107 26.6072H27.0377V26.6073Z" fill="#D80027" />
<path d="M45.8208 26.6106L61.8854 10.5459C61.1468 9.80701 60.3747 9.1022 59.5742 8.42987L45.8208 22.1834V26.6106V26.6106Z" fill="#D80027" />
</g>
<defs>
<clipPath id="clip0_7973_3128">
<rect x="0.429688" width="72" height="72" rx="16.6253" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="position-absolute top-50 end-0 mt-8 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="36" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3132)">
<path
d="M36.9805 72.5234C56.8627 72.5234 72.9805 56.4057 72.9805 36.5234C72.9805 16.6412 56.8627 0.523438 36.9805 0.523438C17.0982 0.523438 0.980469 16.6412 0.980469 36.5234C0.980469 56.4057 17.0982 72.5234 36.9805 72.5234Z"
fill="#F0F0F0" />
<path d="M72.9831 36.5266C72.9831 22.254 64.6771 9.92176 52.6353 4.09875V68.9543C64.6771 63.1314 72.9831 50.7992 72.9831 36.5266Z" fill="#D80027" />
<path d="M0.981934 36.5246C0.981934 50.7972 9.28795 63.1295 21.3298 68.9525V4.0968C9.28795 9.9198 0.981934 22.252 0.981934 36.5246Z" fill="#D80027" />
<path
d="M43.243 41.2221L49.5038 38.0916L46.3735 36.5265V33.396L40.1126 36.5265L43.243 30.2656H40.1126L36.9821 25.5699L33.8517 30.2656H30.7212L33.8517 36.5265L27.5908 33.396V36.5265L24.4604 38.0916L30.7212 41.2221L29.1561 44.3525H35.417V49.0481H38.5473V44.3525H44.8082L43.243 41.2221Z"
fill="#D80027" />
</g>
<defs>
<clipPath id="clip0_7973_3132">
<rect x="0.980469" y="0.523438" width="72" height="72" rx="36" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="position-absolute top-75 start-60 ms-n8 pt-3 d-none d-md-block bg-white p-3 rounded-circle shadow-lg border">
<svg width="36" height="36" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7973_3129)">
<path
d="M36.8789 72.0742C56.7612 72.0742 72.8789 55.9565 72.8789 36.0742C72.8789 16.192 56.7612 0.0742188 36.8789 0.0742188C16.9967 0.0742188 0.878906 16.192 0.878906 36.0742C0.878906 55.9565 16.9967 72.0742 36.8789 72.0742Z"
fill="#F0F0F0" />
<path d="M35.313 36.0742H72.8781C72.8781 32.8249 72.445 29.6772 71.638 26.6829H35.313V36.0742Z" fill="#D80027" />
<path d="M35.313 17.2898H67.5943C65.3906 13.6937 62.5729 10.5152 59.2876 7.89844H35.313V17.2898Z" fill="#D80027" />
<path d="M36.8782 72.0743C45.3507 72.0743 53.1381 69.1459 59.2876 64.2482H14.4688C20.6183 69.1459 28.4057 72.0743 36.8782 72.0743Z" fill="#D80027" />
<path d="M6.16208 54.854H67.5944C69.3636 51.9671 70.7357 48.8115 71.6381 45.4626H2.11841C3.0208 48.8115 4.39288 51.9671 6.16208 54.854Z" fill="#D80027" />
<path
d="M17.5548 5.69613H20.8354L17.7839 7.91308L18.9495 11.5003L15.8981 9.28333L12.8467 11.5003L13.8535 8.40133C11.1667 10.6394 8.81184 13.2615 6.87122 16.1831H7.92239L5.97994 17.5943C5.67731 18.0991 5.38706 18.612 5.10891 19.1324L6.03647 21.9873L4.30594 20.7299C3.87577 21.6413 3.4823 22.5732 3.12863 23.5246L4.15055 26.6701H7.92239L4.87083 28.887L6.03647 32.4742L2.98505 30.2573L1.1572 31.5853C0.97425 33.056 0.878906 34.5539 0.878906 36.0742H36.8789C36.8789 16.1921 36.8789 13.8482 36.8789 0.0742188C29.7672 0.0742188 23.1377 2.13719 17.5548 5.69613ZM18.9495 32.4742L15.8981 30.2573L12.8467 32.4742L14.0123 28.887L10.9607 26.6701H14.7326L15.8981 23.0829L17.0636 26.6701H20.8354L17.7839 28.887L18.9495 32.4742ZM17.7839 18.4L18.9495 21.9873L15.8981 19.7703L12.8467 21.9873L14.0123 18.4L10.9607 16.1831H14.7326L15.8981 12.5959L17.0636 16.1831H20.8354L17.7839 18.4ZM31.8625 32.4742L28.8111 30.2573L25.7597 32.4742L26.9253 28.887L23.8738 26.6701H27.6456L28.8111 23.0829L29.9766 26.6701H33.7485L30.6969 28.887L31.8625 32.4742ZM30.6969 18.4L31.8625 21.9873L28.8111 19.7703L25.7597 21.9873L26.9253 18.4L23.8738 16.1831H27.6456L28.8111 12.5959L29.9766 16.1831H33.7485L30.6969 18.4ZM30.6969 7.91308L31.8625 11.5003L28.8111 9.28333L25.7597 11.5003L26.9253 7.91308L23.8738 5.69613H27.6456L28.8111 2.10892L29.9766 5.69613H33.7485L30.6969 7.91308Z"
fill="#0052B4" />
</g>
<defs>
<clipPath id="clip0_7973_3129">
<path
d="M0.878906 26.6747C0.878906 11.9837 12.7884 0.0742188 27.4794 0.0742188H46.2784C60.9695 0.0742188 72.8789 11.9837 72.8789 26.6747V45.4737C72.8789 60.1648 60.9695 72.0742 46.2784 72.0742H27.4794C12.7884 72.0742 0.878906 60.1648 0.878906 45.4737V26.6747Z"
fill="white" />
</clipPath>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Hero #3
Learn a new skill, launch a project, land your dream career.
1-on-1
1-on-1
Mentorship
Andrew Lupien
Quality Assurance Engineer
Bernice Perry
Senior Business Analyst
Patrice Long
Senior Data Engineer
Akshay Sharma
Frontend Engineer
Jessica Lupien
UI/UX Designer
Cathy Diehl
Quality Assurance Engineer
Patrice Long
Software Engineer
Akshay Sharma
Frontend Engineer
Jessica Lupien
Quality Assurance Engineer
Bernice Perry
Senior Business Analyst
Patrice Long
Senior Data Engineer
Cathy Diehl
Frontend Engineer
Jessica Lupien
UX/UI Designer
Andrew Lupien
Senior Business Analyst
Cathy Diehl
Frontend Engineer
James Anderson
UI/UX Designer
Cathy Diehl
Software Engineer
Akshay Sharma
Frontend Engineers <section class="py-md-8 py-6" style="background-image: url(../assets/images/mentor/mentor-glow.svg); background-repeat: no-repeat; background-size: contain">
<div class="container py-lg-6">
<!--row-->
<div class="row align-items-center gy-4 justify-content-center">
<div class="col-xxl-5 col-xl-6 col-md-10">
<div class="d-flex flex-column gap-5 text-center">
<div class="d-flex flex-column gap-2">
<span class="text-dark fs-5">Learn a new skill, launch a project, land your dream career.</span>
<!--heading-->
<h1 class="mb-0 display-2 fw-bold">
<span>1-on-1</span>
<span class=" text-primary" data-strings="Javascript, Startup, React, Marketing, Branding"></span>
<div>Mentorship</div>
</h1>
</div>
<div class="d-flex flex-column gap-3">
<!--form-->
<form>
<div class="input-group mb-3">
<input type="text" class="form-control form-control-lg" placeholder="Search by Skills" aria-label="Search by Skills" aria-describedby="basic-addon2" />
<button class="btn btn-primary btn-lg" id="basic-addon2">Find mentors</button>
</div>
</form>
<div class="gap-2 d-flex flex-wrap justify-content-center">
<a href="#!" class="btn btn-tag btn-sm">Frontend</a>
<a href="#!" class="btn btn-tag btn-sm">Devops</a>
<a href="#!" class="btn btn-tag btn-sm">UI/UX designer</a>
<a href="#!" class="btn btn-tag btn-sm">Data Science</a>
<a href="#!" class="btn btn-tag btn-sm">Full Stack</a>
<a href="#!" class="btn btn-tag btn-sm">Backend</a>
<a href="#!" class="btn btn-tag btn-sm">Data Analyst</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="position-relative d-flex overflow-x-hidden py-lg-4 pt-4">
<div class="animate-marquee d-flex gap-3">
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-2.jpg" alt="mentor 1" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Andrew Lupien</h3>
<span class="text-gray-800">Quality Assurance Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-3.jpg" alt="mentor 2" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Bernice Perry</h3>
<span class="text-gray-800">Senior Business Analyst</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-4.jpg" alt="mentor 3" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Patrice Long</h3>
<span class="text-gray-800">Senior Data Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-5.jpg" alt="mentor 4" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Akshay Sharma</h3>
<span class="text-gray-800">Frontend Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-6.jpg" alt="mentor 5" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Jessica Lupien</h3>
<span class="text-gray-800">UI/UX Designer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-7.jpg" alt="mentor 6" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Cathy Diehl</h3>
<span class="text-gray-800">Quality Assurance Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-8.jpg" alt="mentor 7" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Patrice Long</h3>
<span class="text-gray-800">Software Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-1.jpg" alt="mentor 8" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Akshay Sharma</h3>
<span class="text-gray-800">Frontend Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-2.jpg" alt="mentor 9" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Jessica Lupien</h3>
<span class="text-gray-800">Quality Assurance Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-3.jpg" alt="mentor 10" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Bernice Perry</h3>
<span class="text-gray-800">Senior Business Analyst</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-4.jpg" alt="mentor 11" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Patrice Long</h3>
<span class="text-gray-800">Senior Data Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-5.jpg" alt="mentor 12" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Cathy Diehl</h3>
<span class="text-gray-800">Frontend Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-6.jpg" alt="mentor 13" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Jessica Lupien</h3>
<span class="text-gray-800">UX/UI Designer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-7.jpg" alt="mentor 14" class="avatar avatar-xl rounded-circle" />
<!--ccontent-->
<div class="mt-3">
<h3 class="mb-0 h4">Andrew Lupien</h3>
<span class="text-gray-800">Senior Business Analyst</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-8.jpg" alt="mentor 15" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Cathy Diehl</h3>
<span class="text-gray-800">Frontend Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-1.jpg" alt="mentor 16" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">James Anderson</h3>
<span class="text-gray-800">UI/UX Designer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-2.jpg" alt="mentor 18" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Cathy Diehl</h3>
<span class="text-gray-800">Software Engineer</span>
</div>
</div>
</a>
<a href="#!" class="bg-white text-center shadow-sm text-wrap rounded-4 w-100 border card-lift border" style="width: 200px !important">
<!--img-->
<div class="p-3">
<img src="../assets/images/mentor/mentor-img-3.jpg" alt="mentor 19" class="avatar avatar-xl rounded-circle" />
<!--content-->
<div class="mt-3">
<h3 class="mb-0 h4">Akshay Sharma</h3>
<span class="text-gray-800">Frontend Engineers</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>Hero #4
Learn today’s most in- demand-skills
Classes & Courses website template to start creating your stunning website. All templates are fully customizable.
- No credit card required
- Customer service 24/7
- No setup fee
- Cancel any time
<section class="py-lg-16 py-6">
<div class="container">
<div class="row d-flex align-items-center">
<div class=" col-xxl-5 col-xl-6 col-lg-6 col-12">
<div>
<h1 class="display-2 fw-bold mb-3">Learn today’s most in-<u class="text-warning"><span class="text-primary">demand-skills</span></u></h1>
<p class="lead mb-4">Classes & Courses website template to start creating your stunning website. All
templates
are fully customizable.</p>
<ul class="list-unstyled mb-5">
<li class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="var(--gk-success)" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
<span class="ms-2">No credit card required</span>
</li>
<li class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="var(--gk-success)" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
<span class="ms-2">Customer service 24/7</span>
</li>
<li class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="var(--gk-success)" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
<span class="ms-2">No setup fee</span>
</li>
<li class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="var(--gk-success)" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
<span class="ms-2">Cancel any time</span>
</li>
</ul>
<a href="#!" class="btn btn-dark btn-lg">Explore Online Courses</a>
</div>
</div>
<div class="col-xxl-5 offset-xxl-1 col-xl-6 col-lg-6 col-12 d-lg-flex justify-content-end">
<div class="mt-12 mt-lg-0 position-relative">
<div class="position-absolute top-0 start-0 translate-middle d-none d-md-block">
<img src="../assets/images/svg/graphics-2.svg" alt="graphics-2">
</div>
<img src="../assets/images/education/skils.jpg" alt="online course" class="img-fluid rounded-4 w-100 z-1 position-relative">
<div class="position-absolute top-100 start-100 translate-middle d-none d-md-block">
<img src="../assets/images/svg/graphics-1.svg" alt="graphics-1">
</div>
</div>
</div>
</div>
</div>
</section>Hero #5
Most trusted education platform
Grow your skills and advance career
Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.
Join Free Now
Watch Demo
<section class="py-lg-16 py-8">
<!-- container -->
<div class="container">
<!-- row -->
<div class="row align-items-center">
<!-- col -->
<div class="col-lg-6 mb-6 mb-lg-0">
<div class="">
<!-- heading -->
<h5 class="text-dark mb-4"><i class="fe fe-check icon-xxs icon-shape bg-light-success text-success rounded-circle me-2"></i>Most
trusted education platform</h5>
<!-- heading -->
<h1 class="display-3 fw-bold mb-3">Grow your skills and advance career</h1>
<!-- para -->
<p class="pe-lg-10 mb-5">Start, switch, or advance your career with more than 5,000 courses, Professional
Certificates, and degrees from world-class universities and companies.</p>
<!-- btn -->
<a href="#" class="btn btn-primary">Join Free Now</a>
<a href="https://www.youtube.com/watch?v=JRzWRZahOVU" class="glightbox fs-4 text-inherit ms-3"><img src="../assets/images/svg/play-btn.svg" alt="" class="me-2">Watch Demo</a>
</div>
</div>
<!-- col -->
<div class="col-lg-6 d-flex justify-content-center">
<!-- images -->
<div class="position-relative">
<img src="../assets/images/background/acedamy-img/bg-thumb.svg" alt="" class=" ">
<img src="../assets/images/background/acedamy-img/girl-image.png" alt="" class=" position-absolute end-0 bottom-0">
<img src="../assets/images/background/acedamy-img/frame-1.svg" alt="" class=" position-absolute top-0 ms-lg-n10 ms-n19">
<img src="../assets/images/background/acedamy-img/frame-2.svg" alt="" class=" position-absolute bottom-0 start-0 ms-lg-n14 ms-n6 mb-n7">
<img src="../assets/images/background/acedamy-img/target.svg" alt="" class=" position-absolute bottom-0 mb-8 ms-n10 ms-lg-n1 ">
<img src="../assets/images/background/acedamy-img/sound.svg" alt="" class=" position-absolute top-0 start-0 mt-18 ms-lg-n19 ms-n8">
<img src="../assets/images/background/acedamy-img/trophy.svg" alt="" class=" position-absolute top-0 start-0 ms-lg-n14 ms-n5">
</div>
</div>
</div>
</div>
</section>Hero #6
Find your dream job that you love to do.
The largest remote work community in the world. Sign up and post a job or create your developer profile.
<div class="bg-light py-lg-14 py-12 bg-cover ">
<!-- container -->
<div class="container ">
<!-- row -->
<div class="row align-items-center">
<div class="col-lg-6 col-12">
<div>
<div class=" text-center text-md-start ">
<!-- heading -->
<h1 class=" display-2 fw-bold mb-3">Find your dream job
that you love to do.</h1>
<!-- lead -->
<p class="lead">The largest remote work community in the world. Sign up and post a job
or create your developer profile.</p>
</div>
<div class="mt-8">
<!-- card -->
<div class="bg-white rounded-md-pill shadow rounded-3 mb-4">
<!-- card body -->
<div class="p-md-2 p-4">
<!-- form -->
<form class="row g-1">
<div class="col-12 col-md-5">
<!-- input -->
<div class="input-group mb-2 mb-md-0 border-md-0 border rounded-pill">
<!-- input group -->
<span class="input-group-text bg-transparent border-0 pe-1 ps-md-3 ps-md-0" id="searchJob"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-search " viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg></span>
<!-- search -->
<input type="search" class="form-control rounded-pill border-0 ps-3 form-focus-none" placeholder="Job Title" aria-label="Job Title" aria-describedby="searchJob">
</div>
</div>
<div class="col-12 col-md-4">
<!-- inpt group -->
<div class="input-group mb-3 mb-md-0 border-md-0 border rounded-pill">
<span class="input-group-text bg-transparent border-0 pe-0 ps-md-0" id="location"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt " viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"></path>
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
</svg></span>
<!-- search -->
<input type="search" class="form-control rounded-pill border-0 ps-3 form-focus-none" placeholder="Location" aria-label="Search Job" aria-describedby="location">
</div>
</div>
<div class="col-12 col-md-3 text-end d-grid">
<!-- button -->
<button type="submit" class="btn btn-primary rounded-pill">Search</button>
</div>
</form>
</div>
</div>
<!-- text -->
<span class=" fs-4">Currently listing 30,642 jobs from 5,717 companies</span>
</div>
</div>
</div>
<div class="offset-lg-1 col-lg-5 col-12 text-center">
<div class="position-relative ">
<img src="../assets/images/job/png/job-hero-section.png" class="img-fluid ">
<div class="position-absolute top-0 mt-7 ms-n6 ms-md-n6 ms-lg-n12 start-0">
<img src="../assets/images/job/job-hero-block-1.svg" class="img-fluid ">
</div>
<div class="position-absolute bottom-0 mb-8 me-n6 me-md-n4 me-lg-n12 end-0 ">
<img src="../assets/images/job/job-hero-block-2.svg" class="img-fluid ">
</div>
<div class="position-absolute bottom-0 mb-n4 ms-n1 ms-md-n4 ms-lg-n7 start-0">
<img src="../assets/images/job/job-hero-block-3.svg" class="img-fluid ">
</div>
</div>
</div>
</div>
</div>
</div>Hero #7
Modern web apps shipped faster
- Simple to use, beautiful UI design
- Complete complex project with ease
- An intuitive admin app for developers
TRUSTED BY MILLIONS OF DEVELOPERS & THOUSANDS OF ENTERPRISE TEAMS
<div class="py-lg-14 py-10 position-relative bg-cover" style="background-image:
url(../assets/images/background/gradient-bg.png);">
<!-- Image -->
<div class="container">
<div class="row align-items-center mb-6">
<div class="col-12 col-lg-7 order-md-2">
<div class="mb-2 mb-md-0">
<img src="../assets/images/background/graphics.svg" alt=""
class="img-fluid mw-md-130">
</div>
</div>
<div class="col-12 col-lg-5 order-md-1">
<!-- Heading -->
<h1 class="display-2 mb-5 fw-bold">
Modern web apps
shipped faster
</h1>
<!-- list -->
<ul class="list-unstyled fs-3 text-dark
mb-6 fw-medium">
<li class="mb-1 d-flex"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" fill="currentColor"
class="bi bi-check-circle-fill text-success mb-1" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z">
</path>
</svg></span><span>Simple to use, beautiful UI design</span></li>
<li class="mb-1 d-flex"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" fill="currentColor"
class="bi bi-check-circle-fill text-success mb-1" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z">
</path>
</svg></span><span>Complete complex project with ease</span></li>
<li class="mb-1 d-flex"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" fill="currentColor"
class="bi bi-check-circle-fill text-success mb-1" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z">
</path>
</svg></span><span>An intuitive admin app for developers</span></li>
</ul>
<!-- Buttons -->
<div class="mb-8 mb-lg-0">
<a href="#" class="btn btn-primary me-3 mb-2 mb-lg-0">
Get started for Free
</a>
<a href="#" class="text-nowrap btn-link">
Questions? Talk to an expert
</a>
</div>
</div>
</div>
<!-- Hero Section -->
<!-- row -->
<div class="row mt-8">
<div class="offset-xl-1 col-xl-10 col-md-12 col-12">
<!-- Heading -->
<div class="text-center mb-6 px-md-8">
<span class="ls-md">TRUSTED BY MILLIONS OF DEVELOPERS
& THOUSANDS OF ENTERPRISE TEAMS</span>
</div>
<!-- row -->
<div class="row text-center">
<!-- col -->
<div class="col">
<div class="mb-4 mb-lg-0">
<img src="../assets/images/brand/gray-logo-airbnb.svg" alt="" class="">
</div>
</div>
<!-- col -->
<div class="col">
<div class="mb-4 mb-lg-0">
<img src="../assets/images/brand/gray-logo-discord.svg" alt="" class="">
</div>
</div>
<div class="col">
<div class="mb-4 mb-lg-0">
<img src="../assets/images/brand/gray-logo-intercom.svg" alt="" class="">
</div>
</div>
<!-- col -->
<div class="col">
<div class="mb-4 mb-lg-0">
<img src="../assets/images/brand/gray-logo-stripe.svg" alt="" class="">
</div>
</div>
<!-- col -->
<div class="col">
<div class="mb-4 mb-lg-0">
<img src="../assets/images/brand/gray-logo-netflix.svg" alt="" class="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>Hero #8
Beta-v2.0.0
- Just shipped version
Request Access for Product
Geeks is a customizable, Bootstrap based UI Kits and Templates for Developers.
<div class="pt-md-14 pt-8 pb-8">
<div class="container">
<!-- Hero Section -->
<div class="row">
<div class="offset-xl-2 col-xl-8 col-lg-12 col-md-12">
<div class="mb-4 mb-xl-0 text-center">
<span class="badge bg-success-soft badge-pill fs-5"><span class=" fw-bold">Beta-v2.0.0 </span>- Just shipped version
</span>
<!-- Caption -->
<h1 class="display-2 ls-sm mt-2 fw-bold ">Request Access for Product </h1>
<p class="mb-6 h2 px-md-8">
Geeks is a customizable, Bootstrap based UI Kits and
Templates for Developers.
</p>
<form class="row px-lg-8 px-md-14">
<div class="mb-3 col-md-8 col-12 ps-md-0">
<input type="email" class="form-control" placeholder="Work Email" required="">
</div>
<div class="d-grid mb-3 col-md-4 col-12 ps-md-0">
<button class="btn btn-dark" type="submit">Request Access</button>
</div>
<div class="text-start col-12 fw-medium ps-md-0">Rated 5 Stars <span class="">by over</span><span class="text-primary"> 100+ Users</span></div>
</form>
</div>
</div>
<div class="offset-xl-1 col-xl-10 col-12 mt-12">
<div class="card bg-gradient-mix-shade px-md-5 pt-md-5 px-4 pt-4 rounded-3">
<img src="../assets/images/background/analytics.jpg" alt="" class="rounded-3 mb-n5 img-fluid shadow">
</div>
</div>
</div>
</div>
</div>Hero #9
Become a Vanilla JavaScript Developer
In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building incredible, powerful JavaScript applications.
- 4 Hours
- 12 Videos
- 10,234+ Enrolled
Create Free Account
OR
<section class="py-md-20 py-12 bg-white ">
<div class="container">
<!-- Hero Section -->
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12">
<div class="mb-4 mb-xl-0 text-center text-md-start">
<!-- Caption -->
<h1 class="display-2 fw-bold mb-3 ls-sm ">Become a Vanilla JavaScript Developer </h1>
<p class="mb-4 lead ">
In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building
incredible, powerful JavaScript applications.
</p>
<!-- List -->
<div class="mb-6 mb-0">
<ul class="list-unstyled fs-4 ">
<li class="mb-2 "><span class="me-2 "><i
class="fe fe-clock text-warning "></i></span><span class="align-top">4
Hours</span></li>
<li class="mb-2 "><span class="me-2 "><i
class="fe fe-video text-warning "></i></span><span class="align-top">12
Videos</span></li>
<li class="mb-2 "><span class="me-2 "><i
class="fe fe-users text-warning "></i></span><span class="align-top">10,234+
Enrolled</span></li>
</ul>
</div>
<a href="https://www.youtube.com/watch?v=JRzWRZahOVU"
class="glightbox btn btn-success btn-lg fs-4">Watch Preview</a>
</div>
</div>
<div class="offset-xl-1 col-xl-5 col-lg-6 col-md-12">
<!-- Card -->
<div class="card smooth-shadow-md" style="z-index: 1;">
<!-- Card body -->
<div class="card-body p-6">
<div class="mb-4">
<h1 class="mb-4 lh-1 fw-bold h2">Create Free Account</h1>
<div class="mt-3 mb-5 row g-2">
<!-- btn group -->
<div class="btn-group mb-2 mb-md-0 col-lg-4" role="group"
aria-label="socialButton">
<button type="button" class="btn btn-light shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-google text-danger" viewBox="0 0 16 16">
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z"></path>
</svg>Google</button>
</div>
<!-- btn group -->
<div class="btn-group mb-2 mb-md-0 col-lg-4" role="group"
aria-label="socialButton">
<button type="button" class="btn btn-light shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-twitter text-info" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>Twitter</button>
</div>
<!-- btn group -->
<div class="btn-group col-lg-4" role="group" aria-label="socialButton">
<button type="button" class="btn btn-light shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-facebook text-primary" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg>Facebook</button>
</div>
</div>
</div>
<div class="mb-4">
<div class="border-bottom"></div>
<div class="text-center mt-n2 lh-1">
<span class="bg-white px-2 fs-6 rounded">OR</span>
</div>
</div>
<!-- Form -->
<form>
<!-- Username -->
<div class="mb-3">
<label for="email" class="form-label visually-hidden">Email</label>
<input type="email" id="email" class="form-control" name="email"
placeholder="Email" required="">
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label visually-hidden">Password</label>
<input type="password" id="password" class="form-control" name="password"
placeholder="Password" required="">
</div>
<!-- Button -->
<div class="d-grid">
<button type="submit" class="btn btn-primary">Start Courses for Free</button>
</div>
</form>
</div>
<!-- Card Footer -->
<div class="card-footer px-6 py-4">
<p class="mb-0">By continuing you accept the <a href="#"
class="text-inherit fw-semibold">Terms of Use</a>,<a href="#"
class="text-inherit fw-semibold"> Privacy
Policy</a>, and <a href="#" class="text-inherit fw-semibold">Data Policy</a>
</p>
</div>
</div>
<!-- Pattern -->
<div class="position-relative">
<div
class="position-absolute bottom-0 end-0 me-md-n3 mb-md-n6 me-lg-n4 mb-lg-n4 me-xl-n6 mb-xl-n8 d-none d-md-block ">
<img src="../assets/images/pattern/dots-pattern.svg" alt=""
class="opacity-25">
</div>
</div>
</div>
</div>
</div>
</section>Hero #10
Build Better
Build skills with courses Join Geeks to watch, play, learn, make, and discover, uscipit esi viimentum laoreet non et odio.
View Plans Try for Free- 30,000 online courses
- Expert instruction
- Lifetime access
<section class=" py-10 bg-auto bg-light hero-graphics">
<div class="container">
<!-- Hero Section -->
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-7 col-md-12">
<div class="py-8 py-lg-0 text-center">
<h1 class="display-2 fw-bold mb-3 text-primary"><span
class="text-dark px-3 px-md-0">Build Better</span> <span
class=" text-primary"></span>
</h1>
<p class="mb-6 h2 text-dark">
Build skills with courses Join Geeks to watch, play, learn, make, and discover,
uscipit esi viimentum
laoreet non et odio.
</p>
<a href="../pricing.html" class="btn btn-primary me-2">View Plans</a>
<a href="../sign-up.html" class="btn btn-outline-primary">Try for Free</a>
<div class="mt-8 mb-0">
<ul class="list-inline">
<li class="list-inline-item text-dark fw-semibold lh-1 fs-4 me-3 mb-2 mb-md-0"><span
class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check text-success"
viewBox="0 0 16 16">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg></span><span class="align-middle">30,000 online
courses</span></li>
<li class="list-inline-item text-dark fw-semibold lh-1 fs-4 me-3 mb-2 mb-md-0"><span
class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check text-success"
viewBox="0 0 16 16">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg></span><span class="align-middle">Expert
instruction</span></li>
<li class="list-inline-item text-dark fw-semibold lh-1 fs-4"><span
class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check text-success"
viewBox="0 0 16 16">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg></span><span class="align-middle">Lifetime access</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>Hero #11
Welcome to Geeks UI Learning Application
Hand-picked Instructor and expertly crafted courses, designed for the modern students and entrepreneur.
Browse Courses Are You Instructor?
<div class="bg-primary">
<div class="container">
<!-- Hero Section -->
<div class="row align-items-center no-gutters">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<h1 class="text-white display-4 fw-bold">Welcome to Geeks UI Learning Application
</h1>
<p class="text-white-50 mb-4 lead">
Hand-picked Instructor and expertly crafted courses, designed for the modern students and entrepreneur.
</p>
<a href="pages/course-filter-list.html" class="btn btn-success">Browse Courses</a>
<a href="pages/sign-in.html" class="btn btn-white">Are You Instructor?</a>
</div>
</div>
<div class=" col-xl-7 col-lg-6 col-md-12 text-lg-right text-center">
<img src="../assets/images/hero/hero-img.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>