{% load static %}
<!DOCTYPE html>
<html lang="en">

  <head>

    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <title>Notes Sharing System|| Home Page</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">


    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="{% static 'css/fontawesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/templatemo-scholar.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.css' %}">
    <link rel="stylesheet" href="{% static 'css/animate.css' %}">
    <link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<!--

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

-->
  </head>

<body>



  <!-- ***** Header Area Start ***** -->
  <header class="header-area header-sticky">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav class="main-nav">
                    <!-- ***** Logo Start ***** -->
                  
                        <h1 style="color: white;">Notes Sharing System</h1>
                  
                  
                    <ul class="nav">
                        
                      <li class="scroll-to-section"><a href="{% url 'index' %}" class="active">Home</a></li>
                      <li class="scroll-to-section"><a href="{% url 'notes_details' %}">Notes</a></li>
                     
                      <li class="scroll-to-section"><a href="{% url 'usersignup' %}">Register Now!</a></li>
                      <li class="scroll-to-section"><a href="{% url 'login' %}">Login</a></li>
                  </ul>   
                    <a class='menu-trigger'>
                        <span>Menu</span>
                    </a>
                    <!-- ***** Menu End ***** -->
                </nav>
            </div>
        </div>
    </div>
  </header>
  <!-- ***** Header Area End ***** -->

  <div class="main-banner">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="owl-carousel owl-banner">
            <div class="item item-1">
              <div class="header-text">
                <span class="category">Our Courses</span>
                <h2>With Scholar Teachers, Everything Is Easier</h2>
                <p>Scholar is free CSS template designed by TemplateMo for online educational related websites. This layout is based on the famous Bootstrap v5.3.0 framework.</p>
                <div class="buttons">
                  <div class="main-button">
                    <a href="#">Request Demo</a>
                  </div>
                  <div class="icon-button">
                    <a href="#"><i class="fa fa-play"></i> What's Scholar?</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="item item-2">
              <div class="header-text">
                <span class="category">Best Result</span>
                <h2>Get the best result out of your effort</h2>
                <p>You are allowed to use this template for any educational or commercial purpose. You are not allowed to re-distribute the template ZIP file on any other website.</p>
                <div class="buttons">
                  <div class="main-button">
                    <a href="#">Request Demo</a>
                  </div>
                  <div class="icon-button">
                    <a href="#"><i class="fa fa-play"></i> What's the best result?</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="item item-3">
              <div class="header-text">
                <span class="category">Online Learning</span>
                <h2>Online Learning helps you save the time</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporious incididunt ut labore et dolore magna aliqua suspendisse.</p>
                <div class="buttons">
                  <div class="main-button">
                    <a href="#">Request Demo</a>
                  </div>
                  <div class="icon-button">
                    <a href="#"><i class="fa fa-play"></i> What's Online Course?</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="services section" id="services">
    <div class="container">
     <h3>About Us</h3>
     <p>Share your notes with other users to collaborate and work together in real time. You can share a note with an unlimited number of users.</p>
     <p>Sharing notes with others can be a positive experience as it can help reinforce your own learning and understanding of the material. Explaining concepts to others may deepen your understanding. However, if sharing notes with certain individuals feels like it is enabling their lack of effort, it might not be beneficial for you.</p>
     <a href="{% url 'usersignup' %}" class="btn btn-primary">Join Us</a>
    </div>
  </div>



  <footer>
    <div class="container">
      <div class="col-lg-12">
        <p>Notes Sharing System @ Python(Django)</p>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <!-- Bootstrap core JavaScript -->
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/isotope.min.js' %}"></script>
  <script src="{% static 'js/owl-carousel.js' %}"></script>
  <script src="{% static 'js/counter.js' %}"></script>
  <script src="{% static 'js/custom.js' %}"></script>

  </body>
</html>