<!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">
</head>

<body>

    <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="#blog">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>


    <!--
        - #ABOUT SECTION
      -->

    <section class="about" id="about">

        <div class="about-left">

            <div class="img-box">
                <img src="./assets/images/about-img-bg.png" alt="about bg" class="about-bg">

                <img src="./assets/images/about-img.png" alt="about person" class="about-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-3.png" alt="" class="icon-2 smooth-zigzag-anim-3"
                    width="195">
            </div>

        </div>

        <div class="about-right">

            <p class="section-subtitle">About Us</p>

            <h2 class="section-title">We Have Best Online Education</h2>

            <p class="section-text">
                Morbi porttitor ligula id varius consectetur. Integer ipsum justo, congue sit amet massa vel, porttitor
                semper magna.
                Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>

            <ul class="about-ul">

                <li>
                    <ion-icon name="checkmark-circle"></ion-icon>
                    <p>Suspendisse nunc massa, pellentesque eu nibh eget.</p>
                </li>

                <li>
                    <ion-icon name="checkmark-circle"></ion-icon>
                    <p>Suspendisse nunc massa, pellentesque eu nibh eget.</p>
                </li>

                <li>
                    <ion-icon name="checkmark-circle"></ion-icon>
                    <p>Suspendisse nunc massa, pellentesque eu nibh eget.</p>
                </li>

            </ul>

            <button class="btn btn-primary">
                <p class="btn-text">Explore More</p>
                <span class="square"></span>
            </button>

        </div>

    </section>



    <!--
        - #FEATURES SECTION
      -->

    <section class="features">

        <div class="features-left">

            <p class="section-subtitle">Core Features</p>

            <h2 class="section-title">See What Our Mission Are</h2>

            <ul>

                <li class="features-item">
                    <div class="item-icon-box blue">
                        <img src="./assets/images/feature-icon-1.png" alt="feature icon">
                    </div>

                    <div class="wrapper">

                        <h3 class="item-title">Student Life</h3>

                        <p class="item-text">Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur
                            dignissim
                            dictum.</p>

                    </div>
                </li>

                <li class="features-item">
                    <div class="item-icon-box pink">
                        <img src="./assets/images/feature-icon-2.png" alt="feature icon">
                    </div>

                    <div class="wrapper">

                        <h3 class="item-title">Best Online Class</h3>

                        <p class="item-text">Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur
                            dignissim
                            dictum.</p>

                    </div>
                </li>

                <li class="features-item">
                    <div class="item-icon-box purple">
                        <img src="./assets/images/feature-icon-3.png" alt="feature icon">
                    </div>

                    <div class="wrapper">

                        <h3 class="item-title">24x7 Program</h3>

                        <p class="item-text">Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur
                            dignissim
                            dictum.</p>

                    </div>
                </li>

            </ul>

        </div>

        <div class="features-right">
            <img src="./assets/images/coure-features-img.jpg" alt="core features image">
        </div>

    </section>

    <!--
        - #COURSE SECTION
      -->

    <section class="course" id="course">

        <p class="section-subtitle">Our Online Courses</p>

        <h2 class="section-title">Find The Right Online Course For You</h2>

        <div class="course-grid">

            <div class="course-card">

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

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Become product manager learn skills.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>5.0 (2k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$50.00</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>600k</p>
                        </div>
                    </div>

                </div>

            </div>


            <div class="course-card">

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

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Fashion and luxury fashion in a changing.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>4.7 (5k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$80.00</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>545k</p>
                        </div>
                    </div>

                </div>

            </div>


            <div class="course-card">

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

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Learning to write as a professional.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>4.1 (3k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$29.90</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>317k</p>
                        </div>
                    </div>

                </div>

            </div>


            <div class="course-card">

                <div class="course-banner">
                    <img src="./assets/images/course-4.jpg" alt="course banner">

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Improving accessibility of Your markdown.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>4.8 (3.9k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$49.90</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>891k</p>
                        </div>
                    </div>

                </div>

            </div>



            <div class="course-card">

                <div class="course-banner">
                    <img src="./assets/images/course-5.jpg" alt="course banner">

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Master query in a short period of time.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>3.8 (1k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$89.00</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>204k</p>
                        </div>
                    </div>

                </div>

            </div>


            <div class="course-card">

                <div class="course-banner">
                    <img src="./assets/images/course-6.jpg" alt="course banner">

                    <div class="course-tag-box">
                        <a href="#" class="badge-tag orange">Business</a>
                        <a href="#" class="badge-tag blue">Marketing</a>
                    </div>
                </div>

                <div class="course-content">

                    <h3 class="card-title">
                        <a href="#">Business Intelligence analyst Course 2022.</a>
                    </h3>

                    <div class="wrapper border-bottom">

                        <div class="author">
                            <img src="./assets/images/course-instructor-img.jpg" alt="course instructor image"
                                class="author-img">

                            <a href="#" class="author-name">Lillian Wals</a>
                        </div>

                        <div class="rating">
                            <ion-icon name="star"></ion-icon>
                            <p>4.9 (23k)</p>
                        </div>

                    </div>

                    <div class="wrapper">
                        <div class="course-price">$199.00</div>

                        <div class="enrolled">
                            <div class="icon-user">
                                <img src="./assets/images/student-icon.png" alt="user icon">
                            </div>

                            <p>1.3M</p>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <button class="btn btn-primary">
            <p class="btn-text">View All Course</p>
            <span class="square"></span>
        </button>

    </section>





    <!--
        - #EVENT SECTION
      -->

    <section class="event">

        <div class="event-left">

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

            <button class="play smooth-zigzag-anim-1">
                <div class="play-icon pulse-anim">
                    <ion-icon name="play-circle"></ion-icon>
                </div>

                <p>Watch Us !</p>
            </button>

        </div>

        <div class="event-right">

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

            <h2 class="section-title">Join Our Upcoming Events</h2>

            <div class="event-card-group">

                <div class="event-card">

                    <div class="content-left">
                        <p class="day">28</p>
                        <p class="month">Feb, 2022</p>
                    </div>

                    <div class="content-right">
                        <div class="schedule">
                            <p class="time">10:30am To 2:30pm</p>
                            <p class="place">Poland</p>
                        </div>

                        <a href="#" class="event-name">Business creativity workshops</a>
                    </div>

                </div>

                <div class="event-card">

                    <div class="content-left">
                        <p class="day">15</p>
                        <p class="month">Mar, 2022</p>
                    </div>

                    <div class="content-right">
                        <div class="schedule">
                            <p class="time">10:30am To 2:30pm</p>
                            <p class="place">Poland</p>
                        </div>

                        <a href="#" class="event-name">Street Performance: Call for Art.</a>
                    </div>

                </div>

                <div class="event-card">

                    <div class="content-left">
                        <p class="day">20</p>
                        <p class="month">May, 2022</p>
                    </div>

                    <div class="content-right">
                        <div class="schedule">
                            <p class="time">10:30am To 2:30pm</p>
                            <p class="place">Poland</p>
                        </div>

                        <a href="#" class="event-name">Digital transformation conference</a>
                    </div>

                </div>

            </div>

        </div>

    </section>







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

</body>

</html>