<section style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
<div class="container">
<nav class="position-relative navbar navbar-expand-lg navbar-light py-3 mb-5">
<a class="navbar-brand" href="#">
<img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
</a>
<button class="navbar-toggler" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
<li class="nav-item me-2"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item me-2"><a class="nav-link" href="#">Company</a></li>
<li class="nav-item me-2"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
</ul>
<div class="ms-auto"><a class="btn btn-outline-primary me-2" href="#">Log In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
</div>
</nav>
<div class="mb-5 mx-auto text-center" style="max-width: 32rem;">
<div class="mb-5">
<h2 class="mb-3 fs-1 fw-bold">
<span>The quick</span>
<span class="text-primary">brown fox</span>
<span>jumps over the lazy dog.</span>
</h2>
<p class="lead text-muted mb-0">The quick brown fox jumps over the lazy dog.</p>
</div>
<div><a class="btn btn-primary me-2" href="#">Check Now</a><a class="btn btn-outline-primary" href="#">Documentation</a></div>
</div>
<div class="position-relative text-center mx-auto mb-5" style="max-width: 48rem;">
<img class="img-fluid" src="metis-assets/elements/pattern-small.png" alt="">
<div class="position-absolute" style="top: 3%; left: 9%; width: 82%; height: 90%;">
<img class="img-fluid d-block mx-auto" src="metis-assets/elements/app-mockup.png" alt="">
</div>
</div>
<div class="row justify-content-center align-items-center pt-2">
<div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
<img class="img-fluid" src="metis-assets/logos/brands/tesla.svg" alt="">
</div>
<div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
<img class="img-fluid" src="metis-assets/logos/brands/facebook.svg" alt="">
</div>
<div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
<img class="img-fluid" src="metis-assets/logos/brands/marvel.svg" alt="">
</div>
<div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
<img class="img-fluid" src="metis-assets/logos/brands/nike.svg" alt="">
</div>
<div class="d-none d-md-block col-md-4 col-lg-2 mb-5 text-center">
<img class="img-fluid" src="metis-assets/logos/brands/airbnb.svg" alt="">
</div>
</div>
</div>
<div class="d-none fixed-top top-0 bottom-0" id="sideMenuHeaders01">
<div class="position-absolute top-0 end-0 bottom-0 start-0 bg-dark" style="opacity: 0.7"></div>
<nav class="navbar navbar-light position-absolute top-0 bottom-0 start-0 w-75 pt-3 pb-4 px-4 bg-white" style="overflow-y: auto;">
<div class="d-flex flex-column w-100 h-100">
<div class="d-flex justify-content-between mb-4">
<a href="#">
<img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
</a>
<button class="btn-close" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-label="Close"></button>
</div>
<div>
<ul class="navbar-nav mb-4">
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
</ul>
<div class="border-top pt-4 mb-5"><a class="btn btn-outline-primary w-100 mb-2" href="#">Log in</a><a class="btn btn-primary w-100" href="#">Sign up</a></div>
</div>
<div class="mt-auto">
<p>
<span>Get in Touch</span>
<a href="#">[email protected]</a>
</p>
<a class="me-2" href="#">
<img src="metis-assets/icons/facebook-blue.svg" alt="">
</a>
<a class="me-2" href="#">
<img src="metis-assets/icons/twitter-blue.svg" alt="">
</a>
<a class="me-2" href="#">
<img src="metis-assets/icons/instagram-blue.svg" alt="">
</a>
</div>
</div>
</nav>
</div>
</section>