diff --git a/index.html b/index.html index 8bbbd7a..6550088 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Simple To-Do List + Simple To-Do List Manager @@ -11,11 +11,11 @@

To-Do List 📝

- +
- \ No newline at end of file + diff --git a/style.css b/style.css index fba5ca7..3cf0221 100644 --- a/style.css +++ b/style.css @@ -1,52 +1,69 @@ body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #e0f7fa; display: flex; justify-content: center; align-items: center; - height: 100vh; + min-height: 100vh; + margin: 0; } .container { - background: white; - padding: 20px 30px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); - width: 300px; + background: #ffffff; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + width: 350px; text-align: center; } .input-section { - margin-bottom: 20px; + margin-bottom: 25px; } #taskInput { - width: 70%; - padding: 8px; + width: 68%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 6px; + outline: none; + font-size: 14px; } button { - padding: 8px 12px; - margin-left: 5px; - background-color: #4CAF50; + padding: 10px 16px; + margin-left: 8px; + background-color: #0288d1; color: white; border: none; + border-radius: 6px; + font-size: 14px; cursor: pointer; + transition: background-color 0.3s ease; } button:hover { - background-color: #45a049; + background-color: #0277bd; } ul { list-style-type: none; padding: 0; + margin-top: 20px; } li { - background: #eee; - margin: 5px 0; - padding: 10px; - border-radius: 4px; + background: #f1f8e9; + margin: 8px 0; + padding: 12px; + border-radius: 6px; text-align: left; -} \ No newline at end of file + font-size: 15px; + display: flex; + justify-content: space-between; + align-items: center; +} + +li:hover { + background: #dcedc8; +}