-
-
Save awesomekimn/c6369ceb62e8986ea916a8b5f6ce87f3 to your computer and use it in GitHub Desktop.
Museum of Candy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #f5d9df; | |
| font-family: "Nunito"; | |
| } | |
| .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; | |
| } | |
| .content { | |
| margin-top: 100px; | |
| margin-bottom: 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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="app.css"> | |
| <title>Museum of Candy</title> | |
| </head> | |
| <body> | |
| <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"> | |
| <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-white text-center d-none d-lg-block mt-5"> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1> | |
| <h1 class="">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 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 class="">MUSEUN OF CANDY</h2> | |
| <img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt=""> | |
| <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate dolorem omnis, incidunt nulla expedita eveniet reprehenderit deserunt. Similique culpa dignissimos obcaecati error ab repudiandae possimus, sunt, placeat nulla blanditiis nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis numquam, ad dolores, quaerat nihil reiciendis nesciunt voluptatibus impedit molestiae modi doloribus. Voluptas mollitia ut atque minus, libero animi ratione accusantium!</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 class="">MUSEUN OF CANDY</h2> | |
| <img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt=""> | |
| <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate dolorem omnis, incidunt nulla expedita eveniet reprehenderit deserunt. Similique culpa dignissimos obcaecati error ab repudiandae possimus, sunt, placeat nulla blanditiis nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis numquam, ad dolores, quaerat nihil reiciendis nesciunt voluptatibus impedit molestiae modi doloribus. Voluptas mollitia ut atque minus, libero animi ratione accusantium!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 "> | |
| <img class="img-fluid" 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" 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 mb-5 mb-md-0"> | |
| <h2 class="">MUSEUN OF CANDY</h2> | |
| <img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt=""> | |
| <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate dolorem omnis, incidunt nulla expedita eveniet reprehenderit deserunt. Similique culpa dignissimos obcaecati error ab repudiandae possimus, sunt, placeat nulla blanditiis nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis numquam, ad dolores, quaerat nihil reiciendis nesciunt voluptatibus impedit molestiae modi doloribus. Voluptas mollitia ut atque minus, libero animi ratione accusantium!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> | |
| <script> | |
| $(function () { | |
| $(document).scroll(function() { | |
| var $nav = $("#mainNavbar"); | |
| $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height()); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment