<div>
<nav class="navbar py-1 has-background-white">
<div class="container px-8-mobile">
<div class="navbar-brand is-align-items-center">
<a class="navbar-item" href="#">
<span class="navbar-item px-0 title is-size-4 has-text-dark">
<img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
</span>
</a>
<a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
<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 ml-auto mr-0">
<ul class="navbar-item pl-0">
<li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">About</a></li>
<li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
<li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
<li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
</ul>
</div>
<div class="navbar-end">
<div class="navbar-item is-hidden-mobile">
<div class="buttons"><a class="button is-primary" href="#">Contact</a></div>
</div>
</div>
</div>
</div>
</nav>
<section class="section" style="background-image: url('acros-assets/images/headers/header-1-bg.jpg'); background-size: cover; background-position: center;">
<div class="container">
<div class="columns">
<div class="column pt-8-tablet mb-12 mb-0-tablet">
<small class="is-block has-text-white has-text-weight-semibold is-uppercase mb-2">
<span>Develop your</span>
<span class="has-text-success">skills</span>
</small>
<h1 class="has-text-white has-mw-xl title is-size-1">Take care of your performance every day.</h1>
<p class="has-mw-md subtitle has-text-white mb-10">Take care to develop resources continually and integrity them with previous projects.</p>
<div class="buttons"><a class="button is-primary mr-4" href="#">Track your performance</a><a class="button is-white is-outlined" href="#">Learn more</a></div>
</div>
<div class="column">
<img class="image mx-auto" src="acros-assets/images/headers/header-1-woman.png" alt="">
</div>
</div>
</div>
</section>
<div class="has-background-white -mt-36-widescreen py-12">
<div class="container">
<a class="is-inline-block" href="#">
<img class="image" src="acros-assets/icons/headers/arrow-down.svg" alt="">
</a>
</div>
</div>
<div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
<div class="is-absolute" style="z-index: -1;"></div>
<div class="container is-relative">
<a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
<img src="acros-assets/icons/mobile-decline.svg" alt="">
</a>
</div>
<aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
<div>
<a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
<img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
</a>
<ul class="menu-list title is-size-6">
<li><a class="py-4 px-6" href="#">Home</a></li>
<li><a class="py-4 px-6" href="#">About</a></li>
<li><a class="py-4 px-6" href="#">Company</a></li>
<li><a class="py-4 px-6" href="#">Services</a></li>
<li><a class="py-4 px-6" href="#">Testimonials</a></li>
<li><a class="py-4 px-6" href="#">Contact</a></li>
</ul>
</div>
<div>
<div class="buttons mb-8"><a class="button is-dark is-outlined is-fullwidth mb-4" href="#">Log In</a><a class="button is-primary is-fullwidth" href="#">Sign up</a></div>
<small class="ml-6">2021 © Shuffle</small>
</div>
</aside>
</div>
</div>