Skip to content

Commit 592803a

Browse files
PaarthAgarwalPaarthAgarwal
authored
Added museum of candies
1 parent ced7503 commit 592803a

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed

‎Museum of Candies/.DS_Store

6 KB
Binary file not shown.

‎Museum of Candies/app.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body{
2+
background-color: #f5d9d5;
3+
font-family: "Nunito",sans-serif;
4+
padding-top: 0px;
5+
}
6+
#mainNavbar{
7+
font-size: 1.5rem;
8+
font-weight: 100;
9+
/* background-color:rgb(248, 182, 187) ; */
10+
}
11+
#mainNavbar .nav-link{
12+
color:white;
13+
}
14+
#mainNavbar .nav-link:hover{
15+
color:#ea1c2c;
16+
}
17+
#mainNavbar .navbar-brand{
18+
color: #ea1c2c;
19+
20+
}
21+
#heading span{
22+
color:#ea1c2c;
23+
24+
}
25+
#heading h1{
26+
font-weight: 100;
27+
font-size: 3rem;
28+
29+
}
30+
@media(max-width:1200px){
31+
32+
#heading h1{
33+
font-weight: 100;
34+
font-size: 2.5rem;
35+
36+
}
37+
38+
}
39+
h2{
40+
color: #ea1c2c;
41+
font-weight: 100;
42+
font-size: 2.5rem ;
43+
}
44+
p{
45+
color: #f58cb0;
46+
font-weight: 100;
47+
font-size: 1.5rem;
48+
line-height: 2;
49+
}
50+
section{
51+
margin-bottom: 100px;
52+
}
53+
@media(max-width:700px) {
54+
p{
55+
margin-bottom: 40px;
56+
}
57+
}
58+
.navbar.scrolled {
59+
background: rgb(222,192,222);
60+
transition: background 500ms;
61+
}
62+
nav{
63+
height: 1.6em;
64+
}

‎Museum of Candies/index.html

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
<!-- Google Font -->
9+
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
10+
11+
<!-- Bootstrap CSS -->
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
13+
14+
<!-- Custom CSS -->
15+
<link rel="stylesheet" href="app.css">
16+
17+
<title>Museum of Candy</title>
18+
</head>
19+
<body>
20+
<nav class="navbar navbar-dark navbar-expand-md py-0 fixed-top" id="mainNavbar" >
21+
<a href="#" class="navbar-brand">CANDY</a>
22+
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks">
23+
<span class="navbar-toggler-icon"></span>
24+
</button>
25+
26+
<div class="collapse navbar-collapse" id="navLinks">
27+
28+
<ul class="navbar-nav">
29+
<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
30+
<li class="nav-item"><a href="#" class="nav-link">ABOUT</a></li>
31+
<li class="nav-item"><a href="#" class="nav-link">TICKETS</a></li>
32+
</ul>
33+
</div>
34+
</nav>
35+
36+
<section class="container-fluid px-0 ">
37+
<div class="row align-items-center">
38+
<div class="col-lg-6" id="heading">
39+
<div class="text-white text-center d-none d-lg-block">
40+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
41+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
42+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
43+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
44+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
45+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
46+
<h1 class="text-center" >MUSEAUM<span>/</span>OF<span>/</span>CANDY</h2>
47+
48+
</div>
49+
</div>
50+
<div class="col-lg-6 px-0">
51+
52+
<img class="img-fluid " src="imgs/hand2.png" alt="">
53+
</div>
54+
</div>
55+
</section>
56+
57+
<section class="container-fluid px-0">
58+
<div class="row text-center align-items-center ">
59+
<div class="col-md-6 order-2 order-md-1">
60+
<img src="imgs/milk.png" class="img-fluid" alt="">
61+
</div>
62+
<div class="col-md-6 order-1 order-md-2">
63+
<div class="row justify-content-center">
64+
<div class="col-10 col-lg-8">
65+
<h2 >MUSEUM OF CANDY</h2>
66+
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
67+
<p>
68+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo totam obcaecati optio qui repellendus molestias illum maxime, soluta beatae voluptates animi quibusdam placeat ipsum. Est quia vitae excepturi necessitatibus dolor.
69+
</p>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
75+
</section>
76+
77+
78+
<section class="container-fluid px-0">
79+
<div class="row text-center align-items-center ">
80+
<div class="col-md-6 order-2 order-md-2">
81+
<img src="imgs/gumball.png" class="img-fluid" alt="">
82+
</div>
83+
<div class="col-md-6 order-1 order-md-1">
84+
<div class="row justify-content-center">
85+
<div class="col-10 col-lg-8">
86+
<h2 >MUSEUM OF CANDY</h2>
87+
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
88+
<p>
89+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo totam obcaecati optio qui repellendus molestias illum maxime, soluta beatae voluptates animi quibusdam placeat ipsum. Est quia vitae excepturi necessitatibus dolor.
90+
</p>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
97+
<section class="container-fluid px-0">
98+
<div class="row text-center align-items-center ">
99+
<div class="col-md-6 order-2 order-md-1">
100+
<img src="imgs/sprinkles.png" class="img-fluid" alt="">
101+
</div>
102+
<div class="col-md-6 order-1 order-md-2">
103+
<div class="row justify-content-center">
104+
<div class="col-10 col-lg-8">
105+
<h2 >MUSEUM OF CANDY</h2>
106+
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
107+
<p>
108+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo totam obcaecati optio qui repellendus molestias illum maxime, soluta beatae voluptates animi quibusdam placeat ipsum. Est quia vitae excepturi necessitatibus dolor.
109+
</p>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
115+
116+
117+
118+
119+
120+
</section>
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+
<!-- Optional JavaScript -->
131+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
132+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
133+
<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>
134+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
135+
<script>
136+
$(function () {
137+
$(document).scroll(function () {
138+
var $nav = $("#mainNavbar");
139+
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
140+
});
141+
});
142+
</script>
143+
</body>
144+
</html>

0 commit comments

Comments
 (0)