Created
April 13, 2021 20:36
-
-
Save josh-gree/cbfd33ac4794d06fa813460349233c9b to your computer and use it in GitHub Desktop.
YANKEE CANDLE.
This file contains hidden or 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
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"> | |
| </script> | |
| <header id="header"> | |
| <img | |
| id="header-img" | |
| class="logo-image" | |
| src="https://s.clipartkey.com/mpngs/s/263-2635964_yankee-candle-logo-png.png" | |
| alt="YANKee CANDLe"/> | |
| <h1 style="font-size: 60px;">YANKEE CANDLE</h1> | |
| <nav id="nav-bar"> | |
| <ul class="nav-bar"> | |
| <li> | |
| <a class="nav-lin/" href="#home">Home</a> | |
| </li> | |
| <li> | |
| <a class="nav-link" href="#shop">Shop</a> | |
| </li> | |
| <li> | |
| <a class="nav-link" href="#mystory">My Story</a> | |
| </li> | |
| <li> | |
| <a class="nav-link" href="#contactus">Contact Us</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <body> | |
| <section id="home"> | |
| </section> | |
| <section id="shop"> | |
| </section> | |
| <section id="mystory"> | |
| </section> | |
| <section id="contactus"> | |
| </section> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <div id="slide1" class="slide"> | |
| <div class="title"> | |
| <br> | |
| <br> | |
| <br> | |
| <h1>My Story</h1> | |
| <aside> | |
| <div class="my-story" id="my-story" | |
| </div> | |
| </aside> | |
| <p style="font-size: 18pt"> Hi there. My name is Tandy and I am the founder of YANKEE CANDLE. From a young age, scent has always intrigued me. My passion lies in creating intriguing scents based on stories and memories, then carefully making them into perfectly burning candles. I am often referred to as an alchemist, due to my obsession with documenting memories into scents for my candles. I have an early love affair with scent and to this day it remains my passion.</p> | |
| <p style="font-size: 18pt">By developing our own scent we truly believe our candles will smell amazing and last longer than their counter parts. We have literally tested thousands of different combinations of wicks with a range of natural waxes, in a range of different containers. As well as that we discovered most candle makers only use about 3 - 5% fragrance in their candles, we use 11%, which is the very most the wax can take. We do this because the scent is the most important part.</p> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <div class="video-page"> | |
| <div class="video"> | |
| <h1 style="font-size: 30px;">Learn More About Us</h1> | |
| <iframe id="video" width="1000" height="800" src="https://www.youtube.com/embed/dljBuXgQPy0"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="form-container"> | |
| <h2 style="font-size: 30pt"> Stay in touch</h2> | |
| <p>Sign up here for more</p> | |
| <form id="form" | |
| action="https://www.freecodecamp.com/email-submit"> | |
| <input | |
| id="email" | |
| type="email" | |
| name="email" | |
| placeholder="Email Required" | |
| class="text"/> | |
| <input | |
| id="submit" | |
| type="submit"> | |
| </div> | |
| </form> | |
| <br> | |
| </div> | |
| <div class="row"> | |
| <div class="column"> | |
| <img class="traveler-candles" src="https://cdn.dribbble.com/users/476173/screenshots/4277491/gb1.jpg" alt="Traveler candles" style="width:100%"> | |
| </div> | |
| <div class="column"> | |
| <img class="white-candles" src="https://cdn.dribbble.com/users/2183424/screenshots/15024615/media/0bd9a6cd48b76ac211f74cc9e882047c.png" alt="white candles"style="width:100%"> | |
| </div> | |
| </div> | |
| </body> | |
| <footer class="zone"> | |
| <p>2021 Yankee Candles All right reserved. For more information visit <a href="https://www.yankeecandle.co.uk/">Yankee Candles</a></p> | |
| </footer> |
This file contains hidden or 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: #DEB887; | |
| font-family: Georgia; | |
| } | |
| .logo-image { | |
| width: 100px; | |
| } | |
| #header { | |
| background-color: #DEB887; | |
| position: fixed; | |
| top: 5px; | |
| min-height: 77px; | |
| width: 100%; | |
| padding: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| z-index: 2; | |
| } | |
| @media (max-width: 568px) { | |
| flex-wrap: wrap; | |
| } | |
| h1 { | |
| display: flex; | |
| justify-content: flex-start; | |
| font-size: 50pt; | |
| } | |
| ul { | |
| list-style: none; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| nav li { | |
| margin-right: 30px; | |
| list-style: none; | |
| text-decoration: none; | |
| display: inline; | |
| } | |
| .nav-bar { | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| font-size: 1.2em; | |
| } | |
| .my-story { | |
| height: 600px; | |
| background-image: url('https://www.aubreybay.co.uk/wp-content/uploads/2019/12/Reasons-to-Choose-Soy-Wax-Candles.jpg'); | |
| } | |
| aside { | |
| width: 50%; | |
| pardin-left: 100x; | |
| margin-left: 100px; | |
| float: right; | |
| } | |
| .sign-up-page { | |
| height: 600px; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| } | |
| .form-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| margin-top: 127px; | |
| margin-bottom: 23px; | |
| h2 { | |
| margin-bottom: 7px; | |
| } | |
| p { | |
| font-size: 19px; | |
| } | |
| .video-page { | |
| height: 500px; | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| } | |
| .video { | |
| text-align:center; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| nav-bar { | |
| display:none; | |
| height: 300px; | |
| } | |
| } | |
| .white-candle { | |
| width: 300px; | |
| } | |
| .column { | |
| float: left; | |
| width: 33.33%; | |
| padding: 150px; | |
| } | |
| .row::after { | |
| content: ""; | |
| clear: both; | |
| display: table; | |
| } | |
| .footer { | |
| margin: auto; | |
| text-align: center; | |
| margin-bottom: 2px; | |
| background-color: #DEB887; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment