-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (146 loc) · 7.64 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
<!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">
<!-- Local CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<!--markup-for-navbar-->
<nav id="mainNavbar" class="navbar navbar-dark bg-dark navbar-expand-md py-0 fixed-top">
<!-- px-0,py-0 for paddings in x and y axis; fixed-top, to scrollproof the navbar(fix-it) -->
<!--Creates the brandname on top-->
<a href="a" class="navbar-brand">CANDY</a>
<!--making a drop-down menu-->
<!--notice: data-target contains the id of the div class, reated for options-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Menu">
<!--aria-label describes the function of the button, to a screereader-->
<!--it makes no difference to the veiw, just makes it easier to understand, what the button does-->
<span class="navbar-toggler-icon"></span>
</button>
<!--by now we have a drop-down menu, opened by a button-->
<!--as it lacks options, it does nothing on cliking it, so-->
<!--now we will add options in the menu-->
<div class="collapse navbar-collapse" id="navLinks">
<!--by declaring a tags within ul-->
<ul class="navbar-nav">
<li class="navbar-item">
<a href="" class="nav-link">HOME</a>
</li>
<li class="navbar-item">
<a href="" class="nav-link">ABOUT</a>
</li>
<li class="navbar-item">
<a href="" class="nav-link">TICKETS</a>
</li>
</ul>
</div>
<!--the above is a responsive design-->
</nav>
<section class= "container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
<!--d-none, removes the text part on stacked view-->
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<h1 class="">MUSEUM <span>/</span> OF <span>/</span> CANDY</h2>
<!--/ is in span, to be styled individually-->
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="imgs/hand2.png">
</div>
</div>
</section>
<!--The 2nd section-->
<section class= "container-fluid px-0">
<div class="row text-center align-items-center content">
<!--if u have excess space vertically, use align-items-->
<div class="col-md-6 order-2 order-md-1">
<!--becomes stacked below col-md-6-->
<!--order- assigns an order to the cols-->
<!--this one is always 2nd, above md it becomes 1st-->
<img src="imgs/milk.png" class="img-fluid">
</div>
<div class="col-md-6 text-center order-1 order-md-2 ">
<div class="row justify-content-center">
<!--if u have excess space horizontally, use justify-content-->
<div class=col-10>
<h2>Museum of Candy</h2>
<!--including Icon, disappears when size lows(d-none)-->
<img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt="">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus sollicitudin purus at viverra feugiat.
Nam sagittis, enim in eleifend ultrices,
mauris quam auctor risus, nec faucibus felis ante ac libero.
Phasellus quis hendrerit nulla, venenatis malesuada metus.
</p>
</div>
</div>
</div>
</div>
</section>
<!--3rd section-->
<section class= "container-fluid px-0">
<div class="row text-center align-items-center content">
<div class="col-md-6 order-1 order-md-2">
<img src="imgs/gumball.png" class="img-fluid">
</div>
<div class="col-md-6 text-center order-2 order-md-1">
<div class="row justify-content-center">
<div class=col-10>
<h2>Museum of Candy</h2>
<img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt="">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus sollicitudin purus at viverra feugiat.
Nam sagittis, enim in eleifend ultrices,
maur is quam auctor risus, nec faucibus felis ante ac libero.
Phasellus quis hendrerit nulla, venenatis malesuada metus.
</p>
</div>
</div>
</div>
</div>
</section>
<!--The 4th section-->
<section class= "container-fluid px-0">
<div class="row text-center align-items-center content">
<div class="col-md-6 order-2 order-md-1">
<img src="imgs/sprinkles.png" class="img-fluid">
</div>
<div class="col-md-6 text-center order-1 order-md-2 ">
<div class="row justify-content-center">
<div class=col-10>
<h2>Museum of Candy</h2>
<img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt="">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus sollicitudin purus at viverra feugiat.
Nam sagittis, enim in eleifend ultrices,
mauris quam auctor risus, nec faucibus felis ante ac libero.
Phasellus quis hendrerit nulla, venenatis malesuada metus.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 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>
</body>
</html>