-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
119 lines (105 loc) · 6.26 KB
/
Copy pathindex.html
File metadata and controls
119 lines (105 loc) · 6.26 KB
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
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- 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>
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<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>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-center text-white d-none d-lg-block mt-5">
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid text-center px-0" src="imgs/hand2.png">
</div>
</div>
</section>
<section class="container-fluid px-0">
<div class="row align-items-center content">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="imgs/milk.png" 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 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus praesentium laborum commodi necessitatibus, quod doloribus enim reiciendis placeat voluptatum eligendi quis minima asperiores ipsam distinctio aliquid numquam! Cum ab error numquam minima repudiandae modi totam perspiciatis, amet rem culpa necessitatibus voluptatum eligendi? Facilis veritatis quidem neque quae dolore, eveniet ratione. Dolore alias ab reiciendis et in ipsa voluptates unde non?</p>
</div>
</div>
</div>
</div>
<div class="row align-items-center content">
<div class="col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb">
<h2>MUSEUM OF CANDY</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus praesentium laborum commodi necessitatibus, quod doloribus enim reiciendis placeat voluptatum eligendi quis minima asperiores ipsam distinctio aliquid numquam! Cum ab error numquam minima repudiandae modi totam perspiciatis, amet rem culpa necessitatibus voluptatum eligendi? Facilis veritatis quidem neque quae dolore, eveniet ratione. Dolore alias ab reiciendis et in ipsa voluptates unde non?</p>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid mb-5 mb-md-0" src="imgs/gumball.png" alt="">
</div>
</div>
<div class="row align-items-center content">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid mb-5 mb-md-0" src="imgs/sprinkles.png" 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 blurb">
<h2>MUSEUM OF CANDY</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus praesentium laborum commodi necessitatibus, quod doloribus enim reiciendis placeat voluptatum eligendi quis minima asperiores ipsam distinctio aliquid numquam! Cum ab error numquam minima repudiandae modi totam perspiciatis, amet rem culpa necessitatibus voluptatum eligendi? Facilis veritatis quidem neque quae dolore, eveniet ratione. Dolore alias ab reiciendis et in ipsa voluptates unde non?</p>
</div>
</div>
</div>
</div>
</section>
<body>
<!-- Optional JavaScript -->
<!-- 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>