From e6d73b0f648dd8ace8a979be8eb893daf333b1fc Mon Sep 17 00:00:00 2001
From: ashutosh <dev.ashutoshh@gmail.com>
Date: Sun, 17 Dec 2023 20:42:19 +0530
Subject: [PATCH] modified theme

---
 assets/css/login.css      |   9 +-
 assets/css/media.css      | 381 ++++----------------------------------
 assets/css/stylesheet.css | 264 +++++++++++++-------------
 assets/jquery/main.js     |  35 ++++
 index.html                |  76 ++++----
 login.html                |   4 +-
 6 files changed, 243 insertions(+), 526 deletions(-)

diff --git a/assets/css/login.css b/assets/css/login.css
index dc48922..0a8c3fa 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    --font: "Roboto";
 }
 
 :root {
@@ -44,14 +45,9 @@
 }
 
 .form {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    max-width: 440px;
     gap: 1.5rem;
     padding: 20px;
+    margin: 0 20px;
     font-family: var(--font);
     background-color: rgba(17, 25, 40, 0.75);
     backdrop-filter: blur(16px) saturate(180%);
@@ -89,6 +85,7 @@
     width: 16px;
     border-radius: 50%;
     left: 0px;
+    top: 25%;
     background-color: var(--orange);
 }
 
diff --git a/assets/css/media.css b/assets/css/media.css
index 5418b03..d0b63c5 100644
--- a/assets/css/media.css
+++ b/assets/css/media.css
@@ -1,201 +1,110 @@
 @media(max-width:768px) {
-    aside {
-        display: none;
-    }
 
-    header {
-        margin-left: 0 !important;
-        padding: 0;
-        position: relative;
+    .admin-img,
+    .fa-language,
+    .fa-bars {
+        display: block;
     }
 
-    .h-right {
-        display: none;
-        background-color: var(--white);
-        padding: 10px 0;
-        border-radius: 18px;
-        position: absolute;
-        top: 51px;
-        left: 25px;
-        right: 25px;
+    .log-sm {
+        display: block;
     }
 
-    main {
-        margin-left: 0 !important;
+    .fa-id-badge {
+        font-size: 1.5rem;
+        color: var(--icnblue1);
     }
 
-    .search {
+    .search,
+    .log-in-out {
         display: none;
     }
 
-    .profile {
-        border-bottom: 1px solid var(--grey);
-        min-width: 100%;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 20px 5px 20px;
+    .admin-img {
+        border-radius: 50%;
     }
 
-    .language {
-        min-width: 100%;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        padding: 10px 20px 0px 20px;
-
-    }
-
-    .language .fa-caret-down {
-        position: absolute;
-        right: 32px;
+    .user {
+        display: none;
     }
 
-    .admin-list {
-        top: 200%;
-        left: 0;
-        right: 0px;
+    aside {
+        display: none;
+        transition: none;
     }
 
-    .lang-list {
-        top: 150%;
-        left: 0;
-        right: 0px;
+    header {
+        margin-left: 0 !important;
+        padding-right: 10px;
     }
 
-    .log-in-out {
-        display: none;
+    main {
+        margin-left: 0 !important;
     }
 
     .main-content {
-        margin: 10px 20px;
-        display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: 130px 130px 130px 130px 350px 350px 350px 350px 350px 350px 130px 130px;
-        grid-column-gap: 22px;
-        grid-row-gap: 22px;
+        grid-template-rows: auto auto 350px 350px 350px 450px 350px 350px auto auto;
     }
 
     .dashboard-students {
-        grid-column: 1 / span 12;
-        text-align: center;
-        padding: 24px 0;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
+        grid-column: 1 / span 6;
+        flex-direction: column;
     }
 
     .dashboard-teachers {
-        text-align: center;
-        padding: 24px 0;
-        grid-column: 1 / span 12;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
+        grid-column: 7 / span 6;
+        flex-direction: column;
     }
 
     .dashboard-parents {
-        text-align: center;
-        padding: 26px 0;
-        grid-column: 1 / span 12;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
+        grid-column: 1 / span 6;
+        flex-direction: column;
     }
 
     .dashboard-earnings {
-        text-align: center;
-        padding: 26px 0;
-        grid-column: 1 / span 12;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
+        grid-column: 7 / span 6;
+        flex-direction: column;
     }
 
     .earnings-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .expenses-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .students-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .event-calender {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .branches {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
-        background-color: #000000;
-        background-image:
-            radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
-            radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
-        position: relative;
     }
 
     .notice-board {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
-        font-family: var(--font);
-        padding: 0px 10px;
-        background-color: var(--secondary);
-        color: var(--txtwhite);
     }
 
     .facebook-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--navyblu);
-        text-align: center;
     }
 
     .twitter-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--primary);
-        text-align: center;
     }
 
     .gplus-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--red);
-        text-align: center;
     }
 
     .linkedin-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--icnblu);
-        text-align: center;
     }
 }
 
@@ -242,411 +151,191 @@
     }
 
     .main-content {
-        margin: 10px 20px;
-        display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: 130px 130px 500px 500px 500px 500px 600px 800px 130px 130px;
-        grid-column-gap: 22px;
-        grid-row-gap: 22px;
+        grid-template-rows: 130px 130px 500px 500px 500px 500px 600px 600px auto auto
     }
 
     .dashboard-students {
         grid-column: 1 / span 6;
-        text-align: center;
-        padding: 24px 0;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-teachers {
-        text-align: center;
-        padding: 24px 0;
         grid-column: 7 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-parents {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 1 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-earnings {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 7 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .earnings-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .expenses-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .students-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .event-calender {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
     }
 
     .branches {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
-        background-color: #000000;
-        background-image:
-            radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
-            radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
-        position: relative;
     }
 
     .notice-board {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 12;
-        border-radius: 14px;
-        font-family: var(--font);
-        padding: 0px 10px;
-        background-color: var(--secondary);
-        color: var(--txtwhite);
     }
 
     .facebook-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--navyblu);
-        text-align: center;
     }
 
     .twitter-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--primary);
-        text-align: center;
     }
 
     .gplus-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--red);
