Advertisement
makispaiktis

Codecademy - Open Exercise (Solution - HTML)

Dec 9th, 2019 (edited)
537
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.99 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <title>The Tea Cozy</title>
  6.   <link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11.   <!-- Header -->
  12.  
  13.   <header class="flex-container">
  14.     <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png" />
  15.     <nav>
  16.       <span><a href="#mission">Mission</a></span>
  17.       <span><a href="#store">Featured Tea</a></span>
  18.       <span><a href="#locations">Locations</a></span>
  19.     </nav>
  20.   </header>
  21.  
  22.   <!-- Main Content Container -->
  23.  
  24.   <div class="main">
  25.  
  26.     <!-- Mission Section -->
  27.  
  28.     <div id="mission" class="flex-container">
  29.       <div class="content">
  30.         <h2>Our Mission</h2>
  31.         <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  32.       </div>
  33.     </div>
  34.  
  35.     <!-- Store Section -->
  36.  
  37.     <div id="store">
  38.       <h2>Tea of the Month</h2>
  39.       <h4>What's Steeping at The Tea Cozy?</h4>
  40.       <div class="flex-container items">
  41.         <div class="item">
  42.           <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg" />
  43.           <span>Fall Berry Blitz Tea</span>
  44.         </div>
  45.         <div class="item">
  46.           <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg" />
  47.           <span>Spiced Rum Tea</span>
  48.         </div>
  49.         <div class="item">
  50.           <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg" />
  51.           <span>Seasonal Donuts</span>
  52.         </div>
  53.         <div class="item">
  54.           <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg" />
  55.           <span>Myrtle Ave Tea</span>
  56.         </div>
  57.         <div class="item">
  58.           <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" />
  59.           <span>Bedford Bizarre Tea</span>
  60.         </div>
  61.       </div>
  62.     </div>
  63.  
  64.     <!-- Locations Section -->
  65.  
  66.     <div id="locations">
  67.       <h2>Locations</h2>
  68.       <div class="flex-container locations">
  69.         <div class="location">
  70.           <h3>Downtown</h3>
  71.           <p>384 West 4th St</p>
  72.           <p>Suite 108</p>
  73.           <p>Portland, Maine</p>
  74.         </div>
  75.         <div class="location">
  76.           <h3>East Bayside</h3>
  77.           <p>3433 Phisherman's Avenue</p>
  78.           <p>(Northwest Corner)</p>
  79.           <p>Portland, Maine</p>
  80.         </div>
  81.         <div class="location">
  82.           <h3>Oakdale</h3>
  83.           <p>515 Crescent Avenue</p>
  84.           <p>Second Floor</p>
  85.           <p>Portland, Maine</p>
  86.         </div>
  87.       </div>
  88.     </div>
  89.   </div>
  90.  
  91.     <!-- Contact Section -->
  92.     <div id="contact">
  93.       <h2>The Tea Cozy</h2>
  94.       <h5>contact@theteacozy.com</h5>
  95.       <h5>917-555-8904</h5>
  96.     </div>
  97.  
  98.     <!-- Footer Section -->
  99.     <footer>
  100.       <h5>copyright The Tea Cozy 2017</h5>
  101.     </footer>
  102.   </body>
  103. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement