<!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 © 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, </p> <p>but they are also </p> <p>a way of life</p> </div> </footer> </body> </html>