scrimba
Figma to code
Drone page
Finishing up the HTML
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Finishing up the HTML
AboutCommentsNotes
Finishing up the HTML
Expand for more info
index.html
run
preview
console
<html>
<head>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-bg-container">
<div class="light-streaks"></div>
<div class="blue-col"></div>
</div>

<div class="container">
<nav>
<a href="#" class="logo"><span>Drone</span>.Series</a>

<img src="./assets/menu.svg" class="menu-btn">

<ul>
<li class="exit-btn"><img src="./assets/exit.svg"></li>
<li><a href="#">Home</a></li>
<li><a href="#">Races</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<main>
<div class="content">
<div class="type">
<h1>Drone Racing Gone Wild</h1>
<p>Register now for the ultimate drone racing event. 5 mile courses and over $10 million in prize money!</p>
</div>
<div class="drone-container">
<img src="./assets/blur.png" class="blur">
<img src="./assets/drone.png" class="drone">
</div>
</div>
</main>
</div>

<section class="quote">
<blockquote>“the stadium is simply unreal. scrimba hall will make this the best drone racing event ever, period.”</blockquote>
<cite>Anonymous Person</cite>
</section>

<section class="gallery">
<div class="footage-content">
<h2>Last year's footage</h2>
<p>With over 5,000 participants, 2020 featured some of the most amazing drone races from the most competitive field ever seen.</p>
<p>In 2021, we’re about to double the excitement with 10,000 race participants and 100,000 fans!</p>
</div>
<div class="gallery-container">
<img src="./assets/footage-1.jpg">
<img src="./assets/footage-2.jpg">
<img src="./assets/footage-3.jpg">
<img src="./assets/footage-4.jpg">
<img src="./assets/footage-5.jpg">
</div>
</section>


<script src="index.js"></script>
</body>
</html>
Console
/index.html
-3:12