Merge branch 'main' into main

Signed-off-by: Mohit Kumar <136831716+MOHIT-IITP@users.noreply.github.com>
MOHIT-IITP · Oct 12, 2024 · e2d2c35 · e2d2c35
2 parents 126b350 + 6c8dac7
commit e2d2c35
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>To-Do List</title>
+    <title>Todo-List</title>
     <link rel="stylesheet" href="style.css" />
     <link
       rel="stylesheet"
@@ -12,15 +12,33 @@
       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>To-Do List</h1>
+      <section class="subtitle">
+        <span class="letter-1-0">T</span>
+        <span class="letter-1-1">o</span>
+        <span class="letter-1-2">d</span>
+        <span class="letter-1-3">o</span>
+        <span class="letter-1-4">-</span>
+        <span class="letter-1-5">L</span>
+        <span class="letter-1-6">i</span>
+        <span class="letter-1-7">s</span>
+        <span class="letter-1-8">t</span>
+      </section>
 
       <div class="js-add-grid">
         <input
           type="text"
-          placeholder="Task Description"
+          placeholder="Share Your Thoughts"
           class="js-name-input"
         />
         <input type="date" class="js-date-input" />
@@ -32,8 +50,30 @@ <h1>To-Do List</h1>
       </div>
       <div class="js-add-html js-add-grid"></div>
     </div>
-    <footer>
+    <footer class="footer">
       <p>&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.</p>
+      <div class="social-media">
+        <a class="insta" href="https://www.instagram.com/"
+          ><i class="fa-brands fa-instagram"></i
+        ></a>
+        <a class="insta" href="https://www.facebook.com/"
+          ><i class="fa-brands fa-facebook"></i
+        ></a>
+        <a class="insta" href="https://x.com/i/flow/login"
+          ><i class="fa-brands fa-x-twitter"></i
+        ></a>
+        <a
+          class="insta"
+          href="https://www.google.com/search?gs_ssp=eJzj4tLP1TcoNzC2MDBVYDRgdGDw4sjJzMtOTcnMAwBRaga5&q=linkedin&oq=link&gs_lcrp=EgZjaHJvbWUqEggCEC4YJxjHARjRAxiABBiKBTIOCAAQRRgnGDsYgAQYigUyEQgBEEUYORhDGLEDGIAEGIoFMhIIAhAuGCcYxwEY0QMYgAQYigUyBggDEEUYQDIPCAQQABgUGIcCGLEDGIAEMgoIBRAAGLEDGIAEMgoIBhAAGLEDGIAEMgwIBxAAGEMYgAQYigXSAQkzNDk1ajBqMTWoAgiwAgE&sourceid=chrome&ie=UTF-8"
+          ><i class="fa-brands fa-linkedin-in"></i
+        ></a>
+        <a class="insta" href="https://github.com/Groverio"
+          ><i class="fa-brands fa-github"></i
+        ></a>
+        <a class="insta" href="https://www.youtube.com/"
+          ><i class="fa-brands fa-youtube"></i
+        ></a>
+      </div>
     </footer>
 
     <script src="script.js"></script>

diff --git a/style.css b/style.css
@@ -1,4 +1,5 @@
 @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;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
 body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
@@ -52,6 +53,7 @@ h1 {
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
 }
 
 .js-add-button {
@@ -139,8 +141,46 @@ footer {
   width: 100%;
   bottom: 0;
   font-size: 1rem;
+  display: flex;
+  justify-content: space-around;
 }
 
 footer p {
-  margin: 0;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.social-media {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.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-media a:hover {
+  transform: scale(1.05);
+  transition: all 0.25s ease-out;
+}
+
+/*
+Animating title
+*/
+
+.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;
 }