add tools-that-love-you/*
This commit is contained in:
parent
3fdfc33880
commit
7de03a5cc5
|
|
@ -0,0 +1,113 @@
|
|||
<!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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
.id-nav-hack {
|
||||
margin-top: -16rem;
|
||||
padding-top: 16rem;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
padding-bottom: 2rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 2rem 8rem 0;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#logo-name {
|
||||
background-color: #69c5f8;
|
||||
border-radius: 1rem;
|
||||
font-weight: 800;
|
||||
padding: 1rem 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
font-size: 2rem;
|
||||
justify-content: space-around;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#form {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 5rem;
|
||||
padding-top: 13rem;
|
||||
}
|
||||
|
||||
#form label,input {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
#Tools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#Tools div{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
flex: 1;
|
||||
max-width: 30%;
|
||||
padding-right: 90px;
|
||||
}
|
||||
|
||||
.tool-desc-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tool-desc-container ul{
|
||||
list-style: none;
|
||||
margin-left: -4rem;
|
||||
}
|
||||
|
||||
.tool-icon i {
|
||||
color: #f89c69;
|
||||
margin: 4rem 0 4rem 95%;
|
||||
}
|
||||
|
||||
.video {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.embed-container {
|
||||
height: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding-bottom: 56.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#purchase {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#purchase div {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
border-color: #000000;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 10px 10px;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 4rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
font-size: 150%;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-l {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.footer-lr {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-middle {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
#header {
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding: 2rem 0 0;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
margin-right: 25px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: unset;
|
||||
padding-top: 4rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#form {
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.id-nav-hack {
|
||||
margin-top: -10rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
flex: 1;
|
||||
max-width: 40%;
|
||||
padding-right: 90px;
|
||||
}
|
||||
|
||||
.tool-icon i {
|
||||
color: #F69D65;
|
||||
margin: 4rem 0 4rem 95%;
|
||||
}
|
||||
|
||||
.footer-l {
|
||||
min-width: 416px;
|
||||
}
|
||||
|
||||
.footer-lr {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.footer-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: unset;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.footer-middle div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
box-shadow: 10px 10px;
|
||||
border-radius: 1rem;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#purchase div {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
#form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#Tools {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
#purchase {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: unset;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: unset;
|
||||
}
|
||||
|
||||
.footer-middle {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
flex-direction: unset;
|
||||
}
|
||||
|
||||
.footer-lr {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-r {
|
||||
display: flex;
|
||||
font-size: 75%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.footer-l {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Loading…
Reference in New Issue