diff --git a/tools-that-love-you/index.html b/tools-that-love-you/index.html new file mode 100644 index 0000000..6c26f83 --- /dev/null +++ b/tools-that-love-you/index.html @@ -0,0 +1,113 @@ + + + + + + + + + Tools That Love You - Build a Product Landing Page - Responsive Web Design Projects + + +
+ +

+ +
+ + + +
+
+
+
+ +
+
+

Hammer Hammer Hammer!

+
    +
  • All anybody ever does around here is hammer!
    • +
  • The more you use your hammer, the better your relationships become!
    • +
  • The more your relationships improve, the more you will want to hammer!
    • +
+
+
+
+
+ +
+
+

Wrenches Wrenches Wrenches!

+
    +
  • All anybody ever does around here is hammer!
    • +
+
+
+
+
+
+
+ +
+
+
+
+
+

Hammers from $12

+

Really Great for Hitting

+

Ergonomically Balanced

+

Available Built-in Unhitting

+
+
+

Wrenches from $20

+

Precision Machine

+

Lifetime Warranty

+

Ergonomically Gnurled

+
+
+

Saws from $25

+

Available Built-in Uncutting

+

Also Bandsaws

+

Wooden Nickles Accepted

+
+
+ + + diff --git a/tools-that-love-you/tools_that_love_you.css b/tools-that-love-you/tools_that_love_you.css new file mode 100644 index 0000000..d0fd855 --- /dev/null +++ b/tools-that-love-you/tools_that_love_you.css @@ -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%; + } +} diff --git a/tools-that-love-you/wrench.png b/tools-that-love-you/wrench.png new file mode 100644 index 0000000..5a19c77 Binary files /dev/null and b/tools-that-love-you/wrench.png differ