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

made contributorsPage based on design

This commit is contained in:
rakesh 2022-03-21 22:53:18 +05:30
parent 1c57bd4508
commit 6edf21a6f9
4 changed files with 166 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/assets/ContributorsImages/sampleImage.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

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

@ -1,17 +1,71 @@
import React 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() {
return (
<ContributorsStyle>
<>
<div className={styles.head}>CONTRIBUTORS</div>
<div className="contributor-cards">
<div className="contributor-card1">
<div className="contributor-cardPointer"></div>
<div className="contributor-Pic"></div>
<div className="contributor-Name"></div>
<div className="contributor-GithubUsername"></div>
<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>
</div>
</>

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

@ -1,6 +1,105 @@
import styled from 'styled-components'
export default styled.section`
display: flex;
justify-content: center;
flex-direction: column;
justify-content: center;
.contributor-cards {
margin-top: -200px;
display: flex;
justify-content: space-around;
}
.contributor-card {
width: 190px;
height: 210px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
border-radius: 10px;
}
.contributor-cardPointerStart {
width: 180px;
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;
border-radius: 50%;
background-color: green;
}
.contributor-Pic {
border-radius: 50%;
}
#ImageContainer {
border-radius: 50%;
border: 3px solid green;
}
.contributor-Name {
color: #00bfff;
font-size: 25px;
font-weight: bold;
}
.contributor-GithubUsername {
display: flex;
justify-content: baseline;
font-size: 20px;
}
#username {
color: grey;
font-weight: bold;
}
@media (max-width: 600px) {
.contributor-cards {
width: 100vw;
}
.contributor-card {
width: 170px;
height: 190px;
}
.contributor-cardPointerEnd {
width: 150px;
}
.contributor-cardPointerStart {
width: 150px;
}
.contributor-Name {
font-size: 20px;
}
.contributor-GithubUsername {
font-size: 15px;
}
}
@media (max-width: 400px) {
.contributor-cards {
width: 100vw;
}
.contributor-card {
width: 130px;
height: 190px;
}
.contributor-cardPointerEnd {
width: 120px;
}
.contributor-cardPointerStart {
width: 120px;
}
.contributor-Name {
font-size: 15px;
}
.contributor-GithubUsername {
font-size: 15px;
}
}
`

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

@ -5,6 +5,12 @@
line-height: 1.15;
font-size: 5.5rem;
font-weight: bold;
margin-bottom:300px;
margin-bottom: 300px;
text-align: center;
}
@media (max-width: 600px) {
.head {
font-size: 2.5rem;
margin-bottom: 250px;
}
}