-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (150 loc) · 7.29 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
<!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"
/>
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="landing page.css" />
<title>Museum of Doughnut</title>
</head>
<body>
<nav
id="main_navbar"
class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
<a href="#" class="navbar-brand">Doughnut</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarNavAltMarkup"
aria-label="Toggle navigation"
>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#sec1"
>Home <span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="#sec2">History</a>
<a class="nav-item nav-link" href="#sec3">Doughnut Day</a>
</div>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6 ">
<div id="heading" class="text-white text-center d-none d-lg-block">
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
<h1>MUSEUM <span>/</span> OF <span>/</span> DOUGHNUT</h1>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="imgs/elena.jpg" alt="" />
</div>
</div>
</section>
<section class="container-fluid px-0 content" id="sec1" >
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="imgs/nerfee-mirandilla-AHKKd2Vy5no-unsplash.jpg" alt="">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center">
<div class="col-10 col-lg-8">
<h2 >MUSEUM OF DOUGHNUT</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p>
The most delecious small cake of sweetened or, sometimes, unsweetened dough fried in deep fat. It is typically
shaped like a ring or, when
prepared with a filling, a ball.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid px-0 content" id="sec2">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-2">
<img class="img-fluid" src="imgs/svetlana-sidorenko-sd4E0SLVgmw-unsplash.jpg" alt="">
</div>
<div class="col-md-6 text-center order-1 order-md-1">
<div class="row justify-content-center">
<div class="col-10 col-lg-8">
<h2>MUSEUM OF DOUGHNUT</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p>
The earliest origins to the modern doughnuts are generally traced back to the olykoek. Dutch settlers brought it with them to early New York (or New Amsterdam). One of the earliest mentions of "doughnut" was in Washington Irving's 1809 book 'A History of New York', from the Beginning of the World to the End of the Dutch Dynasty
</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid px-0 content" id="sec3">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="imgs/sharon-mccutcheon-s4RaGIo2eYI-unsplash.jpg" alt="">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center">
<div class="col-10 col-lg-8">
<h2>MUSEUM OF DOUGHNUT</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p>
National Doughnut Day, celebrated in the United States of America, is on the first Friday of June each year, succeeding the Doughnut Day event created by The Salvation Army in 1938 to honor those of their members who served doughnuts to soldiers during World War I.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#main_navbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
</html>