handled the studentlist overflow and responsiveness

client/index.html

@@ -41,56 +41,59 @@
       bottom: 0;
     }
 
-  .preloader-equalizer ul li {
-     &:nth-child(1) {
+    .preloader-equalizer ul li:nth-child(1) {
       left: 0;
       animation: cssload-sequence1 1.15s ease infinite 0;
       -o-animation: cssload-sequence1 1.15s ease infinite 0;
       -ms-animation: cssload-sequence1 1.15s ease infinite 0;
       -webkit-animation: cssload-sequence1 1.15s ease infinite 0;
       -moz-animation: cssload-sequence1 1.15s ease infinite 0;
     }
-    &:nth-child(2) {
+
+    .preloader-equalizer ul li:nth-child(2) {
       left: 15px;
       animation: cssload-sequence2 1.15s ease infinite 0.12s;
       -o-animation: cssload-sequence2 1.15s ease infinite 0.12s;
       -ms-animation: cssload-sequence2 1.15s ease infinite 0.12s;
       -webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s;
       -moz-animation: cssload-sequence2 1.15s ease infinite 0.12s;
     }
-    &:nth-child(3) {
+
+    .preloader-equalizer ul li:nth-child(3) {
       left: 29px;
       animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
       -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
       -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
       -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
       -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
     }
-    &:nth-child(4) {
+
+    .preloader-equalizer ul li:nth-child(4) {
       left: 44px;
       animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
       -o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
       -ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
       -webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
       -moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
     }
-    &:nth-child(5) {
+
+    .preloader-equalizer ul li:nth-child(5) {
       left: 58px;
       animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
       -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
       -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
       -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
       -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
     }
-    &:nth-child(6) {
+
+    .preloader-equalizer ul li:nth-child(6) {
       left: 73px;
       animation: cssload-sequence2 1.15s ease infinite 0.58s;
       -o-animation: cssload-sequence2 1.15s ease infinite 0.58s;
       -ms-animation: cssload-sequence2 1.15s ease infinite 0.58s;
       -webkit-animation: cssload-sequence2 1.15s ease infinite 0.58s;
       -moz-animation: cssload-sequence2 1.15s ease infinite 0.58s;
     }
-  }
 
 
 @keyframes cssload-sequence1 {

client/package.json

@@ -20,6 +20,7 @@
     "framer-motion": "^10.16.4",
     "gsap": "^3.12.5",
     "locomotive-scroll": "^5.0.0-beta.12",
+    "postcss-nesting": "^13.0.1",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-cookie": "^4.1.1",

client/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+
     tailwindcss: {},
     autoprefixer: {},
   },

client/src/Components/Footer.jsx

@@ -5,63 +5,64 @@ import { Link } from "react-router-dom";
 
 export default function Footer() {
   return (
-    <footer class="bg-white shadow dark:bg-gray-900 ">
-      <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
-        <div class="sm:flex sm:items-center sm:justify-between">
-        <a href="/" className="flex items-center logo">
-            <img
-              src="https://cdn-icons-png.flaticon.com/512/3413/3413535.png"
-              className="h-8 mr-3"
-              alt="subject Logo"
-            />
-            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-              ElectiveHub
-            </span>
-          </a>
-          <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-            <li>
-              <a href="/Contact" class="mr-4 hover:underline md:mr-6 ">
-                About
-              </a>
-            </li>
-            <li>
-              <a href="/privacypolicy" class="mr-4 hover:underline md:mr-6">
-                Privacy Policy
-              </a>
-            </li>
-            <li>
-              <a href="/licensing" class="mr-4 hover:underline md:mr-6 ">
-                Licensing
-              </a>
-            </li>
-            <li>
-              <a href="/Contact" class="hover:underline">
-                Contact
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://github.com/TechNodes2-0"
-                className="hover:underline flex items-center mr-4 md:mr-6"
-              >
-                <img
-                  src="https://cdn-icons-png.flaticon.com/512/733/733553.png"
-                  className="h-6 ml-5 mr-4 md:mr-6"
-                  alt="GitHub Logo"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
-        <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-        <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400" style={{paddingTop:'5%'}}>
-          © {new Date().getFullYear()}{" "}
-          <Link to="/" class="hover:underline">
-            ElectiveHub™
-          </Link>
-          . All Rights Reserved.
-        </span>
+    <footer className="bg-white shadow dark:bg-gray-900">
+    <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+        <a href="/" className="flex items-center logo mb-4 sm:mb-0">
+          <img
+            src="https://cdn-icons-png.flaticon.com/512/3413/3413535.png"
+            className="h-8 mr-3"
+            alt="subject Logo"
+          />
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+            ElectiveHub
+          </span>
+        </a>
+        <ul className="flex flex-wrap items-center text-sm font-medium text-gray-500 dark:text-gray-400">
+          <li>
+            <a href="/Contact" className="mr-4 hover:underline md:mr-6">
+              About
+            </a>
+          </li>
+          <li>
+            <a href="/privacypolicy" className="mr-4 hover:underline md:mr-6">
+              Privacy Policy
+            </a>
+          </li>
+          <li>
+            <a href="/licensing" className="mr-4 hover:underline md:mr-6">
+              Licensing
+            </a>
+          </li>
+          <li>
+            <a href="/Contact" className="mr-4 hover:underline md:mr-6">
+              Contact
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/TechNodes2-0"
+              className="flex items-center hover:underline"
+            >
+              <img
+                src="https://cdn-icons-png.flaticon.com/512/733/733553.png"
+                className="h-6 ml-5 mr-4 md:mr-6"
+                alt="GitHub Logo"
+              />
+            </a>
+          </li>
+        </ul>
       </div>
-    </footer>
+      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400 pt-5">
+        © {new Date().getFullYear()}{" "}
+        <Link to="/" className="hover:underline">
+          ElectiveHub™
+        </Link>
+        . All Rights Reserved.
+      </span>
+    </div>
+  </footer>
+
   );
 }