From a94d623186f27000b3e1c3e76c51ca71c14a3498 Mon Sep 17 00:00:00 2001
From: MAVRICK <mavrickrishi@gmail.com>
Date: Tue, 14 May 2024 09:25:14 +0530
Subject: [PATCH] rectified all the css error except about page

---
 src/App.js                |  34 ++++----
 src/pages/About/about.css | 166 ++++++++++++++++++++++++++++++++++++++
 src/pages/About/index.js  |  44 +++-------
 src/pages/About/style.css | 152 ----------------------------------
 4 files changed, 193 insertions(+), 203 deletions(-)
 create mode 100644 src/pages/About/about.css
 delete mode 100644 src/pages/About/style.css

diff --git a/src/App.js b/src/App.js
index 1760c5c..c49d4a4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,37 +1,32 @@
-import React, { useEffect, useState, createContext } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "./App.css";
-import "./responsive.css";
-import { Routes, Route, HashRouter } from "react-router-dom";
 import {
   getDatabase,
-  ref,
   onValue,
-  set,
-  push,
-  child,
-  remove,
+  ref
 } from "firebase/database";
-import Header from "./components/header/header";
+import React, { createContext, useEffect, useState } from "react";
+import { HashRouter, Route, Routes } from "react-router-dom";
+import "./App.css";
+import Loader from "./assets/images/loading.gif";
 import Footer from "./components/footer/footer";
+import Header from "./components/header/header";
+import About from "./pages/About";
+import AddProductForm from "./pages/AddProd";
+import DetailsPage from "./pages/Details";
 import Home from "./pages/Home/index";
-import About from "./pages/About/index";
 import Listing from "./pages/Listing";
 import NotFound from "./pages/NotFound";
-import DetailsPage from "./pages/Details";
-import axios from "axios";
-import Cart from "./pages/cart";
-import Wishlist from "./pages/wishList";
 import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
-import Loader from "./assets/images/loading.gif";
-import AddProductForm from "./pages/AddProd";
+import Cart from "./pages/cart";
+import Wishlist from "./pages/wishList";
+import "./responsive.css";
 
 // import data from './data';
+import { collection, doc, getDocs } from "firebase/firestore";
 import MapComponent from "./components/map/ITEMmap";
-import SellerForm from "./pages/SellerRegistration";
 import { db } from "./firebase";
-import { collection, doc, getDocs } from "firebase/firestore";
+import SellerForm from "./pages/SellerRegistration";
 
 const MyContext = createContext();
 
