<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 -->
<div 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>
</div>
<!-- Main content -->
<div>
<!-- Hero section -->
<div class="hero-section">
<img class="hero-image" src="images/hero-image.jpg" />
<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>
</div>
</div>
<!-- Footer -->
<div 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>
</div>
<!-- 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>
<html>
