diff --git a/frontend/components/Contributors/Contributors.jsx b/frontend/components/Contributors/Contributors.jsx
index b5c2d1e..554b828 100644
--- a/frontend/components/Contributors/Contributors.jsx
+++ b/frontend/components/Contributors/Contributors.jsx
@@ -4,6 +4,9 @@ import styles from '../../styles/Contributors.module.css'
import Image from 'next/image'
import profilepic from 'assets/ContributorsImages/sampleImage.jpg'
import { GitHub } from '@mui/icons-material'
+import Head from "next/head";
+import Script from "next/script";
+
export default function Contributors() {
const [contributors, setContributors] = useState([
{
@@ -62,13 +65,24 @@ export default function Contributors() {
},
])
return (
+ <>
+
+
+
+
+
<>
CONTRIBUTORS
-
+
+
{contributors.map((contributor) => {
return (
-
+
@@ -89,10 +103,13 @@ export default function Contributors() {
+
)
})}
-
+
+
+ >
+
>
-
)
}
diff --git a/frontend/components/Contributors/Contributors.style.js b/frontend/components/Contributors/Contributors.style.js
index ca640ee..a5b0617 100644
--- a/frontend/components/Contributors/Contributors.style.js
+++ b/frontend/components/Contributors/Contributors.style.js
@@ -3,24 +3,25 @@ export default styled.section`
display: flex;
flex-direction: column;
justify-content: center;
- .contributor-cards {
- margin-top: 100px;
- display: grid;
- grid-template-columns: auto auto auto auto;
- justify-content: space-around;
- align-items: center;
- grid-gap: 20px;
- overflow: scroll;
+ .contributor-cards{
+ display: flex;
+ width: 85%;
+ align-item: center;
+ justify-content: center;
+ margin:20px;
+ margin-left: 6%
}
.contributor-card {
- width: 190px;
- height: 210px;
+ width: 240px;
+ height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
border-radius: 10px;
+ margin: 15px;
+ padding: 5px;
}
.contributor-cardPointerStart {
width: 180px;
@@ -62,56 +63,5 @@ export default styled.section`
font-weight: bold;
padding-left: 4px;
}
- @media (max-width: 600px) {
- .contributor-cards {
- margin-top: 10px;
- display: grid;
- grid-template-columns: auto auto auto;
- justify-content: space-around;
- align-items: center;
- grid-gap: 10px;
- overflow: scroll;
- }
- .contributor-card {
- width: 170px;
- height: 190px;
- }
- .contributor-cardPointerEnd {
- width: 150px;
- }
- .contributor-cardPointerStart {
- width: 150px;
- }
- .contributor-Name {
- font-size: 20px;
- }
- .contributor-GithubUsername {
- font-size: 16px;
- }
- }
- @media (max-width: 400px) {
- .contributor-cards {
- display: grid;
- grid-template-columns: auto auto;
- justify-content: space-around;
- grid-gap: 10px;
- overflow: scroll;
- }
- .contributor-card {
- width: 130px;
- height: 190px;
- }
- .contributor-cardPointerEnd {
- width: 120px;
- }
- .contributor-cardPointerStart {
- width: 120px;
- }
- .contributor-Name {
- font-size: 15px;
- }
- .contributor-GithubUsername {
- font-size: 15px;
- }
- }
+
`
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0f12845..8326db9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -401,14 +401,9 @@
"resolved" "https://registry.npmjs.org/@next/env/-/env-12.0.9.tgz"
"version" "12.0.9"
-"@next/swc-linux-x64-gnu@12.0.9":
- "integrity" "sha512-bJZ9bkMkQzsY+UyWezEZ77GWQ4TzwKeXdayX3U3+aEkL8k5C6eKBXlidWdrhu0teLmaUXIyWerWrLnJzwGXdfw=="
- "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.9.tgz"
- "version" "12.0.9"
-
-"@next/swc-linux-x64-musl@12.0.9":
- "integrity" "sha512-SR9p0R+v1T32DTXPVAXZw31pmJAkSDotC6Afy+mfC0xrEL3pp95R8sGXYAAUCEPkQp0MEeUOVy2LrToe92X7hQ=="
- "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.9.tgz"
+"@next/swc-win32-x64-msvc@12.0.9":
+ "integrity" "sha512-1c/sxp/4Qz4F6rCxiYqAnrmghCOFt5hHZ9Kd+rXFW5Mqev4C4XDOUMHdBH55HgnJZqngYhOE0r/XNkCtsIojig=="
+ "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.9.tgz"
"version" "12.0.9"
"@popperjs/core@^2.10.1", "@popperjs/core@^2.10.2", "@popperjs/core@^2.4.4":