bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

created array.map and worked on responsiveness

This commit is contained in:
rakesh 2022-03-23 05:03:01 +05:30
parent 6edf21a6f9
commit 74a240688a
3 changed files with 115 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
frontend/components/Contributors/Contributors.jsx
View File

@ -1,72 +1,96 @@
import React from 'react'
import React, { useState } from 'react'
import ContributorsStyle from './Contributors.style'
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'
export default function Contributors() {
const [contributors, setContributors] = useState([
{
id: 1,
profilepic,
name: 'Jacob Myers',
gitHubUsername: '@jacob',
},
{
id: 2,
profilepic,
name: 'John Doe',
gitHubUsername: '@john',
},
{
id: 3,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 4,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 5,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 6,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 7,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 8,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
{
id: 9,
profilepic,
name: 'Sara Williams',
gitHubUsername: '@sara',
},
])
return (
<ContributorsStyle>
<>
<div className={styles.head}>CONTRIBUTORS</div>
<div className="contributor-cards">
<div className="contributor-card">
<div className="contributor-cardPointerStart">
<div id="circle"></div>
</div>
<div id="ImageContainer">
<Image
src={profilepic}
alt="Contributors Profile Picture"
width={'100px'}
height={'100px'}
className="contributor-Pic"
/>
</div>
<div className="contributor-Name">Jacob Myers</div>
<div className="contributor-GithubUsername">
<GitHub />
<span id="username">@jacob</span>
</div>
</div>
<div className="contributor-card">
<div className="contributor-cardPointerCenter">
<div id="circle"></div>
</div>
<div id="ImageContainer">
<Image
src={profilepic}
alt="Contributors Profile Picture"
width={'100px'}
height={'100px'}
className="contributor-Pic"
/>
</div>
<div className="contributor-Name">Jacob Myers</div>
<div className="contributor-GithubUsername">
<GitHub />
<span id="username">@jacob</span>
</div>
</div>
<div className="contributor-card">
<div className="contributor-cardPointerEnd">
<div id="circle"></div>
</div>
<div id="ImageContainer">
<Image
src={profilepic}
alt="Contributors Profile Picture"
width={'100px'}
height={'100px'}
className="contributor-Pic"
/>
</div>
<div className="contributor-Name">Jacob Myers</div>
<div className="contributor-GithubUsername">
<GitHub />
<span id="username">@jacob</span>
</div>
</div>
{contributors.map((contributor) => {
return (
<div className="contributor-card" key={contributor.id}>
<div className="contributor-cardPointerStart">
<div id="circle"></div>
</div>
<div id="ImageContainer">
<Image
src={contributor.profilepic}
alt="Contributors Profile Picture"
width={'100px'}
height={'100px'}
className="contributor-Pic"
/>
</div>
<div id="contributorDetailsWrapper">
<div className="contributor-Name">{contributor.name}</div>
<div className="contributor-GithubUsername">
<GitHub />
<span id="username">{contributor.gitHubUsername}</span>
</div>
</div>
</div>
)
})}
</div>
</>
</ContributorsStyle>

48
frontend/components/Contributors/Contributors.style.js
View File

@ -4,9 +4,13 @@ export default styled.section`
flex-direction: column;
justify-content: center;
.contributor-cards {
margin-top: -200px;
display: flex;
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-card {
width: 190px;
@ -23,16 +27,6 @@ export default styled.section`
display: flex;
justify-content: flex-start;
}
.contributor-cardPointerCenter {
width: 180px;
display: flex;
justify-content: center;
}
.contributor-cardPointerEnd {
width: 180px;
display: flex;
justify-content: flex-end;
}
#circle {
height: 10px;
width: 10px;
@ -40,17 +34,24 @@ export default styled.section`
background-color: green;
}
.contributor-Pic {
border-radius: 50%;
width: 100px;
height: 100px;
}
#ImageContainer {
border-radius: 50%;
border: 3px solid green;
border: 3px solid #35cdf0;
overflow: hidden;
}
.contributor-Name {
color: #00bfff;
color: #1d92e0;
font-size: 25px;
font-weight: bold;
}
#contributorDetailsWrapper {
display: flex;
flex-direction: column;
justfiy-content: flex-start;
}
.contributor-GithubUsername {
display: flex;
justify-content: baseline;
@ -59,10 +60,17 @@ export default styled.section`
#username {
color: grey;
font-weight: bold;
padding-left: 4px;
}
@media (max-width: 600px) {
.contributor-cards {
width: 100vw;
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;
@ -78,12 +86,16 @@ export default styled.section`
font-size: 20px;
}
.contributor-GithubUsername {
font-size: 15px;
font-size: 16px;
}
}
@media (max-width: 400px) {
.contributor-cards {
width: 100vw;
display: grid;
grid-template-columns: auto auto;
justify-content: space-around;
grid-gap: 10px;
overflow: scroll;
}
.contributor-card {
width: 130px;

5
frontend/styles/Contributors.module.css
View File

@ -2,15 +2,16 @@
font-family: 'Montserrat Alternates', sans-serif;
color: #fff;
/* text-shadow: 3px 2px 1px black; */
margin-top: 100px;
line-height: 1.15;
font-size: 5.5rem;
font-weight: bold;
margin-bottom: 300px;
text-align: center;
}
@media (max-width: 600px) {
.head {
font-size: 2.5rem;
margin-bottom: 250px;
margin-top: 2em;
margin-bottom: 100px;
}
}