diff --git a/blog.html b/blog.html
index 75edbae..8a09ad7 100644
--- a/blog.html
+++ b/blog.html
@@ -2,226 +2,352 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Blog</title>
-    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>My Blog</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body class="bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-100">
-    <!-- navbar -->
-    <div class="navbar bg-base-100">
-        <div class="navbar-start">
-            <div class="dropdown">
-                <label tabindex="0" class="btn btn-ghost lg:hidden">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M4 6h16M4 12h8m-8 6h16" />
-                    </svg>
-                </label>
-                <ul tabindex="0"
-                    class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                    <li><a href="index.html">Home</a></li>
-                    <li>
-                        <a>Parent</a>
-                        <ul class="p-2">
-                            <li><a>Submenu 1</a></li>
-                            <li><a>Submenu 2</a></li>
-                        </ul>
-                    </li>
-                    <li><a>Item 3</a></li>
-                </ul>
-            </div>
-            <img src="images/logo.png" alt="">
-            <a class="btn btn-ghost normal-case text-xl"><span
-                    class="text-rose-700 font-serif font-bold">Cse</span>Roadmap</a>
-        </div>
-        <div class="navbar-center hidden lg:flex">
-            <ul class="menu menu-horizontal px-1">
-                <li><a href="index.html">Home</a></li>
-                <li><a href=""></a></li>
-                <li tabindex="0">
-                    <details>
-                        <summary>Learning Paths</summary>
-                        <ul class="p-2">
-                            <li><a href="resources.html">Resources</a></li>
-                            <li><a href="features.html">Features</a></li>
-                        </ul>
-                    </details>
-                </li>
-                <li><a href="features.html">Features</a></li>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="contact.html">Contact</a></li>
-                <li><a href="community.html">Community</a></li>
+  <!-- navbar -->
+  <div class="navbar bg-base-100">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <label tabindex="0" class="btn btn-ghost lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+          </svg>
+        </label>
+        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+          <li><a href="index.html">Home</a></li>
+          <li>
+            <a>Parent</a>
+            <ul class="p-2">
+              <li><a>Submenu 1</a></li>
+              <li><a>Submenu 2</a></li>
             </ul>
-        </div>
-        <div class="navbar-end">
-            <div class="form-control">
-                <a href="join.html"><button
-                        style="padding: 5px; background-color: rgb(235, 172, 121); border-radius: 5px; color: black;">Login/Signup</button></a>
-            </div>
-        </div>
+          </li>
+          <li><a>Item 3</a></li>
+        </ul>
+      </div>
+      <img src="images/logo.png" alt="">
+      <a class="btn btn-ghost normal-case text-xl"><span
+          class="text-rose-700 font-serif font-bold">Cse</span>Roadmap</a>
     </div>
-    <!-- nav end -->
-    <div class="relative pt-2 lg:pt-2 min-h-screen">
-
-        <div class="bg-cover w-full flex justify-center items-center"
-            style="background-image: url('');">
-            <div class="w-full p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
-                <div class="w-12/12 mx-auto rounded-2xl bg-white p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-center px-2 mx-auto"
-                        id="blog-post-container">
-
-                        <article id="blog-post-template"
-                            class="hidden bg-white p-6 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl cursor-pointer border">
-                            <a target="_self" href="/blog/slug"
-                                class="absolute opacity-0 top-0 right-0 left-0 bottom-0"></a>
-                            <div class="relative mb-4 rounded-2xl">
-                                <img class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
-                                    id="post-image" alt="">
-                                <div
-                                    class="absolute bottom-3 left-3 inline-flex items-center rounded-lg bg-white p-2 shadow-md">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-red-700">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
-                                    </svg>
-                                    <span class="ml-1 text-sm text-slate-400">2</span>
-                                </div>
-                            </div>
-                            <div class="flex justify-between items-center w-full pb-4 mb-auto">
-                                <div class="author-info flex items-center">
-                                    
-                                    <div class="flex flex-1">
-                                        <div>
-                                            <p id="post-author" class="text-sm font-semibold "></p>
-                                            <p id="post-date" class="text-sm text-gray-500"></p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex justify-end">
-                                    <div class="text-sm flex items-center text-gray-500 ">
-                                        <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
-                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
-                            </div>
-                            <h3 class="font-medium text-xl leading-8">
-                                <a href="/blog/slug"
-                                    class="block relative group-hover:text-red-700 transition-colors duration-200 "
-                                    id="post-title">  
-                                </a>
-                            </h3>
-                            <div>
-                            </div>
-                        </article>
-
-                    </div>
-                </div>
-            </div>
-        </div>
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><a href="index.html">Home</a></li>
+        <li><a href=""></a></li>
+        <li tabindex="0">
+          <details>
+            <summary>Learning Paths</summary>
+            <ul class="p-2">
+              <li><a href="resources.html">Resources</a></li>
+              <li><a href="features.html">Features</a></li>
+            </ul>
+          </details>
+        </li>
+        <li><a href="features.html">Features</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="contact.html">Contact</a></li>
+        <li><a href="community.html">Community</a></li>
+      </ul>
     </div>
