From 864ef2c477d869f52248de54262196c9d1a76d1b Mon Sep 17 00:00:00 2001 From: saif hussain Date: Wed, 5 Oct 2022 20:49:56 +0530 Subject: [PATCH] changed styling --- index.html | 6 +++++- styles.css | 36 ++++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index da211de..259e495 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@

My To Do List

- + Add
@@ -19,6 +19,10 @@

My To Do List

  • Organize office
  • Go to market
    • +
    + You have pending tasks + +
    diff --git a/styles.css b/styles.css index 41d32f0..12db0c4 100644 --- a/styles.css +++ b/styles.css @@ -12,9 +12,14 @@ ul { /* Style the list items */ ul li { cursor: pointer; + list-style:none; + height:45px; + line-height:45px; position: relative; - padding: 12px 8px 12px 40px; + padding: 0 15px; background: rgb(178, 220, 12); + border-radius: 3px; + margin-bottom: 8px; font-size: 18px; transition: 0.2s; @@ -25,6 +30,25 @@ ul li { user-select: none; } + .wrapper .footer{ + display: flex; + width: 100%; + align-items:centre; + margin-top:20px; + justify-content: space-between; + } + .footer button{ + border: none; + outline: none; + background: #55337c; + color: #fff; + font-size: 22px; + cursor: pointer; + border-radius: 3px; + padding: 6px 10px; + + } + /* Set all odd list items to a different color (zebra-stripes) */ ul li:nth-child(odd) { background: #ea06a6; @@ -37,7 +61,7 @@ ul li:hover { /* When clicked on, add a background color and strike out text */ ul li.checked { - background: #888; + background: rgb(113, 235, 76); color: #fff; text-decoration: line-through; } @@ -71,7 +95,7 @@ ul li.checked::before { /* Style the header */ .header { - background-color: #63ae35; + background-color: #406b25; padding: 30px 40px; color: white; text-align: center; @@ -99,14 +123,14 @@ input { .addBtn { padding: 10px; width: 25%; - background: #d9d9d9; - color: #555; + background: #55337c; + color: rgb(255, 255, 255); float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; - border-radius: 0; + border-radius: 3px; } .addBtn:hover {