<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
	      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
	       <!-- <link rel="stylesheet" type="text/css" href="app.css"> -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        #content {
        text-align: center;
        padding-top: 5%;
        color:Black;
    }
    
    /* body{
        background: url(https://images.unsplash.com/photo-1486286701208-1d58e9338013?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
        background-size: cover;
        background-position: center;
    } */
    h1,h3{
        color:rgb(40, 6, 94);
    }
    .leftside{
        padding-left: 70%;
    }
  
      
    .h1{
        margin: 50px 50px 50px 250px;
        
    }

    .card{
        margin: 25px 250px;
    }

    .fa-plus-circle{
        font-size: 30px;
        padding-right: 0;
        padding-left: 0;
    }

    .fa-minus-circle{
        font-size: 30px;
        padding-right: 0;
        padding-left: 0;
    }

    .number{
        font-size: 28px;
        padding-right: 20px;
    }
</style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
      <a class="navbar-brand" href="{% url 'resources' %}">Sports Resources</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <!-- <li class="nav-item active">
            <a class="nav-link" href="#">Home </a>
          </li> -->
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'bookingHistory' %}">Booking History</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'bookingRequests' %}">Booking Requests</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'blockedUsers' %}">Blocked Users</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'timetable' %}">Timetable</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
              
          <!--<li class="nav-item"><a class="nav-link" href ="{% url 'logout' %}">Logout</a></li>-->
          <div class="bs-example">
          <div class="btn-group-vertical">
              <div class="btn-group">
                  <button id="butn-1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Account</button>
                  <div class="dropdown-menu">
                      <a href="{% url 'updatePassword' %}" class="dropdown-item">Change Password</a>
                      <a href="{% url 'logout' %}" class="dropdown-item">Logout</a>
                  </div>
              </div>
          <!-- <li class="nav-item"><a class="nav-link"href ="#">Login <i class="fa fa-user-plus" aria-hidden="true"></i></a></li> -->
          </div>
         </ul>
      </div>
    </div> 
    </nav>
    <div class="container">
    <h1 class="mt-4 pt-4" style="color:black">About</h1>
        <ul class="mt-4 text-muted" style="font-size: 19px;">
            <li><p>Sports Resources Booking Application is the management of all the resources of an organization.</p></li>
            <li><p>The Admin can add and delete the resources when required.<br></li>
            <li><p>Available resources are requested to issue by the users and the admin can accept or reject the booking request based on the blocked users list.</p></li>
            <li><p>When the users do not return the resources or lose the item then they are blocked until the user pays the fine.</p></li>
            <li><p>The fines are collected manually by the admin and the users  are unblocked.</p></li>
        </ul>
    </div>
        <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
       <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    </body>
</html>