From 2d8f162c5c4d0167c7e671496a1116adb2456583 Mon Sep 17 00:00:00 2001
From: KhushiParekh <140279193+KhushiParekh@users.noreply.github.com>
Date: Fri, 25 Oct 2024 21:17:23 +0530
Subject: [PATCH 1/2] UI Improved

---
 Todo.html    | 193 +++++++------
 imp.html     | 260 ++++++++++++++----
 impstyle.css |  65 -----
 index.html   | 334 +++++++++++++++++++----
 script.js    |   3 +-
 style.css    | 744 +++++++++++++++++++++++++++------------------------
 6 files changed, 992 insertions(+), 607 deletions(-)
 delete mode 100644 impstyle.css
diff --git a/Todo.html b/Todo.html
index 48d0127..56587bb 100644
--- a/Todo.html
+++ b/Todo.html
@@ -1,112 +1,111 @@
-<!doctype html>
+
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo-List</title>
+    <title>Task Manager Pro</title>
     <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-  </head>
-  <body>
-    <div class="container">
-      <h1 class="subtitle">Todo-List</h1>
-
-      <div class="js-add-grid" id="add-todo">
-        <input
-          type="text"
-          placeholder="Add a new task here...."
-          class="js-name-input"
-        />
-
-        <input type="date" class="js-date-input" min="" />
-        <input type="time" class="js-time-input" />
-        <select class="js-category-input">
-          <option value="">Select Category</option>
-          <option value="work">Work</option>
-          <option value="personal">Personal</option>
-          <option value="shopping">Shopping</option>
-          <option value="other">Other</option>
-        </select>
-        <select class="js-priority-input">
-          <option value="">Select Priority</option>
-          <option value="high">High</option>
-          <option value="medium">Medium</option>
-          <option value="low">Low</option>
-        </select>
-        <div class="js-actions-wrapper">
-          <button class="js-add-button" title="Add tasks">
-            <i class="fa-solid fa-add"></i> &nbsp; Add tasks
-          </button>
-          <button class="js-cancel-button" title="Cancel">
-            <i class="fa-solid fa-times"></i>
-          </button>
-        </div>
-        <div id="js-success-notification" style="display: none">
-          <p>Task completed 🎉</p>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="top-nav">
+        <div class="nav-content">
+            <a href="index.html" class="nav-brand">
+                <i class="fas fa-chevron-left"></i>
+                Back to Home
+            </a>
+            
         </div>
+    </nav>
+
+    <div class="content">
+        <h1 class="title">Task Manager</h1>
+<div class="container">
+         <!-- Task Input Form -->
+         <div class="task-form">
+          <div class="input-grid">
+              <input type="text" placeholder="What needs to be done?" class="js-name-input task-input" />
+              <input type="date" class="js-date-input date-input" />
+              <input type="time" class="js-time-input time-input" />
+              <select class="js-category-input category-input">
+                  <option value="">Category</option>
+                  <option value="work">Work</option>
+                  <option value="personal">Personal</option>
+                  <option value="shopping">Shopping</option>
+                  <option value="other">Other</option>
+              </select>
+              <select class="js-priority-input priority-input">
+                  <option value="">Priority</option>
+                  <option value="high">High</option>
+                  <option value="medium">Medium</option>
+                  <option value="low">Low</option>
+              </select>
+              <div class="button-group">
+                  <button class="js-add-button add-btn">
+                      <i class="fas fa-plus"></i> Add Task
+                  </button>
+                  <button class="js-cancel-button cancel-btn">
+                      <i class="fas fa-times"></i>
+                  </button>
+              </div>
+          </div>
       </div>
 
-      <!-- Add this new div for sorting buttons -->
-      <div class="sort-buttons">
-        <div class="sort-filter-container">
-          <button class="sort-button" onclick="sortTodos('category')">
-            Sort by Category
-          </button>
-          <button class="sort-button" onclick="sortTodos('priority')">
-            Sort by Priority
-          </button>
-          <select class="js-filter-input" onchange="filterTodos()">
-            <option value="all">All</option>
-            <option value="pending">Pending</option>
-            <option value="completed">Completed</option>
-          </select>
-        </div>
+      <!-- Task Controls -->
+      <div class="task-controls">
+          <div class="filter-sort">
+              <button class="control-btn" onclick="sortTodos('category')">
+                  <i class="fas fa-sort"></i> Category
+              </button>
+              <button class="control-btn" onclick="sortTodos('priority')">
+                  <i class="fas fa-sort"></i> Priority
+              </button>
+              <select class="js-filter-input filter-select" onchange="filterTodos()">
+                  <option value="all">All Tasks</option>
+                  <option value="pending">Pending</option>
+                  <option value="completed">Completed</option>
+              </select>
+          </div>
       </div>
-      <div class="test">
-        <div class="js-add-html js-add-grid js-add-html-tasks"></div>
+
+      <!-- Task List Container -->
+      <div class="task-list-container">
+          <div class="js-add-html tasks-grid"></div>
       </div>
+  </div>
+</div>
+ 
+
+    <!-- Success Notification -->
+    <div id="js-success-notification" class="success-notification">
+        <p><i class="fas fa-check-circle"></i> Task completed successfully!</p>
     </div>
 
+    <!-- Footer -->
     <footer class="footer">
-      <p>
-        &copy; <span class="year"></span> Made with &#10084; by Ansh Grover. All
-        rights reserved.
-      </p>
-      <div class="social-media">
-        <a class="insta" href="https://www.instagram.com/" target="_blank"
-          ><i class="fa-brands fa-instagram"></i
-        ></a>
-        <a class="facebook" href="https://www.facebook.com/" target="_blank"
-          ><i class="fa-brands fa-facebook"></i
-        ></a>
-        <a class="x" href="https://x.com/i/flow/login" target="_blank"
-          ><i class="fa-brands fa-x-twitter"></i
-        ></a>
-        <a class="linkedin" href="https://www.linkedin.com/" target="_blank"
-          ><i class="fa-brands fa-linkedin-in"></i
-        ></a>
-        <a class="github" href="https://github.com/Groverio" target="_blank"
-          ><i class="fa-brands fa-github"></i
-        ></a>
-        <a class="youtube" href="https://www.youtube.com/" target="_blank"
-          ><i class="fa-brands fa-youtube"></i
-        ></a>
-      </div>
+        <p>&copy; <span class="year"></span> Made with <i class="fas fa-heart"></i> by Ansh Grover</p>
+        <div class="social-media">
+            <a href="https://www.instagram.com/" target="_blank" class="social-link instagram">
+                <i class="fab fa-instagram"></i>
+            </a>
+            <a href="https://www.facebook.com/" target="_blank" class="social-link facebook">
+                <i class="fab fa-facebook"></i>
+            </a>
+            <a href="https://twitter.com/" target="_blank" class="social-link twitter">
+                <i class="fab fa-twitter"></i>
+            </a>
+            <a href="https://www.linkedin.com/" target="_blank" class="social-link linkedin">
+                <i class="fab fa-linkedin"></i>
+            </a>
+            <a href="https://github.com/Groverio" target="_blank" class="social-link github">
+                <i class="fab fa-github"></i>
+            </a>
+        </div>
     </footer>
 
     <script src="script.js"></script>