-    <footer class="bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-100">
-        <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-          <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
-            <div>
-            <img src="images/logo.png" class="mr-5 h-10 sm:h-16" alt="logo" />
-              <p class="max-w-xs mt-4 text-sm text-gray-600">
-               Cse Roadmap is a platform where you can learn about computer science and engineering. We provide you with the best resources and tutorials to help you learn and grow in the field of computer science and engineering.
-              </p>
-              <div class="flex mt-8 space-x-6 text-gray-600">
-                <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Facebook </span>
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
-                  </svg>
-                </a>
-                <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Instagram </span>
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
-                  </svg>
-                </a>
-                <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Twitter </span>
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                  </svg>
-                </a>
-                <a class="hover:opacity-75" href="https://github.com/mahafujahamed" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> GitHub </span>
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-                  </svg>
-                </a>
-                <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Dribbble </span>
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fillRule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clipRule="evenodd" />
+    <div class="navbar-end">
+      <div class="form-control">
+        <a href="join.html"><button
+            style="padding: 5px; background-color: rgb(235, 172, 121); border-radius: 5px; color: black;">Login/Signup</button></a>
+      </div>
+    </div>
+  </div>
+  <!-- nav end -->
+  <div class="relative pt-2 lg:pt-2 min-h-screen">
+
+    <div class="bg-cover w-full flex justify-center items-center" style="background-image: url('');">
+      <div class="w-full p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
+        <div class="w-12/12 mx-auto rounded-2xl bg-white p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-center px-2 mx-auto"
+            id="blog-post-container">
+
+            <article id="blog-post-template"
+              class="hidden bg-white p-6 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl cursor-pointer border">
+              <a target="_self" href="/blog/slug" class="absolute opacity-0 top-0 right-0 left-0 bottom-0"></a>
+              <div class="relative mb-4 rounded-2xl">
+                <img
+                  class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
+                  id="post-image" alt="">
+                <div class="absolute bottom-3 left-3 inline-flex items-center rounded-lg bg-white p-2 shadow-md">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="h-5 w-5 text-red-700">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
                   </svg>
-                </a>
-              </div>
-            </div>
-            <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
-              <div>
-                <p class="font-medium">
-                  Company
-                </p>
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href> About </a>
-                  <a class="hover:opacity-75" href> Meet the Team </a>
-                  <a class="hover:opacity-75" href> History </a>
-                  <a class="hover:opacity-75" href> Careers </a>
-                </nav>
-              </div>
-              <div>
-                <p class="font-medium">
-                  Services
-                </p>
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href>Web Builder</a>
-                  <a class="hover:opacity-75" href> Company Review </a>
-                  <a class="hover:opacity-75" href> Accounts Review </a>
-                  <a class="hover:opacity-75" href> HR Consulting </a>
-                  <a class="hover:opacity-75" href> SEO Optimisation </a>
-                </nav>
+                  <span class="ml-1 text-sm text-slate-400">2</span>
+                </div>
               </div>
-              <div>
-                <p class="font-medium">
-                  Helpful Links
-                </p>
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href> Contact </a>
-                  <a class="hover:opacity-75" href> FAQs </a>
-                  <a class="hover:opacity-75" href> Live Chat </a>
-                </nav>
+              <div class="flex justify-between items-center w-full pb-4 mb-auto">
+                <div class="author-info flex items-center">
+
+                  <div class="flex flex-1">
+                    <div>
+                      <p id="post-author" class="text-sm font-semibold "></p>
+                      <p id="post-date" class="text-sm text-gray-500"></p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex justify-end">
+                  <div class="text-sm flex items-center text-gray-500 ">
+                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                  </div>
+                </div>
               </div>
+              <h3 class="font-medium text-xl leading-8">
+                <a href="/blog/slug" class="block relative group-hover:text-red-700 transition-colors duration-200 "
+                  id="post-title">  
+                </a>
+              </h3>
               <div>
-                <p class="font-medium">
-                  Legal
-                </p>
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href> Privacy Policy </a>
-                  <a class="hover:opacity-75" href> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href> Returns Policy </a>
-                  <a class="hover:opacity-75" href> Accessibility </a>
-                </nav>
               </div>
+            </article>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- component -->
+  <div class="relative isolate pb-32 pt-24 sm:pt-32">
+    <div class="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu overflow-hidden opacity-30 blur-3xl"
+      aria-hidden="true">
+      <div class="ml-[max(50%,38rem)] aspect-[1313/771] w-[82.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]"
+        style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
+      </div>
+    </div>
+    <div
+      class="absolute inset-x-0 top-0 -z-10 flex transform-gpu overflow-hidden pt-32 opacity-25 blur-3xl sm:pt-40 xl:justify-end"
+      aria-hidden="true">
+      <div
+        class="ml-[-22rem] aspect-[1313/771] w-[82.0625rem] flex-none origin-top-right rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] xl:ml-0 xl:mr-[calc(50%-12rem)]"
+        style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
+      </div>
+    </div>
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-xl text-center">
+        <h2 class="text-lg font-semibold leading-8 tracking-tight text-indigo-600">history</h2>
+        <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">We changend history (legends)</p>
+      </div>
+      <div
+        class="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm leading-6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
+        <figure class="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5 sm:col-span-2 xl:col-start-2 xl:row-end-1">
+          <blockquote
+            class="p-6 text-lg font-semibold leading-7 tracking-tight text-gray-900 sm:p-12 sm:text-xl sm:leading-8">
+            <p>“Learn from yesterday , live for taday , hop for tomorrow. The important thing is not to stop
+              questioning. ”</p>
+          </blockquote>
+          <figcaption
+            class="flex flex-wrap items-center gap-x-4 gap-y-4 border-t border-gray-900/10 px-6 py-4 sm:flex-nowrap">
+            <img class="h-10 w-10 flex-none rounded-full bg-gray-50"
+              src="https://insidetheperimeter.ca/wp-content/uploads/2015/11/Albert_einstein_by_zuzahin-d5pcbug-WikiCommons.jpg"
+              alt="">
+            <div class="flex-auto">
+              <div class="font-semibold">Albert Einstein</div>
+
             </div>
