10:14 20/02/2024

assets/css/style.css

@@ -271,6 +271,12 @@ table {
   width: 100%;
   height: 100%;
   display: block;
+  filter: grayscale(1);
+  transition: 0.5s all;
+}
+.homepage .featured-clients .content-right .item:hover img {
+  filter: grayscale(0);
+  transition: 0.5s all;
 }
 .homepage .box-product {
   background: url(../images/background_product.png) no-repeat;
@@ -1196,4 +1202,81 @@ table {
   text-transform: uppercase;
   font-weight: 700;
   border-radius: 50px;
+}
+
+.page-contact .content-contact {
+  padding: 60px 0;
+}
+.page-contact .contact-left {
+  width: 50%;
+}
+.page-contact .contact-left .title {
+  background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 20%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 32px;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+.page-contact .contact-left .item {
+  margin-bottom: 20px;
+}
+.page-contact .contact-left .item b {
+  margin-right: 7px;
+}
+.page-contact .contact-right {
+  width: 50%;
+}
+.page-contact .form-control {
+  width: 100%;
+  margin-bottom: 15px;
+}
+.page-contact .form-control input {
+  width: 100%;
+  height: 50px;
+  padding: 0 20px;
+  border-radius: 40px;
+  background: rgb(246, 246, 246);
+  border: 0;
+  outline: 0;
+}
+.page-contact .form-control input::-moz-placeholder {
+  color: rgb(167, 166, 166);
+}
+.page-contact .form-control input::placeholder {
+  color: rgb(167, 166, 166);
+}
+.page-contact .form-control input:focus {
+  border: 2px solid #1fa5f1;
+}
+.page-contact .group-form {
+  margin-right: -15px;
+  width: auto;
+}
+.page-contact .form-2 {
+  width: calc(50% - 15px);
+  margin-right: 15px;
+}
+.page-contact .btn-send {
+  display: block;
+  width: 200px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
+  border-radius: 50px;
+  text-align: center;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.page-contact .btn-send:hover {
+  background: #fff;
+  border: 2px solid #1fa5f1;
+  background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 70%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }/*# sourceMappingURL=style.css.map */

assets/css/style.scss

@@ -265,6 +265,14 @@ table {
                     width: 100%;
                     height: 100%;
                     display: block;
+                    filter: grayscale(1);
+                    transition: 0.5s all;
+                }
+                &:hover {
+                    img {
+                        filter: grayscale(0);
+                        transition: 0.5s all;
+                    }
                 }
             }
         }
@@ -1216,3 +1224,79 @@ table {
         }
     }
 }
+
+.page-contact {
+    .content-contact {
+        padding: 60px 0;
+    }
+    .contact-left {
+        width: 50%;
+        .title {
+            background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 20%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-size: 32px;
+            font-weight: 700;
+            text-transform: uppercase;
+            margin-bottom: 15px;
+        }
+        .item {
+            margin-bottom: 20px;
+            b {
+                margin-right: 7px;
+            }
+        }
+    }
+    .contact-right {
+        width: 50%;
+    }
+    .form-control {
+        width: 100%;
+        margin-bottom: 15px;
+        input {
+            width: 100%;
+            height: 50px;
+            padding: 0 20px;
+            border-radius: 40px;
+            background: rgba(246, 246, 246, 1);
+            border: 0;
+            outline: 0;
+            &::placeholder {
+                color: rgba(167, 166, 166, 1);
+            }
+            &:focus {
+                border: 2px solid #1fa5f1;
+            }
+        }
+    }
+    .group-form {
+        margin-right: -15px;
+        width: auto;
+    }
+    .form-2 {
+        width: calc(50% - 15px);
+        margin-right: 15px;
+    }
+    .btn-send {
+        display: block;
+        width: 200px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
+        border-radius: 50px;
+        text-align: center;
+        color: #fff;
+        text-transform: uppercase;
+        font-weight: 700;
+        &:hover {
+            background: #fff;
+            border: 2px solid #1fa5f1;
+            background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 70%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+}

contact.html

@@ -52,25 +52,25 @@
             <div class="content-contact d-flex">
                 <div class="contact-left">
                     <h1 class="title">Contact us</h1>
-                    <div class="item">
+                    <div class="item d-flex">
                         <b>ADDRESS:</b>
                         <p>Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City
                         </p>
                     </div>
-                    <div class="item">
+                    <div class="item d-flex">
                         <b>Hotline:</b>
                         <p>02422.138.068 - 0904.580.181</p>
                     </div>
-                    <div class="item">
+                    <div class="item d-flex">
                         <b>Email:</b>
                         <p>hotro@hurasoft.com</p>
                     </div>
                 </div>
-                <div class="content-right">
+                <div class="contact-right">
                     <div class="form-control">
                         <input type="text" id="contact_name_detail" placeholder="Full name*">
                     </div>
-                    <div class="d-flex align-items">
+                    <div class="d-flex align-items group-form form-control">
                         <div class="form-2">
                             <input type="text" id="contact_email_detail" placeholder="Email*">
                         </div>