<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Educator - Online Courses & Education</title>

  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->

  <!-- Swiper CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  <!--

    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/media_queries.css">
  <link rel="stylesheet" href="./assets/css/animation.css">

  <!--
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700;800;900&family=Roboto:wght@400;500&display=swap"
    rel="stylesheet">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
    integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
    integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

  <!--
    - main container
  -->

  <div class="container">

    <!--
      - #HEADER
    -->

    <header>

      <nav class="navbar">

        <div class="navbar-brand">
          <span><img src="./assets/images/logo.png" height="75em" alt="Educator Logo"></span>
          <span>
            <h1>ABHYUDAYA</h1>
          </span>
        </div>

        <ul class="navbar-nav">

          <li class="nav-item">
            <a href="/">Home</a>
          </li>
          <li class="nav-item">
            <a href="about">About Us</a>
          </li>
          <li class="nav-item">
            <a href="course">Courses</a>
          </li>
          <li class="nav-item">
            <a href="community">Community</a>
          </li>
          <li class="nav-item">
            <a href="contact">Contact Us</a>
          </li>

        </ul>

        <!-- <button class="btn btn-primary">
          <p class="btn-text">Try for free</p>
          <span class="square"></span>
        </button> -->

        <div class="btn1">
          <a href="login">
            <button><span>LOGIN</span></button>
          </a>
        </div>

        <button class="nav-toggle-btn">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </button>

      </nav>

    </header>

    <main>

      <!--
        - #HOME SECTION
      -->


      <section class="home" id="home">

        <div class="deco-shape shape-1">
          <img src="./assets/images/shape-1.png" alt="art shape" width="70">
        </div>
        <div class="deco-shape shape-2">
          <img src="./assets/images/shape-2.png" alt="art shape" width="55">
        </div>
        <!-- <div class="deco-shape shape-3">
          <img src="./assets/images/shape-3.png" alt="art shape" width="120">
        </div> -->
        <div class="deco-shape shape-4">
          <img src="./assets/images/shape-4.png" alt="art shape" width="30">
        </div>

        <div class="home-left">

          <p class="section-subtitle">Welcome To ABHYUDAYA</p>

          <div class="main-heading">
            The most <span style="display: inline;" class="auto-type"> </span> <br> learning paltform
          </div>
          <h1 class="main-heading">

          </h1>

          <p class="section-text">
            Integer in magna in est ultrices bibendum eget enim et dui imperdiet faucibus. Fusce eu tristique felis.
          </p>

          <div class="home-btn-group">
            <div class="btn1">
              <button><span>EXPLORE</span></button>
            </div>
            <div class="btn2">
              <button><span>CONTACT</span></button>
            </div>
          </div>

        </div>

        <div class="home-right">

          <div class="img-box">

            <img src="./assets/images/logo.png" alt="colorful background shape" class="background-shape">
            <img src="./assets/images/banner-img.png" alt="banner image" class="banner-img">

            <img src="./assets/images/banner-aliment-icon-1.png" alt="" class="icon-1 smooth-zigzag-anim-1" width="250">
            <img src="./assets/images/banner-aliment-icon-2.png" alt="" class="icon-2 smooth-zigzag-anim-2" width="240">
            <img src="./assets/images/banner-aliment-icon-3.png" alt="" class="icon-3 smooth-zigzag-anim-3" width="195">
            <!-- <img src="./assets/images/banner-aliment-icon-4.png" alt="" class="icon-4 drop-anim"> -->

          </div>

        </div>


      </section>

      <!-- <section class="section main-banner" id="top" data-section="section1">
        <video autoplay muted loop id="bg-video">
          <source src="assets/images/course-video.mp4" type="video/mp4" />
        </video>
    
        <div class="video-overlay header-text">
          <div class="caption">
            <h6>A Site for all Study Materials</h6>
            <h2 style="font-family: 'Audiowide', cursive;"><em>DIGI</em> ITER</h2>
            <div class="main-button">
              <div class="scroll-to-section"><a href="#section4">get materials</a></div>
            </div>
          </div>
        </div>
      </section> -->



      <!-- counter section -->
      <div>
        <div class="container-fluid counter-div">
          <div class="container1">
            <div class="row">
              <div class="col-md-3 mx-lg-0 mx-md-0 mx-5">
                <h2>
                  <span id="count1"></span>K+
                </h2>
                <p>STUDENTS</p>
              </div>
              <div class="col-md-3 mx-lg-0 mx-md-0 mx-5">
                <h2>
                  <span id="count2"></span>+
                </h2>
                <p>SUBJECTS</p>
              </div>
              <div class="col-md-3 mx-lg-0 mx-md-0 mx-5">
                <h2>
                  <span id="count3"></span>K+
                </h2>
                <p>CONTRIBUTERS</p>
              </div>
              <div class="col-md-3 mx-lg-0 mx-md-0 mx-5">
                <h2>
                  <span id="count4"></span>+
                </h2>
                <p>EXAMS</p>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!--
        - #COURSE CATEGORY SECTION
      -->

      <section class="category">

        <div class="overlay"></div>

        <div class="catdiv">
          <h2 class="section-title">Explore Popular Exams</h2>

          <ul class="course-item-group">

            <li class="course-category-item">

              <div class="wrapper">
                <ion-icon name="book-outline" class="icn"></ion-icon>

                <img src="./assets/images/course-category-icon-1-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">JEE</a>
                </h3>

                <p class="category-subtitle">Joint Entrance Exam</p>
              </div>

            </li>


            <li class="course-category-item">

              <div class="wrapper">
                <img src="./assets/images/course-category-icon-2.png" alt="category icon" class="category-icon default">

                <img src="./assets/images/course-category-icon-2-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">Business Strategy</a>
                </h3>

                <p class="category-subtitle">Improve your business</p>
              </div>

            </li>


            <li class="course-category-item">

              <div class="wrapper">
                <img src="./assets/images/course-category-icon-3.png" alt="category icon" class="category-icon default">

                <img src="./assets/images/course-category-icon-3-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">Learn Art & Design</a>
                </h3>

                <p class="category-subtitle">Fun & Challenging</p>
              </div>

            </li>


            <li class="course-category-item">

              <div class="wrapper">
                <img src="./assets/images/course-category-icon-4.png" alt="category icon" class="category-icon default">

                <img src="./assets/images/course-category-icon-4-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">Learn Lifestyle</a>
                </h3>

                <p class="category-subtitle">New Skills, New You</p>
              </div>

            </li>


            <li class="course-category-item">

              <div class="wrapper">
                <img src="./assets/images/course-category-icon-5.png" alt="category icon" class="category-icon default">

                <img src="./assets/images/course-category-icon-5-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">Learn Marketing</a>
                </h3>

                <p class="category-subtitle">Improve your business</p>
              </div>

            </li>


            <li class="course-category-item">

              <div class="wrapper">
                <img src="./assets/images/course-category-icon-6.png" alt="category icon" class="category-icon default">

                <img src="./assets/images/course-category-icon-6-w.png" alt="category icon white"
                  class="category-icon hover">
              </div>

              <div class="course-category-content">
                <h3 class="category-title">
                  <a href="#">Learn Finance</a>
                </h3>

                <p class="category-subtitle">Fun & Challenging</p>
              </div>

            </li>

          </ul>
        </div>
      </section>










      <!--
        - #INSTRUCTOR SECTION
      -->

      <section class="instructor">

        <p class="section-subtitle">Best Coach</p>

        <h2 class="section-title">Our Expert Instructor</h2>

        <div class="instructor-grid slider">

          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-1.jpg" alt="instructor louis sullivan">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Louis Sullivan</h4>

            <p class="instructor-title">Instructor</p>

          </div>
          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-1.jpg" alt="instructor louis sullivan">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Louis Sullivan</h4>

            <p class="instructor-title">Instructor</p>

          </div>
          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-1.jpg" alt="instructor louis sullivan">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Louis Sullivan</h4>

            <p class="instructor-title">Instructor</p>

          </div>

          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-2.jpg" alt="instructor camden david">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Camden David</h4>

            <p class="instructor-title">Instructor</p>

          </div>

          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-3.jpg" alt="instructor fiona dean">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Fiona Dean</h4>

            <p class="instructor-title">Instructor</p>

          </div>

          <div class="instructor-card">

            <div class="instructor-img-box">
              <img src="./assets/images/instructor-4.jpg" alt="instructor cherish sosa">

              <div class="social-link">
                <a href="#" class="facebook">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>

                <a href="#" class="instagram">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="#" class="twitter">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </div>
            </div>

            <h4 class="instructor-name">Cherish Sosa</h4>

            <p class="instructor-title">Instructor</p>

          </div>

        </div>

      </section>





      <!--
        - #TESTIMONIALS
      -->

      <section class="testimonials">

        <div class="testimonials-left">

          <p class="section-subtitle">Testimonial</p>

          <h2 class="section-title">What Our Client Says About Us</h2>

        </div>

        <div class="testimonials-right">

          <!-- <div class="testimonials-card">
            <img src="./assets/images/quote.png" alt="quote icon" class="quote-img">

            <p class="testimonials-text">
              "Proin feugiat tortor non neque eleifend, at fermentum est elementum. Ut mollis leo odio vulputate rutrum.
              Nunc sagittis
              sit amet ligula ut eleifend. Mauris consequat mauris sit amet turpis commodo fermentum. Quisque consequat
              tortor ut nisl
              finibus".
            </p>

            <div class="testimonials-client">

              <div class="client-img-box">
                <img src="./assets/images/client.jpg" alt="client christine rose">
              </div>

              <div class="client-detail">
                <h4 class="client-name">Christine Rose</h4>

                <p class="client-title">Customer</p>
              </div>

            </div>
          </div> -->

          <div class="slide-container swiper">
            <div class="slide-content">
              <div class="card-wrapper swiper-wrapper">
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile1.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile2.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile3.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile4.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile5.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile6.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile7.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile8.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
                <div class="card swiper-slide">
                  <div class="image-content">
                    <span class="overlay"></span>

                    <div class="card-image">
                      <!--<img src="images/profile9.jpg" alt="" class="card-img">-->
                    </div>
                  </div>

                  <div class="card-content">
                    <h2 class="name">David Dell</h2>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
                    <p class="description">The lorem text the section that contains header with having open
                      functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                    <!-- <button class="button">View More</button> -->
                  </div>
                </div>
              </div>
            </div>

            <div class="swiper-button-next swiper-navBtn"></div>
            <div class="swiper-button-prev swiper-navBtn"></div>
            <div class="swiper-pagination"></div>
          </div>


        </div>

      </section>





      <!--
        - #BLOG
      -->

      <section class="blog" id="blog">

        <p class="section-subtitle">Our Blog</p>

        <h2 class="section-title">Latest Blog & News</h2>

        <div class="blog-grid">

          <div class="blog-card">

            <div class="blog-banner-box">
              <img src="./assets/images/blog-1.jpg" alt="blog banner">
            </div>

            <div class="blog-content">

              <h3 class="blog-title">
                <a href="#">Proin feugiat tortor non neque eleifend.</a>
              </h3>

              <div class="wrapper">

                <div class="blog-publish-date">
                  <img src="./assets/images/calendar.png" alt="calendar icon">

                  <a href="#">07 Jan, 2022</a>
                </div>

                <div class="blog-comment">
                  <img src="./assets/images/comment.png" alt="comment icon">

                  <a href="#">3 Comments</a>
                </div>

              </div>

            </div>

          </div>

          <div class="blog-card">

            <div class="blog-banner-box">
              <img src="./assets/images/blog-2.jpg" alt="blog banner">
            </div>

            <div class="blog-content">

              <h3 class="blog-title">
                <a href="#">Proin feugiat tortor non neque eleifend.</a>
              </h3>

              <div class="wrapper">

                <div class="blog-publish-date">
                  <img src="./assets/images/calendar.png" alt="calendar icon">

                  <a href="#">04 Jan, 2022</a>
                </div>

                <div class="blog-comment">
                  <img src="./assets/images/comment.png" alt="comment icon">

                  <a href="#">10 Comments</a>
                </div>

              </div>

            </div>

          </div>

          <div class="blog-card">

            <div class="blog-banner-box">
              <img src="./assets/images/blog-3.jpg" alt="blog banner">
            </div>

            <div class="blog-content">

              <h3 class="blog-title">
                <a href="#">Proin feugiat tortor non neque eleifend.</a>
              </h3>

              <div class="wrapper">

                <div class="blog-publish-date">
                  <img src="./assets/images/calendar.png" alt="calendar icon">

                  <a href="#">01 Jan, 2022</a>
                </div>

                <div class="blog-comment">
                  <img src="./assets/images/comment.png" alt="comment icon">

                  <a href="#">5 Comments</a>
                </div>

              </div>

            </div>

          </div>

        </div>

      </section>





      <!--
        - #CONTACT
      -->

      <section class="contact">
        <div class="overlay"></div>

        <div class="contact-card" id="contact">
          <img src="./assets/images/cta-bg-img.png" alt="shape" class="contact-card-bg">

          <h2>Start Your Best Online Classes With Us</h2>

          <!-- <button class="btn btn-primary">
            <p class="btn-text">Contact Us</p>
            <span class="square"></span>
          </button> -->
          <div class="btn1">
            <button><span>CONTACT</span></button>
          </div>
        </div>

      </section>

    </main>





    <!--
      - #FOOTER
    -->

    <footer>

      <div class="footer-grid">

        <div class="grid-item">

          <div class="footer-logo" style="display: flex; align-items: center; ">
            <img style="display: inline;" src="./assets/images/logo.png" height="75px" alt="educator logo white">
            <h1 style="color: #08bd80;display: inline; margin-left: 15px;">ABHYUDAYA</h1>
          </div>

          <p class="footer-text">
            Duis a tempor magna. Maecenas ligula felis, imperdiet quis arcu eget, blandit ultricies risus. Vivamus
            fringilla urna
            vel risus congue accumsan.
          </p>

          <div class="social-link">
            <a href="#">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
            <a href="#">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
            <a href="#">
              <ion-icon name="logo-twitter"></ion-icon>
            </a>
            <a href="#">
              <ion-icon name="logo-youtube"></ion-icon>
            </a>
          </div>

        </div>

        <ul class="grid-item">

          <h4 class="item-heading">Our Link</h4>

          <li class="list-item">
            <a href="#home">Home</a>
          </li>

          <li class="list-item">
            <a href="#about">About Us</a>
          </li>

          <li class="list-item">
            <a href="#course">Courses</a>
          </li>

          <li class="list-item">
            <a href="#blog">Blog</a>
          </li>

          <li class="list-item">
            <a href="#contact">Contact Us</a>
          </li>

        </ul>

        <ul class="grid-item">

          <h4 class="item-heading">Other Link</h4>

          <li class="list-item">
            <a href="#">Instructor</a>
          </li>

          <li class="list-item">
            <a href="#">FAQ</a>
          </li>

          <li class="list-item">
            <a href="#">Event</a>
          </li>

          <li class="list-item">
            <a href="#">Privacy Policy</a>
          </li>

          <li class="list-item">
            <a href="#">Term & Condition</a>
          </li>

        </ul>

        <div class="grid-item">

          <h4 class="item-heading">Subscribe Now</h4>

          <div class="wrapper">
            <input type="text" name="subscribe" placeholder="Email Address">

            <button class="send-btn">
              <ion-icon name="paper-plane"></ion-icon>
            </button>
          </div>

        </div>

      </div>

      <p class="copyright">
        Made with ðŸ’– by DevBunnies
      </p>

    </footer>

  </div>





  <!--
    - custom js link
  -->

  <script src="./assets/js/script.js"></script>

  <!-- Swiper JS -->
  <!--Uncomment this line-->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

  <!--
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

  <!-- slider script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
        integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $('.slider').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });
    </script>
</body>
<script>
  var typed = new Typed(".auto-type", {
    strings: ["Valuable", "Affordable","Reliable","Valuable"],
    typeSpeed: 100,
    backSpeed: 100,
    loop: true
  });

  var swiper = new Swiper(".slide-content", {
    slidesPerView: 3,
    spaceBetween: 25,
    loop: true,
    centerSlide: 'true',
    fade: 'true',
    grabCursor: 'true',
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      520: {
        slidesPerView: 2,
      },
      950: {
        slidesPerView: 3,
      },
    },
  });
</script>

</html>