@@ -302,3 +297,4 @@ function App() {
 export default App;
 
 export { MyContext };
+
diff --git a/src/pages/About/about.css b/src/pages/About/about.css
new file mode 100644
index 0000000..aa204b5
--- /dev/null
+++ b/src/pages/About/about.css
@@ -0,0 +1,166 @@
+.about-container * {
+  text-decoration: none;
+  list-style: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-container {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 2vw;
+  padding-top: 2vw;
+  overflow: hidden;
+}
+
+.about-container > .contributor-text {
+  text-transform: capitalize;
+  font-size: 40px;
+  color: #008080;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+
+.about-container > .container-grid {
+  padding-top: 1vw;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.container-grid > .MuiGrid-item-root {
+  display: flex;
+  justify-content: center;
+}
+
+.container-grid > .MuiGrid-item-root > .card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  border: 0.5px solid #008080;
+  transition: box-shadow 1s;
+}
+
+.container-grid > .MuiGrid-item-root > .card:hover {
+  box-shadow: 10px 10px #008080;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+  padding: 10px;
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  object-fit: cover !important;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-name {
+  font-size: 20px;
+  color: #008080;
+  text-align: center;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+  font-size: 1.2vw;
+  color: #008080;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .temp {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 30px;
+  color: #008080;
+}
+
+@media (max-width: 586px) {
+  .about-container {
+    width: 100%;
+    height: 100%;
+    padding: 5vw;
+  }
+
+  .about-container > .contributor-text {
+    text-align: center;
+    justify-content: center;
+    margin: auto;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 20px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 100%;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media (min-width: 600px) {
+  .about-container {
+    width: 100%;
+    height: 50%;
+    padding: 5vw;
+  }
+
+  .about-container > .contributor-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 24px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 300px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 1024px) {
+  .about-container {
+    width: 100%;
+    height: 100%;
+    padding: 3vw;
+    margin-top: 3.5vw;
+  }
+
+  .about-container > .contributor-text {
+    font-size: 40px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 20px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 300px;
+    height: 50%;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 120px;
+    height: 120px;
+  }
+}
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
index 2985e19..342b7f1 100644
--- a/src/pages/About/index.js
+++ b/src/pages/About/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "./style.css";
+import "./about.css";
 import axios from "axios";
 import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material";
 
@@ -28,46 +28,26 @@ function Tes() {
         {contributors.map((contributor) => (
           <Grid item key={contributor.id}>
             <Card className="card">
-              {window.innerWidth < 580 ? (
-                <div className="img">
-                  <a
-                    href={contributor.html_url}
-                    className="cardLink"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <CardMedia
-                      component="img"
-                      image={contributor.avatar_url}
-                      alt={contributor.login}
-                      className="img"
-                    />
-                  </a>
-                </div>
-              ) : (
-                <div className="img">
-                <a
-                  href={contributor.html_url}
-                  className="cardLink"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+              <a
+                href={contributor.html_url}
+                className="cardLink"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <CardMedia
                   component="img"
                   image={contributor.avatar_url}
                   alt={contributor.login}
                   className="img"
                 />
-                </a>
-                </div>
-              )}
+              </a>
               <CardContent>
                 <Typography className="card-name" variant="h4">
                   {contributor.login}
                 </Typography>
               </CardContent>
-              <CardContent>
-                <Typography className="card-bottom">
+              <CardContent className="card-bottom">
+                <Typography className="text-color">
                   <a
                     href={contributor.html_url}
                     target="_blank"
@@ -83,7 +63,7 @@ function Tes() {
                     rel="noopener noreferrer"
                     className="text-color"
                   >
-                    Contributions : {contributor.contributions}
+                    Contributions: {contributor.contributions}
                   </a>
                 </Typography>
               </CardContent>
@@ -95,4 +75,4 @@ function Tes() {
   );
 }
 
-export default Tes;
\ No newline at end of file
+export default Tes;
diff --git a/src/pages/About/style.css b/src/pages/About/style.css
deleted file mode 100644
index 12ca430..0000000
--- a/src/pages/About/style.css
+++ /dev/null
@@ -1,152 +0,0 @@
-* {
-  text-decoration: none;
-  list-style: none;
-}
-
-.about-container {
-  width: 100%;
-  height: 100%;
-  margin-bottom: 2vw;
-  padding-top: 2vw;
-  overflow: hidden;
-}
-
-.container-grid {
-  padding-top: 1vw;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-}
-
-.contributor-text {
-  text-transform: capitalize;
-  font-size: 40px;
-  color: #008080;
-  font-weight: 500;
-  margin-bottom: 30px;
-}
-
-.text-color {
-  font-size: 1.2vw;
-  color: #008080;
-}
-
-.img {
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  border-radius: 50%;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.card {
-  display: flex;
-  width: 500px;
-  border: 0.5px solid #008080;
-  transition: box-shadow 1s;
-}
-
-.card:hover {
-  box-shadow: 10px 10px #008080;
-}
-
-.card-bottom {
-  display: flex;
-}
-
-.card-name {
-  font-size: 40px;
-  color: #008080;
-}
-
-.temp {
-  margin-left: 5px;
-  margin-right: 5px;
-  font-size: 30px;
-  color: #008080;
-}
-
-@media (max-width: 586px) {
-  .about-container {
-    width: 100%;
-    height: 100%;
-    padding: 5vw;
-  }
-
-  .contributor-text {
-    text-transform: capitalize;
-    font-size: 40px;
-    color: #008080;
-    text-align: center;
-    justify-content: center;
-    margin: auto;
-  }
-
-  .text-color {
-    font-size: 20px;
-  }
-
-  .card {
-    width: 500px;
-  }
-}
-@media (min-width: 600px) {
-  .about-container {
-    width: 100%;
-    height: 50%;
-    padding: 5vw;
-  }
-
-  .contributor-text {
-    text-transform: capitalize;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 50px;
-    color: #008080;
-  }
-
-  .text-color {
-    font-size: 24px;
-    color: #008080;
-  }
-
-  .card {
-    width: 500px;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 1024px) {
-  .about-container {
-    width: 100%;
-    height: 100%;
-    padding: 3vw;
-    margin-top: 3.5vw;
-  }
-
-  .contributor-text {
-    text-transform: capitalize;
-    font-size: 40px;
-    color: #008080;
-  }
-
-  .text-color {
-    font-size: 20px;
-    color: #008080;
-  }
-
-  .card {
-    width: 500px;
-    height: 50%;
-  }
-}
-
-.cardLink{
-  width: 210px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}