From 464eb80bf4fdcc6fc24ad01cd220cde07d8f0968 Mon Sep 17 00:00:00 2001
From: sarfraj786 <hawarisarfraj@gmail.com>
Date: Thu, 6 Apr 2023 12:29:03 +0530
Subject: [PATCH] Redesign the menu and logo

---
 index.html | 17 ++++++++++++-----
 style.css  | 28 +++++++++++++++-------------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 696564e..53fa9cd 100644
--- a/index.html
+++ b/index.html
@@ -33,18 +33,25 @@
   <div>
     <!--  Navbar    -->
 
-<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-zinc-900">
+<nav class="bg-white border-gray-200 px-2 sm:px-4 rounded dark:bg-zinc-900 top-bar">
+
   <div class="container flex flex-wrap justify-between items-center mx-auto">
+
+    <!-- LOGO here -->
     <a href="index.html" class="flex items-center">
-        <img src="assests/image.png" class="mr-3 h-6 sm:h-9" alt="Logo">
-        <span class="name self-center text-xl font-semibold whitespace-nowrap dark:text-white">Cryptic</span>
+        <img src="assests/image.png" class="mr-3 h-6 sm:h-9 logo" alt="Logo">
+        <span class="logo-name self-center text-xl font-semibold whitespace-nowrap dark:text-white">C<span class="logo-name-1">RYPTIC</span></span>
     </a>
+
+    <!-- Small Sereen Button  -->
     <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
       <span class="sr-only">Open main menu</span>
       <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
     </button>
-    <div class="hidden w-full lg:block lg:w-auto" id="navbar-default">
-      <ul class="flex ml-auto items flex-col mt-4 bg-zinc-900 rounded-lg border border-gray-100 lg:flex-row lg:space-x-8 lg:mt-0 lg:text-sm md:font-medium lg:border-0 dark:border-gray-700">
+
+    <!-- Menu starts here  -->
+    <div class="hidden w-full lg:block lg:w-auto " id="navbar-default">
+      <ul class="flex ml-auto items flex-col mt-4 bg-zinc-900 rounded-lg border border-gray-100 lg:flex-row lg:space-x-8 lg:mt-0 lg:text-sm md:font-medium lg:border-0 dark:border-gray-700 menu">
         <li>
           <a href="#" class="links my-2">Home</a>
         </li>
diff --git a/style.css b/style.css
index def4dd9..ca776cc 100644
--- a/style.css
+++ b/style.css
@@ -17,18 +17,18 @@ body {
   position: relative;
 top: 450px;
 } */
-
-/* Navbar- Navigation bar of the website */
-
-.navigation {
-  display: flex;
-  flex-direction: column;
+.top-bar{
+  padding: 25px;
 }
 
-.name {
+.logo-name {
   font-family: Arial, Helvetica, sans-serif !important;
   font-size: 3rem !important;
-  color: aqua !important;
+  color: rgb(0, 163, 163) !important;
+  }
+  .logo-name-1{
+    font-size: 2rem;
+    color: #47d7ff;
   }
 
 .home {
@@ -46,18 +46,21 @@ top: 450px;
   border-radius: 25px;
   border: #72b1e4;
   padding: 7px;
+  margin: 5px;
 }
 
 .items {
   /* gap: 2rem; */
   font-weight: bold;
   color: #797f98 !important;
-  font-family: "Times New Roman", serif !important;
+  /* font-family: "Times New Roman", serif !important; */
   text-decoration: none;
-  font-size: 1.2rem !important;
+  font-size: 1rem;
   text-decoration: none;
+  padding: 15px;justify-content: center;
 }
 
+
 .items > li > a:hover {
   color: #e6a2f4 !important; 
   transition: all 0.3s;
@@ -70,8 +73,8 @@ top: 450px;
 }
 
 .logo {
-  width: 30px;
-  height: 30px;
+  width: 50px;
+  height: 50px;
   background-color: white;
   border-radius: 100%;
   cursor: pointer;
@@ -88,7 +91,6 @@ top: 450px;
     /*inside the box*/ radial-gradient(circle at top left, #fd00da, #19d7f8);
   background-origin: border-box;
   background-clip: content-box, border-box;
-  margin-right: 40px;
 }
 
 .sign {