-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (171 loc) · 7.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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
<title>Coffee Nook</title>
<meta name="keywords" content="coffeehouse, coffee , nook, cakes, books" />
<meta name="author" content="Bala Anna" />
</head>
<body>
<div class="container-fluid bg-main-img p-0 d-flex flex-wrap justify-content-center align-items-start" id="home">
<nav class="navbar navbar-expand-md navbar-dark w-100 mb-5 mb-md-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" onclick="controlTitle()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav w-100 no-gutters">
<li class="nav-item col-md-2 offset-md-1 mt-4 mt-md-0">
<a class="nav-link" href="#about-us">About Us</a>
</li>
<li class="nav-item col-md-2">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item col-md-2">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item col-md-1 offset-md-2">
<a class="nav-link" href="https://www.facebook.com/">Fb</a>
</li>
<li class="nav-item col-md-1">
<a class="nav-link" href="https://www.instagram.com/">Ig</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<h1 class="col-12 text-white w-100 big-text">Coffee Nook</h1>
</div>
</div>
<div class="container-fluid bg-white" id="about-us">
<h2 class="col-12">Coffee house and antique shop</h2>
<h4 class="col-12">With love to coffee and books</h4>
<div class="jumbotron px-0 bg-image bg-coffe mb-1">
<p class="w-100 bg-textbrown">Coffee</p>
</div>
<p class="brown-text mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum dapibus lobortis. Sed porta, tortor sed accumsan rhoncus,
risus elit consectetur felis, eget mollis neque mauris in libero. Duis bibendum hendrerit ipsum, eget rhoncus justo convallis quis.
</p>
<div class="jumbotron px-0 bg-image bg-book mb-1">
<p class="w-100 bg-textbrown">Books</p>
</div>
<p class="brown-text mb-4">
Donec quis aliquet massa. Fusce condimentum, nibh quis aliquam convallis, ipsum magna condimentum nisi, eu vestibulum massa nisl ac lorem.
In nec condimentum tellus, sit amet scelerisque purus. Praesent nec ante dictum, scelerisque eros vel, mattis ligula.
Sed tincidunt et tortor et suscipit. Vestibulum vulputate id justo ut aliquet.
</p>
<div class="jumbotron px-0 bg-image bg-cake mb-1">
<p class="w-100 bg-textbrown">Desserts</p>
</div>
<p class="brown-text mb-4">
Aenean eu nisl purus. Mauris vel pulvinar purus. Ut id neque fringilla, rhoncus est at, tincidunt ante.
Sed condimentum augue vel porttitor iaculis. Nullam tincidunt, velit mollis efficitur gravida, sem ante tristique mi,
vitae dictum leo nisl a purus. Sed elementum nibh ac turpis pulvinar, vel bibendum libero porta.
</p>
</div>
<div class="container-fluid bg-brown text-white pb-2">
<h4 class="col-12 pt-3 text-white" id="menu">Menu</h4>
<div class="row">
<div class="col-12 col-md-5">
<p class="my-1">Coffee</p>
<hr class="hr-bolder"/>
<div class="row">
<p class="col-5 offset-1 text-left">Coffee #1</p>
<p class="col-3">x ml</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Coffee description #1</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Coffee #2</p>
<p class="col-3">x ml</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Coffee description #2</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Coffee #3</p>
<p class="col-3">x ml</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Coffee description #3</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Coffee #4</p>
<p class="col-3">x ml</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Coffee description #4</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Coffee #5</p>
<p class="col-3">x ml</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Coffee description #5</small>
</div>
</div>
<div class="col-12 col-md-5 offset-md-2">
<p class="mt-3 mb-1 mt-md-0 mb-md-0">Cakes</p>
<hr class="hr-bolder"/>
<div class="row">
<p class="col-5 offset-1 text-left">Cake #1</p>
<p class="col-3">serving</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Cake description #1</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Cake #2</p>
<p class="col-3">serving</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Cake description #2</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Cake #3</p>
<p class="col-3">serving</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Cake description #3</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Cake #4</p>
<p class="col-3">serving</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Cake description #4</small>
</div>
<hr/>
<div class="row">
<p class="col-5 offset-1 text-left">Cake #5</p>
<p class="col-3">serving</p>
<p class="col-3">x $</p>
<small class="col-10 offset-1 text-left">Cake description #5</small>
</div>
</div>
</div>
<h4 class="col-12 text-white mt-4" id="contact">Contact</h4>
<div class="jumbotron col-10 offset-1 p-1 bg-lightbrown col-md-6 offset-md-3">
<p class="col-12">Coffee Nook</p>
<div class="row">
<p class="col-12 col-md-4 offset-md-2 col-lg-3 offset-lg-3">10 XYZ St.</p>
<p class="col-12 col-md-4 col-lg-3">xx-xxx City</p>
<p class="col-12">Phone number: +48 xxx xxx xxx</p>
<p class="col-12">E-mail: [email protected]</p>
<p class="col-12 ">www.coffeenook.pl</p>
<p class="col-12 col-md-12">Opening hours:</p>
<p class="col-12">Monday to Saturday:<br/> 11 AM - 10 PM</p>
<p class="col-12">closed on Sundays</p>
</div>
</div>
</div>
<button onclick="goToStart()" class="border-white rounded-circle start-button text-white">⇑</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="./index.js"></script>
</body>
</html>