Improved styling on navbar and product containers

static/css/style.css

@@ -9,9 +9,8 @@
     --input: #4e5560;
     --fg: #ABB2BF;
     --header: #E06C75;
-    --link: #98C379;
-    --hover: #56B6C2;
-    --glow: #C678DD;
+    --link: #FFF;
+    --hover: #888;
 
     --green: #98C379;
     --red: #E06C75;
@@ -20,7 +19,7 @@
 html {
     background-color: var(--bg);
     color: var(--fg);
-    padding:2%;
+    padding: 2%;
     font-size: 160%;
     font-family: 'Courier New', Courier, monospace;
 }
@@ -45,7 +44,7 @@ form {
 }
 
 #logo {
-    width: 15%;
+    width: 12%;
     height: auto;
 }
 
@@ -62,7 +61,7 @@ form {
 }
 
 *::-webkit-scrollbar-thumb {        
-box-shadow: inset 0 0 0 10px;
+    box-shadow: inset 0 0 0 10px;
 }
 
 @media (max-width:600px) {
@@ -76,25 +75,27 @@ a {
     position: relative;
     color: var(--link);
     white-space: nowrap;
+    transition: 0.4s;
+    align-content: center;
 }
 
 a:after {
     content: '';
     position: absolute;
     bottom: 0;
-    left: 0;
+    left: 15%;
     width: 0%;
     border-bottom: 2px solid var(--fg);
     transition: 0.4s;
 }
 
 a:hover:after {
-    width: 100%;
-    color: var(--glow);
+    width: 70%;
+    color: var(--hover);
 }
 
 a:hover {
-    color: var(--glow);
+    color: var(--hover);
 }
 
 a:active {
@@ -131,6 +132,7 @@ fieldset {
     border-radius: 1rem;
     font-family: consolas;
 }
+
 input, label, button {
     font-size: inherit;
     padding: .125rem .5rem;
@@ -141,7 +143,6 @@ input, label, button {
 }
 
 .textbox {
-    width: 70%;
     font-size: inherit;
     background-color: var(--fg);
 }
@@ -177,7 +178,7 @@ input, label, button {
     justify-content: space-between;
     flex-wrap: wrap;
     flex: 4 0 1rem;
-    padding: .5rem 2.5rem 2rem;
+    padding: .5rem 1rem 2rem 2rem;
     background: var(--bg-secondary);
     border-radius: .5rem;
     transition: all 0.2s;
@@ -194,4 +195,8 @@ input, label, button {
     flex-direction: column;
     align-items: center;
     gap: 1rem 1rem;
+}
+
+.product-description {
+    font-size: 70%;
 }

static/index.html

@@ -12,7 +12,7 @@
     <nav class="navbar">
         <img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
         <form action="test.html" method="get">
-            <input type="text" name="search" class="textbox">
+            <input type="text" name="search" placeholder="Find your favourite products" class="textbox">
             <input type="submit" class="button">
         </form>
         <a href="login.html">Login/Signup</a>
@@ -31,7 +31,11 @@
             </div>
             
             <div class="filter-pane">
-                <div class="number-plate-filter"></div>
+                <div class="number-plate-filter">
+                    <div class="number-plate">
+                        <div class="number-plate-identifier"></div>
+                    </div>
+                </div>
                 <div class="product-ordering not-required"></div>
             </div>
         </div>