-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
84 lines (77 loc) · 3.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu | 🍔</title>
<!-- Internal Links -->
<link rel="stylesheet" href="/css/style.css">
<script src="script.js" async></script>
<!-- External Links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" />
</head>
<body id="home">
<header class="hero">
<nav class="navbar">
<h1 class="logo">
<a href="#"><span class="fas fa-hamburger"></span></a>
</h1>
<div>
<!-- --------------------------------------
-------- Hamburger Links ------------
--------------------------------------- -->
<ul class="nav-menu">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
</ul>
<!-- --------------------------------------
---------- Hamburger button ---------------
--------------------------------------- -->
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
</header>
<!-- ? Optional Markup
-------------------------------------------------------------------------------
* This is just to demonstrate how each links moves to each section when clicked
-------------------------------------------------------------------------------
-->
<section id="home">
<h3>Home <i class="fas fa-home"></i></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aliquam earum incidunt fugiat illo quasi
quidem, voluptatem totam repellendus autem, sint iste sapiente, in corporis ut accusantium aspernatur
quam adipisci id perferendis laboriosam quibusdam tempora harum quos eius soluta enim, quisquam molestiae?
Inventore, sunt similique.</p>
</section>
<section id="about">
<h3>About <i class="fas fa-user"></i></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aliquam earum incidunt fugiat illo quasi
quidem, voluptatem totam repellendus autem, sint iste sapiente, in corporis ut accusantium aspernatur
quam adipisci id perferendis laboriosam quibusdam tempora harum quos eius soluta enim, quisquam molestiae?
Inventore, sunt similique.</p>
</section>
<section id="contact">
<h3>Contact <i class="fas fa-phone"></i></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aliquam earum incidunt fugiat illo quasi
quidem, voluptatem totam repellendus autem, sint iste sapiente, in corporis ut accusantium aspernatur
quam adipisci id perferendis laboriosam quibusdam tempora harum quos eius soluta enim, quisquam molestiae?
Inventore, sunt similique.</p>
</section>
<section id="services">
<h3>Services <i class="fas fa-cog"></i></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aliquam earum incidunt fugiat illo quasi
quidem, voluptatem totam repellendus autem, sint iste sapiente, in corporis ut accusantium aspernatur
quam adipisci id perferendis laboriosam quibusdam tempora harum quos eius soluta enim, quisquam molestiae?
Inventore, sunt similique.</p>
</section>
</body>
</html>