Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 21:34:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(AboutUs): css done, final content, placement and colouring to do

Browse Source
This commit is contained in:
darkicewolf50 2025-06-14 16:20:38 -06:00
parent 7ec628eefb
commit 567384758a
2 changed files with 225 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/AboutUs/AboutUs.css
View File

@ -1,63 +1,97 @@
#aboutUs { #AboutUs {
display: flex; display: flex;
flex-direction: column; 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; 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; text-align: center;
} }
.aboutUs div { #about-competitions ul,
display: grid; #about-competitions ol {
grid-template-columns: 50% 45%; margin: 0px;
column-gap: 15px; padding: 0px;
align-content: center;
padding-top: 15px;
padding-left: 5%;
padding-right: 5%;
} }
.aboutUs div div { #about-competitions li {
display: flex; 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 { #about-competitions li p {
border-bottom: solid 2px black;
}
.aboutUs img {
height: 300px;
width: 100%; width: 100%;
} }
.aboutUs div img { #AboutUs article {
padding-top: 4rem;
}
.aboutUs ul {
padding: 0px;
padding-left: 10%;
}
.aboutUs li {
max-width: 15rem;
}
.aboutUs table {
display: flex; display: flex;
justify-content: center; flex-direction: column;
padding-bottom: 2rem; width: 70svw;
height: 70svh;
border-radius: 1rem;
border: 1px solid white;
padding: 2svh 2svw;
} }
.aboutUs td { #AboutUs #AboutJoin {
padding: 5rem; width: 70svw;
padding-top: 0px; height: 30svh;
padding-bottom: 0px; border-radius: 1rem;
border: 1px solid white;
} }

200
src/AboutUs/AboutUs.js
View File

@ -1,3 +1,4 @@
import UpdateBanner from "../Header/UpdateBanner";
import "./AboutUs.css"; import "./AboutUs.css";
/** /**
@ -9,98 +10,161 @@ import "./AboutUs.css";
*/ */
const AboutsUs = () => { const AboutsUs = () => {
return ( return (
<main className="aboutUs"> <>
<img <UpdateBanner
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg" updatedTitleText="About Us"
alt="Schulich off Road Banner" updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
/> />
<div id="AboutUs">
<div id="AboutEvents">
<h2>Upcoming Events</h2>
</div>
<div> <div>
<img
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
alt="Who we are//temp"
/>
<div> <div>
<h2>Schulich Off-Road</h2> <h2>Our Mission</h2>
<p> <p>
Schulich Off-Road is a student organization responsible for Schulich Off-Road is a student organization responsible for
designing, building, and racing an off-road vehicle in the Baja SAE designing, building, and racing an off-road vehicle in the Baja
intercollegiate competition organized by the Society of Automotive SAE intercollegiate competition organized by the Society of
Engineers (SAE) every year. Schulich Off-Road's cars are tough, Automotive Engineers (SAE) every year. Schulich Off-Road's cars
dependable, competitive, and extremely fun to drive. are tough, dependable, competitive, and extremely fun to drive.
</p> </p>
<p> <p>
Schulich Off-road is a team consisting of talented and determined Schulich Off-road is a team consisting of talented and determined
competitive individuals in engineering who strive to expand their competitive individuals in engineering who strive to expand their
horizons, earn experience, and network with leading companies in horizons, earn experience, and network with leading companies in
their respective fields. Our members achieve this by being a part of their respective fields. Our members achieve this by being a part
one of our 6 sub-teams: Drivetrain, Logistics and Software, of one of our 6 sub-teams: Drivetrain, Logistics and Software,
Suspension, Chassis and Ergonomics, Steering, and Electrical and Suspension, Chassis and Ergonomics, Steering, and Electrical and
Testing. Testing.
</p> </p>
</div>
</div>
<div>
<div>
<h2>Our Work / Projects</h2>
<p> <p>
Students involved in Schulich Off-Road gain practical experience in More info about the club, expanding on what was on the home page.
design and manufacturing by constructing various car components. We have students learn because we build so and so and incorporate
They learn to balance cost, manufacturing limitations, and all these skills.
performance to develop optimal parts, budgets, and processes. This {/* this is very temporary and bad */}
involves using CAD technology like SolidWorks and FEA simulations. <br />
</p> <br />
<p> to be removed later
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.
</p> </p>
</div> </div>
<img <img
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg" src="https://picsum.photos/200"
alt="montage of images mainly showcasing team memebers working" alt="temp"
/> />
</div> </div>
<div id="benefits"> <div>
<h2>Benefits of being a part of the team</h2> <img
<table> src="https://picsum.photos/200"
<tbody> alt="temp"
<tr> />
<td> <div>
<h3>Hands on-Experience</h3> <h2>The Competition</h2>
</td> <p>what the competition is about</p>
<td> </div>
<h3>Application of knowledge</h3> </div>
</td> <div id="about-competitions">
</tr> <div>
<tr> <h2>Static Events</h2>
<td> <ol>
<ul> <li>
<li>Designing & Drawings</li> <h3>SALES PRESENTATION</h3>
<li>Testing Parts</li> <h3>Business Team</h3>
<li>Manufacturing the product</li> <p>
</ul> In collaboration with the rest of the team, develops a concept
</td> proposal and presents it to a panel of industry judges to gain
<td> support, such as funding.
</p>
</li>
<li>
<h3>COST EVENT</h3>
<h3>Mechanical and Electrical Teams</h3>
<p>
- bruh idfk DESIGN - The team presents the design, research,
and testing of the vehicle to a panel of judges.
</p>
</li>
<li>
<h3>TECHNICAL INSPECTIONS</h3>
<h3>Whole Team</h3>
<p>
(maybe take off) - Judges inspect every aspect of the car in
order to make sure it complies with competition rules and
ensure safety.
</p>
<p>
(maybe sperate? ie Frame Tech, Engine Tech, General Tech,
etc.)
</p>
</li>
</ol>
</div>
<div>
<h2>Dynamic Events</h2>
<ul> <ul>
<li> <li>
Get the chance to work on one or more of the many projects <h3>BRAKE INSPECTION</h3>
offered by your chosen sub-team <p>The cars is tested tyo see if all four wheels stop</p>
</li>
<li>
<h3>ACCELERATION</h3>
<p>The car is tested for speed by uhh i forgot</p>
</li>
<li>
<h3>SLED PULL</h3>
<p>The car's torque is tested by pulling variable load</p>
</li>
<li>
<h3>HILL CLIMB</h3>
<p>
The car is tested to see how high the car can climb up a
variable slope
</p>
</li>
<li>
<h3>MANEUVERABILITY</h3>
<p>
Obstacle course, where the fastest and most accurate vehicles
are awarded more points
</p>
</li>
<li>
<h3>ROCK CRAWL</h3>
<p>
This one is self explanitory, drive over boulders and large
logs
</p>
</li>
<li>
<h3>ENDURANCE</h3>
<p>
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.
</p>
<p>
Fun Fact: This is the only wheel to wheel event that SAE
hosts.
</p>
</li> </li>
</ul> </ul>
</td> HILL CLIMB / SLED PULL - The car's torque is tested by pulling
</tr> another variable load, or by idk checking if it can drive up a hill?
</tbody>
</table>
<img
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
alt="(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)"
/>
</div> </div>
</main> </div>
<article>
<p>Slight info about our car but also link that leads to history</p>
</article>
<div id="AboutJoin">
<p>
Intersted in joining?{" "}
<a href="mailto:uofcbaja@gmail.com">email us</a>
</p>
</div>
</div>
</>
); );
}; };