+
+          </figcaption>
+        </figure>
+        <div class="space-y-8 xl:contents xl:space-y-0">
+          <div class="space-y-8 xl:row-span-2">
+            <figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
+              <blockquote class="text-gray-900">
+                <p>“Juventus is against racism and this club has to celebrate whith different religions and other
+                  people.”</p>
+              </blockquote>
+              <figcaption class="mt-6 flex items-center gap-x-4">
+                <img class="h-10 w-10 rounded-full bg-gray-50"
+                  src="https://static.wikia.nocookie.net/442oonsorg/images/3/34/Juventus_logo.png/revision/latest/smart/width/250/height/250?cb=20210513093053"
+                  alt="">
+                <div>
+                  <div class="font-semibold">Juventus's old lady</div>
+
+                </div>
+              </figcaption>
+            </figure>
+
+            <!-- More testimonials... -->
           </div>
-          <p class="mt-8 text-xs text-gray-800">
-            © 2024 CSE Roadmap
+          <div class="space-y-8 xl:row-start-1">
+            <figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
+              <blockquote class="text-gray-900">
+                <p>“Everithing on earth is a game. A passing thing. We all end up dead. We all end up the same, don't we
+                  ?”</p>
+              </blockquote>
+              <figcaption class="mt-6 flex items-center gap-x-4">
+                <img class="h-10 w-10 rounded-full bg-gray-50"
+                  src="data:image/jpeg;base64,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"
+                  alt="">
+                <div>
+                  <div class="font-semibold">Legend Pele</div>
+                </div>
+              </figcaption>
+            </figure>
+
+            <!-- More testimonials... -->
+          </div>
+        </div>
+        <div class="space-y-8 xl:contents xl:space-y-0">
+          <div class="space-y-8 xl:row-start-1">
+            <figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
+              <blockquote class="text-gray-900">
+                <p>“If there is a book that you want to read but it's not yet out, the you must be the one to write it.”
+                </p>
+              </blockquote>
+              <figcaption class="mt-6 flex items-center gap-x-4">
+                <img class="h-10 w-10 rounded-full bg-gray-50"
+                  src="https://hips.hearstapps.com/hmg-prod/images/william-shakespeare-194895-1-402.jpg" alt="">
+                <div>
+                  <div class="font-semibold">William Shakespeare</div>
+
+                </div>
+              </figcaption>
+            </figure>
+
+            <!-- More testimonials... -->
+          </div>
+          <div class="space-y-8 xl:row-span-2">
+            <figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
+              <blockquote class="text-gray-900">
+                <p>“Lots of legends, lots of people have come before me, but this is my time.”</p>
+              </blockquote>
+              <figcaption class="mt-6 flex items-center gap-x-4">
+                <img class="h-10 w-10 rounded-full bg-gray-50"
+                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5OL5Z5J8CdB941RIOAypIxMJHHlbI_cCYIQ&usqp=CAU"
+                  alt="">
+                <div>
+                  <div class="font-semibold">Usain Bolt</div>
+
+                </div>
+              </figcaption>
+            </figure>
+
+            <!-- More testimonials... -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer class="bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-100">
+    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        <div>
+          <img src="images/logo.png" class="mr-5 h-10 sm:h-16" alt="logo" />
+          <p class="max-w-xs mt-4 text-sm text-gray-600">
+            Cse Roadmap is a platform where you can learn about computer science and engineering. We provide you with
+            the best resources and tutorials to help you learn and grow in the field of computer science and
+            engineering.
           </p>
+          <div class="flex mt-8 space-x-6 text-gray-600">
+            <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+              <span class="sr-only"> Facebook </span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd"
+                  d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                  clipRule="evenodd" />
+              </svg>
+            </a>
+            <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+              <span class="sr-only"> Instagram </span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd"
+                  d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                  clipRule="evenodd" />
+              </svg>
+            </a>
+            <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+              <span class="sr-only"> Twitter </span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+            </a>
+            <a class="hover:opacity-75" href="https://github.com/mahafujahamed" target="_blank" rel="noreferrer">
+              <span class="sr-only"> GitHub </span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clipRule="evenodd" />
+              </svg>
+            </a>
+            <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+              <span class="sr-only"> Dribbble </span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd"
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+                  clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
         </div>
-      </footer>
-    <script src="blog.js"></script>
+        <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <p class="font-medium">
+              Company
+            </p>
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75" href> About </a>
+              <a class="hover:opacity-75" href> Meet the Team </a>
+              <a class="hover:opacity-75" href> History </a>
+              <a class="hover:opacity-75" href> Careers </a>
+            </nav>
+          </div>
+          <div>
+            <p class="font-medium">
+              Services
+            </p>
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75" href>Web Builder</a>
+              <a class="hover:opacity-75" href> Company Review </a>
+              <a class="hover:opacity-75" href> Accounts Review </a>
+              <a class="hover:opacity-75" href> HR Consulting </a>
+              <a class="hover:opacity-75" href> SEO Optimisation </a>
+            </nav>
+          </div>
+          <div>
+            <p class="font-medium">
+              Helpful Links
+            </p>
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75" href> Contact </a>
+              <a class="hover:opacity-75" href> FAQs </a>
+              <a class="hover:opacity-75" href> Live Chat </a>
+            </nav>
+          </div>
+          <div>
+            <p class="font-medium">
+              Legal
+            </p>
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75" href> Privacy Policy </a>
+              <a class="hover:opacity-75" href> Terms &amp; Conditions </a>
+              <a class="hover:opacity-75" href> Returns Policy </a>
+              <a class="hover:opacity-75" href> Accessibility </a>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <p class="mt-8 text-xs text-gray-800">
+        © 2024 CSE Roadmap
+      </p>
+    </div>
+  </footer>
+  <script src="blog.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
index 8696afb..4e3687a 100644
--- a/contact.html
+++ b/contact.html
@@ -63,102 +63,261 @@
     </div>
     <!-- nav end -->
     <!-- hero -->