-  </body>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/imp.html b/imp.html
index 2df2516..4198936 100644
--- a/imp.html
+++ b/imp.html
@@ -1,50 +1,220 @@
+
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="impstyle.css" />
-    <title>Importance of To-Do List</title>
-  </head>
-  <body>
-    <h1 class="heading">Importance of a To-Do List 📝</h1>
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Importance of To-Do List</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+    :root {
+        --primary-color: #6366f1;
+        --accent-color: #ec4899;
+        --background-light: #f9fafb;
+        --text-dark: #1f2937;
+        --gray: #4b5563;
+        --card-bg: #fff;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        font-family: 'Inter', sans-serif;
+        background-color: var(--background-light);
+        color: var(--text-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px;
+    }
+    .top-nav {
+  background: white;
+  box-shadow: var(--shadow-sm);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 100vw;
+  margin-bottom: 2rem;
+}
+
+.nav-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.nav-brand {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+    /* Header */
+    .heading {
+        font-size: 2.8rem;
+        color: var(--primary-color);
+        text-align: center;
+        margin: 1rem 0;
+        font-weight: 700;
+    }
+
+    /* Container */
+    .contain {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        width: 100%;
+        max-width: 800px;
+        margin: 2rem 15rem auto;
+        padding-bottom: 15rem;
+    }
+
+    .toggle-container {
+        background: var(--card-bg);
+        border: 1px solid var(--gray);
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+        transition: transform 0.3s ease;
+    }
+
+    .toggle-container:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+    }
+
+    .toggle-heading {
+        color: var(--primary-color);
+        font-size: 1.8rem;
+        margin-bottom: 10px;
+        font-weight: 600;
+    }
 
+    .toggle-paragraph {
+        color: var(--text-dark);
+        line-height: 1.6;
+    }
+
+    .toggle-paragraph strong {
+        color: var(--accent-color);
+    }
+
+    /* Footer */
+    .footer{
+    background-color: #212934;
+            color: white;
+            margin-top: 5rem;
+        padding: 1rem;
+        text-align: center;
+        font-size: 0.875rem;
+        width: 100vw;
+        position: fixed;
+        bottom: 0;
+    }
+    .social-links {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        margin-top: 0.5rem;
+    }
+
+    .social-link {
+        color: var(--primary-color);
+        font-size: 1.5rem;
+        transition: color 0.3s ease;
+    }
+
+    .social-link:hover {
+        color: var(--accent-color);
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .heading {
+            font-size: 2rem;
+        }
+
+        .toggle-heading {
+            font-size: 1.5rem;
+        }
+
+        .toggle-container {
+            padding: 15px;
+        }
+    }
+</style>
+</head>
+<body>
+  <nav class="top-nav">
+    <div class="nav-content">
+        <a href="index.html" class="nav-brand">
+            <i class="fas fa-chevron-left"></i>
+            Back to Home
+        </a>
+        
+    </div>
+</nav>
+    <h1 class="heading">Importance of a To-Do List 📝</h1>
     <div class="contain">
-      <div class="toggle-container">
-        <h2 class="toggle-heading">Enhanced Organization 📅</h2>
-        <p class="toggle-paragraph">
-          A to-do list keeps tasks organized, allowing you to view everything at
-          a glance and prioritize effectively. It reduces clutter and ensures
-          you don’t forget deadlines.
-          <strong>Example:</strong> When planning a group project, listing tasks
-          like researching and drafting helps assign roles and track progress.
-        </p>
-      </div>
-
-      <div class="toggle-container">
-        <h2 class="toggle-heading">Increased Productivity 🚀</h2>
-        <p class="toggle-paragraph">
-          A clear task list helps you focus on your goals, minimizing
-          distractions and boosting efficiency. By breaking tasks into smaller
-          steps, you avoid feeling overwhelmed and improve your productivity.
-          <strong>Example:</strong> Instead of tackling a large project at once,
-          break it down into tasks like "research," "outline," and "proofread."
-          This makes the project feel more manageable, and checking off each
-          completed task gives you a sense of achievement, motivating you to
-          continue.
-        </p>
-      </div>
-
-      <div class="toggle-container">
-        <h2 class="toggle-heading">Reduced Stress 😌</h2>
-        <p class="toggle-paragraph">
-          A to-do list reduces the mental burden of remembering tasks, lowering
-          anxiety levels. Writing everything down prevents the worry of
-          forgetting important responsibilities.
-          <strong>Example:</strong> If your week is packed, listing your tasks
-          helps you prioritize and stay on track without feeling overwhelmed.
-        </p>
-      </div>
+        <div class="toggle-container">
+            <h2 class="toggle-heading">Enhanced Organization 📅</h2>
+            <p class="toggle-paragraph">
+                A to-do list keeps tasks organized, allowing you to view everything at
+                a glance and prioritize effectively. It reduces clutter and ensures
+                you don’t forget deadlines.
+                <strong>Example:</strong> When planning a group project, listing tasks
+                like researching and drafting helps assign roles and track progress.
+            </p>
+        </div>
+        <div class="toggle-container">
+            <h2 class="toggle-heading">Increased Productivity 🚀</h2>
+            <p class="toggle-paragraph">
+                A clear task list helps you focus on your goals, minimizing
+                distractions and boosting efficiency. By breaking tasks into smaller
+                steps, you avoid feeling overwhelmed and improve your productivity.
+                <strong>Example:</strong> Instead of tackling a large project at once,
+                break it down into tasks like "research," "outline," and "proofread."
+                This makes the project feel more manageable, and checking off each
+                completed task gives you a sense of achievement, motivating you to
+                continue.
+            </p>
+        </div>
+        <div class="toggle-container">
+            <h2 class="toggle-heading">Reduced Stress 😌</h2>
+            <p class="toggle-paragraph">
+                A to-do list reduces the mental burden of remembering tasks, lowering
+                anxiety levels. Writing everything down prevents the worry of
+                forgetting important responsibilities.
+                <strong>Example:</strong> If your week is packed, listing your tasks
+                helps you prioritize and stay on track without feeling overwhelmed.
+            </p>
+        </div>
     </div>
-  </body>
-</html>
+    <footer class="footer">
+        &copy; 2024. All rights reserved.
+        <div class="social-links">
+            <a href="https://www.instagram.com/" target="_blank" class="social-link">
+                <i class="fab fa-instagram"></i>
+            </a>
+            <a href="https://www.facebook.com/" target="_blank" class="social-link">
+                <i class="fab fa-facebook"></i>
+            </a>
+            <a href="https://twitter.com/" target="_blank" class="social-link">
+                <i class="fab fa-twitter"></i>
+            </a>
+        </div>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/impstyle.css b/impstyle.css
deleted file mode 100644
index 55c60f4..0000000
--- a/impstyle.css
+++ /dev/null
@@ -1,65 +0,0 @@
-body {
-  font-family: Arial, sans-serif;
-  background: linear-gradient(to bottom, #6b46c1, #9f7aea, #f687b3);
-  margin: 0;
-  padding: 20px;
-  /* overflow: hidden; */
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-.heading {
-  text-align: center;
-  color: #f6ac62;
-  font-family: 'Londrina Outline', cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: #000000 3px 4px 10px;
-}
-.contain {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  min-height: 70vh;
-  /* border:1px black solid */
-}
-
-.toggle-container {
-  border: 2px solid black;
-  border-radius: 10px;
-  height: auto;
-  width: 30%;
-  background-color: #fff;
-  padding: 15px;
-  box-shadow: 0 2px 10px white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  margin-bottom: 122px;
-}
-
-.toggle-heading {
-  font-family: 'Londrina Outline', cursive;
-  font-weight: bolder;
-  color: #4caf50;
-  margin-bottom: 10px;
-}
-
-.toggle-paragraph {
-  line-height: 1.5;
-  color: #555;
-  font-family: 'Londrina Outline', cursive;
-}
-
-@media only screen and (max-width: 1100px) {
-  .contain {
-    flex-direction: column;
-    width: fit-content;
-  }
-  .toggle-container {
-    width: 70%;
-    margin-bottom: 12px;
-  }
-}
diff --git a/index.html b/index.html
index 4d15837..46d6276 100644
--- a/index.html
+++ b/index.html
@@ -1,61 +1,289 @@
-<!doctype html>
+
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<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>To-Do List App</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-gray-50 text-gray-800">
-    <!-- Navbar -->
-    <nav class="bg-white shadow-lg">
-      <div
-        class="container mx-auto px-4 py-4 flex justify-between items-center"
-      >
-        <a href="#" class="text-2xl font-bold text-purple-600">To-Do List</a>
-        <ul class="flex space-x-4">
-          <!-- All of these buttons currently lead to error pages as their functionality will be added in the future
-         after login and authentication has been implemented.-->
-          <li>
-            <a href="error.html" class="hover:text-blue-600">Upcoming Tasks</a>
-          </li>
-          <li><a href="error.html" class="hover:text-blue-600">Friends</a></li>
-          <li>
-            <a href="imp.html" class="hover:text-blue-600">Why We need this?</a>
-          </li>
-        </ul>
-      </div>
+    <title>TaskFlow - Smart Task Management</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+        :root {
+            --primary-color: #6366f1;
+            --primary-dark: #4f46e5;
+            --gray-50: #f9fafb;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--gray-50);
+            color: var(--gray-800);
+        }
+
+        /* Navbar */
+        .navbar {
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+
+        .nav-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .nav-logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+        }
+
+        .nav-links a {
+            color: var(--gray-600);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+
+        .nav-links a:hover {
+            color: var(--primary-color);
+        }
+
+        /* Hero Section */
+        .hero {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
+            display: flex;
+            align-items: center;
+            padding-top: 4rem;
+        }
+
+        .hero-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            color: white;
+            text-align: center;
+        }
+
+        .hero-title {
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
+        }
+
+        .hero-subtitle {
+            font-size: 1.25rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-top: 4rem;
+            text-align: left;
+            padding-bottom: 5rem;
+        }
+
+        .feature-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            border-radius: 12px;
+            transition: transform 0.2s;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+        }
+
+        .feature-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .feature-description {
+            opacity: 0.9;
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+
+        .cta-button {
+            display: inline-block;
+            background-color: white;
+            color: var(--primary-color);
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.2s;
+            margin-top: 2rem;
+        }
+
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #212934;
+            color: white;
+        padding: 1rem;
+        
+        text-align: center;
+        font-size: 0.875rem;
+ 
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-top: 1rem;
+        }
+
+        .social-link {
+            color: white;
+            font-size: 1.25rem;
+            opacity: 0.8;
+            transition: all 0.2s;
+        }
+
+        .social-link:hover {
+            opacity: 1;
+            transform: translateY(-2px);
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .nav-content {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .hero-title {
+                font-size: 2.5rem;
+            }
+
+            .features {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-content">
+            <a href="#" class="nav-logo">
+                <i class="fas fa-check-circle"></i>
+                To-do-list
+            </a>
+            <div class="nav-links">
+                <a href="error.html">Upcoming tasks</a>
+                <a href="error.html">Friends</a>
+                <a href="imp.html">About</a>
+                <a href="todo.html">Get Started</a>
+            </div>
+        </div>
     </nav>
 
-    <!-- Main Block -->
-    <section
-      class="flex justify-center items-center h-screen bg-gradient-to-b from-purple-700 via-purple-500 to-pink-400"
-    >
-      <div class="container mx-auto px-4 text-center text-white">
-        <h1 class="text-4xl md:text-6xl font-bold">
-          Organize Your Life with this easy-to-use app
-        </h1>
-        <p class="mt-4 text-lg md:text-2xl">
-          Manage tasks effortlessly and boost your productivity. Stay on top of
-          everything with our intuitive To-Do List.
-        </p>
-        <a
-          href="Todo.html"
-          class="mt-8 inline-block bg-white text-indigo-600 font-bold py-3 px-6 rounded-lg shadow-lg hover:bg-gray-200"
-        >
-          Start
-        </a>
-      </div>
+    <section class="hero">
+        <div class="hero-content">
+            <h1 class="hero-title">Organize Your Life with Task Manager</h1>
+            <p class="hero-subtitle">
+                A powerful and intuitive task management tool designed to boost your productivity
+                and help you achieve more, every day.
+            </p>
+            <a href="todo.html" class="cta-button">
+                Start Managing Tasks <i class="fas fa-arrow-right"></i>
+            </a>
+
+            <div class="features">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-tasks"></i>
+                    </div>
+                    <h3 class="feature-title">Task Organization</h3>
+                    <p class="feature-description">
+                        Easily create, organize, and prioritize your tasks with our intuitive interface.
+                    </p>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-clock"></i>
+                    </div>
+                    <h3 class="feature-title">Time Management</h3>
+                    <p class="feature-description">
+                        Set deadlines, reminders, and track your progress to stay on schedule.
+                    </p>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <h3 class="feature-title">Progress Tracking</h3>
+                    <p class="feature-description">
+                        Monitor your productivity and celebrate your accomplishments.
+                    </p>
+                </div>
+            </div>
+        </div>
     </section>
 
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-6">
-      <div class="container mx-auto px-4 text-center">
-        <p>
-          &copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.
-        </p>
+    <footer class="footer">
+      &copy; 2024. All rights reserved.
+      <div class="social-links">
+          <a href="https://www.instagram.com/" target="_blank" class="social-link">
+              <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.facebook.com/" target="_blank" class="social-link">
+              <i class="fab fa-facebook"></i>
+          </a>
+          <a href="https://twitter.com/" target="_blank" class="social-link">
+              <i class="fab fa-twitter"></i>
+          </a>
       </div>
-    </footer>
-  </body>
-</html>
+  </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 48e49a4..ec6bbf8 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,4 @@
+//script.js
 let todoList = JSON.parse(localStorage.getItem('todoList')) || [];
 let todoListhtml = '';
 console.log(todoList);
@@ -358,4 +359,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // Add year in the footer(CopyRight Notice)
 let year = document.querySelector('.year');
-year.innerText = new Date().getFullYear();
+year.innerText = new Date().getFullYear();
\ No newline at end of file
diff --git a/style.css b/style.css
index 6b4c4f1..7eedcbe 100644
--- a/style.css
+++ b/style.css
@@ -1,474 +1,526 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
+/* Base Styles and Variables */
+:root {
+  --primary-color: #6366f1;
+  --secondary-color: #4f46e5;
+  --success-color: #22c55e;
+  --danger-color: #ef4444;
+  --warning-color: #f59e0b;
+  --text-dark: #1f2937;
+  --text-light: #ffffff;
+  --background-gradient: linear-gradient(135deg, #6366f1, #4f46e5);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+}
+
+
+* {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: var(--text-dark);
+  line-height: 1.5;
+  min-height: 100vh;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background: linear-gradient(to bottom, #6b46c1, #9f7aea, #f687b3);
-}
-why-need-link {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  font-size: 16px;
-  font-weight: bold;
-  text-decoration: none;
-  background-color: #f6ac62;
-  color: black;
-  padding: 8px 12px;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
+  flex-direction: column;
 }
-. .container {
-  width: 100%;
-  max-width: 1000px;
-  padding: 20px;
-  box-sizing: border-box;
-  margin-bottom: 170px;
+
+/* Navigation Styles */
+.top-nav {
+  background: white;
+  box-shadow: var(--shadow-sm);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
-.subtitle {
-  text-align: center;
-  color: #f6ac62;
-  font-family: 'Londrina Outline', cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: 0 3px 10px rgba(10, 10, 10, 40);
+.nav-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-h1 {
-  text-align: center;
-  color: #fff;
-  margin-bottom: 20px;
-  text-shadow: 2px 2px 4px #000;
-}
-
-.js-name-input,
-.js-date-input,
-.js-time-input,
-.js-category-input,
-.js-priority-input,
-.js-add-button,
-.js-cancel-button {
-  font-size: 15px;
-  padding: 10px 15px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #fff;
-  color: #333;
-  outline: none;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
+.nav-brand {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.js-date-input:hover,
-.js-time-input:hover {
-  cursor: pointer;
-  font-weight: bold;
+/* Container and Title */
+.content {
+  width: 100vw;
+  margin: 1rem auto;
+  padding: 0 1rem;
+  flex-grow: 1;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.js-add-grid {
+.title {
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 2rem;
+ 
+}
+.container{
+  
+  display: flex;
+  flex-direction: column;
+  width: 75%;
+  
+  /* justify-content: center;
+  align-items: center; */
+  /* margin-left: 12rem;
+  margin-right: 12rem; */
+}
+/* Task Form */
+.task-form {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  margin-bottom: 2rem;
+  
+  
+  
+}
+
+.input-grid {
   display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
-  gap: 10px;
-  row-gap: 1rem;
-  background-color: rgba(255, 255, 255, 0.9);
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
+  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+.task-input,
+.date-input,
+.time-input,
+.category-input,
+.priority-input {
+  padding: 0.75rem 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  transition: border-color 0.2s;
+}
+
+.task-input:focus,
+.date-input:focus,
+.time-input:focus,
+.category-input:focus,
+.priority-input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
-.js-actions-wrapper {
+.button-group {
   display: flex;
-  justify-content: center;
-  gap: 1rem;
-  grid-row: auto;
-  grid-column: auto;
+  gap: 0.75rem;
 }
 
-.js-add-button,
-.js-cancel-button {
-  background-color: green;
-  color: white;
+.add-btn,
+.cancel-btn {
+  padding: 0.75rem 1.5rem;
   border: none;
-  font-weight: bold;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 0.5rem;
 }
 
-.js-add-button:hover {
-  background-color: darkgreen;
+.add-btn {
+  background: var(--primary-color);
+  color: white;
 }
 
-.js-cancel-button {
-  background-color: #ff0000;
+.cancel-btn {
+  background: var(--danger-color);
+  color: white;
 }
 
-.js-cancel-button:hover {
-  background-color: #8b0000;
+.add-btn:hover,
+.cancel-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
 
-.js-add-html {
-  display: grid;
-  align-items: center;
-  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
-  gap: 10px;
-  height: 25px;
+/* Task Controls */
+.task-controls {
+  margin-bottom: 1.5rem;
 }
 
-.small-container {
+.filter-sort {
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border: 1px solid #ccc;
-  padding: 10px 15px;
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  text-align: left;
-  min-height: 45px;
-  max-height: 90px;
-  height: auto;
-  box-sizing: border-box;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
-.task-info {
+.control-btn {
+  padding: 0.625rem 1.25rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  gap: 0.5rem;
 }
 
-.task-name {
-  font-weight: bold;
-  overflow: auto;
-  max-height: 40px;
+.control-btn:hover {
+  background: #f9fafb;
 }
 
-.category-tag,
-.priority-tag {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: bold;
+.filter-select {
+  padding: 0.625rem 1.25rem;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  background: white;
+  cursor: pointer;
 }
 
-.category-tag {
-  background-color: #e0e0e0;
-  color: #333;
+/* Task List */
+.task-list-container {
+  width: auto;
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  max-height: 60vh;
+  overflow-y: auto;
 }
 
-.priority-high {
-  background-color: #ffcccb;
-  color: #d8000c;
+.tasks-grid {
+  width: auto;
+  display: flex;
+  gap: 1rem;
+  padding: 1.5rem;
 }
 
-.priority-medium {
-  background-color: #feefb3;
-  color: #9f6000;
+/* Task Items */
+.task-item {
+  background: #f9fafb;
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 1rem;
+  align-items: center;
 }
 
-.priority-low {
-  background-color: #d4edda;
-  color: #155724;
+.task-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.js-delete-button,
-.js-edit-button {
-  border: none;
-  font-size: 15px;
-  font-weight: bold;
-  cursor: pointer;
-  border-radius: 5px;
-  padding: 10px 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.3s ease;
-  width: 100%;
-  justify-content: center;
-  height: 46px;
+.task-title {
+  font-weight: 600;
 }
 
-.js-delete-button {
-  background-color: red;
-  color: white;
+.task-meta {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.875rem;
 }
 
-.js-delete-button:hover {
-  background-color: darkred;
+.task-tag {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
 }
 
-.js-edit-button {
-  background-color: skyblue;
-  color: white;
+.priority-high {
+  background: #fee2e2;
+  color: #dc2626;
 }
 
-.js-edit-button:hover {
-  background-color: deepskyblue;
+.priority-medium {
+  background: #fef3c7;
+  color: #d97706;
 }
 
-.js-add-button img,
-.js-delete-button img,
-.js-edit-button img {
-  margin-right: 5px;
+.priority-low {
+  background: #d1fae5;
+  color: #059669;
 }
 
-/* Footer Styling */
-footer {
-  background-color: transparent;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
+/* Success Notification */
+.success-notification {
   position: fixed;
-  width: 100%;
-  bottom: 0;
-  font-size: 1rem;
-  display: flex;
-  justify-content: space-around;
+  bottom: 2rem;
+  right: 2rem;
+  background: var(--success-color);
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  display: none;
+  animation: slideIn 0.3s ease-out;
 }
 
-footer p {
-  margin-top: 10px;
-  font-size: 12px;
+@keyframes slideIn {
+  from {
+      transform: translateX(100%);
+      opacity: 0;
+  }
+  to {
+      transform: translateX(0);
+      opacity: 1;
+  }
+}
+
+/* Footer */
+.footer {
+  background-color: #212934;
+  color: white;
+  padding: 1rem 0;
+  margin-top: auto;
+  text-align: center;
 }
 
 .social-media {
   display: flex;
   justify-content: center;
-  align-items: center;
+  gap: 1.5rem;
+  margin-top: 1rem;
 }
 
-.social-media a {
-  margin: 1px 11px;
-  color: black;
-  font-size: 15px;
-  padding: 8px;
-  border: 2px solid black;
-  border-radius: 8px;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+.social-link {
+  color: var(--text-dark);
+  font-size: 1.25rem;
+  transition: transform 0.2s;
 }
 
-.social-media a:hover {
-  transform: scale(1.05);
-  transition: all 0.25s ease-out;
-  border: none;
+.social-link:hover {
+  transform: translateY(-2px);
 }
 
-.social-media .insta:hover {
-  background: linear-gradient(
-    45deg,
-    #feda75,
-    #fa7e1e,
-    #d62976,
-    #962fbf,
-    #4f5bd5
-  );
-  color: white;
+.instagram:hover {
+  color: #e1306c;
 }
 
-.social-media .facebook:hover {
-  background-color: #1877f2;
-  color: white;
+.facebook:hover {
+  color: #1877f2;
 }
 
-.social-media .x:hover {
-  background-color: #000000;
-  color: white;
+.twitter:hover {
+  color: #1da1f2;
 }
 
-.social-media .linkedin:hover {
-  background-color: #0a66c2;
-  color: white;
+.linkedin:hover {
+  color: #0077b5;
 }
 
-.social-media .github:hover {
-  background-color: white;
+.github:hover {
+  color: #333;
 }
 
-.social-media .youtube:hover {
-  background-color: white;
-  color: #ff0000;
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .input-grid {
+      grid-template-columns: 1fr 1fr;
+  }
+  
+  .button-group {
+      grid-column: span 2;
+  }
 }
 
-/*
-Animating title
-*/
+@media (max-width: 768px) {
+  .nav-links {
+      display: none;
+  }
+  
+  .input-grid {
+      grid-template-columns: 1fr;
+  }
+  
+  .button-group {
+      grid-column: auto;
+  }
+  
+  .task-item {
+      grid-template-columns: 1fr;
+  }
+}
 
-.subtitle {
-  text-align: center;
-  color: #f6ac62;
-  font-family: 'Open sans', sans-serif;
-  font-family: cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: #000000 3px 4px 10px;
+@media (max-width: 640px) {
+  .title {
+      font-size: 2rem;
+  }
+  
+  .filter-sort {
+      flex-direction: column;
+  }
+  
+  .success-notification {
+      left: 1rem;
+      right: 1rem;
+      bottom: 1rem;
+      text-align: center;
+  }
 }
 
-.sort-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
+/* Task List Container Updates */
+.task-list-container {
+  width: 100%;
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  margin-top: 1rem;
 }
 
-.sort-filter-container {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+.tasks-grid {
+  display: grid;
+  grid-template-columns: 3fr 1fr 1fr auto auto;
+  gap: 0.5rem;
+  padding: 1rem;
+  align-items: center;
 }
 
-.sort-button,
-.js-filter-input {
-  background-color: #4caf50;
-  border: none;
-  color: white;
-  padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: background-color 0.3s;
+.small-container {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.sort-button:hover,
-.js-filter-input:hover {
-  background-color: #45a049;
+/* Task Info Styles */
+.task-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
-.js-filter-input {
-  font-size: 15px;
-  padding: 10px 15px;
-  background-color: #4caf50;
-  color: white;
+.task-name {
+  font-weight: 500;
 }
 
-.completed {
-  background-color: #e0e0e0;
-  text-decoration: line-through;
+.category-tag {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-sm);
+  background: #e5e7eb;
+  font-size: 0.875rem;
 }
 
-.js-add-html {
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  height: 30vh;
+.priority-tag {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
-.js-add-html::-webkit-scrollbar {
-  width: 10px; /* Width of the scrollbar */
+.priority-high {
+  background: #fee2e2;
+  color: #dc2626;
 }
 
-.js-add-html::-webkit-scrollbar-thumb {
-  background-color: rgb(136, 132, 132);
-  border-radius: 7px;
+.priority-medium {
+  background: #fef3c7;
+  color: #d97706;
 }
 
-.js-add-html::-webkit-scrollbar-track {
-  background-color: black;
-  border-radius: 5px;
+.priority-low {
+  background: #d1fae5;
+  color: #059669;
 }
-#js-success-notification {
-  position: absolute;
-  border-radius: 5px;
+
+/* Button Styles */
+.js-delete-button,
+.js-edit-button {
+  padding: 0.5rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #46a34a;
-  width: 15%;
-  min-width: 200px;
-  height: 7%;
-  left: 2%;
-  bottom: 10%;
-  color: #d4edda;
-}
-.js-add-html-tasks {
-  border: 1px black solid;
-  height: fit-content;
-  max-height: 35vh;
-}
-
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Londrina+Outline&display=swap');
-
-@keyframes bounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-
-  40% {
-    transform: translateY(-10px);
-  }
+}
 
-  60% {
-    transform: translateY(-5px);
-  }
+.js-delete-button {
+  background: #fee2e2;
+  color: #dc2626;
 }
 
-@media (max-width: 947px) {
-  .container {
-    max-width: 100%;
-    padding: 10px;
-  }
+.js-edit-button {
+  background: #e5e7eb;
+  color: #374151;
+}
 
-  .subtitle {
-    font-size: 3rem;
-  }
+.js-delete-button:hover,
+.js-edit-button:hover {
+  opacity: 0.9;
+}
 
-  .js-add-grid,
-  .js-add-html {
-    grid-template-columns: 1fr;
-  }
+/* Completed Task Styles */
+.completed {
+  opacity: 0.6;
+}
 
-  .js-add-button {
-    width: 100%;
-    padding: 10px;
-  }
+.completed .task-name {
+  text-decoration: line-through;
+}
 
-  .task-info {
-    flex-direction: column;
-  }
+/* Checkbox Styles */
+.js-complete-checkbox {
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 4px;
+  border: 2px solid #6366f1;
+  cursor: pointer;
+}
 
-  .footer {
-    font-size: 0.8rem;
-    flex-direction: column;
-  }
+/* Control Button Styles */
+.control-btn, 
+.filter-select {
+  background: white;
+  border: 1px solid #e5e7eb;
+  padding: 0.625rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
-@media (max-width: 480px) {
-  .subtitle {
-    font-size: 2rem;
-  }
+.control-btn:hover {
+  background: #f9fafb;
+}
 
-  .js-add-grid,
-  .js-add-html {
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .tasks-grid {
     grid-template-columns: 1fr;
+    gap: 1rem;
   }
-
-  h1 {
-    font-size: 1.5rem;
-  }
-
-  .task-info {
-    flex-direction: column;
-    gap: 5px;
+  
+  .small-container {
+    justify-content: space-between;
   }
-
-  .footer p {
-    font-size: 10px;
-  }
-}
+}
\ No newline at end of file

From da92901eedb3f6e35d573354be56422374b97252 Mon Sep 17 00:00:00 2001
From: KhushiParekh <140279193+KhushiParekh@users.noreply.github.com>
Date: Fri, 25 Oct 2024 21:34:12 +0530
Subject: [PATCH 2/2] Prettier

---
 Todo.html    | 199 +++++++++++--------
 imp.html     | 273 +++++++++++++-------------
 index.html   | 527 ++++++++++++++++++++++++++-------------------------
 package.json |   4 +-
 script.js    |   2 +-
 style.css    |  69 ++++---
 6 files changed, 558 insertions(+), 516 deletions(-)

diff --git a/Todo.html b/Todo.html
index 56587bb..aa2408b 100644
--- a/Todo.html
+++ b/Todo.html
@@ -1,111 +1,144 @@
-
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Task Manager Pro</title>
     <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-</head>
-<body>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
     <!-- Navigation -->
     <nav class="top-nav">
-        <div class="nav-content">
-            <a href="index.html" class="nav-brand">
-                <i class="fas fa-chevron-left"></i>
-                Back to Home
-            </a>
-            
-        </div>
+      <div class="nav-content">
+        <a href="index.html" class="nav-brand">
+          <i class="fas fa-chevron-left"></i>
+          Back to Home
+        </a>
+      </div>
     </nav>
 
     <div class="content">
-        <h1 class="title">Task Manager</h1>
-<div class="container">
-         <!-- Task Input Form -->
-         <div class="task-form">
+      <h1 class="title">Task Manager</h1>
+      <div class="container">
+        <!-- Task Input Form -->
+        <div class="task-form">
           <div class="input-grid">
-              <input type="text" placeholder="What needs to be done?" class="js-name-input task-input" />
-              <input type="date" class="js-date-input date-input" />
-              <input type="time" class="js-time-input time-input" />
-              <select class="js-category-input category-input">
-                  <option value="">Category</option>
-                  <option value="work">Work</option>
-                  <option value="personal">Personal</option>
-                  <option value="shopping">Shopping</option>
-                  <option value="other">Other</option>
-              </select>
-              <select class="js-priority-input priority-input">
-                  <option value="">Priority</option>
-                  <option value="high">High</option>
-                  <option value="medium">Medium</option>
-                  <option value="low">Low</option>
-              </select>
-              <div class="button-group">
-                  <button class="js-add-button add-btn">
-                      <i class="fas fa-plus"></i> Add Task
-                  </button>
-                  <button class="js-cancel-button cancel-btn">
-                      <i class="fas fa-times"></i>
-                  </button>
-              </div>
+            <input
+              type="text"
+              placeholder="What needs to be done?"
+              class="js-name-input task-input"
+            />
+            <input type="date" class="js-date-input date-input" />
+            <input type="time" class="js-time-input time-input" />
+            <select class="js-category-input category-input">
+              <option value="">Category</option>
+              <option value="work">Work</option>
+              <option value="personal">Personal</option>
+              <option value="shopping">Shopping</option>
+              <option value="other">Other</option>
+            </select>
+            <select class="js-priority-input priority-input">
+              <option value="">Priority</option>
+              <option value="high">High</option>
+              <option value="medium">Medium</option>
+              <option value="low">Low</option>
+            </select>
+            <div class="button-group">
+              <button class="js-add-button add-btn">
+                <i class="fas fa-plus"></i> Add Task
+              </button>
+              <button class="js-cancel-button cancel-btn">
+                <i class="fas fa-times"></i>
+              </button>
+            </div>
           </div>
-      </div>
+        </div>
 
-      <!-- Task Controls -->
-      <div class="task-controls">
+        <!-- Task Controls -->
+        <div class="task-controls">
           <div class="filter-sort">
-              <button class="control-btn" onclick="sortTodos('category')">
-                  <i class="fas fa-sort"></i> Category
-              </button>
-              <button class="control-btn" onclick="sortTodos('priority')">
-                  <i class="fas fa-sort"></i> Priority
-              </button>
-              <select class="js-filter-input filter-select" onchange="filterTodos()">
-                  <option value="all">All Tasks</option>
-                  <option value="pending">Pending</option>
-                  <option value="completed">Completed</option>
-              </select>
+            <button class="control-btn" onclick="sortTodos('category')">
+              <i class="fas fa-sort"></i> Category
+            </button>
+            <button class="control-btn" onclick="sortTodos('priority')">
+              <i class="fas fa-sort"></i> Priority
+            </button>
+            <select
+              class="js-filter-input filter-select"
+              onchange="filterTodos()"
+            >
+              <option value="all">All Tasks</option>
+              <option value="pending">Pending</option>
+              <option value="completed">Completed</option>
+            </select>
           </div>
-      </div>
+        </div>
 
-      <!-- Task List Container -->
-      <div class="task-list-container">
+        <!-- Task List Container -->
+        <div class="task-list-container">
           <div class="js-add-html tasks-grid"></div>
+        </div>
       </div>
-  </div>
-</div>
- 
+    </div>
 
     <!-- Success Notification -->
     <div id="js-success-notification" class="success-notification">
-        <p><i class="fas fa-check-circle"></i> Task completed successfully!</p>
+      <p><i class="fas fa-check-circle"></i> Task completed successfully!</p>
     </div>
 
     <!-- Footer -->
     <footer class="footer">
-        <p>&copy; <span class="year"></span> Made with <i class="fas fa-heart"></i> by Ansh Grover</p>
-        <div class="social-media">
-            <a href="https://www.instagram.com/" target="_blank" class="social-link instagram">
-                <i class="fab fa-instagram"></i>
-            </a>
-            <a href="https://www.facebook.com/" target="_blank" class="social-link facebook">
-                <i class="fab fa-facebook"></i>
-            </a>
-            <a href="https://twitter.com/" target="_blank" class="social-link twitter">
-                <i class="fab fa-twitter"></i>
-            </a>
-            <a href="https://www.linkedin.com/" target="_blank" class="social-link linkedin">
-                <i class="fab fa-linkedin"></i>
-            </a>
-            <a href="https://github.com/Groverio" target="_blank" class="social-link github">
-                <i class="fab fa-github"></i>
-            </a>
-        </div>
+      <p>
+        &copy; <span class="year"></span> Made with
+        <i class="fas fa-heart"></i> by Ansh Grover
+      </p>
+      <div class="social-media">
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          class="social-link instagram"
+        >
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a
+          href="https://www.facebook.com/"
+          target="_blank"
+          class="social-link facebook"
+        >
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a
+          href="https://twitter.com/"
+          target="_blank"
+          class="social-link twitter"
+        >
+          <i class="fab fa-twitter"></i>
+        </a>
+        <a
+          href="https://www.linkedin.com/"
+          target="_blank"
+          class="social-link linkedin"
+        >
+          <i class="fab fa-linkedin"></i>
+        </a>
+        <a
+          href="https://github.com/Groverio"
+          target="_blank"
+          class="social-link github"
+        >
+          <i class="fab fa-github"></i>
+        </a>
+      </div>
     </footer>
 
     <script src="script.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/imp.html b/imp.html
index 4198936..7a415ae 100644
--- a/imp.html
+++ b/imp.html
@@ -1,30 +1,32 @@
-
 <!doctype html>
 <html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Importance of To-Do List</title>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-    :root {
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Importance of To-Do List</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+      :root {
         --primary-color: #6366f1;
         --accent-color: #ec4899;
         --background-light: #f9fafb;
         --text-dark: #1f2937;
         --gray: #4b5563;
         --card-bg: #fff;
-    }
+      }
 
-    * {
+      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-    }
+      }
 
-    body {
+      body {
         font-family: 'Inter', sans-serif;
         background-color: var(--background-light);
         color: var(--text-dark);
@@ -32,46 +34,46 @@
         flex-direction: column;
         align-items: center;
         padding: 20px;
-    }
-    .top-nav {
-  background: white;
-  box-shadow: var(--shadow-sm);
-  padding: 1rem 0;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  width: 100vw;
-  margin-bottom: 2rem;
-}
-
-.nav-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.nav-brand {
-  color: var(--primary-color);
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 1.1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-    /* Header */
-    .heading {
+      }
+      .top-nav {
+        background: white;
+        box-shadow: var(--shadow-sm);
+        padding: 1rem 0;
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        width: 100vw;
+        margin-bottom: 2rem;
+      }
+
+      .nav-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .nav-brand {
+        color: var(--primary-color);
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 1.1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      /* Header */
+      .heading {
         font-size: 2.8rem;
         color: var(--primary-color);
         text-align: center;
         margin: 1rem 0;
         font-weight: 700;
-    }
+      }
 
-    /* Container */
-    .contain {
+      /* Container */
+      .contain {
         display: flex;
         flex-direction: column;
         gap: 2rem;
@@ -79,142 +81,145 @@
         max-width: 800px;
         margin: 2rem 15rem auto;
         padding-bottom: 15rem;
-    }
+      }
 
-    .toggle-container {
+      .toggle-container {
         background: var(--card-bg);
         border: 1px solid var(--gray);
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
         transition: transform 0.3s ease;
-    }
+      }
 
-    .toggle-container:hover {
+      .toggle-container:hover {
         transform: translateY(-5px);
         box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
-    }
+      }
 
-    .toggle-heading {
+      .toggle-heading {
         color: var(--primary-color);
         font-size: 1.8rem;
         margin-bottom: 10px;
         font-weight: 600;
-    }
+      }
 
-    .toggle-paragraph {
+      .toggle-paragraph {
         color: var(--text-dark);
         line-height: 1.6;
-    }
+      }
 
-    .toggle-paragraph strong {
+      .toggle-paragraph strong {
         color: var(--accent-color);
-    }
+      }
 
-    /* Footer */
-    .footer{
-    background-color: #212934;
-            color: white;
-            margin-top: 5rem;
+      /* Footer */
+      .footer {
+        background-color: #212934;
+        color: white;
+        margin-top: 5rem;
         padding: 1rem;
         text-align: center;
         font-size: 0.875rem;
         width: 100vw;
         position: fixed;
         bottom: 0;
-    }
-    .social-links {
+      }
+      .social-links {
         display: flex;
         gap: 1rem;
         justify-content: center;
         margin-top: 0.5rem;
-    }
+      }
 
-    .social-link {
+      .social-link {
         color: var(--primary-color);
         font-size: 1.5rem;
         transition: color 0.3s ease;
-    }
+      }
 
-    .social-link:hover {
+      .social-link:hover {
         color: var(--accent-color);
-    }
+      }
 
-    /* Responsive */
-    @media (max-width: 768px) {
+      /* Responsive */
+      @media (max-width: 768px) {
         .heading {
-            font-size: 2rem;
+          font-size: 2rem;
         }
 
         .toggle-heading {
-            font-size: 1.5rem;
+          font-size: 1.5rem;
         }
 
         .toggle-container {
-            padding: 15px;
+          padding: 15px;
         }
-    }
-</style>
-</head>
-<body>
-  <nav class="top-nav">
-    <div class="nav-content">
+      }
+    </style>
+  </head>
+  <body>
+    <nav class="top-nav">
+      <div class="nav-content">
         <a href="index.html" class="nav-brand">
-            <i class="fas fa-chevron-left"></i>
-            Back to Home
+          <i class="fas fa-chevron-left"></i>
+          Back to Home
         </a>
-        
-    </div>
-</nav>
+      </div>
+    </nav>
     <h1 class="heading">Importance of a To-Do List 📝</h1>
     <div class="contain">
-        <div class="toggle-container">
-            <h2 class="toggle-heading">Enhanced Organization 📅</h2>
-            <p class="toggle-paragraph">
-                A to-do list keeps tasks organized, allowing you to view everything at
-                a glance and prioritize effectively. It reduces clutter and ensures
-                you don’t forget deadlines.
-                <strong>Example:</strong> When planning a group project, listing tasks
-                like researching and drafting helps assign roles and track progress.
-            </p>
-        </div>
-        <div class="toggle-container">
-            <h2 class="toggle-heading">Increased Productivity 🚀</h2>
-            <p class="toggle-paragraph">
-                A clear task list helps you focus on your goals, minimizing
-                distractions and boosting efficiency. By breaking tasks into smaller
-                steps, you avoid feeling overwhelmed and improve your productivity.
-                <strong>Example:</strong> Instead of tackling a large project at once,
-                break it down into tasks like "research," "outline," and "proofread."
-                This makes the project feel more manageable, and checking off each
-                completed task gives you a sense of achievement, motivating you to
-                continue.
-            </p>
-        </div>
-        <div class="toggle-container">
-            <h2 class="toggle-heading">Reduced Stress 😌</h2>
-            <p class="toggle-paragraph">
-                A to-do list reduces the mental burden of remembering tasks, lowering
-                anxiety levels. Writing everything down prevents the worry of
-                forgetting important responsibilities.
-                <strong>Example:</strong> If your week is packed, listing your tasks
-                helps you prioritize and stay on track without feeling overwhelmed.
-            </p>
-        </div>
+      <div class="toggle-container">
+        <h2 class="toggle-heading">Enhanced Organization 📅</h2>
+        <p class="toggle-paragraph">
+          A to-do list keeps tasks organized, allowing you to view everything at
+          a glance and prioritize effectively. It reduces clutter and ensures
+          you don’t forget deadlines.
+          <strong>Example:</strong> When planning a group project, listing tasks
+          like researching and drafting helps assign roles and track progress.
+        </p>
+      </div>
+      <div class="toggle-container">
+        <h2 class="toggle-heading">Increased Productivity 🚀</h2>
+        <p class="toggle-paragraph">
+          A clear task list helps you focus on your goals, minimizing
+          distractions and boosting efficiency. By breaking tasks into smaller
+          steps, you avoid feeling overwhelmed and improve your productivity.
+          <strong>Example:</strong> Instead of tackling a large project at once,
+          break it down into tasks like "research," "outline," and "proofread."
+          This makes the project feel more manageable, and checking off each
+          completed task gives you a sense of achievement, motivating you to
+          continue.
+        </p>
+      </div>
+      <div class="toggle-container">
+        <h2 class="toggle-heading">Reduced Stress 😌</h2>
+        <p class="toggle-paragraph">
+          A to-do list reduces the mental burden of remembering tasks, lowering
+          anxiety levels. Writing everything down prevents the worry of
+          forgetting important responsibilities.
+          <strong>Example:</strong> If your week is packed, listing your tasks
+          helps you prioritize and stay on track without feeling overwhelmed.
+        </p>
+      </div>
     </div>
     <footer class="footer">
-        &copy; 2024. All rights reserved.
-        <div class="social-links">
-            <a href="https://www.instagram.com/" target="_blank" class="social-link">
-                <i class="fab fa-instagram"></i>
-            </a>
-            <a href="https://www.facebook.com/" target="_blank" class="social-link">
-                <i class="fab fa-facebook"></i>
-            </a>
-            <a href="https://twitter.com/" target="_blank" class="social-link">
-                <i class="fab fa-twitter"></i>
-            </a>
-        </div>
+      &copy; 2024. All rights reserved.
+      <div class="social-links">
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          class="social-link"
+        >
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://www.facebook.com/" target="_blank" class="social-link">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://twitter.com/" target="_blank" class="social-link">
+          <i class="fab fa-twitter"></i>
+        </a>
+      </div>
     </footer>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/index.html b/index.html
index 46d6276..963ab99 100644
--- a/index.html
+++ b/index.html
@@ -1,289 +1,296 @@
-
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TaskFlow - Smart Task Management</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-        :root {
-            --primary-color: #6366f1;
-            --primary-dark: #4f46e5;
-            --gray-50: #f9fafb;
-            --gray-600: #4b5563;
-            --gray-700: #374151;
-            --gray-800: #1f2937;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--gray-50);
-            color: var(--gray-800);
-        }
-
-        /* Navbar */
-        .navbar {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: fixed;
-            width: 100%;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .nav-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 1rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .nav-logo {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-        }
-
-        .nav-links a {
-            color: var(--gray-600);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.2s;
-        }
-
-        .nav-links a:hover {
-            color: var(--primary-color);
-        }
-
-        /* Hero Section */
-        .hero {
-            min-height: 100vh;
-            background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
-            display: flex;
-            align-items: center;
-            padding-top: 4rem;
-        }
-
-        .hero-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-            color: white;
-            text-align: center;
-        }
-
-        .hero-title {
-            font-size: 3.5rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-            line-height: 1.2;
-        }
-
-        .hero-subtitle {
-            font-size: 1.25rem;
-            margin-bottom: 2rem;
-            opacity: 0.9;
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
-            margin-top: 4rem;
-            text-align: left;
-            padding-bottom: 5rem;
-        }
-
-        .feature-card {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            padding: 1.5rem;
-            border-radius: 12px;
-            transition: transform 0.2s;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-5px);
-        }
-
-        .feature-icon {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-        }
-
-        .feature-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-
-        .feature-description {
-            opacity: 0.9;
-            font-size: 0.875rem;
-            line-height: 1.5;
-        }
-
-        .cta-button {
-            display: inline-block;
-            background-color: white;
-            color: var(--primary-color);
-            padding: 1rem 2rem;
-            border-radius: 8px;
-            font-weight: 600;
-            text-decoration: none;
-            transition: all 0.2s;
-            margin-top: 2rem;
-        }
-
-        .cta-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Footer */
-        .footer {
-            background-color: #212934;
-            color: white;
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+      :root {
+        --primary-color: #6366f1;
+        --primary-dark: #4f46e5;
+        --gray-50: #f9fafb;
+        --gray-600: #4b5563;
+        --gray-700: #374151;
+        --gray-800: #1f2937;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: var(--gray-50);
+        color: var(--gray-800);
+      }
+
+      /* Navbar */
+      .navbar {
+        background-color: white;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: fixed;
+        width: 100%;
+        top: 0;
+        z-index: 1000;
+      }
+
+      .nav-content {
+        max-width: 1200px;
+        margin: 0 auto;
         padding: 1rem;
-        
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .nav-logo {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--primary-color);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .nav-links {
+        display: flex;
+        gap: 2rem;
+      }
+
+      .nav-links a {
+        color: var(--gray-600);
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.2s;
+      }
+
+      .nav-links a:hover {
+        color: var(--primary-color);
+      }
+
+      /* Hero Section */
+      .hero {
+        min-height: 100vh;
+        background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
+        display: flex;
+        align-items: center;
+        padding-top: 4rem;
+      }
+
+      .hero-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+        color: white;
         text-align: center;
+      }
+
+      .hero-title {
+        font-size: 3.5rem;
+        font-weight: 700;
+        margin-bottom: 1.5rem;
+        line-height: 1.2;
+      }
+
+      .hero-subtitle {
+        font-size: 1.25rem;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .features {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 2rem;
+        margin-top: 4rem;
+        text-align: left;
+        padding-bottom: 5rem;
+      }
+
+      .feature-card {
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+        padding: 1.5rem;
+        border-radius: 12px;
+        transition: transform 0.2s;
+      }
+
+      .feature-card:hover {
+        transform: translateY(-5px);
+      }
+
+      .feature-icon {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      .feature-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+      }
+
+      .feature-description {
+        opacity: 0.9;
         font-size: 0.875rem;
- 
-        }
-
-        .social-links {
-            display: flex;
-            justify-content: center;
-            gap: 1.5rem;
-            margin-top: 1rem;
-        }
+        line-height: 1.5;
+      }
+
+      .cta-button {
+        display: inline-block;
+        background-color: white;
+        color: var(--primary-color);
+        padding: 1rem 2rem;
+        border-radius: 8px;
+        font-weight: 600;
+        text-decoration: none;
+        transition: all 0.2s;
+        margin-top: 2rem;
+      }
+
+      .cta-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #212934;
+        color: white;
+        padding: 1rem;
 
-        .social-link {
-            color: white;
-            font-size: 1.25rem;
-            opacity: 0.8;
-            transition: all 0.2s;
+        text-align: center;
+        font-size: 0.875rem;
+      }
+
+      .social-links {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        margin-top: 1rem;
+      }
+
+      .social-link {
+        color: white;
+        font-size: 1.25rem;
+        opacity: 0.8;
+        transition: all 0.2s;
+      }
+
+      .social-link:hover {
+        opacity: 1;
+        transform: translateY(-2px);
+      }
+
+      /* Responsive Design */
+      @media (max-width: 768px) {
+        .nav-content {
+          flex-direction: column;
+          gap: 1rem;
         }
 
-        .social-link:hover {
-            opacity: 1;
-            transform: translateY(-2px);
+        .hero-title {
+          font-size: 2.5rem;
         }
 
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .nav-content {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .hero-title {
-                font-size: 2.5rem;
-            }
-
-            .features {
-                grid-template-columns: 1fr;
-            }
+        .features {
+          grid-template-columns: 1fr;
         }
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <nav class="navbar">
-        <div class="nav-content">
-            <a href="#" class="nav-logo">
-                <i class="fas fa-check-circle"></i>
-                To-do-list
-            </a>
-            <div class="nav-links">
-                <a href="error.html">Upcoming tasks</a>
-                <a href="error.html">Friends</a>
-                <a href="imp.html">About</a>
-                <a href="todo.html">Get Started</a>
-            </div>
+      <div class="nav-content">
+        <a href="#" class="nav-logo">
+          <i class="fas fa-check-circle"></i>
+          To-do-list
+        </a>
+        <div class="nav-links">
+          <a href="error.html">Upcoming tasks</a>
+          <a href="error.html">Friends</a>
+          <a href="imp.html">About</a>
+          <a href="todo.html">Get Started</a>
         </div>
+      </div>
     </nav>
 
     <section class="hero">
-        <div class="hero-content">
-            <h1 class="hero-title">Organize Your Life with Task Manager</h1>
-            <p class="hero-subtitle">
-                A powerful and intuitive task management tool designed to boost your productivity
-                and help you achieve more, every day.
+      <div class="hero-content">
+        <h1 class="hero-title">Organize Your Life with Task Manager</h1>
+        <p class="hero-subtitle">
+          A powerful and intuitive task management tool designed to boost your
+          productivity and help you achieve more, every day.
+        </p>
+        <a href="todo.html" class="cta-button">
+          Start Managing Tasks <i class="fas fa-arrow-right"></i>
+        </a>
+
+        <div class="features">
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-tasks"></i>
+            </div>
+            <h3 class="feature-title">Task Organization</h3>
+            <p class="feature-description">
+              Easily create, organize, and prioritize your tasks with our
+              intuitive interface.
+            </p>
+          </div>
+
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-clock"></i>
+            </div>
+            <h3 class="feature-title">Time Management</h3>
+            <p class="feature-description">
+              Set deadlines, reminders, and track your progress to stay on
+              schedule.
             </p>
-            <a href="todo.html" class="cta-button">
-                Start Managing Tasks <i class="fas fa-arrow-right"></i>
-            </a>
-
-            <div class="features">
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-tasks"></i>
-                    </div>
-                    <h3 class="feature-title">Task Organization</h3>
-                    <p class="feature-description">
-                        Easily create, organize, and prioritize your tasks with our intuitive interface.
-                    </p>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-clock"></i>
-                    </div>
-                    <h3 class="feature-title">Time Management</h3>
-                    <p class="feature-description">
-                        Set deadlines, reminders, and track your progress to stay on schedule.
-                    </p>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-chart-line"></i>
-                    </div>
-                    <h3 class="feature-title">Progress Tracking</h3>
-                    <p class="feature-description">
-                        Monitor your productivity and celebrate your accomplishments.
-                    </p>
-                </div>
+          </div>
+
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-chart-line"></i>
             </div>
+            <h3 class="feature-title">Progress Tracking</h3>
+            <p class="feature-description">
+              Monitor your productivity and celebrate your accomplishments.
+            </p>
+          </div>
         </div>
+      </div>
     </section>
 
     <footer class="footer">
       &copy; 2024. All rights reserved.
       <div class="social-links">
-          <a href="https://www.instagram.com/" target="_blank" class="social-link">
-              <i class="fab fa-instagram"></i>
-          </a>
-          <a href="https://www.facebook.com/" target="_blank" class="social-link">
-              <i class="fab fa-facebook"></i>
-          </a>
-          <a href="https://twitter.com/" target="_blank" class="social-link">
-              <i class="fab fa-twitter"></i>
-          </a>
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          class="social-link"
+        >
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://www.facebook.com/" target="_blank" class="social-link">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://twitter.com/" target="_blank" class="social-link">
+          <i class="fab fa-twitter"></i>
+        </a>
       </div>
-  </footer>
-</body>
-</html>
\ No newline at end of file
+    </footer>
+  </body>
+</html>
diff --git a/package.json b/package.json
index fc42fe4..de4b384 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
   "main": "script.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "prettier --write .",
-    "prettier": "prettier --check .",
+    "format": "prettier --check .",
+    "prettier": "prettier --write .",
     "lint": "eslint ."
   },
   "keywords": [],
diff --git a/script.js b/script.js
index ec6bbf8..0baa0f4 100644
--- a/script.js
+++ b/script.js
@@ -359,4 +359,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // Add year in the footer(CopyRight Notice)
 let year = document.querySelector('.year');
-year.innerText = new Date().getFullYear();
\ No newline at end of file
+year.innerText = new Date().getFullYear();
diff --git a/style.css b/style.css
index 7eedcbe..17d5fcf 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
-
 /* Base Styles and Variables */
 :root {
   --primary-color: #6366f1;
@@ -17,7 +16,6 @@
   --radius-lg: 0.75rem;
 }
 
-
 * {
   margin: 0;
   padding: 0;
@@ -80,14 +78,12 @@ body {
   font-weight: 700;
   color: white;
   margin-bottom: 2rem;
- 
 }
-.container{
-  
+.container {
   display: flex;
   flex-direction: column;
   width: 75%;
-  
+
   /* justify-content: center;
   align-items: center; */
   /* margin-left: 12rem;
@@ -98,11 +94,10 @@ body {
   background: white;
   padding: 1.5rem;
   border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
   margin-bottom: 2rem;
-  
-  
-  
 }
 
 .input-grid {
@@ -146,7 +141,9 @@ body {
   border-radius: var(--radius-sm);
   font-weight: 600;
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -285,12 +282,12 @@ body {
 
 @keyframes slideIn {
   from {
-      transform: translateX(100%);
-      opacity: 0;
+    transform: translateX(100%);
+    opacity: 0;
   }
   to {
-      transform: translateX(0);
-      opacity: 1;
+    transform: translateX(0);
+    opacity: 1;
   }
 }
 
@@ -343,46 +340,46 @@ body {
 /* Responsive Design */
 @media (max-width: 1024px) {
   .input-grid {
-      grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
   }
-  
+
   .button-group {
-      grid-column: span 2;
+    grid-column: span 2;
   }
 }
 
 @media (max-width: 768px) {
   .nav-links {
-      display: none;
+    display: none;
   }
-  
+
   .input-grid {
-      grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
   }
-  
+
   .button-group {
-      grid-column: auto;
+    grid-column: auto;
   }
-  
+
   .task-item {
-      grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 640px) {
   .title {
-      font-size: 2rem;
+    font-size: 2rem;
   }
-  
+
   .filter-sort {
-      flex-direction: column;
+    flex-direction: column;
   }
-  
+
   .success-notification {
-      left: 1rem;
-      right: 1rem;
-      bottom: 1rem;
-      text-align: center;
+    left: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+    text-align: center;
   }
 }
 
@@ -498,7 +495,7 @@ body {
 }
 
 /* Control Button Styles */
-.control-btn, 
+.control-btn,
 .filter-select {
   background: white;
   border: 1px solid #e5e7eb;
@@ -519,8 +516,8 @@ body {
     grid-template-columns: 1fr;
     gap: 1rem;
   }
-  
+
   .small-container {
     justify-content: space-between;
   }
-}
\ No newline at end of file
+}
