add tools-that-love-you/*

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%;
+  }
+}