diff --git a/src/Header/Header.css b/src/Header/Header.css index 927c18c..5406f06 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -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 */ diff --git a/src/Header/Header.js b/src/Header/Header.js index 3d0d575..f349430 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -139,7 +139,11 @@ export default function Header() { style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>

{bannerInfo.titleText}

-

{bannerInfo.subtitleText}

+ {bannerInfo.subtitleText === "" ? ( + <> + ) : ( +

{bannerInfo.subtitleText}

+ )}
diff --git a/src/Vehicles/Vehicles.css b/src/Vehicles/Vehicles.css index e69de29..863b1e7 100644 --- a/src/Vehicles/Vehicles.css +++ b/src/Vehicles/Vehicles.css @@ -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; +} diff --git a/src/Vehicles/Vehicles.jsx b/src/Vehicles/Vehicles.jsx index 1a44a8b..b2f05fa 100644 --- a/src/Vehicles/Vehicles.jsx +++ b/src/Vehicles/Vehicles.jsx @@ -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 ( <> +
+

VIEW OUR PAST VEHICLES

+
+ {Object.values(vechiles_info).map((vechile_info) => { + // console.log(vechile_info); + // style={{backgroundImage: `url(${vechile_info})`}} + return ( +
+
+

{vechile_info.display_year}

+
+
+

{"Features: " + vechile_info.features}

+ + Competions + {Object.values(vechile_info.competitions).map( + (competition_info) => { + return ( + + + + + + ); + } + )} +
{competition_info.location}{competition_info.competition_year}{competition_info.placement + " Place"}
+
+
+ ); + })} +
+
); }