add styling

MuhammadUmaair · Mar 5, 2024 · 1d723fd · 1d723fd
1 parent 5d0ce67
commit 1d723fd
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 7 deletions.
diff --git a/04 - working-with-expressJs/views/404.html b/04 - working-with-expressJs/views/404.html
@@ -6,6 +6,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Page Not Found</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f8f9fa;
+            text-align: center;
+        }
+
+        main {
+            padding: 50px;
+        }
+
+        h1 {
+            font-size: 36px;
+            color: #333;
+        }
+    </style>
 </head>
 
 <body>
@@ -15,4 +33,4 @@ <h1>Page Not Found</h1>
     </main>
 </body>
 
-</html>
+</html>
diff --git a/04 - working-with-expressJs/views/add-product.html b/04 - working-with-expressJs/views/add-product.html
@@ -1,13 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Add Product</title>
-</head>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        header {
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+            text-align: center;
+        }
+
+        nav ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav ul li {
+            display: inline;
+            margin-right: 20px;
+        }
+
+        nav ul li a {
+            color: #fff;
+            text-decoration: none;
+        }
 
+        main {
+            padding: 20px;
+        }
+
+        form input[type="text"] {
+            padding: 10px;
+            width: 300px;
+            margin-right: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        form button[type="submit"] {
+            padding: 10px 20px;
+            background-color: #333;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        form button[type="submit"]:hover {
+            background-color: #555;
+        }
+    </style>
+</head>
 <body>
     <header>
         <nav>
@@ -20,10 +73,9 @@
 
     <main>
         <form action="/add-product" method="POST">
-            <input type="text" name="title">
+            <input type="text" name="title" placeholder="Enter product title">
             <button type="submit">Add Product</button>
         </form>
     </main>
 </body>
-
-</html>
+</html>
diff --git a/04 - working-with-expressJs/views/shop.html b/04 - working-with-expressJs/views/shop.html
@@ -6,6 +6,47 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Add Product</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        header {
+            background-color: #333;
+            color: #fff;
+            padding: 10px 0;
+        }
+
+        nav ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav ul li {
+            display: inline;
+            margin-right: 10px;
+        }
+
+        nav ul li a {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        main {
+            margin: 20px;
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        p {
+            color: #666;
+        }
+    </style>
 </head>
 
 <body>
@@ -24,4 +65,4 @@ <h1>My Products</h1>
     </main>
 </body>
 
-</html>
+</html>