-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavbar.html
60 lines (57 loc) · 10.2 KB
/
navbar.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8d32344989.js"></script>
<title>Navbar</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
<a href="#" class="navbar-brand">Menu</a>
<button class="btn btn-dark" data-toggle="collapse" data-target="#my-navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="navbar-item">
<a href="" class="nav-link">Products</a>
</li>
<li class="navbar-item">
<a href="" class="nav-link">About</a>
</li>
<li class="navbar-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Downloads</a>
<div class="dropdown-menu bg-dark">
<a href="" class="dropdown-item text-light">Item 1</a>
<a href="" class="dropdown-item text-light">Item 2</a>
<a href="" class="dropdown-item text-light">Item 3</a>
</div>
</li>
<li class="navbar-item">
<a href="" class="nav-link">FAQ</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control-sm m-1" type="text" name="login" id="login" placeholder="Username">
<input class="form-control-sm m-1" type="password" name="login" id="login" placeholder="Password">
<input class="btn m-1 btn-sm btn-danger " type="submit" value="login">
</form>
</div>
</nav>
<div class="container-fluid mt-5">
<p class="pt-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, commodi labore suscipit temporibus sint, iste nemo blanditiis esse, neque maiores est expedita? Nobis, alias explicabo dolor eum repellat doloremque dolores voluptatibus veniam architecto voluptatum eius quis error totam eaque amet in, ullam aspernatur molestiae. Tenetur est autem odit ipsa consequatur impedit officiis repellendus, error distinctio earum iusto accusamus. Qui voluptatem quo, et mollitia quod itaque nesciunt unde eveniet ullam laboriosam. Hic asperiores beatae, repellat aliquid voluptas quo nemo voluptates. Provident voluptates tempore quae saepe, excepturi, totam iure dolorum aliquam velit quasi, debitis repellat laudantium. Repellat totam sit accusamus enim in, officia voluptate culpa ullam magni cupiditate? Unde tempore sapiente labore neque ea enim expedita error veniam sint dolorum exercitationem repellat, fuga nesciunt laborum voluptate mollitia doloremque quia, cumque provident tempora rerum ab veritatis. Aliquam cupiditate non nobis asperiores aliquid nostrum. Quos aliquid voluptate quidem explicabo dolore provident consequuntur, ducimus amet sunt! Tenetur asperiores consectetur eligendi ea pariatur quam rerum laboriosam delectus autem maxime a quasi modi similique cupiditate tempore ipsa ad, voluptatibus cum perferendis nisi. Ut reiciendis amet cum nam eius reprehenderit quam tempore architecto autem veniam porro, sed, pariatur blanditiis ea voluptatem voluptatum dignissimos aliquam quia? Amet quas laboriosam officia, animi quod dolores temporibus nesciunt, consequatur aperiam quaerat totam repellat consequuntur vitae iure molestiae quasi optio natus expedita vero provident, iste obcaecati? Dolorum, provident dolorem praesentium maiores blanditiis architecto at error accusamus nisi quaerat. Unde autem eveniet recusandae enim tempore assumenda corporis molestias voluptate! Inventore totam possimus amet numquam eveniet? Maiores ad ut eaque, magni modi vitae. Quis eos est sunt a praesentium, ex ea rerum veniam eum dolorem nisi ipsa ducimus repellat, totam neque nesciunt quia enim corrupti aut nam eaque eius. Voluptatibus quas cumque, labore facere explicabo, ad ratione corporis facilis nostrum nam, eos necessitatibus veritatis dolores eum distinctio doloremque possimus sequi est eaque quibusdam saepe qui maxime! Adipisci neque optio animi exercitationem iure, quo aspernatur, unde quia accusamus vero ea in, porro perspiciatis est veniam quibusdam ipsum! Ullam, tenetur modi. Nisi ducimus aperiam accusantium? Aspernatur necessitatibus dicta, odio sunt consequuntur officia eum dolorum dignissimos laudantium, nisi unde iure consectetur fuga temporibus aperiam enim aliquid, doloribus consequatur voluptatibus provident earum. Corrupti nesciunt dolorem sunt. Quaerat accusantium consequatur aspernatur sapiente dolorem libero ut fuga excepturi. Alias dignissimos, ex blanditiis nisi quam earum odit non possimus voluptatibus corrupti quidem quae! Placeat maiores delectus alias magnam, adipisci soluta. Eos iure, velit amet ullam animi officiis iusto aspernatur numquam porro nobis sint? Quae iure voluptatum voluptas cumque ipsum blanditiis suscipit, maxime harum odit magni repellat consectetur minus ea expedita? Enim, vel magnam excepturi ullam provident perferendis natus! Similique, nihil atque, eaque at sunt libero consectetur aperiam doloribus voluptates eius provident? Libero obcaecati reiciendis, soluta magnam, quidem ducimus ipsa dignissimos officia at corrupti odio, quisquam voluptates perspiciatis quas. Tenetur nihil incidunt, modi veniam totam ex accusantium repudiandae dolore reiciendis voluptatum quisquam autem inventore perferendis magnam nesciunt omnis dolorem illum quis optio deleniti id! Possimus architecto impedit veniam, harum fuga adipisci sint dolorum aut, quibusdam saepe est alias? Tempora, esse possimus officiis eligendi autem ex nihil explicabo perferendis hic a soluta, est eveniet similique, facilis itaque tempore excepturi voluptatibus dolore quidem consequatur! Et maxime doloribus natus consequatur incidunt nemo corporis ad, ducimus corrupti, eligendi nesciunt dolore assumenda enim, dolorem eum illo quia porro necessitatibus? Beatae quis delectus soluta quam consequatur, dignissimos maiores dolore modi at esse fugiat magni quibusdam, est laboriosam, nihil amet! Voluptatibus fuga iure in sunt, laborum ipsa natus quas, accusantium nihil exercitationem explicabo! Consequuntur enim veniam reiciendis veritatis id necessitatibus, dicta deserunt, nesciunt ipsa similique doloribus at animi eveniet provident iure nulla expedita nemo ducimus ut quaerat doloremque. Odit quos fuga ad? Eos cumque non sit, similique pariatur delectus nam velit iste, illum provident nesciunt natus culpa quo animi. Dolorum facere sit ea molestiae dolor quas, laboriosam, omnis provident quasi, temporibus ut! Delectus voluptate ea dignissimos. Unde neque praesentium in tenetur eius natus sunt, consectetur nam, aperiam illo eveniet voluptates cum explicabo! Aperiam ab modi, quidem enim porro ea labore tempora sunt dolore, neque assumenda tenetur ex repellendus, nihil asperiores! Fugiat veritatis quia tempore fugit officiis officia voluptate, impedit culpa! Repellat eos, culpa aut sit eveniet quis placeat dolores, quia quasi nemo sunt cum itaque. Ducimus quia molestiae quos, reiciendis cumque aliquam, soluta odit beatae amet laboriosam veniam, porro rerum! Possimus aperiam impedit recusandae rerum nesciunt maiores aspernatur quis nostrum unde repellendus, voluptate quasi quo delectus neque sed iusto. Enim minima suscipit pariatur tempore amet sunt minus repudiandae error debitis officiis expedita ipsam labore, magnam nihil similique illum natus optio ratione possimus, voluptatibus exercitationem at? Facere, id dolores iure provident quis est praesentium dicta, nulla sunt numquam perspiciatis dolorum quia laboriosam fugit suscipit nisi ab distinctio nihil a accusantium nostrum aspernatur voluptas nobis fugiat! At iusto, voluptatem odio quas temporibus vitae inventore! Vero, cumque aliquam obcaecati iure repellat, quam mollitia quidem fugiat enim maiores quas minus? Impedit sapiente numquam maxime, expedita iste quasi laboriosam quae libero aut? Totam eius explicabo ad voluptas dolorem, sint natus quasi neque labore quaerat, unde suscipit quos, ea similique qui! Dolorum nam at ratione harum blanditiis nulla quia repudiandae vero impedit, quisquam accusantium nisi dolorem libero enim ipsa laborum rerum quae! Omnis eveniet dolore expedita ea cupiditate natus nihil nostrum, distinctio neque rerum amet, dicta voluptatibus optio mollitia, veritatis exercitationem commodi reiciendis sit quaerat non? Nostrum, alias dolor doloremque at illum veniam id rem similique incidunt nisi rerum debitis nulla in ipsa delectus vel eos architecto soluta minus neque dolores, explicabo officia dolorum asperiores! Dolorum nemo animi modi ipsam officia nesciunt incidunt, aut corrupti numquam quis quod saepe et sint dolor accusantium hic suscipit, repellat autem, accusamus unde placeat? Error voluptas tempore laborum sint consequatur ipsam, itaque sed repellendus, iste asperiores cupiditate nisi et fugiat id nobis laboriosam soluta veniam ipsa dicta doloribus fuga impedit! Culpa quidem ipsa, consequatur expedita, consequuntur nobis ea, officiis cumque exercitationem nisi odit. Pariatur voluptatibus quos quasi doloremque modi? Cum et cupiditate vitae possimus, nisi ex nesciunt natus accusamus repudiandae.
</p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>