-    <section>
-        <div class="hero min-h-screen" style="background-image: url(images/contact-header.jpg);">
-            <div class="hero-overlay bg-opacity-60"></div>
-            <div class="hero-content text-center text-neutral-content">
-                <div class="max-w-md">
-                    <div class="flex justify-evenly">
-                        <img class="m-5 animate-ping" src="images/contact-line.png" alt="">
-                        <img class="m-5 animate-bounce" src="images/contact-line.png" alt="">
-                        <img class="m-5 animate-ping" src="images/contact-line.png" alt="">
+    <!-- component -->
+    <!-- format the code its messy  -->
+
+    <div class=" ">
+        <!-- {/* top container with tagline and backgroundImage  */} -->
+        <div class="relative">
+            <!-- {/* image section  */} -->
+            <section class="w-full h-[40vh] lg:h-[55vh] bg-cover bg-center brightness-50" style="background: black">
+            </section>
+
+            <!-- {/* tagline division  */} -->
+            <div class="absolute top-1/2 left-[5%] md:left-[10%] -translate-y-1/2 text-white">
+
+                <h1 class="text-3xl md:text-5xl font-bold">Get In Touch</h1>
+                <p class="text-sm md:text-lg">
+                    The Ultimate Guide To Ace SDE Interviews.
+                </p>
+            </div>
+        </div>
+
+        <!-- {/* bottom relative container  */} -->
+        <div class="w-full h-[1200px] md:h-[60vh] lg:h-[130vh] bg-blue-300 relative">
+
+            <!-- {/* division with floating form  */} -->
+            <div
+                class="absolute -top-[3%] md:-top-[10%] left-1/2 -translate-x-1/2 grid grid-cols-1 md:grid-cols-3 h-fit w-4/5 md:w-[90%] lg:w-4/5 rounded shadow overflow-hidden text-white">
+                <!-- {/* form / left div  */} -->
+                <div class="p-2 md:p-4 h-full bg-gray-800 col-span-2">
+                    <form>
+                        <!-- {/* form top part containing mail icon and heading  */} -->
+                        <div class="flex flex-col md:flex-row justify-around items-start md:items-center pt-8 p-4">
+                            <!-- {/* heading  */} -->
+                            <h2 class="text-2xl md:text-3xl font-semibold">Send Us A Message</h2>
+
+                            <!-- {/* mail svg icon  */} -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-forward"
+                                width="33" height="33" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M12 18h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5" />
+                                <path d="M3 6l9 6l9 -6" />
+                                <path d="M15 18h6" />
+                                <path d="M18 15l3 3l-3 3" />
+                            </svg>
+                        </div>
+
+                        <!-- {/* bottom form with input fields  */} -->
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 py-6 px-4 md:py-12 md:px-8 text-sm">
+                            <!-- {/* name input  */} -->
+                            <div class="flex flex-col gap-1">
+                                <label class="font-semibold">
+                                    Name <span class="text-red-500">&#42;</span>
+                                </label>
+                                <input class="border-[1px] border-white bg-gray-800 p-2 rounded-md"
+                                    placeholder="Enter Your Name" required name="name" type="text" />
+                            </div>
+
+                            <!-- {/* email input  */} -->
+                            <div class="flex flex-col gap-1">
+                                <label class="font-semibold">
+                                    Email <span class="text-red-500">&#42;</span>
+                                </label>
+                                <input class="border-[1px] border-white bg-gray-800 p-2 rounded-md"
+                                    placeholder="Enter Your Email" required name="email" type="email" />
+                            </div>
+
+                            <!-- {/* phone number input  */} -->
+                            <div class="flex flex-col gap-1">
+                                <label class="font-semibold">
+                                    Phone <span class="text-red-500">&#42;</span>
+                                </label>
+                                <input class="border-[1px] border-white bg-gray-800 p-2 rounded-md"
+                                    placeholder="Enter Your Phone Number" required name="phone" type="tel" />
+                            </div>
+
+                            <!-- {/* subject input  */} -->
+                            <div class="flex flex-col gap-1">
+                                <label class="font-semibold">
+                                    Subject <span class="text-red-500">&#42;</span>
+                                </label>
+                                <input class="border-[1px] border-white bg-gray-800 p-2 rounded-md"
+                                    placeholder="Enter Your Subject" required name="subject" type="text" />
+                            </div>
+
+                            <!-- {/* message input  */} -->
+                            <div class="flex flex-col gap-1 md:col-span-2">
+                                <label class="font-semibold">
+                                    Message <span class="text-red-500">&#42;</span>
+                                </label>
+                                <input class="border-[1px] border-white bg-gray-800 p-2 rounded-md"
+                                    placeholder="Enter Your Message" required name="subject" type="text" />
+                            </div>
+                        </div>
+                    </form>
+
+                    <!-- {/* submit button div  */} -->
+                    <div class="flex items-center justify-center md:justify-end py-4 px-8">
+                        <!-- {/* submit button  */} -->
+                        <button
+                            class="py-2 px-4 md:py-4 md:px-6 bg-gray-800 rounded-md border-2 border-white flex items-center gap-2 hover:scale-95 transition-all">
+                            <span class="text-xl">Submit</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-telegram"
+                                width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
+                            </svg>
+                        </button>
                     </div>
