update code base (#1456)

Author: codewithdhruba01

pages/blog.html

@@ -24,79 +24,7 @@
 		</div>
 	</div>
 -->	
-	<style>
-		#preloader {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background-color: #ffffff;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			z-index: 9999;
-		}
 
-		/* Wrapper */
-		.loader-wrapper {
-			position: relative;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	
-		/* Logo */
-		.logo {
-			width: 100px; /* Size */
-			height: auto;
-			z-index: 2; /* Above */
-			animation: fadeIn 2s ease forwards;
-		}
-	
-		/* Spinner */
-		.loader {
-			width: 120px;
-			height: 120px;
-			background-color: transparent;
-			border: 10px solid transparent;
-			border-top: 10px solid #b0b0b0; /* Light */
-			border-right: 10px solid #404040; /* Dark */
-			border-radius: 10px;
-			position: absolute;
-			transform: rotate(45deg); /* Diamond */
-			animation: spinColor 1.5s linear infinite; /* Spin */
-			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Shadow */
-		}
-	
-		/* Fade */
-		@keyframes fadeIn {
-			0% {
-				opacity: 0;
-				transform: translateY(-20px);
-			}
-			100% {
-				opacity: 1;
-				transform: translateY(0);
-			}
-		}
-	
-		/* Spin Color */
-		@keyframes spinColor {
-			0% {
-				border-top-color: #b0b0b0;
-				border-right-color: #404040;
-			}
-			50% {
-				border-top-color: #404040;
-				border-right-color: #b0b0b0;
-			}
-			100% {
-				border-top-color: #b0b0b0;
-				border-right-color: #404040;
-			}
-		}
-	</style>
 
 	<script>
 		// Load
@@ -1891,60 +1819,6 @@ <h5>We focus on quality content for the right people at the right time. What we
         document.getElementById("dynamic-year").textContent = new Date().getFullYear();
     </script>
 	</footer>
-	
-	<style>
-		.footer-info {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-		}
-	
-		.social-media-icons {
-			display: flex;
-			justify-content: center;
-			margin-top: 10px;
-		}
-	
-		.social-media-icons a {
-			margin: 0 15px;
-			text-decoration: none;
-			color: #000;
-			position: relative;
-			transition: transform 0.3s, background-color 0.3s;
-		}
-	
-		.social-media-icons a i {
-			font-size: 24px;
-		}
-	
-		.social-media-icons a .filled {
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background-color: transparent;
-			transition: background-color 0.3s;
-			border-radius: 50%;
-		}
-	
-		.social-media-icons a:hover {
-			transform: rotate(20deg);
-		}
-	
-		.social-media-icons a:hover .filled {
-			background-color: rgba(0, 0, 0, 0.1);
-		}
-	
-		.footer-links {
-			text-align: left;
-			margin-top: 20px;
-		}
-	
-		.footer-section {
-			margin-bottom: 15px;
-		}
-	</style>
 
 		<script>
 			document.getElementById("dynamic-year").textContent = new Date().getFullYear();

pages/devtools.html

@@ -6,75 +6,7 @@
     <title>Awesome Developer Tools</title>
     <link rel="icon" href="recode-hive.png">
     <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        /* Custom Animations */
-        @keyframes slideUp {
-            from { transform: translateY(50px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
-
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-
-        @keyframes shine {
-            from { background-position: -200%; }
-            to { background-position: 200%; }
-        }
-
-        .animate-slide-up {
-            animation: slideUp 0.5s ease-in-out forwards;
-        }
-
-        .animate-pulse {
-            animation: pulse 2s infinite;
-        }
-
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #1e1e1e;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #4a90e2;
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #60a5fa;
-        }
-
-        /* Custom Select Styling */
-        .custom-select-wrapper {
-            position: relative;
-            width: 100%;
-            max-width: 12rem;
-        }
-
-        .custom-select-wrapper::after {
-            content: '▼';
-            position: absolute;
-            right: 1rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #e0e0e0;
-            pointer-events: none;
-        }
-
-        #filter-select {
-            appearance: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            width: 100%;
-            padding-right: 2.5rem;
-        }
-    </style>
+    <link rel="stylesheet" href="../styles/devtools.css" />
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center">
     <header class="w-full bg-gradient-to-r from-blue-900 to-green-900 text-white text-center py-4 sm:py-6 lg:py-8 shadow-lg top-0">

pages/faq.html

@@ -33,7 +33,6 @@
         <a href="events.html" class="navbar-link">Events</a>
         <a href="blog.html" class="navbar-link">Blog</a>
         <a href="compare.html" class="navbar-link">Compare</a>
-
 
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
@@ -222,65 +221,6 @@ <h5>We focus on quality content for the right people at the right time. What we
     </script>
 </footer>
 
-<style>
-  .footer-info {
-      display: flex;
-      flex-direction: column;
-      align-items: center; /* Center the logo and social icons */
-  }
-
-  .social-media-icons {
-        display: flex;
-        justify-content: center;
-        margin-top: 10px;
-    }
-
-    .social-media-icons a {
-        margin: 0 15px;
-        text-decoration: none;
-        color: #000;
-        position: relative;
-        transition: transform 0.3s, background-color 0.3s;
-    }
-
-    .social-media-icons a i {
-        font-size: 24px;
-    }
-
-    .social-media-icons a .filled {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: transparent;
-        transition: background-color 0.3s;
-        border-radius: 50%;
-    }
-
-    .social-media-icons a:hover {
-        transform: rotate(20deg);
-    }
-
-    .social-media-icons a:hover .filled {
-        background-color: rgba(0, 0, 0, 0.1);
-    }
-
-  .footer-links {
-      text-align: left; /* Align the links to the left */
-      margin-top: 20px; /* Add spacing from above elements */
-  }
-
-  .footer-section {
-      margin-bottom: 15px; /* Space between sections */
-  }
-
-  .footer-bottom {
-      text-align: center; /* Center the footer-bottom content */
-      margin-top: 20px; /* Space between main content and footer */
-  }
-</style>
-
     <!-- Scroll to top -->
     <button id="scrollToTop" aria-label="Scroll to top">
       <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
@@ -322,9 +262,6 @@ <h5>We focus on quality content for the right people at the right time. What we
     });
     </script>
 
-   
-      
-    
     <script>
 
         function active(){