-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (122 loc) · 12.3 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Offcanvas Navigation Menu</title>
<link rel="icon" href="img/favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark bg-primary main-navigation" id="navbar">
<div class="container">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="overlay d-flex d-lg-none"></div>
<div class="order-lg-2 bg-primary d-lg-flex w-100 sidebar pb-3 pb-lg-0">
<ul class="navbar-nav ms-lg-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3 px-lg-2 active" aria-current="page" href="#">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-house-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</svg>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 px-lg-2" href="#">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-briefcase-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85v5.65z" />
<path
fill-rule="evenodd"
d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5v1.384l-7.614 2.03a1.5 1.5 0 0 1-.772 0L0 5.884V4.5zm5-2A1.5 1.5 0 0 1 6.5 1h3A1.5 1.5 0 0 1 11 2.5V3h-1v-.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V3H5v-.5z"
/>
</svg>
Travel
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link px-3 px-lg-2 dropdown-toggle" href="#" id="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-menu-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M15 13V4a1 1 0 0 0-1-1h-3.586A2 2 0 0 1 9 2.414l-1-1-1 1A2 2 0 0 1 5.586 3H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM2 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-3.586a1 1 0 0 1-.707-.293L8.354.354a.5.5 0 0 0-.708 0L6.293 1.707A1 1 0 0 1 5.586 2H2z"
/>
<path
fill-rule="evenodd"
d="M15 11H1v-1h14v1zm0-4H1V6h14v1zM2 12.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5z"
/>
</svg>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link px-3 px-lg-2 disabled" href="#">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-toggle2-off" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9 11c.628-.836 1-1.874 1-3a4.978 4.978 0 0 0-1-3h4a3 3 0 1 1 0 6H9z" />
<path fill-rule="evenodd" d="M5 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 1A5 5 0 1 0 5 3a5 5 0 0 0 0 10z" />
</svg>
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="blog">
<div class="container">
<p style="text-align: justify;">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto dignissimos, voluptate vitae eveniet minus amet rerum, soluta dolor quod earum facere sit itaque molestias facilis accusantium, accusamus labore.
Ex libero expedita sint necessitatibus sit, impedit culpa ducimus possimus amet ad hic minus quibusdam eveniet accusamus sed ipsa esse ratione consectetur quisquam laudantium molestiae excepturi! Quod tenetur numquam
iure accusamus, provident veritatis velit nesciunt vel molestias temporibus iusto rem necessitatibus fugiat atque, quae. Ad laboriosam dolor perspiciatis minus. Culpa aut eius, laudantium blanditiis provident amet,
officiis modi corrupti asperiores, error assumenda tempora corporis nesciunt et eveniet sed illum atque optio aliquid nostrum consectetur commodi harum quis? Necessitatibus perspiciatis facilis praesentium, ex ut
aspernatur voluptatem beatae nisi placeat officia
</p>
<p style="text-align: justify;">
fugit consequatur id quis autem. A non et maiores, minus fuga veritatis ratione sint voluptatum esse sunt earum neque ex facilis commodi, nisi dolores temporibus aut accusantium nam magni cupiditate in voluptas
soluta. Incidunt vitae reprehenderit accusantium doloremque veritatis totam a beatae quasi voluptate maiores eum, dignissimos est ullam ab laudantium! Hic dolorem nisi alias recusandae unde error amet rerum officiis,
ratione, in. Mollitia sequi optio maiores provident autem ratione quod esse quidem, deleniti corrupti, impedit blanditiis aliquid veritatis, error explicabo eum nobis deserunt. Tempore officia doloremque itaque
dolore nemo fuga earum ducimus iure ipsum quod non neque illo totam sapiente in, eligendi deleniti quam provident, assumenda distinctio. Molestias mollitia iste delectus magnam repellendus quo fugit. Animi
laboriosam, esse magni at praesentium pariatur rerum cumque fugit dolorem officia sed nam consequatur nesciunt porro optio quod quasi delectus saepe eveniet cum, amet maiores? Eaque quisquam nemo aliquid inventore
necessitatibus molestiae ratione assumenda sitatibus neque, quam non ut distinctio inventore, sapiente. Alias quo tempore illo possimus maxime aliquid repellat. Pariatur sapiente perferendis harum
</p>
<p style="text-align: justify;">
Necessitatibus perspiciatis facilis praesentium, ex ut aspernatur voluptatem beatae nisi placeat officia fugit consequatur id quis autem. A non et maiores, minus fuga veritatis ratione sint voluptatum esse sunt earum
neque ex facilis commodi, nisi dolores temporibus aut accusantium nam magni cupiditate in voluptas soluta. Incidunt vitae reprehenderit accusantium doloremque veritatis totam a beatae quasi voluptate maiores eum,
dignissimos est ullam ab laudantium! Hic dolorem nisi alias recusandae unde error amet rerum officiis, ratione, in. Mollitia sequi optio maiores provident autem ratione quod esse quidem, deleniti corrupti, impedit
blanditiis aliquid veritatis, error explicabo eum nobis deserunt. Tempore officia doloremque itaque dolore nemo fuga earum ducimus iure ipsum quod non neque illo totam sapiente in, eligendi deleniti quam provident,
assumenda distinctio. Molestias mollitia iste delectus magnam repellendus quo fugit. Animi laboriosam, esse magni at praesentium pariatur rerum cumque fugit dolorem officia sed nam consequatur nesciunt porro optio quod
quasi delectus saepe eveniet cum, amet maiores? Eaque quisquam nemo aliquid inventore necessitatibus molestiae ratione assumenda sitatibus neque, quam non ut distinctio inventore, sapiente. Alias quo tempore illo
possimus maxime aliquid repellat. Pariatur sapiente perferendis harum facilis repudiandae ut ea architecto autem nemo dolore, consequuntur debitis quidem qui dolores rerum blanditiis voluptatum dolorum velit, nostrum
similique in, quam! Fugiat, optio eveniet magni inventore ullam vel rerum quia aliquam beatae fugit!
</p>
<p style="text-align: justify;">
Necessitatibus perspiciatis facilis praesentium, ex ut aspernatur voluptatem beatae nisi placeat officia fugit consequatur id quis autem. A non et maiores, minus fuga veritatis ratione sint voluptatum esse sunt earum
neque ex facilis commodi, nisi dolores temporibus aut accusantium nam magni cupiditate in voluptas soluta. Incidunt vitae reprehenderit accusantium doloremque veritatis totam a beatae quasi voluptate maiores eum,
dignissimos est ullam ab laudantium! Hic dolorem nisi alias recusandae unde error amet rerum officiis, ratione, in. Mollitia sequi optio maiores provident autem ratione quod esse quidem, deleniti corrupti, impedit
blanditiis aliquid veritatis, error explicabo eum nobis deserunt. Tempore officia doloremque itaque dolore nemo fuga earum ducimus iure ipsum quod non neque illo totam sapiente in, eligendi deleniti quam provident,
assumenda distinctio. Molestias mollitia iste delectus magnam repellendus quo fugit. Animi laboriosam, esse magni at praesentium pariatur rerum cumque fugit dolorem officia sed nam consequatur nesciunt porro optio quod
quasi delectus saepe eveniet cum, amet maiores? Eaque quisquam nemo aliquid inventore necessitatibus molestiae ratione assumenda sitatibus neque, quam non ut distinctio inventore, sapiente. Alias quo tempore illo
possimus maxime aliquid repellat. Pariatur sapiente perferendis harum facilis repudiandae ut ea architecto autem nemo dolore, consequuntur debitis quidem qui dolores rerum blanditiis voluptatum dolorum velit, nostrum
similique in, quam! Fugiat, optio eveniet magni inventore ullam vel rerum quia aliquam beatae fugit!
</p>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>