-                    <h1 class="mb-5 text-7xl font-bold font-serif animate-bounce">Con<span class="te">t</span>act Us</h1>
-                    <div class="flex">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
-                        <img class="animate-spin" src="images/home-spin.png" alt="">
+                </div>
+
+                <!-- {/* right div  */} -->
+                <div class="py-6 px-4 h-[500px] md:h-full bg-blue-800 grid grid-cols-1 grid-rows-5">
+                    <!-- {/* heading tag  */} -->
+                    <h2 class="text-xl lg:text-2xl text-center md:text-start font-semibold">Contact Information</h2>
+
+                    <!-- {/* email and icon  */} -->
+                    <div class="row-span-4 flex flex-col items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-share"
+                            width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M13 19h-8a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6" />
+                            <path d="M3 7l9 6l9 -6" />
+                            <path d="M16 22l5 -5" />
+                            <path d="M21 21.5v-4.5h-4.5" />
+                        </svg>
+                        <span>yourmail@support.com</span>
+                    </div>
+
+                    <!-- {/* social icons div  */} -->
+                    <div class="flex justify-center md:justify-start items-center gap-4">
+                        <a title="youtube" href="#">
+                            <img class="h-8 w-8 invert" src="https://www.svgrepo.com/show/521936/youtube.svg" /></a>
+                        <a title="linkedin" href="#">
+                            <img class="h-12 w-12 invert" src="https://www.svgrepo.com/show/520815/linkedin.svg" /></a>
+                        <a title="instagram" href="#">
+                            <img class="h-8 w-8 invert" src="https://www.svgrepo.com/show/521711/instagram.svg" /></a>
+                        <a title="github" href="#">
+                            <img class="h-8 w-8 invert" src="https://www.svgrepo.com/show/512317/github-142.svg" /></a>
                     </div>
+                    <h1 class="text-center"> Follow me on github <a href="https://github.com/Darkstar69">Darkstar69</a>
+                    </h1>
                 </div>
             </div>
+
         </div>
-    </section>
-    <!-- Contact us  -->
-    <section class="">
-        <div class="flex justify-evenly">
-            <div class="text-center jus">
-                <img src="images/phone-call.png" alt="">
-                <h2>Give Us Call</h2>
-                <p>(+880) 1537700548</p>
-                <p>(+880) 1537700548</p>
-            </div>
-            <div>
-                <img src="images/email.png" alt="">
-                <h2>Drop us a line</h2>
-                <p>mahafujahamed068@gmail.com</p>
-                <p>mahafujahamed068#outlook.com</p>
-            </div>
-            <div>
-                <img src="images/google-maps.png" alt="">
-                <p>Diu Campus</p>
-                <p>Dhaka, Bangladesh</p>
-            </div>
-        </div>
-    </section>
-   
+    </div>
     <!-- Footer -->
