Merge pull request #11 from ayush0309/main

Contact section and footer for issue #3, #4 and #5
ssitvit · Feb 28, 2021 · 54afaef · 54afaef
2 parents 6624386 + c124161
commit 54afaef
Show file tree

Hide file tree

Showing 5 changed files with 306 additions and 74 deletions.
diff --git a/assets/contact-us.svg b/assets/contact-us.svg
diff --git a/css/home.css b/css/home.css
@@ -147,6 +147,11 @@
   text-align: center;
 }
 
+.product-img img:hover {
+  transition: 0.6s ease;
+  box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
+}
+
 .product-img h3 {
   font-size: 20px;
   color: #f5564e;
@@ -176,9 +181,10 @@
 }
 
 /* form */
-input,
-textarea {
-  display: block;
+.formc {
+  text-align: center;
+  color: #e23f3f;
+  margin-bottom: 15px;
 }
 
 input[type="submit"] {
@@ -197,43 +203,177 @@ input[type="submit"]:hover {
 .container {
   display: block;
   background-color: #f2f2f2;
+  padding: 20px 30px;
+}
+
+.container-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25px 20px;
+}
+
+.content form {
+  width: 42%;
+  margin-right: 30px;
+  margin-left: 15px;
+}
+
+.content .input-box {
+  height: 50px;
+  width: 100%;
+  margin: 16px 0;
+  position: relative;
+  color: ;
+}
+
+.input-box input {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+  outline: none;
+  padding-left: 16px;
+  font-size: 16px;
+  background: rgb(223, 216, 216);
+  border: 2px solid transparent;
+  color: #191c1f;
+}
+
+.input-box input:focus, 
+.input-box input:valid {
+  border-color: #d43737;
+  background-color: #f2f2f2;
+}
+
+.input-box label {
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #191c1f;
+  font-size: 15px;
+  transition: all 0.3s ease;
+}
+
+.input-box input:focus ~ label, 
+.input-box input:valid ~ label {
+  top: 0;
+  left: 12px;
+  color: #e23f3f;
+  background: #f2f2f2;
+}
+
+.image-box {
+  max-width: 55%;
+}
+
+.image-box img {
+  width: 100%;
+}
+
+.msg-box {
+  min-height: 100px;
+  position: relative;
+}
+
+.msg-box textarea {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+  outline: none;
+  background: rgb(223, 216, 216);
+  border: 2px solid transparent;
+  resize: none;
+  transition: all 0.3s ease;
+}
+
+.msg-box label {
+  position: absolute;
+  font-size: 16px;
+  color: #191c1f;
+  left: 18px;
+  top: 6px;
+}
+
+.msg-box textarea:focus {
+  border-color: #e23f3f;
+  background: #f2f2f2;
+  padding: 12px;
+}
+
+.msg-box textarea:focus ~ label {
+  left: 12px;
+  color: #e23f3f;
+  top: -10px;
+  font-size: 14px;
+  background: #f2f2f2;
+}
+
+.content input[type="submit"] {
+  color: #f2f2f2;
+  background: #e23f3f;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.content input[type="submit"]:hover {
+  background-color: #c42c2c;
 }
 
 .foot {
   vertical-align: top;
   vertical-align: bottom;
   background-color: rgb(223, 216, 216);
+  padding-bottom: 20px;
 }
 
-.formc {
-  text-align: center;
+.foot h2{
+  margin-left: 30px;
   color: #e23f3f;
 }
 
-.for {
-  display: inline;
-  display: block;
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  padding: 0px 30px;
 }
 
-.contact-img {
-  width: 100%;
-  height: auto;
+.foot-heading {
+  font-weight: bold;
 }
 
-.contact-us {
-  display: flex;
-  justify-content: space-between;
+.links p{
+  font-weight: bold;
 }
 
-.contact-right {
-  margin: 1em;
-  flex: 0 50%;
+.links a {
+  text-decoration: none;
+  color: #191c1f;
+}
+.links {
+  text-align: center;
 }
 
-.contact-left {
-  flex: 0 50%;
+.links i {
+  font-size: 24px;
+  margin: 2.5px 5px 0;
 }
 
+
+
+
+
 /* Keyframes and media queries */
 /* Always keep these at last */
 
@@ -301,10 +441,36 @@ input[type="submit"]:hover {
   .product-img h3 {
     font-size: 16px;
   }
+  .content {
+    flex-direction: column;
+  }
+  .content form {
+    width: 100%;
+  }
+  .image-box {
+    opacity: 0;
+    z-index: -1;
+  }
+  .content form {
+    position: relative;
+    bottom: 180px;
+    margin-left: 45px;
+  }
+
 }
 
 @media (max-width: 790px) {
   .product-img p {
     font-size: 14px;
   }
+  .footer {
+    text-align: center;
+    flex-direction: column;
+  }
+  .foot h2{
+    text-align: center;
+  }
+  .foot div {
+    margin-bottom: 15px;
+  }
 }
diff --git a/css/products.css b/css/products.css
@@ -117,4 +117,59 @@
   background: rgb(0, 0, 0);
 }
 
+.foot {
+  vertical-align: top;
+  vertical-align: bottom;
+  background-color: #222;
+  padding-bottom: 20px;
+  padding-top: 15px;
+}
+
+.foot h2{
+  margin-left: 30px;
+  color: #e23f3f;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  padding: 0px 30px;
+  color: #f2f2f2;
+}
+
+.foot-heading {
+  font-weight: bold;
+}
+
+.links p{
+  font-weight: bold;
+}
+
+.links a {
+  text-decoration: none;
+  color: #191c1f;
+}
+.links {
+  text-align: center;
+}
+
+.links i {
+  font-size: 24px;
+  margin: 2.5px 5px 0;
+  color: #f2f2f2;
+}
 /* responsive  */
+@media (max-width: 720px) {
+   .footer {
+    text-align: center;
+    flex-direction: column;
+  }
+  .foot h2{
+    text-align: center;
+  }
+  .foot div {
+    margin-bottom: 15px;
+  }
+}