API tools faq
paste
Advertisement
makispaiktis

Codecademy - 14th Exercise (HTML)

makispaiktis
Oct 15th, 2019 (edited)
450
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>House Store</title>
  5.   <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  6.   <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  7.   <link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
  8.   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
  9. </head>
  10. <body>
  11.   <!-- Header -->
  12.   <header>
  13.     <div class="image-container logo-small">
  14.       <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/logo-sm.png">
  15.     </div>
  16.     <div class="image-container logo-big">
  17.       <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/logo-lg.png">
  18.     </div>
  19.     <nav>
  20.       <ul>
  21.         <li><a href="#">Tools</a></li>
  22.         <li><a href="#">Lumber</a></li>
  23.         <li><a href="#">Paint</a></li>
  24.         <li><a href="#">Garden</a></li>
  25.         <li><a href="#">Contact</a></li>
  26.       </ul>
  27.     </nav>
  28.   </header>
  29.  
  30.   <!-- Banner -->
  31.   <div id="banner">
  32.     <h1>PAINTING IS SCARY</h1>
  33.     <p>But it doesn't have to be! Let our handy Virtual Paint Department help guide you through the process of choosing a color. Know the hue? You know what to do. Click the order button and we'll get the paint to you.</p>
  34.   </div>
  35.  
  36.   <!-- Color Guide -->
  37.   <div id="color-guide">
  38.     <div class="introduction">
  39.       <h2>Color Guide</h2>
  40.       <p>Here at HouseStore, we take color seriously. In each of the following sections, well explore our base colors in swatches that incrementally change three values: <strong>Hue</strong>, <strong>Saturation</strong> and <strong>Lightness</strong>. You'll be able to pick from a wide variety of colors that all work well with each other because they <strong>stem from the same value.</strong></p>
  41.     </div>
  42.  
  43.     <!-- Red Swatches -->
  44.     <div class="color reds">
  45.       <div class="information">
  46.         <h3>Reds</h3>
  47.         <p>Firetrucks, lipstick, fresh berries &mdash; red is a color with power, emotion, intensity. For this reason we recommend using reds as accent colors. Red is particularly suited to kitchens, as it is said to evoke hunger!</p><p>Our base red is <span class="base-color">HSL (350, 100, 50)</span></p>
  48.         <div class="image-container">
  49.           <img src="    https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/reds.png">
  50.         </div>
  51.       </div>
  52.       <div class="swatches">
  53.         <h4>Lightness</h4>
  54.         <div class="swatch lightness">
  55.           <div class="color-1"></div>
  56.           <div class="color-2"></div>
  57.           <div class="color-3"></div>
  58.           <div class="color-4"></div>
  59.           <div class="color-5"></div>
  60.         </div>
  61.         <h4>Saturation</h4>
  62.         <div class="swatch saturation">
  63.           <div class="color-1"></div>
  64.           <div class="color-2"></div>
  65.           <div class="color-3"></div>
  66.           <div class="color-4"></div>
  67.           <div class="color-5"></div>
  68.         </div>
  69.         <h4>Hue</h4>
  70.         <div class="swatch hue">
  71.           <div class="color-1"></div>
  72.           <div class="color-2"></div>
  73.           <div class="color-3"></div>
  74.           <div class="color-4"></div>
  75.           <div class="color-5"></div>
  76.         </div>
  77.       </div>
  78.     </div>
  79.  
  80.     <!-- Green Swatches -->
  81.     <div class="color greens">
  82.       <div class="information">
  83.         <h3>Greens</h3>
  84.         <p>They say that geniuses choose green &mdash; we think any of these verdant colors will look smart! Deck your halls like a lush outdoor space, adorn your rooms with emerald, or just make your houseguests green with envy!</p>
  85.         <p>Our base green is <span class="base-color">HSL (130, 100, 50)</span></p>
  86.         <div class="image-container">
  87.           <img src="    https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/greens.png">
  88.         </div>
  89.       </div>
  90.       <div class="swatches">
  91.         <h4>Lightness</h4>
  92.         <div class="swatch lightness">
  93.           <div class="color-1"></div>
  94.           <div class="color-2"></div>
  95.           <div class="color-3"></div>
  96.           <div class="color-4"></div>
  97.           <div class="color-5"></div>
  98.         </div>
  99.         <h4>Saturation</h4>
  100.         <div class="swatch saturation">
  101.           <div class="color-1"></div>
  102.           <div class="color-2"></div>
  103.           <div class="color-3"></div>
  104.           <div class="color-4"></div>
  105.           <div class="color-5"></div>
  106.         </div>
  107.         <h4>Hue</h4>
  108.         <div class="swatch hue">
  109.           <div class="color-1"></div>
  110.           <div class="color-2"></div>
  111.           <div class="color-3"></div>
  112.           <div class="color-4"></div>
  113.           <div class="color-5"></div>
  114.         </div>
  115.       </div>
  116.     </div>
  117.  
  118.     <!-- Blue Swatches -->
  119.     <div class="color blues">
  120.       <div class="information">
  121.         <h3>Blues</h3>
  122.         <p>Blues dont give us the blues &mdash; in fact, blue is one of the most popular colors in home interiors, and for good reason! Energizing like a summer sky, calming like a lakeshore, light as mist or deep as indigo, blue can do it all.</p>
  123.         <p>Our base blue is <span class="base-color">HSL (220, 100, 50)</span></p>
  124.         <div class="image-container">
  125.           <img src="    https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/blues.png">
  126.         </div>
  127.       </div>
  128.       <div class="swatches">
  129.         <h4>Lightness</h4>
  130.         <div class="swatch lightness">
  131.           <div class="color-1"></div>
  132.           <div class="color-2"></div>
  133.           <div class="color-3"></div>
  134.           <div class="color-4"></div>
  135.           <div class="color-5"></div>
  136.         </div>
  137.         <h4>Saturation</h4>
  138.         <div class="swatch saturation">
  139.           <div class="color-1"></div>
  140.           <div class="color-2"></div>
  141.           <div class="color-3"></div>
  142.           <div class="color-4"></div>
  143.           <div class="color-5"></div>
  144.         </div>
  145.         <h4>Hue</h4>
  146.         <div class="swatch hue">
  147.           <div class="color-1"></div>
  148.           <div class="color-2"></div>
  149.           <div class="color-3"></div>
  150.           <div class="color-4"></div>
  151.           <div class="color-5"></div>
  152.         </div>
  153.       </div>
  154.     </div>
  155.   </div>
  156.  
  157.   <!-- Footer -->
  158.   <footer>
  159.     <strong>All set? Click below to order.</strong>
  160.     <p>Most colors can be delivered to your door within 48 hours. We'll reach out if your color needs some extra attention, which could delay shipment.</p>
  161.     <a href="#" class="button">Order My Paint</a>
  162.   </footer>
  163. </body>
  164. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!