<section class="is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-position: top;">
<nav class="navbar is-relative is-transparent py-3" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="metis-assets/logos/metis/metis.svg" alt="" width="auto" style="min-height: 40px;">
</a>
<a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start is-centered-absolute"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons"><a class="button is-primary is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
</div>
</div>
</div>
</div>
</nav>
<div class="section">
<div class="container">
<div class="is-max-w-lg mx-auto has-text-centered mb-6">
<h2 class="title is-spaced">
<span>The quick</span>
<span class="has-text-primary">brown fox</span>
<span>jumps over the lazy dog.</span>
</h2>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
<div class="buttons is-centered"><a class="button is-primary" href="#">Check Now</a><a class="button is-dark is-outlined" href="#">Documentation</a></div>
</div>
<div class="is-relative is-max-w-3xl mx-auto mb-6">
<img src="metis-assets/elements/pattern-small.png" alt="">
<div style="position:absolute; top: 3%; left: 9%; width: 82%; height: 90%;">
<img style="object-fit: contain; width: 100%; height: 100%" src="metis-assets/elements/app-mockup.png" alt="">
</div>
</div>
<div class="columns is-mobile is-multiline is-centered has-text-centered">
<div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
<img src="metis-assets/logos/brands/tesla.svg" alt="">
</div>
<div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
<img src="metis-assets/logos/brands/facebook.svg" alt="">
</div>
<div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
<img src="metis-assets/logos/brands/marvel.svg" alt="">
</div>
<div class="mb-4 column is-6-mobile is-4-tablet is-2-desktop">
<img src="metis-assets/logos/brands/nike.svg" alt="">
</div>
<div class="mb-4 column is-hidden-mobile is-4-tablet is-2-desktop">
<img src="metis-assets/logos/brands/airbnb.svg" alt="">
</div>
</div>
</div>
</div>
<div class="is-hidden navbar-side is-fixed" style="top: 0; left: 0; bottom: 0; width: 80%; height: 100%; z-index: 9999;" id="sideMenuHeaders01">
<div class="navbar-backdrop is-fixed is-top is-right is-fullsize has-background-grey" style="opacity: 75%; z-index: 50;"></div>
<nav class="navbar is-relative is-flex is-flex-direction-column pt-4 px-4" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
<div class="mb-5 navbar-brand is-flex is-justify-content-space-between">
<a class="navbar-item" href="#">
<img style="min-height: 35px;" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
</a>
<a class="navbar-item" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-label="Close">
<svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
<div>
<nav class="navbar mb-5">
<div class="is-fullwidth"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
</nav>
<div class="mb-6 pt-5 has-border-top"><a class="button is-block is-primary is-outlined mb-2" href="#">Log In</a><a class="button is-block is-primary" href="#">Sign Up</a></div>
</div>
<div class="pl-4 pb-4 mt-auto">
<p class="mb-5 is-size-7">
<span>Get in Touch</span>
<a href="#">[email protected]</a>
</p>
<a href="#">
<img src="metis-assets/icons/facebook-blue.svg" alt="">
</a>
<a href="#">
<img src="metis-assets/icons/twitter-blue.svg" alt="">
</a>
<a href="#">
<img src="metis-assets/icons/instagram-blue.svg" alt="">
</a>
</div>
</nav>
</div>
</section>