-        text-align: center;
     }
 
     .linkedin-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--icnblu);
-        text-align: center;
     }
 }
 
 @media(min-width:992px) {
-
-
     .main-content {
-        margin: 10px 20px;
-        display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: 180px 180px 500px 500px 500px 150px 150px;
-        grid-column-gap: 22px;
-        grid-row-gap: 22px;
+        grid-template-rows: 180px 180px 500px 500px 500px auto auto;
     }
 
     .dashboard-students {
         grid-column: 1 / span 6;
-        text-align: center;
-        padding: 24px 0;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-teachers {
-        text-align: center;
-        padding: 24px 0;
         grid-column: 7 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-parents {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 1 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-earnings {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 7 / span 6;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .earnings-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
     }
 
     .expenses-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
     }
 
     .students-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
     }
 
     .event-calender {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
     }
 
     .branches {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: #000000;
-        background-image:
-            radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
-            radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
-        position: relative;
     }
 
     .notice-board {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        font-family: var(--font);
-        padding: 0px 10px;
-        background-color: var(--secondary);
-        color: var(--txtwhite);
     }
 
-
-
     .facebook-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--navyblu);
-        text-align: center;
     }
 
     .twitter-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--primary);
-        text-align: center;
     }
 
     .gplus-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
-        background-color: var(--red);
-        text-align: center;
     }
 
     .linkedin-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 6;
