<!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"> -->
<style>
#candy {
background-color: #f5d9d5;
font-family: "Nunito", sans-serif;
}
.blurb h2 {
color: #EA1C2C;
font-weight:100;
font-size: 2.5rem;
}
.blurb p {
color:#f498b8;
font-weight:100;
font-size:1.125rem;
line-height:2.0;
}
.content {
margin-top: 100px;
}
#mainNavbar {
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link {
color: white;
}
#mainNavbar .nav-link:hover {
color: #EA1C2C;
}
#mainNavbar .navbar-brand {
color: #EA1C2C;
}
#headingGroup span {
color: #EA1C2C;
}
#headingGroup h1 {
font-weight:100;
font-size:4rem;
}
.navbar.scrolled {
background-color: rgb(222,192,222);
transition: background 500ms;
}
@media (max-width:1200px){
#headingGroup h1 {
font-weight:100;
font-size:3rem;
}
}
</style>
<title>Museum of Candy</title>
</head>
<body id="candy">
<div id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 px-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">
<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>
</div>
<section class="container-fluid px-0">
<div class="row align-items-center text-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1 class="display-2">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="imgs/hand2.png" alt="">
</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 src="imgs/milk.png" alt="" 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 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">
<!-- lead를 넣으면 사진이 더 눈에 띄지만 꼭 안해도 됨 -->
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae beatae,
maiores deserunt in voluptatibus aspernatur architecto excepturi delectus soluta? Ipsa, deleniti dolorem hic
consequatur repellat eveniet quidem voluptate necessitatibus dolorum delectus minus vitae, ut, veritatis sint ipsum
magnam autem nam ex deserunt debitis eaque ratione! Nobis, quidem assumenda.</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 mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="imgs/lolli_icon.png" alt="" class="d-none d-lg-inline">
<!-- lead를 넣으면 사진이 더 눈에 띄지만 꼭 안해도 됨 -->
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae beatae,
maiores deserunt in voluptatibus aspernatur architecto excepturi delectus soluta? Ipsa, deleniti dolorem hic
consequatur repellat eveniet quidem voluptate necessitatibus dolorum delectus minus vitae, ut, veritatis sint ipsum
magnam autem nam ex deserunt debitis eaque ratione! Nobis, quidem assumenda.</p>
</div>
</div>
</div>
<div class="col-md-6">
<img src="imgs/gumball.png" alt="" class="img-fluid">
</div>
</div>
<div class="row align-items-center content">
<div class="col-md-6 order-2 order-md-1">
<img src="imgs/sprinkles.png" alt="" 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 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">
<!-- lead를 넣으면 사진이 더 눈에 띄지만 꼭 안해도 됨 -->
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae beatae,
maiores deserunt in voluptatibus aspernatur architecto excepturi delectus soluta? Ipsa, deleniti dolorem hic
consequatur repellat eveniet quidem voluptate necessitatibus dolorum delectus minus vitae, ut, veritatis sint ipsum
magnam autem nam ex deserunt debitis eaque ratione! Nobis, quidem assumenda.</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>
<script>
$(function (){
$(document).scroll(function() {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
})
})
</script>
</body>
</html>