index.html

<div class="home">
		<nav class="navbar navbar-expand-lg navbar-dark" ref="navbar">
			<div class="container-fluid">
				<span class="navbar-brand text-white">Outbox</span>
				<button
					class="navbar-toggler"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent"
					aria-expanded="false"
					aria-label="Toggle navigation"
				>
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class="nav-item">
							<router-link class="nav-link text-white" aria-current="page" to="/">Home</router-link>
						</li>
						<li class="nav-item">
							<router-link class="nav-link text-white" to="/about">About</router-link>
						</li>
					</ul>
					<!-- <form class="d-flex">
						<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
						<button class="btn btn-outline-success text-white" type="submit">Search</button>
					</form>-->
				</div>
			</div>
		</nav>
		<div class="hero" ref="hero">
			<h1>Lorem ipsum</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
				deserunt.
			</p>
			<a href="#main" class="skip-to-content">Skip To main content</a>
		</div>

style.css

.hero {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	align-items: center;
	justify-content: center;
	color: white;
	height: 100vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)),
		url("../assets/hero.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hero > p {
	text-align: center;
}

.skip-to-content {
	color: lightgray;
	text-decoration: none;
	font-size: smaller;
}

.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	transition: background-color 500ms;
}