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

    <div class="py-lg-18 py-10 bg-auto" style="background: url(../assets/images/hero/hero-graphics.svg)no-repeat , linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), rgba(221, 218, 255, 0.3) ; background-size: cover; background-position: top center">
  <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="headingTyped 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-semi-bold lh-1 fs-5 me-3 mb-2 mb-md-0"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">30,000 online courses</span></li>
              <li class="list-inline-item text-dark fw-semi-bold lh-1 fs-5  me-3  mb-2 mb-md-0"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">Expert instruction</span></li>
              <li class="list-inline-item text-dark fw-semi-bold lh-1 fs-5"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">Lifetime access</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
   </div>
 </div>

<div class="py-md-20 py-12 bg-dark ">
 <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 text-white ls-sm ">Become a Vanilla JavaScript Developer </h1>
         <p class="mb-4 lead text-white-50">
           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-5 ">
             <li class="mb-2 text-white-50"><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 text-white-50"><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 text-white-50"><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="popup-youtube btn btn-white btn-lg fs-5">Watch Preview</a>
       </div>
     </div>
     <div class="offset-xl-1 col-xl-5 col-lg-6 col-md-12">
        <!-- Card -->
       <div class="card" 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 d-grid d-md-block">
                <!-- btn group -->
               <div class="btn-group mb-2 mb-md-0" role="group" aria-label="socialButton">
                 <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-google me-2 text-danger"></i>Google</button>
               </div>
                <!-- btn group -->
               <div class="btn-group mb-2 mb-md-0" role="group" aria-label="socialButton">
                 <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-twitter text-info me-2"></i>Twitter</button>
               </div>
                <!-- btn group -->
               <div class="btn-group" role="group" aria-label="socialButton">
                 <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-facebook text-primary me-2"></i>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">OR</span>
             </div>
           </div>
           <!-- Form -->
           <form>
             <!-- Username -->
             <div class="mb-2">
               <label for="email" class="form-label sr-only">Email</label>
               <input type="email" id="email" class="form-control" name="email" placeholder="Email" required="">
             </div>
             <!-- Password -->
             <div class="mb-2">
               <label for="password" class="form-label sr-only">Password</label>
               <input type="password" id="password" class="form-control" name="password" placeholder="Password" required="">
             </div>
             <!-- Button -->
             <button type="submit" class="btn btn-primary btn-block">Start Courses for Free</button>
           </form>
         </div>
          <!-- Card Footer -->
         <div class="card-footer bg-white px-6 py-4">
           <p class="mb-0">By continuing you accept the <a href="#" class="text-inherit fw-semi-bold">Terms of Use</a>,<a href="#" class="text-inherit fw-semi-bold"> Privacy
               Policy</a>, and <a href="#" class="text-inherit fw-semi-bold">Data Policy</a>
           </p>
         </div>
       </div>
        <!-- Pattern -->
       <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="">
       </div>
     </div>
   </div>
 </div>
 </div>

<div class="pt-md-14 pt-12 pb-14">
 <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-light-success badge-pill fs-5 text-dark"><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 text-muted px-md-8">
             Geeks is a customizable, Bootstrap based UI Kits and
             Templates for Developers.
         </p>
         <form class="row px-lg-16 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="text-muted">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>

<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"><i class="mdi mdi-check-circle text-success
               me-2"></i>Simple to use, beautiful UI design</li>
           <li class="mb-1"><i class="mdi mdi-check-circle text-success
               me-2"></i>Complete complex project with ease</li>
           <li class="mb-1"><i class="mdi mdi-check-circle text-success
               me-2"></i>An intuitive admin app for developers</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-10">
   <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="text-inverse-dark">
         </div>
  </div>
  <!-- col -->
  <div class="col">
    <div class="mb-4 mb-lg-0">
      <img src="../assets/images/brand/gray-logo-discord.svg"
        alt="" class="text-inverse-dark">
    </div>
  </div>
  <div class="col">
    <div class="mb-4 mb-lg-0">
      <img src="../assets/images/brand/gray-logo-intercom.svg"
        alt="" class="text-inverse-dark">
    </div>
  </div>
   <!-- col -->
  <div class="col">
    <div class="mb-4 mb-lg-0">
      <img src="../assets/images/brand/gray-logo-stripe.svg"
        alt="" class="text-inverse-dark">
    </div>
  </div>
   <!-- col -->
  <div class="col">
    <div class="mb-4 mb-lg-0">
      <img src="../assets/images/brand/gray-logo-netflix.svg"
            alt="" class="text-inverse-dark">
        </div>
      </div>
    </div>
  </div>
 </div>
   </div>
 </div>