mirror of
https://github.com/SrIzan10/hc-site.git
synced 2026-05-01 10:45:23 +00:00
ab363f1032
* Create congressional-app-challenge * Rename congressional-app-challenge to congressional-app-challenge.js let me be smart this time and add .js * Update congressional-app-challenge.js setting up the page and adding the first two containers! * Update congressional-app-challenge.js small edits * responsive styling responsive styling mainly with the images * did step 1 and 2 sections * added made with <3 note * minor ui updates * content updates * updates * added past winner cards to prep for carousel and ysws buttons * quick button ui update * refactor past winner cards for carousel * did grant section, organized code, added graphics * Made winners carousel * updated zoom card ui and tweaked carousel a bit * Added seamless scrolling to cac carousel * Fixed carousel so scrolling moves cards one by one * updates --------- Co-authored-by: Sophia E <sophialuvv2@gmail.com> Co-authored-by: phthallo <annabelquach13@gmail.com> Co-authored-by: Annabel Q <84078890+phthallo@users.noreply.github.com> Co-authored-by: Kyra Ezikeuzor <kyraezikeuzor@gmail.com>
21 lines
852 B
JavaScript
21 lines
852 B
JavaScript
import { Box, Text, Image, Link } from 'theme-ui'
|
|
|
|
export default function Carousel({
|
|
title,
|
|
user,
|
|
description,
|
|
link,
|
|
img
|
|
}){
|
|
return (
|
|
<Box id={user} sx={{width:['65%', '80%'], m:'3', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
|
|
<Image src={img} sx={{ borderRadius: '10px 10px 0 0', width: '100%', height: ['12em', '15em']}}></Image>
|
|
<Box sx={{alignItems:'left', textAlign:'left', display:'flex', flexDirection:'column', background:'white', color:'black', p:'2', borderRadius: '0 0 10px 10px', marginBottom: '2', padding: '3', height: '8em'}}>
|
|
<Link href = {link} target="_blank" rel="noopener">
|
|
<Text as="h3" sx={{}}>{title}</Text>
|
|
</Link>
|
|
<Text as="i" sx={{}}>{description}</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |