118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
<!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>
|