-        border-radius: 14px;
-        background-color: var(--icnblu);
-        text-align: center;
     }
 }
 
 @media(min-width:1200px) {
     .main-content {
-        margin: 10px 20px;
-        display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: 149px 520px 490px 149px;
-        grid-column-gap: 22px;
-        grid-row-gap: 22px;
+        grid-template-rows: 149px 520px 490px auto;
     }
 
     .dashboard-students {
         grid-column: 1 / span 3;
-        text-align: center;
-        padding: 24px 0;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-teachers {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 4 / span 3;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-parents {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 7 / span 3;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .dashboard-earnings {
-        text-align: center;
-        padding: 26px 0;
         grid-column: 10 / span 3;
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
-        border-radius: 14px;
     }
 
     .earnings-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 6;
-        border-radius: 14px;
     }
 
     .expenses-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 3;
-        border-radius: 14px;
     }
 
     .students-graph {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 10 / span 3;
-        border-radius: 14px;
     }
 
     .event-calender {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 4;
-        border-radius: 14px;
     }
 
     .branches {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 5 / span 4;
-        border-radius: 14px;
-        background-color: #000000;
-        background-image:
-            radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
-            radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
-        position: relative;
     }
 
     .notice-board {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 9 / span 4;
-        border-radius: 14px;
-        font-family: var(--font);
-        padding: 0px 10px;
-        background-color: var(--secondary);
-        color: var(--txtwhite);
     }
 
     .facebook-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 1 / span 3;
-        border-radius: 14px;
-        background-color: var(--navyblu);
-        text-align: center;
     }
 
     .twitter-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 4 / span 3;
-        border-radius: 14px;
-        background-color: var(--primary);
-        text-align: center;
     }
 
     .gplus-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 7 / span 3;
-        border-radius: 14px;
-        background-color: var(--red);
-        text-align: center;
     }
 
     .linkedin-handle {
-        box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-        background-color: var(--white);
         grid-column: 10 / span 3;
-        border-radius: 14px;
-        background-color: var(--icnblu);
-        text-align: center;
     }
-
-
 }
 
 @media(min-width:1400px) {}
