From 567384758a38cfb711f1a682ae16a239bee38cea Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 14 Jun 2025 16:20:38 -0600 Subject: [PATCH] feat(AboutUs): css done, final content, placement and colouring to do --- src/AboutUs/AboutUs.css | 116 +++++++++++++------- src/AboutUs/AboutUs.js | 236 +++++++++++++++++++++++++--------------- 2 files changed, 225 insertions(+), 127 deletions(-) diff --git a/src/AboutUs/AboutUs.css b/src/AboutUs/AboutUs.css index ea3d2f9..ed68576 100644 --- a/src/AboutUs/AboutUs.css +++ b/src/AboutUs/AboutUs.css @@ -1,63 +1,97 @@ -#aboutUs { +#AboutUs { display: flex; flex-direction: column; - align-content: center; + padding: 4svh 2svw; + row-gap: 4svh; + justify-content: center; + align-items: center; + + background-color: #1f1f1f; + color: white; } -#benefits { +#AboutUs h2 { + padding-bottom: 0.5svh; + font-size: 36px; + margin-bottom: 2svh; + + border-bottom: solid 3px white; +} + +#AboutUs #AboutEvents { + width: 70svw; + + justify-content: flex-start; + align-items: flex-start; + padding: 2svh 2svw; + + border-radius: 1rem; + border: 1px solid white; +} + +#AboutUs div { display: flex; - flex-direction: column; + flex-flow: row wrap; + justify-content: center; + column-gap: 2svw; + + padding: 2svh 2svw; } -#benefits h2 { +#AboutUs img { + width: 400px; + + border-radius: 1rem; +} + +#AboutUs div div { + flex-direction: column; + justify-content: flex-start; + padding: 0svh 1svw; + max-width: 30svw; +} + +#about-competitions { + row-gap: 2svh; +} + +#about-competitions h2 { text-align: center; } -.aboutUs div { - display: grid; - grid-template-columns: 50% 45%; - column-gap: 15px; - align-content: center; - padding-top: 15px; - padding-left: 5%; - padding-right: 5%; +#about-competitions ul, +#about-competitions ol { + margin: 0px; + padding: 0px; } -.aboutUs div div { +#about-competitions li { display: flex; - flex-direction: column; + flex-flow: row wrap; + justify-content: space-between; + border-radius: 1rem; + border: 1px solid white; + margin: 2svh 0svw; + padding: 2svh 2svw; } -.aboutUs h2 { - border-bottom: solid 2px black; -} - -.aboutUs img { - height: 300px; +#about-competitions li p { width: 100%; } -.aboutUs div img { - padding-top: 4rem; -} - -.aboutUs ul { - padding: 0px; - padding-left: 10%; -} - -.aboutUs li { - max-width: 15rem; -} - -.aboutUs table { +#AboutUs article { display: flex; - justify-content: center; - padding-bottom: 2rem; + flex-direction: column; + width: 70svw; + height: 70svh; + border-radius: 1rem; + border: 1px solid white; + padding: 2svh 2svw; } -.aboutUs td { - padding: 5rem; - padding-top: 0px; - padding-bottom: 0px; +#AboutUs #AboutJoin { + width: 70svw; + height: 30svh; + border-radius: 1rem; + border: 1px solid white; } diff --git a/src/AboutUs/AboutUs.js b/src/AboutUs/AboutUs.js index d0705a5..ef22726 100644 --- a/src/AboutUs/AboutUs.js +++ b/src/AboutUs/AboutUs.js @@ -1,3 +1,4 @@ +import UpdateBanner from "../Header/UpdateBanner"; import "./AboutUs.css"; /** @@ -9,98 +10,161 @@ import "./AboutUs.css"; */ const AboutsUs = () => { return ( -
- Schulich off Road Banner + -
- Who we are//temp +
+
+

Upcoming Events

+
-

Schulich Off-Road

+
+

Our Mission

+

+ Schulich Off-Road is a student organization responsible for + designing, building, and racing an off-road vehicle in the Baja + SAE intercollegiate competition organized by the Society of + Automotive Engineers (SAE) every year. Schulich Off-Road's cars + are tough, dependable, competitive, and extremely fun to drive. +

+

+ Schulich Off-road is a team consisting of talented and determined + competitive individuals in engineering who strive to expand their + horizons, earn experience, and network with leading companies in + their respective fields. Our members achieve this by being a part + of one of our 6 sub-teams: Drivetrain, Logistics and Software, + Suspension, Chassis and Ergonomics, Steering, and Electrical and + Testing. +