-    <footer class="footer p-10 bg-base-200 text-base-content mt-5">
-        <div>
-            <span class="footer-title">Services</span>
-            <a href="resources.html" class="link link-hover">Resources</a>
-            <a class="link link-hover">Design</a>
-            <a class="link link-hover">Advertisement</a>
-            <a class="link link-hover">Web development</a>
-        </div>
-        <div>
-            <span class="footer-title">Company</span>
-            <a href="community.html" class="link link-hover">Community</a>
-            <a href="contact.html" class="link link-hover">Contact</a>
-            <a href="blog.html" class="link link-hover">Blog</a>
-        </div>
-        <div>
-            <span class="footer-title">Legal</span>
-            <a class="link link-hover">Terms of use</a>
-            <a class="link link-hover">Privacy policy</a>
-            <a class="link link-hover">Cookie policy</a>
-        </div>
-        <div>
-            <span class="footer-title">Newsletter</span>
-            <div class="flex justify-center items-center gap-5 mb-4 mt-4">
-                <a href="https://www.facebook.com/mahafujahamed.dev"><img src="images/facebook.png"></a>
-                <a href="https://developers.google.com/profile/u/mahafuj"><img src="images/google.png" alt=""></a>
-                <a href="https://github.com/Duplicate-Yours"><img src="images/github.png" alt=""></a>
-                <a href="https://www.linkedin.com/in/mahafuj-python/"><img src="images/linkedin.png" alt=""></a>
-            </div>
-            <div class="form-control w-80">
-                <label class="label">
-                    <span class="label-text">Enter your email address</span>
-                </label>
-                <div class="relative">
-                    <input type="text" placeholder="username@site.com" class="input input-bordered w-full pr-16" />
-                    <button onclick="alert('Thanks for subscribing!')"
-                        class="btn bg-cyan-500 shadow-lg  shadow-cyan-500/50 absolute top-0 right-0 rounded-l-none">Subscribe</button>
+    <!-- component -->
+    <footer class="bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-100">
+        <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
+                <div>
+                    <img src="images/logo.png" class="mr-5 h-10 sm:h-16" alt="logo" />
+                    <p class="max-w-xs mt-4 text-sm text-gray-600">
+                        Cse Roadmap is a platform where you can learn about computer science and engineering. We
+                        provide you with the best resources and tutorials to help you learn and grow in the field of
+                        computer science and engineering.
+                    </p>
+                    <div class="flex mt-8 space-x-6 text-gray-600">
+                        <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+                            <span class="sr-only"> Facebook </span>
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fillRule="evenodd"
+                                    d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                                    clipRule="evenodd" />
+                            </svg>
+                        </a>
+                        <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+                            <span class="sr-only"> Instagram </span>
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fillRule="evenodd"
+                                    d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                                    clipRule="evenodd" />
+                            </svg>
+                        </a>
+                        <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+                            <span class="sr-only"> Twitter </span>
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                            </svg>
+                        </a>
+                        <a class="hover:opacity-75" href="https://github.com/mahafujahamed" target="_blank"
+                            rel="noreferrer">
+                            <span class="sr-only"> GitHub </span>
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fillRule="evenodd"
+                                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                                    clipRule="evenodd" />
+                            </svg>
+                        </a>
+                        <a class="hover:opacity-75" href target="_blank" rel="noreferrer">
+                            <span class="sr-only"> Dribbble </span>
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fillRule="evenodd"
+                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+                                    clipRule="evenodd" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
+                    <div>
+                        <p class="font-medium">
+                            Company
+                        </p>
+                        <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                            <a class="hover:opacity-75" href> About </a>
+                            <a class="hover:opacity-75" href> Meet the Team </a>
+                            <a class="hover:opacity-75" href> History </a>
+                            <a class="hover:opacity-75" href> Careers </a>
+                        </nav>
+                    </div>
+                    <div>
+                        <p class="font-medium">
+                            Services
+                        </p>
+                        <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                            <a class="hover:opacity-75" href>Web Builder</a>
+                            <a class="hover:opacity-75" href> Company Review </a>
+                            <a class="hover:opacity-75" href> Accounts Review </a>
+                            <a class="hover:opacity-75" href> HR Consulting </a>
+                            <a class="hover:opacity-75" href> SEO Optimisation </a>
+                        </nav>
+                    </div>
+                    <div>
+                        <p class="font-medium">
+                            Helpful Links
+                        </p>
+                        <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                            <a class="hover:opacity-75" href> Contact </a>
+                            <a class="hover:opacity-75" href> FAQs </a>
+                            <a class="hover:opacity-75" href> Live Chat </a>
+                        </nav>
+                    </div>
+                    <div>
+                        <p class="font-medium">
+                            Legal
+                        </p>
+                        <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                            <a class="hover:opacity-75" href> Privacy Policy </a>
+                            <a class="hover:opacity-75" href> Terms &amp; Conditions </a>
+                            <a class="hover:opacity-75" href> Returns Policy </a>
+                            <a class="hover:opacity-75" href> Accessibility </a>
+                        </nav>
+                    </div>
                 </div>
             </div>
+            <p class="mt-8 text-xs text-gray-800">
+                © 2024 CSE Roadmap
+            </p>
         </div>
     </footer>
-    <div class="text-center bg-slate-900">
-        <span class="font-serif  hover:uppercase text-cyan-500">Copyright &copy; 2023 All rights reserved</span>
-    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/features.html b/features.html
index 43c26e3..cd28a35 100644
--- a/features.html
+++ b/features.html
@@ -7,11 +7,53 @@
     <title>Cse Roadmap</title>
     <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+
+        @keyframes word {
+          0% {
+            transform: translateY(100%);
+          }
+          15% {
+            transform: translateY(-10%);
+            animation-timing-function: ease-out;
+          }
+        
+          20% {
+            transform: translateY(0);
+          }
+        
+          40%,
+          100% {
+            transform: translateY(-110%);
+          }
+        }
+        
+        .animate-word {
+          animation: word 7s infinite;
+        }
+        .animate-word-delay-1 {
+          animation: word 7s infinite;
+          animation-delay: -1.4s;
+        }
+        .animate-word-delay-2 {
+          animation: word 7s infinite;
+          animation-delay: -2.8s;
+        }
+        .animate-word-delay-3 {
+          animation: word 7s infinite;
+          animation-delay: -4.2s;
+        }
+        .animate-word-delay-4 {
+          animation: word 7s infinite;
+          animation-delay: -5.6s;
+        }
+        
+        </style>
 </head>
 
 <body class="bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-100 font-sans">
     <!-- navbar -->
-    <div class="navbar bg-base-100">
+    <div class="navbar">
         <div class="navbar-start">
             <div class="dropdown">
                 <label tabindex="0" class="btn btn-ghost lg:hidden">
@@ -64,12 +106,25 @@
             </div>
         </div>
     </div>
-    <div class="mt-24">
-        <h1 class="font-serif text-7xl text-center font-bold text-black">Our <span class="animate-pulse text-red-500">Features</span> that Fit</h1>
-        <p class="text-center text-yellow-950 mt-5">Cse Roadmap have amazing developer friendly features that you may love it much</p>
-    </div>
+    <div class="flex min-h-screen items-center justify-center font-bold text-white">
+        <div class=" text-center space-y-12">
+            <div class="text-center text-5xl font-bold text-lime-700">
+              Services offered
+              <div class="relative inline-grid grid-cols-1 grid-rows-1 gap-12 overflow-hidden">
+              <span class="animate-word col-span-full row-span-full">Flutter</span>
+              <span class="animate-word-delay-1 col-span-full row-span-full">Django</span>
+              <span class="animate-word-delay-2 col-span-full row-span-full">Website</span>
+              <span class="animate-word-delay-3 col-span-full row-span-full">VueJS</span>
+              <span class="animate-word-delay-4 col-span-full row-span-full">NuxtJS</span>
+              </div>
+          </div>
+          <p class=" text-white">
+              Want to hire me for work ping me <a class="underline" href="mailto:ponnamkarthik3@gmail.com">mail here</a>
+          </p>
+        </div>
+      </div>
     <!-- key fetures -->
