-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (123 loc) · 5.52 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
<!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.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<!-- Navbar -->
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
<a href="#" class="navbar-brand">CANDY</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav uppercase">
<li class="nav-item">
<a href="" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Tickets</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content -->
<!-- First Row -->
<div class="container-fluid full-width padding">
<div class="row align-items-center">
<div id="headingGroup" class="col-6 justify-content-center full-width d-none d-lg-block">
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
<h1 class="uppercase">Museum<span>/</span>of<span>/</span>Candy</span></h1>
</div>
<div class="col-lg-6 img-fluid full-width padding">
<img src="../Final/imgs/hand2.png" alt="Gloved hand holding a donut">
</div>
</div>
</div>
<!-- Second Row -->
<div class="container-fluid full-width">
<div class="row align-items-center">
<div class="col-md-6 img-fluid full-width order-2 order-md-1">
<img src="../Final/imgs/milk.png" alt="Glass jars of milk with straws and donuts">
</div>
<div class="col-md-6 textcard order-1 order-md-2">
<h2 class="uppercase"><span>Museum of Candy</span></h2>
<img src="../final/imgs/lolli_icon.png" alt="Lollipop Icon" class="img-fluid mx-auto d-none d-lg-block">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis sit animi ab, molestias mollitia, quia
necessitatibus obcaecati aliquam quasi porro hic est consequuntur sunt dolorum quaerat neque facere sequi
nemo?
</p>
</div>
</div>
</div>
<!-- Third Row -->
<div class="container-fluid full-width">
<div class="row align-items-center">
<div class="col-md-6 textcard">
<h2 class="uppercase"><span>Museum of Candy</span></h2>
<img src="../final/imgs/lolli_icon.png" alt="Lollipop Icon" class="img-fluid mx-auto d-none d-lg-block">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis sit animi ab, molestias mollitia, quia
necessitatibus obcaecati aliquam quasi porro hic est consequuntur sunt dolorum quaerat neque facere sequi
nemo?
</p>
</div>
<div class="col-md-6 img-fluid full-width">
<img src="../Final/imgs/gumball.png" alt="Pink gumball machine filled with white candy">
</div>
</div>
</div>
<!-- Fourth Row -->
<div class="container-fluid full-width">
<div class="row align-items-center">
<div class="col-md-6 img-fluid full-width order-2 order-md-1">
<img src="../Final/imgs/sprinkles.png" alt="Sprinkles exploding out of a wine glass">
</div>
<div class="col-md-6 textcard order-1 order-md-2">
<h2 class="uppercase"><span>Museum of Candy</span></h2>
<img src="../final/imgs/lolli_icon.png" alt="Lollipop Icon" class="img-fluid mx-auto d-none d-lg-block">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis sit animi ab, molestias mollitia, quia
necessitatibus obcaecati aliquam quasi porro hic est consequuntur sunt dolorum quaerat neque facere sequi
nemo?
</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
</html>