lesson 6

nodeJS/Learning/05/public/css/main.css

@@ -6,16 +6,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
 
 body{
-    background-color: rgb(232, 163, 217);
-    color: rgb(146, 0, 24)
+    background-color: rgb(238, 213, 232);
+    color: rgb(92, 89, 92)
 }
 
 h1, h2, h3, h4, h5 {
-    font-family: 'Cutive Mono', monospace;
+    font-family: 'EB Garamond', serif;
 }
 
 p {
-    font-family: 'EB Garamond', serif;
+    font-family: 'Curtive Mono', monospace;
 }
 
 .title-text {
@@ -23,18 +23,72 @@ p {
     margin-bottom: 0px;
 }
 
+img {
+    width: 10%;
+    height: auto;
+    margin-top: 5px;
+  }
+
 .form-submit {
-    background-color: rgb(151, 227, 29);
+    background-color: rgb(255, 124, 192);
 }
 
 .form-submit:hover {
-    background:rgb(62, 100, 2);
+    background:rgb(252, 27, 121);
     cursor: pointer;
 }
 
+form input, form textarea {
+    font-family: 'Cutive Mono', monospace;
+  }
+
 .todo-input {
-    background: rgb(16, 232, 236)
-}
+    text-align: left;
+    margin-top: 30px;
+  }
+  
+  label, input, button {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+  
+  label {
+    margin-bottom: 4px;
+  }
+  
+  label:nth-of-type(2) {
+    margin-top: 12px;
+  }
+  
+  input::placeholder {
+    color: gray;
+  }
+  
+  input {
+    background: #ecf0f3;
+    padding: 10px;
+    padding-left: 20px;
+    height: 50px;
+    font-size: 14px;
+    border-radius: 50px;
+    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
+  }
+
+  button {
+    color: white;
+    font-family: 'Curtive Mono', monospace;
+    font-size: 16px;
+    margin: 20px auto;
+    height: 40px;
+    width: 100px;
+    border-radius: 20px;
+    cursor: pointer;
+    display: block;
+  }
 
 .container {
         display: flex;
@@ -43,4 +97,64 @@ p {
         align-items: center;
         justify-content: flex-end;
         flex-wrap: nowrap;
-}
+}
+
+.todo-container {
+    max-width: 300px;
+    font-family: 'Curtive Mono', monospace;
+    background-color: #fff5f7; /* Soft cream background for the list */
+    border: 4px solid #ffd0dc; /* Pink border */
+    border-radius: 30px;
+    box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
+    position: relative;
+    padding: 20px 20px 20px 20px;/* up left down right */
+    background-image: url('/images/polka.jpg'); /* Add your image path */
+    background-size: cover; /* Scale the image to cover the entire list item */
+    background-repeat: no-repeat; /* Prevent the image from repeating */
+    background-position: center; /* Center thse image within the list item */
+  }
+
+  .inner-todo {
+    background-color: #fee6eb;
+    padding: 20px;
+    border-radius: 20px;
+}
+  
+  /* Heading */
+  .todo-container h1 {
+    font-size: 25px;
+    font-family: 'EB Garamond', serif;
+    color: #545353; /* Pink color for title */
+    margin-top: 10px;
+    font-weight: bold;
+  }
+  
+  /* List Styling */
+  ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  ol li {
+    color: #545353; /* Adjust text color for visibility */
+    margin: 10px;
+    background-color: #ffffff; /* Soft cream background for the list */
+    padding: 20px; /* Increase padding for better layout */
+    border-radius: 20px;
+    text-align: left;
+    font-family: 'Curtive Mono', monospace; /* Consistent font */
+    min-width: 250px;
+  }
+  
+  /* Decoration Image */
+  .decor {
+    position: absolute;
+    bottom: -20px;
+    right: -20px;
+  }
+  
+  .decor img {
+    width: 150px;
+    height: auto;
+  }