-    <div class="container mx-auto mt-8 p-8 bg-white shadow-lg rounded-lg">
+    <div class="container mx-auto mt-8 p-8 shadow-lg rounded-lg">
 
         <h2 class="text-3xl font-semibold font-serif text-black text-center mb-6">Key Features</h2>
 
diff --git a/index.html b/index.html
index 59dc956..7c6372b 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="retro" , lang="en">
+<html lang="en">
 
 <head>
     <meta charset="UTF-8">
@@ -39,8 +39,12 @@
                         class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Features</a>
                     <a href="resources.html"
                         class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Resources</a>
+                    <a href="mentors.html"
+                        class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Mentors</a>
                     <a href="blog.html"
                         class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Blog</a>
+                    <a href="contact.html"
+                        class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Contact</a>
                 </div>
             </div>
         </nav>
@@ -133,7 +137,7 @@ <h1 class="text-center text-2xl sm:text-5xl py-10 font-medium">Lorem Ipsum Yojo<
         <div>
             <div>
                 <div class="flex justify-center gap-5 mt-14">
-                    <div class="flex flex-col items-center justify-center w-64 h-64 bg-white rounded-xl shadow-lg">
+                    <div class="flex flex-col items-center justify-center w-64 h-64  rounded-xl shadow-lg">
                         <img class="w-32 h-32 rounded-full" src="images/mahafuj12.jpeg" alt="">
                         <h1 class="mt-5 text-xl font-bold">Mahafuj Ahamed</h1>
                         <p class="mt-2 text-sm text-gray-500">Web Developer</p>
@@ -363,7 +367,29 @@ <h2 class="text-4xl font-bold text-gray-900 sm:text-5xl">From the News Room</h2>
                 </div>
             </div>
         </div>
-
+        <!-- subscribe newsleter -->
+        <!-- component -->
+        <div
+            class="p-6 container md:w-2/3 xl:w-auto mx-auto flex flex-col xl:items-stretch justify-between xl:flex-row">
+            <div class="xl:w-1/2 md:mb-14 xl:mb-0 relative h-auto flex items-center justify-center">
+                <img src="https://cdn.tuk.dev/assets/components/26May-update/newsletter-1.png"
+                    alt="Envelope with a newsletter" role="img" class="h-full xl:w-full lg:w-1/2 w-full" />
+            </div>
+            <div class="w-full xl:w-1/2 xl:pl-40 xl:py-28">
+                <h1
+                    class="text-2xl md:text-4xl xl:text-5xl font-bold leading-10 text-gray-800 mb-4 text-center xl:text-left md:mt-0 mt-4">
+                    Subscribe</h1>
+                <p class="text-base leading-normal text-gray-600 text-center xl:text-left">Whether article spirits new
+                    her covered hastily sitting her. Money witty books nor son add.</p>
+                <div class="flex items-stretch mt-12">
+                    <input
+                        class="bg-gray-100 rounded-lg rounded-r-none text-base leading-none text-gray-800 p-5 w-4/5 border border-transparent focus:outline-none focus:border-gray-500"
+                        type="email" placeholder="Your Email" />
+                    <button
+                        class="w-32 rounded-l-none hover:bg-indigo-600 bg-indigo-700 rounded text-base font-medium leading-none text-white p-5 uppercase focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700">subscribe</button>
+                </div>
+            </div>
+        </div>
 
         <!-- Footer -->
         <!-- component -->
