From 53aa919540814ca2cbc3eae77778d79cbdd0abdf Mon Sep 17 00:00:00 2001
From: Lionel Chapasuka <126233514+Lionelapex@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:08:12 +0200
Subject: [PATCH] updated the home page design

---
 index.html | 232 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 148 insertions(+), 84 deletions(-)
diff --git a/index.html b/index.html
index 94f76c0..3527c2f 100644
--- a/index.html
+++ b/index.html
@@ -1,84 +1,148 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta charset="UTF-8">
-    <title>Free Web Development Resources</title>
-    <meta name="description" content="This is a list of awesome web development resources. Add more!">
-    <link rel="canonical" href="https://web-dev-resources.com/"/>
-
-    <style>
-        * {
-            padding: 0;
-            margin: 0;
-        }
-
-        body {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            min-height: 100vh;
-            text-align: center;
-            font-family: sans-serif;
-            font-size: 1.2em;
-            line-height: 1.2em;
-            color: #333;
-        }
-
-        header {
-            padding: 20px;
-        }
-
-        main {
-            padding: 20px;
-            line-height: 1.5em;
-        }
-
-        footer {
-            padding: 20px;
-        }
-
-        h1 {
-            margin-bottom: 15px;
-            line-height: 1.4em;
-            background-image: linear-gradient(45deg, #ff0a78, #43f);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        a {
-            color: #333;
-        }
-    </style>
-</head>
-<body>
-<header>
-    <h1>
-        Web Development Resources
-    </h1>
-
-    <p>
-        This is a list of web developments resources with a free tier.
-    </p>
-</header>
-
-<main>
-    <p>
-        Currently more than 200 resources listed.
-    </p>
-
-    <a href="/list/">
-        Take me to the list!
-    </a>
-</main>
-
-<footer>
-    Made by <a href="https://markodenic.com">Marko</a> and contributors. <br>
-    <a href="https://javascriptquiz.com">JavaScript Quiz</a> | <a href="https://freecodetools.org">Free Code Tools</a> |
-    <a href="https://tech-blogs.dev">Tech Blogs</a>
-</footer>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Free Web Development Resources</title>
+    <meta name="description" content="This is a list of awesome web development resources. Add more!">
+    <link rel="canonical" href="https://web-dev-resources.com/"/>
+
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            min-height: 100vh;
+            text-align: center;
+            font-family: 'Arial', sans-serif;
+            background-color: #f0f4f8;
+        }
+
+        header {
+            padding: 20px;
+        }
+
+        h1 {
+            margin-bottom: 15px;
+            font-size: 2.5em;
+            background-image: linear-gradient(45deg, #ff0a78, #43f);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        p {
+            color: #555;
+            margin-bottom: 20px;
+        }
+
+        main {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .card {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            margin: 10px;
+            padding: 20px;
+            width: 250px;
+            text-align: center;
+            transition: transform 0.2s;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+        }
+
+        .card h2 {
+            font-size: 2em;
+            margin-bottom: 10px;
+            color: #ff0a78;
+        }
+
+        .card p {
+            color: #666;
+        }
+
+        .cta-button {
+            background-color: #333;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            text-decoration: none;
+            margin-top: 20px;
+            transition: background-color 0.3s;
+        }
+
+        .cta-button:hover {
+            background-color: #3bc411;
+        }
+
+        footer {
+            padding: 20px;
+            margin-top: auto;
+            color: #777;
+        }
+
+        a {
+            color: #333;
+            text-decoration: none;
+        }
+
+        .footer-links {
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+<header>
+    <h1>
+        Web Development Resources
+    </h1>
+    <p>
+        This is a list of web development resources with a free tier.
+    </p>
+</header>
+
+<main>
+    <div class="card">
+        <h2>200</h2>
+        <p>Resources Listed</p>
+        <p>And growing every day</p>
+    </div>
+    <div class="card">
+        <h2>Free Code Tools</h2>
+        <p>Premium tools at no cost</p>
+    </div>
+    <div class="card">
+        <h2>Tech Blogs</h2>
+        <p>Latest tech insights</p>
+    </div>
+</main>
+
+<a class="cta-button" href="/list/">Take me to the list!</a>
+
+<footer>
+    Made by <a href="https://markodenic.com">Marko</a> and contributors. <br>
+    <div class="footer-links">
+        <a href="https://javascriptquiz.com">JavaScript Quiz</a> | 
+        <a href="https://freecodetools.org">Free Code Tools</a> | 
+        <a href="https://tech-blogs.dev">Tech Blogs</a>
+    </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
