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

    <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 #2

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
Explore Online Courses
graphics-2
online course
graphics-1
<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 &amp; 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 #3

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 #4

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.

Currently listing 30,642 jobs from 5,717 companies
<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 #5

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 #6

Beta-v2.0.0 - Just shipped version

Request Access for Product

Geeks is a customizable, Bootstrap based UI Kits and Templates for Developers.

Rated 5 Stars by over 100+ Users
<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 #7

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
Watch Preview

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 #8

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 #9

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>