+

+ More info about the club, expanding on what was on the home page. + We have students learn because we build so and so and incorporate + all these skills. + {/* this is very temporary and bad */} +
+
+ to be removed later +

+
+ + temp +
+
+ temp +
+

The Competition

+

what the competition is about

+
+
+
+
+

Static Events

+
    +
  1. +

    SALES PRESENTATION

    +

    Business Team

    +

    + In collaboration with the rest of the team, develops a concept + proposal and presents it to a panel of industry judges to gain + support, such as funding. +

    +
    2. +
  2. +

    COST EVENT

    +

    Mechanical and Electrical Teams

    +

    + - bruh idfk DESIGN - The team presents the design, research, + and testing of the vehicle to a panel of judges. +

    +
    3. +
  3. +

    TECHNICAL INSPECTIONS

    +

    Whole Team

    +

    + (maybe take off) - Judges inspect every aspect of the car in + order to make sure it complies with competition rules and + ensure safety. +

    +

    + (maybe sperate? ie Frame Tech, Engine Tech, General Tech, + etc.) +

    +
    4. +
+
+
+

Dynamic Events

+
    +
  • +

    BRAKE INSPECTION

    +

    The cars is tested tyo see if all four wheels stop

    +
    • +
  • +

    ACCELERATION

    +

    The car is tested for speed by uhh i forgot

    +
    • +
  • +

    SLED PULL

    +

    The car's torque is tested by pulling variable load

    +
    • +
  • +

    HILL CLIMB

    +

    + The car is tested to see how high the car can climb up a + variable slope +

    +
    • +
  • +

    MANEUVERABILITY

    +

    + Obstacle course, where the fastest and most accurate vehicles + are awarded more points +

    +
    • +
  • +

    ROCK CRAWL

    +

    + This one is self explanitory, drive over boulders and large + logs +

    +
    • +
  • +

    ENDURANCE

    +

    + All the cars in the competition race for four hours, seeing + how many laps each car can handle. This event is worth the + most points and is the most exciting. +

    +

    + Fun Fact: This is the only wheel to wheel event that SAE + hosts. +

    +
    • +
+ HILL CLIMB / SLED PULL - The car's torque is tested by pulling + another variable load, or by idk checking if it can drive up a hill? +
+
+
+

Slight info about our car but also link that leads to history

+
+

- Schulich Off-Road is a student organization responsible for - designing, building, and racing an off-road vehicle in the Baja SAE - intercollegiate competition organized by the Society of Automotive - Engineers (SAE) every year. Schulich Off-Road's cars are tough, - dependable, competitive, and extremely fun to drive. -

-

- Schulich Off-road is a team consisting of talented and determined - competitive individuals in engineering who strive to expand their - horizons, earn experience, and network with leading companies in - their respective fields. Our members achieve this by being a part of - one of our 6 sub-teams: Drivetrain, Logistics and Software, - Suspension, Chassis and Ergonomics, Steering, and Electrical and - Testing. + Intersted in joining?{" "} + email us

-
-
-

Our Work / Projects

-

- Students involved in Schulich Off-Road gain practical experience in - design and manufacturing by constructing various car components. - They learn to balance cost, manufacturing limitations, and - performance to develop optimal parts, budgets, and processes. This - involves using CAD technology like SolidWorks and FEA simulations. -

-

- Additionally, members acquire hands-on skills such as welding and - operating metal cutting machines. Each team member handles a - specific component, collaborating, researching, and troubleshooting - throughout the design and execution process. After building the - vehicle, students can attend competitions worldwide, where they must - address issues promptly and work as a team to replace broken parts - to stay competitive. -

-
- montage of images mainly showcasing team memebers working -
-
-

Benefits of being a part of the team

- - - - - - - - - - - -
-

Hands on-Experience

- 		-

Application of knowledge

-
-
    -
  • Designing & Drawings
    • -
  • Testing Parts
    • -
  • Manufacturing the product
    • -
- 		-
    -
  • - Get the chance to work on one or more of the many projects - offered by your chosen sub-team -
    • -
-
- (If we do a rotating images thing for the top, and still want to keep this on the bottom, maybe we can change it to a more collage type thing for this box) -
-
+ ); };