File size: 1,941 Bytes
e7185a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | import React from 'react'
import styled from 'styled-components'
import CImg from '../assets/illustration-your-users.svg'
import ScoreCard from '../styled_components/Scorecard'
import { media } from '../Utils/helper'
function Contact() {
return (
<Container>
<h1>Contact Us</h1>
<Mdiv>
<Ldiv>
<ScoreCard direction="column" label="Prof. Animesh Mukherjee :" score="animeshm@cse.iitkgp.ac.in"></ScoreCard>
<ScoreCard direction="column" label="Anand Rai :" score="raianand.1991@gmail.com"></ScoreCard>
<ScoreCard direction="column" label="Utkarsh Anand :" score="ua28012006@gmail.com"></ScoreCard>
<ScoreCard direction="column" fontSize={1.3} label="Satyam R :" score="satyamrahangdale196@kgpian.iitkgp.ac.in"></ScoreCard>
</Ldiv>
<Rdiv>
<Image src={CImg}></Image>
</Rdiv>
</Mdiv>
</Container>
)
}
export default Contact
const Container = styled.div`
display: flex;
flex-direction: column;
padding: 2rem 1rem;
padding-top: 0;
margin-inline: auto;
/* align-items: center; */
/* justify-content: center; */
@media ${media.tablet} {
padding: 1.2rem;
}
@media ${media.mobile} {
padding: 0.8rem;
}
`
const Mdiv = styled.div`
display: flex;
gap: 3rem;
align-items: flex-start;
@media ${media.laptop} {
gap: 2rem;
flex-direction: column;
align-items: center;
}
@media ${media.tablet} {
flex-direction: column;
gap: 2rem;
align-items: center;
}
`;
const Ldiv = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
min-width: 280px;
max-width: 100%;
`;
const Rdiv = styled.div`
flex: 1;
display: flex;
justify-content: center;
align-items: center;
`;
const Image = styled.img`
width: 100%;
/* max-width: 500px; */
height: auto;
@media ${media.tablet} {
max-width: 100%;
}
`;
|