diff --git a/mentors.html b/mentors.html
new file mode 100644
index 0000000..8d0f08d
--- /dev/null
+++ b/mentors.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body>
+    <!-- component -->
+    <div class="min-h-screen bg-gray-50 pb-10">
+        <!-- Navigation -->
+        <div class="mx-auto">
+            <!-- mobile navigation -->
+            <div class="flex items-center justify-between bg-white px-4 py-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="h-6 w-6 text-gray-600">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                </svg>
+                <div class="flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor"
+                        class="h-5 w-5 rounded-full text-gray-600 outline outline-1 outline-offset-8 outline-gray-200">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+                    </svg>
+                    <img class="ml-6 h-9 w-9 rounded-full object-cover"
+                        src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                        alt="profile" />
+                </div>
+            </div>
+            <nav class="hidden">
+                <a href="">
+                    <img src="" alt="" />
+                    Nuegas
+                </a>
+                <ul>
+                    <li>
+                        <a href="">
+                            <img src="" alt="" />
+                            Nuegas
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <img src="" alt="" />
+                            Nuegas
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <img src="" alt="" />
+                            Nuegas
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <img src="" alt="" />
+                            Nuegas
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <img src="" alt="" />
+                            Nuegas
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <!-- Box Alert -->
+            <div class="hidden">
+                <img src="" alt="" />
+                <h2>Help Center</h2>
+                <p>Having Trouble in Learning. Please contact us for more questions.</p>
+            </div>
+            <!-- End -->
+            <!-- Main -->
+            <main class="">
+                <div class="bg-white px-4">
+                    <div>
+                        <h2 class="text-2xl font-semibold text-gray-900">Explore Mentors</h2>
+                        <div class="flex items-center justify-between">
+                            <div
+                                class="my-6 mr-4 flex w-full items-center justify-between rounded-lg border px-3 py-3 sm:w-[350px] sm:flex-initial">
+                                <input class="w-full text-sm outline-none" type="text" placeholder="Search Mentors" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="h-5 w-6 text-gray-400">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <div class="flex items-center">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-gray-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+                                    </svg>
+                                    <span class="hidden sm:block">Category</span>
+                                </div>
+                                <div class="hidden md:block">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+                                    </svg>
+                                    <span>Sort By : Popular</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="px-4">
+                    <div class="my-5 flex items-center justify-between">
+                        <h2 class="text-lg font-semibold text-gray-900">Recent Mentors</h2>
+                        <div class="flex">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="mr-2 h-5 w-5 text-gray-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="h-5 w-5 text-gray-900">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="mb-6 sm:w-1/2 rounded-lg bg-white p-6">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center">
+                                <img class="mr-2 h-10 w-10 rounded-full object-cover"
+                                    src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?q=80&w=1921&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                    alt="profile" />
+                                <div>
+                                    <h3 class="text-base font-semibold text-gray-900">Kotler Philips</h3>
+                                    <span class="block text-xs font-normal text-gray-500">Web Developer</span>
+                                </div>
+                            </div>
+                            <p class="text-sm font-medium text-indigo-500"><span class="mr-0.5">+</span>Follow</p>
+                        </div>
+                        <div class="mt-6 flex items-center justify-between text-sm font-semibold text-gray-900">
+                            <div class="flex">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor"
+                                    class="mr-2 h-5 w-5 text-base text-gray-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                </svg>
+                                <span class="mr-1">40</span> Task
+                            </div>
+                            <div class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                                </svg>
+                                4,7 (750 Reviews)
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="px-4">
+                    <div class="my-5">
+                        <h2 class="text-lg font-semibold text-gray-900">Mentors</h2>
+                    </div>
+                    <div class="grid sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3">
+                        <div class="mb-6 rounded-lg bg-white p-6">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <img class="mr-2 h-10 w-10 rounded-full object-cover"
+                                        src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                        alt="profile" />
+                                    <div>
+                                        <h3 class="text-base font-semibold text-gray-900">Alex Stanton</h3>
+                                        <span class="block text-xs font-normal text-gray-500">UI / UX Designer</span>
+                                    </div>
+                                </div>
+                                <p class="text-sm font-medium text-indigo-500"><span class="mr-0.5">+</span>Follow</p>
+                            </div>
+                            <p class="my-6 text-sm font-normal text-gray-500">Hi, I'm Jessica Jane. I am a doctoral
+                                student at Harvard University majoring in Web . . .</p>
+                            <div class="mt-6 flex items-center justify-between text-sm font-semibold text-gray-900">
+                                <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="mr-2 h-5 w-5 text-base text-gray-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                    </svg>
+                                    <span class="mr-1">40</span> Task
+                                </div>
+                                <div class="flex items-center">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-6 text-yellow-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                                    </svg>
+                                    4,7 (750 Reviews)
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mb-6 rounded-lg bg-white p-6">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <img class="mr-2 h-10 w-10 rounded-full object-cover"
+                                        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                        alt="profile" />
+                                    <div>
+                                        <h3 class="text-base font-semibold text-gray-900">Antoine</h3>
+                                        <span class="block text-xs font-normal text-gray-500">Android Developer</span>
+                                    </div>
+                                </div>
+                                <p class="text-sm font-medium text-indigo-500"><span class="mr-0.5">+</span>Follow</p>
+                            </div>
+                            <p class="my-6 text-sm font-normal text-gray-500">Hi, I'm Alex Stanton. I am a doctoral
+                                student at Oxford University majoring in UI / UX . . .</p>
+                            <div class="mt-6 flex items-center justify-between text-sm font-semibold text-gray-900">
+                                <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="mr-2 h-5 w-5 text-base text-gray-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                    </svg>
+                                    <span class="mr-1">40</span> Task
+                                </div>
+                                <div class="flex items-center">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-6 text-yellow-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                                    </svg>
+                                    4,7 (750 Reviews)
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mb-6 rounded-lg bg-white p-6">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <img class="mr-2 h-10 w-10 rounded-full object-cover"
+                                        src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                        alt="profile" />
+                                    <div>
+                                        <h3 class="text-base font-semibold text-gray-900">Richard Kyle</h3>
+                                        <span class="block text-xs font-normal text-gray-500">2D Design</span>
+                                    </div>
+                                </div>
+                                <p class="text-sm font-medium text-indigo-500"><span class="mr-0.5">+</span>Follow</p>
+                            </div>
+                            <p class="my-6 text-sm font-normal text-gray-500">Hi, I'm Antoine Griezmann. I'm an Android
+                                Developer at Google company . . .</p>
+                            <div class="mt-6 flex items-center justify-between text-sm font-semibold text-gray-900">
+                                <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="mr-2 h-5 w-5 text-base text-gray-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                    </svg>
+                                    <span class="mr-1">40</span> Task
+                                </div>
+                                <div class="flex items-center">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-6 text-yellow-500">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                                    </svg>
+                                    4,7 (750 Reviews)
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/newfea.html b/newfea.html
new file mode 100644
index 0000000..e69de29
