<!-- .hero -->
<section class="hero is-fullheight">
<!-- .hero-head -->
<nav class="hero-head">
<div class="columns is-mobile is-marginless heading has-text-weight-bold">
<div class="column left">
<figure class="navbar-item image">
<img src="images/tesla.svg" style="width: 6.25rem; height: 1rem;">
</figure>
</div>
<div class="column center desktop">
<p class="navbar-item has-text-black">MODEL S </p>
<p class="navbar-item has-text-black">MODEL X </p>
<p class="navbar-item has-text-black">MODEL 3 </p>
<p class="navbar-item has-text-white">ROADSTER</p>
<p class="navbar-item has-text-black">ENERGY </p>
</div>
<div class="column right">
<p class="navbar-item has-text-black desktop">SHOP </p>
<p class="navbar-item has-text-black desktop">SIGN IN</p>
<figure class="navbar-item image has-text-black center">
<i class="fas fa-bars" style="width: 1rem; height: 1rem;"></i>
</figure>
</div>
</div>
</nav>
<!-- /.hero-head -->
</section>
<!-- /.hero -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- <link rel="stylesheet" href="styles/debug.css"> -->
<link rel="stylesheet" href="styles/helpers.css">
<style>
.hero {
background: black url(images/hero-1.jpg) center / cover;
}
@media (max-width: 1024px) { .hero { background: black url(images/hero-2.jpg) center / cover; } }
@media (max-width: 768px) { .hero { background: black url(images/hero-3.jpg) center / cover; } }
</style>
</head>
<body>
