<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./navbar.css">
<link rel="stylesheet" href="./footer.css">
<link rel="stylesheet" href="./home_layout.css">
<script src="./navbar.js" defer></script>
<script src="./home_layout.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<!-- NAVIGATION SECTION -->
<header class="header">
<div class="logo">Bio<span class="second">Lith</span></div>
<!-- <img src="./images/Home/logo_1-removebg-preview.png" alt="" width="150px"> -->
<!-- Hamburger -->
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<!-- End of Hamburger -->
<nav>
<ul class="menu-items">
<li><a href="{{ url_for('home') }}" class="menu-item">Home</a></li>
<li><a href="{{ url_for('pages', page='hardware') }}" class="menu-item">Hardware</a></li>
<!-- Dropdown -->
<!-- add class of expand-btn for responsiveness -->
<li class="dropdown"><a href="#" class="menu-item expand-btn"><span>People </span><i class="fa-solid fa-caret-down"></i></a></i>
<!-- add class of expandable for responsiveness to unoredered list-->
<ul class="dropdown-menu expandable">
<li><a href="{{ url_for('pages', page='team') }}" class="menu-item">Team</a></li>
<li><a href="{{ url_for('pages', page='attributions') }}" class="menu-item">Attributions</a></li>
<li><a href="#" class="menu-item">Collaborations</a></li>
</ul>
</li>
<!-- End of dropdown menu -->
<li><a href="{{ url_for('pages', page='human-practices') }}" class="menu-item">Human Practice</a></li>
<!-- First mega menu -->
<!-- add class of expand-btn for responsiveness -->
<li><a href="#" class="menu-item expand-btn"><span>Project</span><i class="fa-solid fa-caret-down"></i></a>
<!-- add class of expandable for responsiveness-->
<div class="mega-menu expandable">
<div class="content">
<div class="col">
<section>
<ul class="mega-links">
<li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
<li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
<li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
<li><a href="#">Implementation</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<ul class="mega-links" id="mega-links">
<li><a href="#">Design</a></li>
<li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
<li><a href="#">Modelling</a></li>
<li><a href="#">Proof of Concept</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<ul class="mega-links" id="mega-links">
<li><a href="#">Safety</a></li>
<li><a href="#">Results</a></li>
</ul>
</section>
</div>
</div>
</div>
</li>
<!-- End of first mega menu-->
<li><a href="#" class="menu-item">Parts</a></li>
<!-- Second mega menu -->
<!-- add class of expand-btn for responsiveness -->
<li><a href="#" class="menu-item expand-btn"><span>Judging and Awards</span><i class="fa-solid fa-caret-down"></i></a>
<!-- add class of expandable for responsiveness-->
<div class="mega-menu expandable">
<div class="content_1">
<div class="col">
<section>
<ul class="mega-links">
<li><a href="#">Medals</a></li>
<li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
<li><a href="#">Communication</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<ul class="mega-links" id="mega-links">
<li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
<li><a href="#">Partnership</a></li>
<li><a href="{{ url_for('pages', page='sustainable') }}">Sustainable Development Impact</a></li>
</ul>
</section>
</div>
</div>
</div>
</li>
<!-- End of second mega menu-->
</ul>
</nav>
</header>
<!-- END OF NAVIGATION SECTION -->