-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (113 loc) · 5.71 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
<!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">
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div id="container" class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a href="#" id="brand"><h1>Food,LLC</h1></a>
</div>
<button type="button" class="navbar-toggle visible-xs" data-toggle="collapse" data-target="#collapsable-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="collapsable-nav" class="hidden-md hidden-sm hidden-lg collapse">
<ul id="ul" class="nav navbar-inverse text-center">
<li><a href="#Chicken">Chicken</a></li>
<li><a href="#Beef">Beef</a></li>
<li><a href="#Sushi">Sushi</a></li>
</ul>
</div>
</nav>
<main>
<div id="content-grid" class="container-fluid">
<h2 class="text-center col-sm-12">Our Menu</h2>
<div class="col-xs-12 col-sm-5 col-md-3">
<h3 class="text-center">Chicken</h3>
<p id="Chicken">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eros nunc, tempor a semper et, faucibus sit amet turpis.
Etiam posuere augue laoreet sapien imperdiet iaculis.
Proin sit amet magna vel nisl ultrices ullamcorper sit amet vitae felis.
Phasellus id dignissim lorem, et aliquam elit.
Sed feugiat tortor sed convallis suscipit.
Cras vitae ipsum vel quam efficitur blandit.
Nullam facilisis, lectus a laoreet molestie, metus mauris laoreet enim,
ac scelerisque orci ex at lectus. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis vitae eros a velit aliquam venenatis sit amet in est.
Donec id ipsum finibus, finibus turpis et, tincidunt libero.
Nam mollis pretium leo. Mauris ut scelerisque odio, ut pulvinar urna.
Nulla porttitor vestibulum urna, at commodo lorem eleifend a.
Donec tincidunt felis turpis, eu ultrices felis cursus eu.
Integer ac mauris eu dolor pretium lacinia in a turpis.
Pellentesque fermentum leo sit amet est rhoncus porttitor.
Aenean eu feugiat diam. Aliquam aliquet iaculis elit, ut convallis sapien maximus et.
Nullam nunc leo, semper a massa ut, semper iaculis urna.
Maecenas porttitor sapien et urna efficitur egestas.</p><a href="#container"<p class="nav-link">Back To Top</p></a>
</div>
<div id="grid-item-second" class="col-xs-12 col-sm-5 col-md-3">
<h3 class="text-center">Beef</h3>
<p id="Beef">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eros nunc, tempor a semper et, faucibus sit amet turpis.
Etiam posuere augue laoreet sapien imperdiet iaculis.
Proin sit amet magna vel nisl ultrices ullamcorper sit amet vitae felis.
Phasellus id dignissim lorem, et aliquam elit.
Sed feugiat tortor sed convallis suscipit.
Cras vitae ipsum vel quam efficitur blandit.
Nullam facilisis, lectus a laoreet molestie, metus mauris laoreet enim,
ac scelerisque orci ex at lectus. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis vitae eros a velit aliquam venenatis sit amet in est.
Donec id ipsum finibus, finibus turpis et, tincidunt libero.
Nam mollis pretium leo. Mauris ut scelerisque odio, ut pulvinar urna.
Nulla porttitor vestibulum urna, at commodo lorem eleifend a.
Donec tincidunt felis turpis, eu ultrices felis cursus eu.
Integer ac mauris eu dolor pretium lacinia in a turpis.
Pellentesque fermentum leo sit amet est rhoncus porttitor.
Aenean eu feugiat diam. Aliquam aliquet iaculis elit, ut convallis sapien maximus et.
Nullam nunc leo, semper a massa ut, semper iaculis urna.
Maecenas porttitor sapien et urna efficitur egestas.<a href="#container"><p class="nav-link">Back To Top</p></a>
</div>
<div id="grid-item-third" class="col-xs-12 col-sm-12 col-md-3">
<h3 class="text-center">Sushi</h3>
<p id="Sushi">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eros nunc, tempor a semper et, faucibus sit amet turpis.
Etiam posuere augue laoreet sapien imperdiet iaculis.
Proin sit amet magna vel nisl ultrices ullamcorper sit amet vitae felis.
Phasellus id dignissim lorem, et aliquam elit.
Sed feugiat tortor sed convallis suscipit.
Cras vitae ipsum vel quam efficitur blandit.
Nullam facilisis, lectus a laoreet molestie, metus mauris laoreet enim,
ac scelerisque orci ex at lectus. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis vitae eros a velit aliquam venenatis sit amet in est.
Donec id ipsum finibus, finibus turpis et, tincidunt libero.
Nam mollis pretium leo. Mauris ut scelerisque odio, ut pulvinar urna.
Nulla porttitor vestibulum urna, at commodo lorem eleifend a.
Donec tincidunt felis turpis, eu ultrices felis cursus eu.
Integer ac mauris eu dolor pretium lacinia in a turpis.
Pellentesque fermentum leo sit amet est rhoncus porttitor.
Aenean eu feugiat diam. Aliquam aliquet iaculis elit, ut convallis sapien maximus et.
Nullam nunc leo, semper a massa ut, semper iaculis urna.
Maecenas porttitor sapien et urna efficitur egestas.</p><a href="#container"><p class="nav-link">Back To Top</p></a>
</div>
</main>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
<footer class="container-fluid">
<div class="row">
<h2 class="col-md-12 text-center">Learn Twitter Boostrap</h2>
</div>
</footer>
</html