mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 21:34:17 -06:00
feat(vechilces): added content, css done, mobile done
This commit is contained in:
parent
4601309ae6
commit
1e71a8ef52
@ -163,7 +163,10 @@ nav a li:hover {
|
||||
:root {
|
||||
--fade-starts-at-bottom: 90%;
|
||||
--fade-starts-at-top: 96%;
|
||||
--banner-text-background: white;
|
||||
--banner-text-background: #1f1f1fcc;
|
||||
--banner-text-padding: 2svh 2svw;
|
||||
--banner-text-rounding: 1rem;
|
||||
--banner-text-colour: white;
|
||||
}
|
||||
|
||||
/* #BannerHeader img {
|
||||
@ -193,6 +196,9 @@ nav a li:hover {
|
||||
font-weight: normal;
|
||||
|
||||
background-color: var(--banner-text-background);
|
||||
border-radius: var(--banner-text-rounding);
|
||||
color: var(--banner-text-colour);
|
||||
padding: var(--banner-text-padding);
|
||||
}
|
||||
|
||||
#BannerHeader h2 {
|
||||
@ -203,6 +209,9 @@ nav a li:hover {
|
||||
font-weight: normal;
|
||||
|
||||
background-color: var(--banner-text-background);
|
||||
border-radius: var(--banner-text-rounding);
|
||||
color: var(--banner-text-colour);
|
||||
padding: var(--banner-text-padding);
|
||||
}
|
||||
|
||||
/* for dark mode */
|
||||
|
||||
@ -139,7 +139,11 @@ export default function Header() {
|
||||
style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
|
||||
<div>
|
||||
<h1>{bannerInfo.titleText}</h1>
|
||||
{bannerInfo.subtitleText === "" ? (
|
||||
<></>
|
||||
) : (
|
||||
<h2>{bannerInfo.subtitleText}</h2>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
#vehicles div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 4svw;
|
||||
row-gap: 4svh;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 4svh;
|
||||
}
|
||||
|
||||
#vehicles div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0svh;
|
||||
min-width: 360px;
|
||||
max-width: 500px;
|
||||
align-items: normal;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--vehicle-card-padding: 1svh 1svw;
|
||||
}
|
||||
#vehicles figure {
|
||||
height: 60svh;
|
||||
/* width: 20svw; */
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
border-radius: 1rem;
|
||||
padding: var(--vehicle-card-padding);
|
||||
}
|
||||
|
||||
#vehicles figure h4 {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-size: 60px;
|
||||
margin: 8svh 0px;
|
||||
}
|
||||
|
||||
#vehicles figcaption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: var(--vehicle-card-padding);
|
||||
}
|
||||
|
||||
#vehicles figcaption p {
|
||||
margin: 0px;
|
||||
margin-bottom: 1svh;
|
||||
font-weight: bold;
|
||||
align-self: flex-start;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
#vehicles table {
|
||||
text-align: start;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
align-self: center;
|
||||
}
|
||||
#vehicles thead {
|
||||
/* text-align: center; */
|
||||
margin: 0px auto;
|
||||
margin-bottom: 2svh;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
#vehicles tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#vehicles tr td:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
#vehicles tr td {
|
||||
margin-left: 1svw;
|
||||
}
|
||||
|
||||
#vehicles tr td:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -2,6 +2,58 @@ import UpdateBanner from "../Header/UpdateBanner";
|
||||
import "./Vehicles.css";
|
||||
|
||||
export default function Vehicles() {
|
||||
let vechiles_info = [
|
||||
{
|
||||
year: "2019-2023",
|
||||
vehicle_img_link:
|
||||
"https://static.wixstatic.com/media/5824fc_128f7d18ed2f44c6883cc5b86cc1b2c2~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_20230504_084347041.jpg",
|
||||
display_year: "'23",
|
||||
features:
|
||||
"First time implementing 4WD and chromoly tubing for the frame, custom rear half shafts, custom gearbox",
|
||||
competitions: [
|
||||
{ location: "Oshkosh, WI", competition_year: 2023, placement: "22nd" },
|
||||
{ location: "Portland, OR", competition_year: 2023, placement: "26th" },
|
||||
],
|
||||
},
|
||||
{
|
||||
year: 2019,
|
||||
vehicle_img_link:
|
||||
"https://static.wixstatic.com/media/5824fc_7a03429a7efb4ca2978176a9e9f7d9e3~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MVIMG_20190615_145709_edited.jpg",
|
||||
|
||||
display_year: "'19",
|
||||
features:
|
||||
"Custom gearbox, TIG welded frame, custom front hubs, top 10 finish at second competition",
|
||||
competitions: [
|
||||
{ location: "Rochester, NY", competition_year: 2019, placement: "8th" },
|
||||
{
|
||||
location: "Gorman, CA",
|
||||
competition_year: 2019,
|
||||
placement: "49th",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2018",
|
||||
vehicle_img_link:
|
||||
"https://static.wixstatic.com/media/5824fc_b2388960e7d44459abe5db3499b8ecc0~mv2.jpg/v1/fill/w_732,h_675,fp_0.50_0.36,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/7.jpg",
|
||||
display_year: "'18",
|
||||
features: "Custom gearbox",
|
||||
competitions: [
|
||||
{ location: "Portland, OR", competition_year: 2018, placement: "26th" },
|
||||
],
|
||||
},
|
||||
{
|
||||
year: 2017,
|
||||
vehicle_img_link:
|
||||
"https://static.wixstatic.com/media/5824fc_7ee01b6e4cdf416c8affff42cc19637e~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0430.jpg",
|
||||
display_year: "'17",
|
||||
features:
|
||||
"Custom gearbox, first-time implementing control link, and h arm suspension in the rear",
|
||||
competitions: [
|
||||
{ location: "Illinois", competition_year: "2017", placement: "41st" },
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<UpdateBanner
|
||||
@ -10,6 +62,42 @@ export default function Vehicles() {
|
||||
updatedImgUrl=""
|
||||
updatetdImgAlt=""
|
||||
/>
|
||||
<div id="vehicles">
|
||||
<h1>VIEW OUR PAST VEHICLES</h1>
|
||||
<div>
|
||||
{Object.values(vechiles_info).map((vechile_info) => {
|
||||
// console.log(vechile_info);
|
||||
// style={{backgroundImage: `url(${vechile_info})`}}
|
||||
return (
|
||||
<div>
|
||||
<figure
|
||||
style={{
|
||||
backgroundImage: `url(${vechile_info.vehicle_img_link})`,
|
||||
}}>
|
||||
<h4>{vechile_info.display_year}</h4>
|
||||
</figure>
|
||||
<figcaption>
|
||||
<p>{"Features: " + vechile_info.features}</p>
|
||||
<table>
|
||||
<thead>Competions</thead>
|
||||
{Object.values(vechile_info.competitions).map(
|
||||
(competition_info) => {
|
||||
return (
|
||||
<tr>
|
||||
<td>{competition_info.location}</td>
|
||||
<td>{competition_info.competition_year}</td>
|
||||
<td>{competition_info.placement + " Place"}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</table>
|
||||
</figcaption>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user