\ No newline at end of file
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
index 13155a5..c81694f 100644
--- a/assets/css/stylesheet.css
+++ b/assets/css/stylesheet.css
@@ -2,31 +2,35 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: var(--font);
 }
 
 :root {
   --primary: #042954;
+  --icnblue1: #042954;
   --secondary: #051f3e;
   --bgprime: #f0f1f3;
   --golden: #ffa601;
-  --white: white;
+  --white: #ffffff;
   --txtwhite: white;
+  --txtwhite: #ffffffba;
   --red: #ff0000;
   --lightred: #FFEAEA;
+  --lightred2: #FFEAEA;
   --black: black;
   --grey: grey;
   --green: #3CB878;
   --darkgreen: darkgreen;
   --limegreen: #D1F3E0;
+  --limegreen2: #D1F3E0;
   --yellow: rgb(163, 169, 42);
   --lightblu: #E1F1FF;
-  --icnblu: #3F7AFC;
+  --icnblue2: #3F7AFC;
   --orange: #FFA001;
   --lightorng: #FFF2D8;
   --pink: rgb(205, 87, 106);
   --navyblu: #485C8F;
   --font: "Roboto";
-  --darkmdwhite: #ffffff;
 }
 
 ul li {
@@ -34,27 +38,12 @@ ul li {
 }
 
 a {
+  color: var(--limegreen2);
   text-decoration: none;
 }
 
-span {
-  font-family: var(--font);
-}
-
-.bdr-btm-1px {
-  border-width: 0 0 1px 0;
-  border-color: var(--grey);
-  border-style: solid;
-}
-
-.p-xy-1rem {
-  padding: 1rem 0 0 0;
-}
-
-
-.bg-primary {
-  background-color: var(--primary);
-  padding: 6px;
+.bg-golden {
+  background-color: var(--golden);
 }
 
 /* utility */
@@ -159,13 +148,17 @@ span {
   display: block;
 }
 
+.mt-1 {
+  margin-top: 10px;
+}
+
+
+
 /* header starts  */
 header {
   margin-left: 230px;
-  padding: 0 20px;
   background-color: var(--white);
   color: var(--black);
-  font-family: var(--font);
   position: sticky;
   top: 0;
   transition: all linear 0.1s;
@@ -176,14 +169,12 @@ header {
 .logo-img {
   height: 50px;
   width: 150px;
-  background-color: var(--golden);
   padding: 6px;
 }
 
 .logo-img-main {
-  height: 50px;
-  width: 150px;
-  background-color: var(--golden);
+  height: 60px;
+  width: 130px;
   padding: 6px;
 }
 
@@ -197,8 +188,7 @@ header .search input {
 }
 
 header .search input::placeholder {
-  font-size: 18px;
-
+  font-size: 0.9rem;
 }
 
 .profile {
@@ -208,9 +198,8 @@ header .search input::placeholder {
   position: relative;
 }
 
-.h-right {
-  gap: 20px;
-
+.gap-1 {
+  gap: 1rem;
 }
 
 .profile img {
@@ -230,9 +219,8 @@ header .search input::placeholder {
 }
 
 .admin-list {
-  min-width: 200px;
   z-index: 1;
-  box-shadow: 4px 4px 15px 0px var(--black);
+  box-shadow: 4px 4px 10px 0px black;
   position: absolute;
   top: 125%;
   right: 0%;
@@ -242,7 +230,7 @@ header .search input::placeholder {
 
 .admin-list h2 {
   text-align: center;
-  font-size: 22px;
+  font-size: 1.2rem;
   font-weight: bold;
   padding: 10px;
   color: var(--txtwhite);
@@ -250,13 +238,13 @@ header .search input::placeholder {
 }
 
 .admin-list ul {
-  padding: 10px;
   background-color: var(--white);
   color: var(--grey);
+  width: 150px;
 }
 
 .admin-list ul li {
-  padding: 9px 0px;
+  padding: 9px;
   text-align: start;
 }
 
@@ -267,40 +255,31 @@ header .search input::placeholder {
 .language {
   position: relative;
   cursor: pointer;
-  font-family: var(--font);
-  font-size: 18px;
-  gap: 8px;
+  font-size: 1.1rem;
 }
 
 .lang-list {
-  min-width: 150px;
-  box-shadow: 4px 4px 15px 0px var(--black);
+  box-shadow: 4px 4px 15px 0px black;
   position: absolute;
-  top: 199%;
+  top: 176%;
   right: 0%;
   display: none;
   background-color: var(--white);
+  width: 120px;
 }
 
 .lang-list ul li {
-  padding: 9px 0;
+  padding: 9px;
   color: var(--grey);
   text-align: center;
 }
 
 .btn {
-  padding: 10px;
+  padding: 6px 10px;
   background-color: var(--secondary);
   color: var(--txtwhite);
-  border-radius: 20px;
-}
-
-.fa-earth-americas {
-  color: orange;
-}
-
-.modes i {
-  font-size: 1.7rem;
+  font-weight: bold;
+  border-radius: 10px;
 }
 
 /* aside starts  */
@@ -308,33 +287,39 @@ aside {
   height: 100vh;
   width: 230px;
   color: var(--txtwhite);
-  font-family: var(--font);
-  text-align: center;
   position: fixed;
   top: 0;
   transition: all linear 0.1s;
   z-index: 99;
+  border: 0.1px solid rgb(88, 88, 88);
 }
 
 .logo {
   background-color: var(--golden);
   min-height: 60px;
+  border-bottom: 1px solid rgba(88, 88, 88, 0.448);
 }
 
-.logo i {
+.fa-bars-staggered,
+.fa-xmark,
+.fa-bars,
+.fa-id-card,
+.fa-cloud-moon,
+.fa-language,
+.fa-sun-plant-wilt {
   font-size: 25px;
   cursor: pointer;
+  color: var(--icnblue1);
 }
 
 .sidebar {
   height: 100vh;
   background-color: var(--primary);
   overflow-y: scroll;
-
 }
 
 .sidebar::-webkit-scrollbar {
-  width: 6px;
+  width: 3px;
 }
 
 .sidebar::-webkit-scrollbar-thumb {
@@ -351,7 +336,7 @@ aside {
   border-bottom: 1px solid black;
   text-align: justify;
   padding: 12px 0px;
-  font-size: 16px;
+  font-size: 0.9rem;
   letter-spacing: 1px;
 }
 
@@ -365,8 +350,7 @@ aside {
 
 .nav-list a i {
   color: var(--golden);
-  margin-right: 10px;
-  font-size: 25px;
+  font-size: 22px;
 }
 
 .nav-list .drop {
@@ -380,10 +364,7 @@ aside {
 .dropdown {
   background-color: var(--secondary);
   min-width: 100%;
-  padding: 12px 0;
-  margin: 12px 0 0 0;
-  margin-bottom: 1px solid black;
-
+  margin: 5px 0 0 0;
 }
 
 .dropdown li {
@@ -400,14 +381,6 @@ aside {
   margin: 5px;
 }
 
-
-.sm-tglr i {
-  margin-right: 20px;
-  color: var(--secondary);
-  font-size: 20px;
-}
-
-
 /* main starts */
 main {
   margin-left: 230px;
@@ -417,8 +390,7 @@ main {
 }
 
 .main-title {
-  padding: 22px;
-  font-family: var(--font);
+  padding: 10px 0 0 22px;
 }
 
 .main-title h3 {
@@ -433,70 +405,92 @@ main {
   color: var(--golden);
 }
 
-
 .main-content h4 {
   font-size: 20px;
   font-weight: 400;
-  font-family: var(--font);
   margin: 6px 0;
   color: var(--grey);
 }
 
 .main-content span {
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
-.dashboard-students i {
+.dashboard-students i,
+.dashboard-teachers i,
+.dashboard-parents i,
+.dashboard-earnings i {
   font-size: 40px;
   padding: 18px;
   border-radius: 24%;
+}
+
+.dashboard-students i {
   color: var(--green);
   background-color: var(--limegreen);
 }
 
 .dashboard-teachers i {
-  font-size: 40px;
-  padding: 18px;
-  border-radius: 24%;
-  color: var(--icnblu);
+  color: var(--icnblue2);
   background-color: var(--lightblu);
 }
 
-
 .dashboard-parents i {
-  font-size: 40px;
-  padding: 18px;
-  border-radius: 24%;
   color: var(--orange);
   background-color: var(--lightorng);
 }
 
 .dashboard-earnings i {
-  font-size: 40px;
-  padding: 18px;
-  border-radius: 24%;
   color: var(--red);
   background-color: var(--lightred);
 }
 
-.expenses-graph {
+/* gridsystem */
+.main-content {
+  margin: 10px 20px;
+  display: grid;
+  grid-column-gap: 22px;
+  grid-row-gap: 22px;
+}
+
+.dashboard-students,
+.dashboard-teachers,
+.dashboard-parents,
+.dashboard-earnings,
+.earnings-graph,
+.expenses-graph,
+.students-graph,
+.event-calender {
   box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
   background-color: var(--white);
-  grid-column: 7 / span 3;
   border-radius: 14px;
 }
 
-.students-graph {
-  box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-  background-color: var(--white);
-  grid-column: 10 / span 3;
+.dashboard-students,
+.dashboard-teachers,
+.dashboard-parents,
+.dashboard-earnings {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.facebook-handle,
+.twitter-handle,
+.gplus-handle,
+.linkedin-handle {
+  text-align: center;
+  padding: 20px;
+  background-color: var(--primary);
   border-radius: 14px;
 }
 
-.event-calender {
-  box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
-  background-color: var(--white);
-  grid-column: 1 / span 4;
+.branches {
+  position: relative;
+  background-color: #000000;
+  background-image:
+    radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
+    radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
   border-radius: 14px;
 }
 
@@ -506,7 +500,7 @@ main {
 }
 
 .overlay p {
-  color: var(--lightred);
+  color: var(--lightred2);
   padding: 4px;
   font-weight: bold;
   font-size: 22px;
@@ -514,44 +508,38 @@ main {
   left: 0%;
 }
 
+.notice-board {
+  padding: 0 14px;
+  background-color: var(--secondary);
+  border-radius: 14px;
+}
+
 .notice {
   padding: 10px 0;
   height: 85%;
   overflow-y: scroll;
 }
 
-.notice::-webkit-scrollbar {
-  width: 5px;
-}
-
-.notice::-webkit-scrollbar-thumb {
-  background-color: orange;
-  border-radius: 1px;
-}
-
-.notice::-webkit-scrollbar-track {
-  background-color: #ffe83d;
-}
-
 .notice-board h3 {
   font-size: 22px;
   font-weight: bold;
   margin: 10px 0;
+  color: var(--lightred2);
 }
 
 .notice-board p {
-  font-size: 1rem;
-  color: var(--limegreen);
+  font-size: 0.9rem;
   margin: 16px 0;
+  color: var(--limegreen2);
 }
 
 .notice-board span {
   font-size: 0.8rem;
 }
 
-.notice-board .btn {
-  padding: 4px 12px;
-  border-radius: 25px;
+.border-btm {
+  border-bottom: 1px solid white;
+  margin-bottom: 20px;
 }
 
 .clr-green {
@@ -570,18 +558,36 @@ main {
   background-color: var(--pink);
 }
 
-.color-white {
-  color: var(--txtwhite);
-  font-size: 20px;
-  margin: 10px 0;
-  font-family: var(--font);
+.count {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.capsule {
+  padding: 3px 5px;
+  border-radius: 9px;
+  color: var(--txtblack);
+  font-weight: bold;
+}
+
+.notice::-webkit-scrollbar {
+  width: 3px;
+}
+
+.notice::-webkit-scrollbar-thumb {
+  background-color: orange;
+  border-radius: 1px;
+}
+
+.notice::-webkit-scrollbar-track {
+  background-color: #ffe83d;
 }
 
 .fa-brands {
-  color: var(--txtwhite);
+  color: var(--golden);
   display: block;
-  font-size: 20px;
-  margin: 10px;
+  font-size: 2rem;
+  margin: 10px 0;
 }
 
 /* calender js  */
@@ -633,7 +639,7 @@ main {
 .weekdays {
   width: 100%;
   height: 12%;
-  color: var(--limegreen);
+  color: var(--limegreen2);
   display: flex;
   align-items: center;
 }
diff --git a/assets/jquery/main.js b/assets/jquery/main.js
index f290867..995106b 100644
--- a/assets/jquery/main.js
+++ b/assets/jquery/main.js
@@ -24,7 +24,42 @@ $(document).ready(function () {
   $('.fa-bars').click(function () {
     $('aside').toggle('2000');
   });
+  // modeswitch
+  $('.fa-cloud-moon').click(function () {
+    $(this).hide();
+    $('.fa-sun-plant-wilt').show();
+    $(':root').css('--white', '#121212');
+    $(':root').css('--black', '#ffffffba');
+    $(':root').css('--bgprime', '#000000');
+    $(':root').css('--primary', '#121212');
+    $(':root').css('--icnblue1', '#ffffffba');
+    // lightshades
+    $(':root').css('--lightred', '#4c1a1a');
+    $(':root').css('--lightblu', '#0e293f');
+    $(':root').css('--lightorng', '#472c10');
+    $(':root').css('--limegreen', '#0b3b20');
+  });
+  $('.fa-sun-plant-wilt').click(function () {
+    $(this).hide();
+    $('.fa-cloud-moon').show();
+    $(':root').css('--white', '#ffffff');
+    $(':root').css('--black', '#000000');
+    $(':root').css('--bgprime', '#f0f1f3');
+    $(':root').css('--primary', '#042954');
+    $(':root').css('--icnblue1', '#042954');
+    // lightshades
+    $(':root').css('--lightred', '#FFEAEA');
+    $(':root').css('--lightblu', '#E1F1FF');
+    $(':root').css('--lightorng', '#FFF2D8');
+    $(':root').css('--limegreen', '#D1F3E0');
+  });
+
+
+
+
 });
+
+
 // counter js 
 $(document).ready(function () {
 
diff --git a/index.html b/index.html
index 457e900..4d352d1 100644
--- a/index.html
+++ b/index.html
@@ -25,21 +25,19 @@
   <header>
     <div class="row d-flex justify-between align-center">
       <div class="search">
-        <a href="javascript:void(0)">
-          <i class="fa-solid fa-magnifying-glass"></i>
-        </a>
+        <i class="fa-solid fa-magnifying-glass"></i>
         <input type="search" name="" id="" placeholder="Search Something...." />
       </div>
       <img src="assets/images/logo.png" alt="" class="logo-img-main bg-golden" />
-      <div class="h-right h-rt d-flex justify-end align-center">
-        <div class="profile d-flex align-center">
-          <div class="user">
-            <h3>Steve Zone</h3>
+      <div class="d-flex justify-end align-center gap-1">
+        <div class="profile d-flex align-center gap-1">
+          <div class="user ">
+            <h4>Ashutosh</h4>
             <p>Admin</p>
           </div>
           <img src="assets/images/admin.jpg" alt="" />
           <div class="admin-list admin-drop">
-            <h2>Steve Zone</h2>
+            <h2>Ashutosh</h2>
             <ul>
               <li><i class="fa-solid fa-user"></i>My Profile</li>
               <li><i class="fa-solid fa-list-check"></i>Task</li>
@@ -49,9 +47,7 @@ <h2>Steve Zone</h2>
           </div>
         </div>
         <div class="language d-flex justify-evenly">
-          <i class="fa-solid fa-earth-americas"></i>
-          <p>EN</p>
-          <i class="fa-solid fa-caret-down "></i>
+          <i class="fa-solid fa-language"></i>
           <div class="lang-list">
             <ul class="lang-items">
               <li>GUJRATI</li>
@@ -62,29 +58,23 @@ <h2>Steve Zone</h2>
             </ul>
           </div>
         </div>
-        <!-- <div class="modes">
-          <i class="fa-solid fa-moon mode-switch"></i>
-        </div> -->
+        <i class="fa-solid fa-cloud-moon"></i>
+        <i class="fa-solid fa-sun-plant-wilt d-none"></i>
+        <a href="login.html" class="d-none log-sm"><i class="fa-solid fa-id-badge"></i></a>
+        <i class="fa-solid fa-bars d-none"></i>
         <div class="log-in-out d-flex justify-center">
           <a href="login.html">
             <p class="btn">Logout</p>
           </a>
         </div>
       </div>
-      <div class="sm-tglr">
-        <i class="fa-solid fa-bars"></i>
-        <i class="fa-solid fa-people-group sm-screen"></i>
-      </div>
-
     </div>
   </header>
 
   <!-- aside starts  -->
   <aside>
     <div class="logo d-flex justify-around align-center">
-      <!-- <a href="login.html"> -->
       <img src="assets/images/logo.png" class="logo-img" alt="" />
-      <!-- </a> -->
       <i class="fa-solid fa-bars-staggered align-center bar"></i>
     </div>
     <div class="sidebar">
@@ -280,28 +270,28 @@ <h3>Admin Dashboard</h3>
         </p>
       </div>
       <div class="main-content">
-        <div class="dashboard-students d-flex align-center justify-evenly">
+        <div class="dashboard-students d-flex f-wrap align-center justify-evenly">
           <i class="fa-solid fa-children"></i>
           <div>
             <h4>Students</h4>
             <span class="count">2000</span>
           </div>
         </div>
-        <div class="dashboard-teachers d-flex align-center justify-evenly">
+        <div class="dashboard-teachers d-flex f-wrap align-center justify-evenly">
           <i class="fa-solid fa-chalkboard-user"></i>
           <div>
             <h4>Teachers</h4>
             <span class="count">200</span>
           </div>
         </div>
-        <div class="dashboard-parents d-flex align-center justify-evenly">
+        <div class="dashboard-parents d-flex f-wrap align-center justify-evenly">
           <i class="fa-solid fa-people-group"></i>
           <div>
             <h4>Parents</h4>
             <span class="count">3948</span>
           </div>
         </div>
-        <div class="dashboard-earnings d-flex align-center justify-evenly">
+        <div class="dashboard-earnings d-flex f-wrap align-center justify-evenly">
           <i class="fa-solid fa-sack-dollar"></i>
           <div>
             <h4>Earnings</h4>
@@ -350,40 +340,40 @@ <h1></h1>
         <div class="notice-board">
           <h3>Notice Board</h3>
           <div class="notice">
-            <div class="bdr-btm-1px p-xy-1rem">
-              <span class="btn clr-red">16 June, 2025</span>
+            <div class="btn-2 border-btm">
+              <span class="capsule clr-red">16 June, 2025</span>
               <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Perspiciatis, voluptatibus!
               </p>
               <p>Selmon Boi /<span> 5 min ago</span></p>
             </div>
-            <div class="bdr-btm-1px p-xy-1rem">
-              <span class="btn clr-green">16 June, 2025</span>
+            <div class="btn-2 border-btm">
+              <span class="capsule clr-yellow">16 June, 2025</span>
               <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Perspiciatis, voluptatibus!
               </p>
               <p>Selmon Boi /<span> 5 min ago</span></p>
             </div>
-            <div class="bdr-btm-1px p-xy-1rem">
-              <span class="btn clr-yellow">16 June, 2025</span>
+            <div class="btn-2 border-btm">
+              <span class="capsule clr-pink">16 June, 2025</span>
               <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Perspiciatis, voluptatibus!
               </p>
               <p>Selmon Boi /<span> 5 min ago</span></p>
             </div>
-            <div class="bdr-btm-1px p-xy-1rem">
-              <span class="btn clr-pink">16 June, 2025</span>
+            <div class="btn-2 border-btm">
+              <span class="capsule clr-green">16 June, 2025</span>
               <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Perspiciatis, voluptatibus!
               </p>
               <p>Selmon Boi /<span> 5 min ago</span></p>
             </div>
-            <div class="bdr-btm-1px p-xy-1rem">
-              <span class="btn clr-red">16 June, 2025</span>
+            <div class="btn-2 border-btm">
+              <span class="capsule clr-red">16 June, 2025</span>
               <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Perspiciatis, voluptatibus!
@@ -395,29 +385,29 @@ <h3>Notice Board</h3>
         <div class="facebook-handle">
           <a href="javascript:void(0)">
             <i class="fa-brands fa-facebook"></i>
-            <span class="color-white">Like us on Facebook</span>
-            <p class="count color-white">500</p>
+            <span class="">Like us on Facebook</span>
+            <p class="count mt-1">500</p>
           </a>
         </div>
         <div class="twitter-handle">
           <a href="javascript:void(0)">
             <i class="fa-brands fa-twitter"></i>
-            <span class="color-white">Like us on Twitter</span>
-            <p class="count color-white">600</p>
+            <span class="">Like us on Twitter</span>
+            <p class="count mt-1 ">600</p>
           </a>
         </div>
         <div class="gplus-handle">
           <a href="javascript:void(0)">
             <i class="fa-brands fa-google-plus"></i>
-            <span class="color-white">See us on GooglePlus</span>
-            <p class="count color-white">300</p>
+            <span class="">See us on GooglePlus</span>
+            <p class="count mt-1">300</p>
           </a>
         </div>
         <div class="linkedin-handle">
           <a href="javascript:void(0)">
             <i class="fa-brands fa-linkedin"></i>
-            <span class="color-white">Follow us on Linkedin</span>
-            <p class="count color-white">700</p>
+            <span class="">Follow us on Linkedin</span>
+            <p class="count mt-1 ">700</p>
           </a>
         </div>
       </div>
diff --git a/login.html b/login.html
index e57a5ca..0d435c1 100644
--- a/login.html
+++ b/login.html
@@ -16,9 +16,9 @@
 </head>
 
 <body>
-  <div class="form-container">
+  <div class="form-container d-flex-col justify-center align-center">
     <form class="form d-flex-col">
-      <p class="title d-flex align-center">register now</p>
+      <p class="title">register now</p>
       <p class="message">Signup now and get full access to our app.</p>
       <div class="d-flex gap-1">
         <label>