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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERISN Classroom</title>
  <!--styles links-->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
  <link rel="stylesheet" href="assets/css/font-family.css">
  <link rel="stylesheet" href="assets/css/all.css">
  <link rel="stylesheet" href="assets/owl-carousel/css/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/css/fontawesome.min.css" />
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/style2.css">
  <link rel="stylesheet" href="assets/css/mobile.css">
  <link rel="stylesheet" href="assets/css/style-responsive.css">
</head>

<body>
  <header> 
    <div class="search-bar-wrap">
      <input type="text" name="" placeholder="Search..">
    </div>
    <div class="user-login-section">
      <div class="notification-icon-wrap">
        <img src="assets/images/notification.png">
        <span></span>
        <div class="notifications-wrap">
          <div class="notifications">
            <h4>Notifications</h4>
            <ul>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
              <li> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor  </p>
                <i class="fas fa-trash-alt"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="user-wrap">
        <div class="user-login-head">
          <img src="assets/images/A.png">
          <h5><span class="user-name">Andrew</span><i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-up" aria-hidden="true"></i></h5>
        </div>
        <div class="login-wrap-open">
          <ul>
            <li><span><i class="fa fa-user" aria-hidden="true"></i></span>My Profile</li>
            <li><span><i class="fas fa-sign-out-alt"></i></span>Sign Out</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mobileMenu">
      <i class="fas fa-bars"></i>
    </div>
  </header>
  <aside id="mySidebar" class="sideMenu" >
    <div class="logo-wrap">
      <img src="assets/images/logo1 (2).png">
      <div class="logo-name">
        <h3>Erisn</h3>
        <p>Classrooms</p>
      </div>
    </div>
    <ul>
      <li class="list ">
        <a href="teachers-classes-my-classes.html">
          <img src="assets/images/myclasses1.png" class="icon-inactive">
          <img src="assets/images/myclasses2.png" class="icon-active">
          <span>My Classes</span>
        </a>
      </li> 
      <li class="list">
        <a href="teachers-attendance.html">
          <img src="assets/images/attendance1.png" class="icon-inactive">
          <img src="assets/images/attendance2.png" class="icon-active">
          <span>Attendance</span>
        </a>
      </li>
      <li class="list">
        <a href="teachers-calendar.html">
          <img src="assets/images/calendar1.png" class="icon-inactive">
          <img src="assets/images/calendar2.png" class="icon-active">
          <span>Calendar</span>
        </a>
      </li>
      <li class="list">
        <a href="teachers-assignments.html">
          <img src="assets/images/assignments1.png" class="icon-inactive">
          <img src="assets/images/assignments2.png" class="icon-active">
          <span>Assignments</span>
        </a>
      </li>
      <li class="list active "> 
        <a href="Teacher-flow-testexam.html">
          <img src="assets/images/tests1.png" class="icon-inactive">
          <img src="assets/images/tests2.png" class="icon-active">
          <span>Tests/Exams</span>
        </a>
      </li>
      <li class="list "> 
        <a href="TF_grade.html">
          <img src="assets/images/mygrade1.png" class="icon-inactive">
          <img src="assets/images/mygrade2.png" class="icon-active">
          <span>My Grades</span>
        </a>
      </li> 
      <li class="list ">
        <a href="teachers-notification.html">
          <img src="assets/images/bell1.png" class="icon-inactive">
          <img src="assets/images/bell2.png" class="icon-active">
          <span>Notifications</span>
        </a>
      </li> 
      <li class="list">
        <a href="#">
          <img src="assets/images/settings1.png" class="icon-inactive">
          <img src="assets/images/settings2.png" class="icon-active">
          <span>Settings</span>
        </a>
      </li> 
    </ul>
  </aside>
  <main class="" id="main">
    <div class="main-inner-content main-wrap ">
      <h4 class="content-heading-sec">Evaluation</h4>

      <div class=" ">
        <div class=" row grade-container-sec">
          <div class="teacher-flow-class-one">
            <a href="TF-evaluation-details.html">
              <div class="t-flow-class-img"> <img src="assets/images/class1.png"
                class="img-fluid d-block mx-auto">
                <p>6th Grade</p>
              </div>
            </a>
          </div>
          <!--------->
          <div class="teacher-flow-class-one">
            <a href="#">
              <div class="t-flow-class-img"> <img src="assets/images/class2.png"
                class="img-fluid d-block mx-auto">
                <p>7th Grade</p>
              </div>
            </a>
          </div>
          <!------------------->
          <div class="teacher-flow-class-one">
            <a href="#">
              <div class="t-flow-class-img"> <img src="assets/images/class1.png"
                class="img-fluid d-block mx-auto">
                <p>8th Grade</p>
              </div>
            </a>
          </div>
          <!----------------->
          <div class="teacher-flow-class-one">
            <a href="#">
              <div class="t-flow-class-img"> <img src="assets/images/class2.png"
                class="img-fluid d-block mx-auto">
                <p>9th Grade</p>
              </div>
            </a>
          </div>
          <!----------------->
          <div class="teacher-flow-class-one">
            <a href="#">
              <div class="t-flow-class-img"> <img src="assets/images/class1.png"
                class="img-fluid d-block mx-auto">
                <p>10th Grade</p>
              </div>
            </a>
          </div>
          <!----------------->
        </div>
        <!---------------------------------------------------------------->
      </div>
    </div>
  </main>
 <script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/popper.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
<script defer src="assets/js/all.js"></script> 
<script defer src="assets/js/main.js"></script>  
<script src="assets/owl-carousel/js/owl.carousel.min.js"></script>
</body>

</html>