<!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">
		<link rel="stylesheet" href="styles/grid.css">
		<style>

/* background */		
.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; } }

/* responsive */
@media (max-width: 768px) {
	:root {
		font-size: 90%;
	}
}

		</style>
	</head>
	<body>

<!-- .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 desktop has-text-black desktop">SHOP   </p>
			<p class="navbar-item desktop has-text-black desktop">SIGN IN</p>
			<figure class="navbar-item image">
				<i class="fas fa-3x fa-bars has-text-black"
					style="width: 1rem; height: 1rem;"></i>
			</figure>
		</div>
	</div>
</nav>
<!-- /.hero-head -->

<!-- .hero-body -->
<header class="hero-body">
	<div class="is-overlay has-text-centered single-spaced" style="top: 92px;">
		<h2 class="subtitle is-4 has-text-weight-light has-text-black">Tesla</h2>
		<h1 class="title is-1 has-text-black">Roadster</h1>
	</div>
</header>
<!-- /.hero-body -->

</section>
<!-- /.hero -->

	</body>
</html>

</style>

</head>

<body>

</figure>

</div>

<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>

<i class="fas fa-3x fa-bars has-text-black"

style="width: 1rem; height: 1rem;"></i>

</figure>

</div>

</nav>

<h2 class="subtitle is-4 has-text-weight-light has-text-black">Tesla</h2>

<h1 class="title is-1 has-text-black">Roadster</h1>

</div>

</header>

</section>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello Bulma!</title>

href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">

<style>

/* background */

.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; } }

/* responsive */

@media (max-width: 768px) {

:root {

font-size: 90%;

}

-6:20