<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="tools_that_love_you.css">
    <title>Tools That Love You - Build a Product Landing Page - Responsive Web Design Projects</title>
  </head>
  <body>
    <a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/tools-that-love-you" class="githubLabel" target="_blank">
      <img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
           class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
    </a>
    <div>
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </div><br>
    <header id="header">
      <div id="logo-container">
        <div id="image-container">
          <a href="#"><img id="header-img" src="wrench.png" alt="wrench.png" height="50" width="50"></a>
        </div>
        <div id="logo-name">
          <p>Tools That</p>
          <p>Love You</p>
        </div>
      </div>
      <nav id="nav-bar">
        <a class="nav-link" href="#Tools">Tools</a>
        <a class="nav-link" href="#video">Video</a>
        <a class="nav-link" href="#purchase">Purchase</a>
      </nav>
    </header>
    <form id="form" action="https://www.freecodecamp.org/email-submit" method="post">
      <label>Your Tools Want to Send You Some Email</label>
      <input id="email" name="email" type="email" placeholder=" your email address"/>
      <input id="submit" type="submit" value="Let's Go!"/>
    </form>
    <div id="Tools" class="id-nav-hack">
      <div id="hammer" class="tool">
        <div id="hammer-icon" class="tool-icon">
          <i class="fas fa-5x fa-gavel"></i>
        </div>
        <div class="tool-desc-container">
          <h2>Hammer Hammer Hammer!</h2>
          <ul>
            <li>All anybody ever does around here is hammer!</li>
            <li>The more you use your hammer, the better your relationships become!</li>
            <li>The more your relationships improve, the more you will want to hammer!</li>
          </ul>
        </div>
      </div>
      <div id="wrench" class="tool">
        <div id="wrench-icon" class="tool-icon">
          <i class="fas fa-5x fa-wrench"></i>
        </div>
        <div class="tool-desc-container">
          <h2>Wrenches Wrenches Wrenches!</h2>
          <ul>
            <li>All anybody ever does around here is hammer!</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Video" class="video id-nav-hack">
      <div class="video-container">
        <div class='embed-container'>
          <iframe id="video" src='https://www.youtube.com/embed//_txuRNSy-Jg' frameborder='0' allowfullscreen></iframe>
        </div>
      </div>
    </div>
    <div id="purchase" class="id-nav-hack">
      <div id="hammer-offer">
        <h2>Hammers from $12</h2>
        <h3>Really Great for Hitting</h3>
        <h3>Ergonomically Balanced</h3>
        <h3>Available Built-in Unhitting</h3>
      </div>
      <div id="wrench-offer">
        <h2>Wrenches from $20</h2>
        <h3>Precision Machine</h3>
        <h3>Lifetime Warranty</h3>
        <h3>Ergonomically Gnurled</h3>
      </div>
      <div id="saw-offer">
        <h2>Saws from $25</h2>
        <h3>Available Built-in Uncutting</h3>
        <h3>Also Bandsaws</h3>
        <h3>Wooden Nickles Accepted</h3>
      </div>
    </div>
    <footer class="footer">
      <div class="footer-lr footer-l">
        <p>Made By Trent &copy; Copyright 2018</p>
        <p>This Page is Licensed under:</p>
        <a href="https://creativecommons.org/licenses/by/4.0/"><p>Creative Commons Attribution 4.0</p></a>
      </div>
      <div class="footer-middle">
        <div>
          <a class="footer-link" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
        </div>
        <div>
          <a class="footer-link" href="#Tools"><span class="glyphicon glyphicon-wrench"></span> Tools</a>
        </div>
        <div>
          <a class="footer-link" href="#video"><span class="glyphicon glyphicon-film"></span> Video</a>
        </div>
      </div>
      <div class="footer-lr footer-r">
        <p>they may be tools,&nbsp;</p>
        <p>but they are also&nbsp;</p>
        <p>a way of life</p>
      </div>
    </footer>
  </body>
</html>