-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (103 loc) · 3.79 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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>Japan Daisuki!</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<header>
<a href="#" class="logo">Japan Daisuki!</a>
<div class="nav-btn">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-xmark"></i>
</div>
<nav>
<div class="nav-items">
<a href="#" data-href="home">Home</a>
<a href="#" data-href="food">Food</a>
<a href="#" data-href="culture">Culture</a>
<a href="#" data-href="nature">Nature</a>
<a href="#" data-href="entertainment">Entertainment</a>
</div>
</nav>
</header>
<section id="home" class="active">
<video src="./video/home.mp4" autoplay muted loop></video>
<div class="content">
<h1>Welcome to Japan!</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
voluptas nemo odit? Quos, quod tempora? Commodi unde beatae debitis
inventore. Nemo repellat optio veniam iste laborum autem neque,
laudantium quos! Lorem ipsum dolor sit, amet consectetur adipisicing
elit!
</p>
<a href="#">Read more</a>
</div>
</section>
<section id="food">
<video src="./video/food.mp4" autoplay muted loop></video>
<div class="content">
<h1>World-famous cuisine</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
voluptas nemo odit? Quos, quod tempora? Commodi unde beatae debitis
inventore. Nemo repellat optio veniam iste laborum autem neque,
laudantium quos! Lorem ipsum dolor sit, amet consectetur adipisicing
elit!
</p>
<a href="#">Read more</a>
</div>
</section>
<section id="culture">
<video src="./video/culture.mp4" autoplay muted loop></video>
<div class="content">
<h1>Traditional Culture</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
voluptas nemo odit? Quos, quod tempora? Commodi unde beatae debitis
inventore. Nemo repellat optio veniam iste laborum autem neque,
laudantium quos! Lorem ipsum dolor sit, amet consectetur adipisicing
elit!
</p>
<a href="#">Read more</a>
</div>
</section>
<section id="nature">
<video src="./video/nature.mp4" autoplay muted loop></video>
<div class="content">
<h1>Charming Nature</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
voluptas nemo odit? Quos, quod tempora? Commodi unde beatae debitis
inventore. Nemo repellat optio veniam iste laborum autem neque,
laudantium quos! Lorem ipsum dolor sit, amet consectetur adipisicing
elit!
</p>
<a href="#">Read more</a>
</div>
</section>
<section id="entertainment">
<video src="./video/entertainment.mp4" autoplay muted loop></video>
<div class="content">
<h1>Popular Entertainment</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto
voluptas nemo odit? Quos, quod tempora? Commodi unde beatae debitis
inventore. Nemo repellat optio veniam iste laborum autem neque,
laudantium quos! Lorem ipsum dolor sit, amet consectetur adipisicing
elit!
</p>
<a href="#">Read more</a>
</div>
</section>
<script src="script.js"></script>
</body>
</html>