fcc-challenges/tools-that-love-you/index.html

118 lines
4.7 KiB
HTML
Raw Permalink Normal View History

2018-09-17 12:35:58 -07:00
<!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>
2018-09-17 12:35:58 -07:00
<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>