<!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>Document</title>
    <!--

    - 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" />
    <style>
        .container {
            width: 1530px;
            margin-top: 110px;
            padding-top: 40px;
            display: flex;
            justify-content: space-around;
            background-color: rgba(152, 152, 152, 0.219);
        }

        .courseTextDiv,
        .courseImgDiv {
            width: 600px;
        }

        .classSelect-outer {
            text-align: center;
        }

        .classSelect {
            width: 80%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 50px auto;
            /* padding: 10px 20px; */
        }

        .classCard {
            height: 250px;
            width: 200px;
            border-radius: 10px;
            border: 1px solid black;
            box-shadow: 2px 2px 10px rgba(100, 100, 100, 0.262);
            /* background-color: #28b687c7; */
            background: linear-gradient(160deg, #7f6efc1e 14.29%, #ffffff33);
            margin: 10px 10px;
        }

        .classCard p {
            text-align: justify;
            padding: 5px 10px;
        }

        .classCard h2 {
            margin: 10px;
        }

        .classCard button {
            padding: 3px 6px;
            background-color: #7F6EFC;
            margin: 5px auto;
        }

        .classCard button:hover {
            background-color: #6f5cff;
            box-shadow: 0px 0px 5px grey;
        }

        .slick-next:before {
            content: 'â†’';
        }

        .slick-next:before,
        .slick-prev:before {
            font-family: slick;
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            color: #7F6EFC;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>


<body>
    <!--
      - #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>

    <div class="outer-main-container">
        <div class="container">
            <div class="courseTextDiv">
                <h1>Start your career with us</h1>
            </div>
            <div class="courseImgDiv">
                <img src="../public/images/Digital nomad-cuate.png" height="500px" alt="">
            </div>
        </div>

        <div class="classSelect-outer">
            <h1 style="text-align:center;">Select Your Class</h1>
            <div class="classSelect slider">
                <!-- <div class="classCard">
                    <h2>CLASS 6th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor </p>

                </div> -->
                <div class="classCard">
                    <h2>CLASS 7th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor </p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </div>
                <div class="classCard">
                    <h2>CLASS 8th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor </p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </div>
                <div class="classCard">
                    <h2>CLASS 9th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor</p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </div>
                <div class="classCard">
                    <h2>CLASS 10th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor</p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </div>
                <div class="classCard">
                    <h2>CLASS 11th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor</p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </div>
                <div class="classCard">
                    <h2>CLASS 12th</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, eius exercitationem? Iure dolorem
                        non, quos asperiores at labore ad ipsa.Lorem ipsum dolor</p>
                    <a href="class7"><button>SHOW MORE</button></a>
                </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>

    <!-- scripts -->
    <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: 2,
            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>

</html>