-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
58 lines (53 loc) · 1.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tugas 3</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<nav id="navbar">
<div class="logo">Logo</div>
<div class="items">
<a href="#">Items</a>
<a href="#">Items</a>
</div>
<svg viewBox="0 0 100 80" width="20" height="20" class="hamburger" onclick="toggleHamburger()">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
</nav>
<main>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, officiis. Voluptatum facere est at repudiandae, totam suscipit saepe eveniet, voluptatem, error excepturi veritatis quas quaerat sed. Excepturi esse id, repellendus
in suscipit a, quas similique expedita iure exercitationem, modi ducimus tenetur incidunt dolorem cumque dicta. Beatae itaque quas iste dolorum.
</p>
<div class="row">
<div class="column">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<h2>Column 4</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</main>
<script>
function toggleHamburger() {
const NAVBAR = document.getElementById('navbar');
NAVBAR.classList.toggle('responsive');
}
</script>
</body>
</html>