Merge pull request avinash201199#274 from gulshanjakhon/main

logo added and font changes
Iamdanieldavid · Oct 22, 2022 · 5fcf3db · 5fcf3db
2 parents cf768ad + 3a67cd8
commit 5fcf3db
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 45 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -89,7 +89,8 @@ html {
 .header h1 {
     font-size: 4rem;
     font-weight: 1000;
-    font-family: 'Source Serif Pro', serif;
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+    padding-left: 4em;
 }
 
 body {
@@ -161,7 +162,7 @@ form button,
 
 .myBtn {
     text-align: center;
-    font-family: "Montserrat", sans-serif;
+    font-family:"Comic Sans MS", "Comic Sans", cursive;
     font-weight: bold;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -262,6 +263,7 @@ form button,
 
 .buttons-wrapper {
     margin: 2rem auto;
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
 
 .button-div {
@@ -306,6 +308,7 @@ form button:hover {
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
 
 .todo-list {
@@ -587,6 +590,7 @@ select {
     padding-top: 50px;
     color: whitesmoke;
     font-weight: lighter;
+    font-family:"Comic Sans MS", "Comic Sans", cursive;
 
 }
 
@@ -681,6 +685,7 @@ body {
 
 .confirmation_box,
 .congratulations_box {
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
     position: fixed;
     top: 0;
     bottom: 0;
@@ -1030,4 +1035,17 @@ body {
 
 #scrollTop:hover {
   background-color: #555;
-}
+}
+.navbar {
+    width: 100%;
+    /* background-color: #555; */
+    overflow: auto;
+  }
+
+  .navbar a {
+    float: left;
+    /* padding: 12px; */
+    color: white;
+    text-decoration: none;
+    font-size: 17px;
+  }
diff --git a/index.html b/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 
-
 <head>
     <meta charset="UTF-8" />
 
@@ -27,11 +26,12 @@
       crossorigin="anonymous"
     />
 
-     <!-- jquery CDN -->
-     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <!-- jquery CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
 
-     <!-- FontAwesome CDN-->
+    <!-- FontAwesome CDN-->
+
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
         integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
 
@@ -40,20 +40,29 @@
 
 
     <link rel="stylesheet" href="assets/css/style.css" />
-    
-      
+
+
 </head>
 
 <body>
     <header>
-        <div class="header"><b><h1>To-Do List</h1></b></div>
-        <div class="col-auto">
-            <input type="checkbox" id="light" class="checkbox" onclick="switchToDarkMode()">
-            <label for="checkbox" class="label">
-                <i class="fas fa-sun"></i>
-                <i class='fas fa-moon'></i>
-                <div class='ball'>
-            </label>
+        <div class="navbar">
+            <a href="#"><img src="assets\images\logo.png" alt="logo" width="120px"></a>
+            <a href="#">
+                <div class="header"><b>
+                        <h1>To-Do List</h1>
+                    </b></div>
+            </a>
+            <a href="#">
+                <div class="col-auto">
+                    <input type="checkbox" id="light" class="checkbox" onclick="switchToDarkMode()">
+                    <label for="checkbox" class="label">
+                        <i class="fas fa-sun"></i>
+                        <i class='fas fa-moon'></i>
+                        <div class='ball'>
+                    </label>
+                </div>
+            </a>
         </div>
 
     </header>
@@ -122,6 +131,17 @@ <h1>THE LIST IS EMPTY !</h1>
 
     <!-- <div cla ss="confirmation_box"></div> -->
 
+
+    <div class="confirmation_box hide " id="confirmation_box">
+        <div class="confirmation_box_inner">
+            <div class="optbox_header">
+                <i class="fas fa-times" onclick="goback()"></i>
+            </div>
+            <p id="text-modal">Are you sure you want to delete all tasks?</p>
+            <div class="option_box">
+                <button class="proceed btn btn-success mt-5 col-3" id="txt-color" onclick="deleteAll();">Yes</button>
+                <button class="donot_proceed btn btn-danger mt-5 col-3" id="txt-color1" onclick="goback()">No</button>
+            </div>
     <div class="confirmation_box hide" id="confirmation_box">
       <div class="confirmation_box_inner">
         <div class="optbox_header">
@@ -177,38 +197,40 @@ <h1>THE LIST IS EMPTY !</h1>
         <div class="3rd-row-footer">
             <h3>Made with <i class="fas fa-heart fa-heart-custom"></i> by Avinash</h3>
         </div>
-       
+
     </footer>
 
     <script src="assets/js/app.js"></script>
-    
-<button onclick="scrollWindow()" id="scrollTop" title="Go to top">&uArr;</button>
-<script>
-let scrollBtn = document.getElementById("scrollTop");
-
-// When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function() {scrollFunction()};
-
-function scrollFunction() {
-if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-scrollBtn.style.display = "block";
-} else {
-scrollBtn.style.display = "none";
-}
-}
-
-const scrollWindow = function () {
-if (window.scrollY != 0) {
-setTimeout(function () {
-window.scrollTo(0, window.scrollY - 50);
-window.scroll({top: 0, behavior: "smooth"})
-scrollWindow();
-}, 10);
-}
-}
-</script>
-   
+
+    <button onclick="scrollWindow()" id="scrollTop" title="Go to top">&uArr;</button>
+    <script>
+        let scrollBtn = document.getElementById("scrollTop");
+
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function () { scrollFunction() };
+
+        function scrollFunction() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                scrollBtn.style.display = "block";
+            } else {
+                scrollBtn.style.display = "none";
+            }
+        }
+
+        const scrollWindow = function () {
+            if (window.scrollY != 0) {
+                setTimeout(function () {
+                    window.scrollTo(0, window.scrollY - 50);
+                    window.scroll({ top: 0, behavior: "smooth" })
+                    scrollWindow();
+                }, 10);
+            }
+        }
+    </script>
+
 </body>
 
 
 </html>
+
+