01-01-2024

amegh-ts · Jan 1, 2024 · a515e12 · a515e12
1 parent 58509d4
commit a515e12
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 4 deletions.
diff --git a/Express/Projects/TRVL/Frontend/trvl/src/App.css b/Express/Projects/TRVL/Frontend/trvl/src/App.css
@@ -6,6 +6,9 @@
   --primary-color: hsl(14, 90%, 53%);
   --primary-color-light: hsl(14, 96%, 91%);
   --white-color:  hsl(0, 0%, 100%);
+  --text-color: hsl(0, 0%, 0%);
+  --text-color-light:  hsla(0, 0%, 42%, 0.849);
+  --input-color:  hsla(0, 0%, 93%, 0.849);
 
   /* ===== Font ===== */
   --biggest-font: 2.5rem;

diff --git a/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Home/Home.jsx b/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Home/Home.jsx
@@ -44,7 +44,7 @@ const Home = () => {
                         <label htmlFor="price">ABC</label>
                         <input type="text" placeholder='dream location' />
                     </div>
-                    <button>Search</button>
+                    <button className=' btn card-btn'>Search</button>
                 </div>
             </div>
 

diff --git a/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Home/Home.scss b/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Home/Home.scss
@@ -18,11 +18,15 @@
 
     .home-content {
         position: absolute;
+        width: 100%;
         height: 100%;
         top: 30%;
         bottom: 50%;
         color: var(--white-color);
-        padding: 0 3rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
 
         h1 {
             font-size: var(--biggest-font);
@@ -33,6 +37,7 @@
             padding: 1rem 0;
             font-size: var(--normal-font);
             font-weight: 500;
+            padding: 1rem 3rem;
         }
 
         .btn {
@@ -54,10 +59,9 @@
             width: 80%;
             border-radius: 1rem;
             background: var(--white-color);
-            top: 94%;
+            top: 92%;
             gap: 1rem;
             display: flex;
-            flex-wrap: wrap;
             justify-content: center;
             padding: 2rem;
             box-shadow: 0 2px 8px 4px rgba(178, 178, 178, 0.45);
@@ -68,6 +72,55 @@
                 width: 100%;
                 display: flex;
                 flex-direction: column;
+                margin-right: 10px;
+
+                label{
+                    display: block;
+                    color: var(--text-color-light);
+                    font-size: var(--small-font);
+                    font-weight: 500;
+                    padding-bottom: .4rem;
+
+                }
+                input{
+                    width: 100%;
+                    background: var(--input-color);
+                    border-radius: 10px;
+                    border: none;
+                    padding: 10px;
+                    font-size: var(--normal-font);
+                    font-weight: 500;
+
+                    &::placeholder{
+                        font-size: var(--small-font);
+                        font-weight: 500;
+                        opacity: .5;
+                    }
+                    &:focus{
+                        outline-color: var(--primary-color-light);
+                    }
+                }
+            }
+
+        }
+
+
+        @media screen and (max-width: 767px) {
+            .home-card {
+                position: absolute;
+                color: black;
+                width: 80%;
+                height: 50%;
+                border-radius: 1rem;
+                background: var(--white-color);
+                top: 85%;
+                gap: 1rem;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                padding: 2rem;
+                box-shadow: 0 2px 8px 4px rgba(178, 178, 178, 0.45);
+
 
             }
         }

diff --git a/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Navbar/Navbar.scss b/Express/Projects/TRVL/Frontend/trvl/src/Components/Users/Navbar/Navbar.scss
@@ -15,6 +15,7 @@
 
     }
 
+
     /* media */
     @media screen and (max-width: 767px)
     {
@@ -48,6 +49,7 @@
     }
 
     .nav-menu-icon, .nav-close-icon{
+
         font-size: var(--h1-font);
         &:hover{
             color: var(--primary-color);