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
<html>
<head>
<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
<!-- Fonts & Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar">
<div class="logo">
<span class="iconify icon" data-icon="healthicons:drone-outline"></span>
<p class="logo-text">Skynet Eats</p>
</div>
<div class="nav-links">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Sign up</a>
</div>
</nav>
<!-- Main content -->
<main>
<!-- Hero section -->
<section class="hero-section">
<img class="hero-image" src="images/hero-image.jpg" alt="Food delivery drone saying 'I come with peas'." />
<div>
<h1 class="hero-heading">Skynet <span>Eats</span></h1>
<p class="hero-text">Grocery delivery straight to your... window!</p>
<a class="hero-link" href="#">Order Now</a>
</div>
</section>
<!-- Info section -->
<section class="info-section">
<div class="info">
<h1 class="info-heading">Food Delivery Service</h1>
<p>Is it a bird? Is it a plane? None of the above. It’s a drone on its way to you with your tasty groceries! If you don’t want fast food, but you want your food fast, <a href="#">check out our partnered shops here</a>.</p>
</div>
<div class="statistics">
<img class="info-image" src="images/pal9000.jpg" alt="A flying Skynet drone." />
<div class="stat">
<h4 class="stat-heading">Drones🤖</h4>
<p class="stat-number">+4000</p>
</div>
<div class="stat">
<h4 class="stat-heading">Customers🧑🏽</h4>
<p class="stat-number">+120 000</p>
</div>
<div class="stat">
<h4 class="stat-heading">Cat conflicts🐱</h4>
<p class="stat-number">~70</p>
</div>
</div>
</section>
<!-- About section -->
<section class="about-section">
<div class="about">
<h2 class="about-heading">About <span>Us</span></h2>
<p class="about-text">Skynet was founded by Ariana Grande, a true pioneer in the field of AI and robotics.🦾 Our purpose is to serve humans and we realized that we’re driving humans around, we’re walking their bio-pets, why not feed them too?</p>
<p>If you want to know more, head over to our about page!</p>
<div class="about-link">
<a href="#">About Skynet</a>
</div>
</div>
</section>
<!-- Form section -->
<section class="form-section">
<form>
<h2 class="form-heading">What's Next?</h2>
<p class="form-intro">Want pizza through your window?🍕 Recieve a notification when the service is available.</p>
<label for="name">Full name</label>
<input class="input" id="name" type="text" placeholder="Ariana Regular" />
<label for="email">Email</label>
<input class="input" id="email" type="email" placeholder="ariana.regular@gmail.com" />
<button class="submit-button" type="button" onclick="submitForm()">Notify me</button>
</form>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="social-links">
<a class="social-link" href="#">
<ion-icon class="icon" name="logo-facebook"></ion-icon>
<p>Facebook</p>
</a>
<a class="social-link" href="#">
<ion-icon class="icon" name="logo-instagram"></ion-icon>
<p>Instagram</p>
</a>
<a class="social-link" href="#">
<ion-icon class="icon" name="logo-linkedin"></ion-icon>
<p>LinkedIn</p>
</a>
<a class="social-link" href="#">
<ion-icon class="icon" name="logo-twitter"></ion-icon>
<p>Twitter</p>
</a>
</div>
</footer>
<script src="index.pack.js"></script>
<!-- The two scripts below import the icons we use in our footer -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
