mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 13:24:17 -06:00
feat(AboutUs): css done, final content, placement and colouring to do
This commit is contained in:
parent
7ec628eefb
commit
567384758a
@ -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;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
import "./AboutUs.css";
|
||||
|
||||
/**
|
||||
@ -9,98 +10,161 @@ import "./AboutUs.css";
|
||||
*/
|
||||
const AboutsUs = () => {
|
||||
return (
|
||||
<main className="aboutUs">
|
||||
<img
|
||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
|
||||
alt="Schulich off Road Banner"
|
||||
<>
|
||||
<UpdateBanner
|
||||
updatedTitleText="About Us"
|
||||
updatedSubtitleText=""
|
||||
updatedImgUrl="https://picsum.photos/200"
|
||||
/>
|
||||
<div id="AboutUs">
|
||||
<div id="AboutEvents">
|
||||
<h2>Upcoming Events</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
|
||||
alt="Who we are//temp"
|
||||
/>
|
||||
<div>
|
||||
<h2>Schulich Off-Road</h2>
|
||||
<h2>Our Mission</h2>
|
||||
<p>
|
||||
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.
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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,
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Our Work / Projects</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
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 */}
|
||||
<br />
|
||||
<br />
|
||||
to be removed later
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
|
||||
alt="montage of images mainly showcasing team memebers working"
|
||||
src="https://picsum.photos/200"
|
||||
alt="temp"
|
||||
/>
|
||||
</div>
|
||||
<div id="benefits">
|
||||
<h2>Benefits of being a part of the team</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Hands on-Experience</h3>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Application of knowledge</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Designing & Drawings</li>
|
||||
<li>Testing Parts</li>
|
||||
<li>Manufacturing the product</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="temp"
|
||||
/>
|
||||
<div>
|
||||
<h2>The Competition</h2>
|
||||
<p>what the competition is about</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about-competitions">
|
||||
<div>
|
||||
<h2>Static Events</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<h3>SALES PRESENTATION</h3>
|
||||
<h3>Business Team</h3>
|
||||
<p>
|
||||
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.
|
||||
</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>
|
||||
<li>
|
||||
Get the chance to work on one or more of the many projects
|
||||
offered by your chosen sub-team
|
||||
<h3>BRAKE INSPECTION</h3>
|
||||
<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>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</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)"
|
||||
/>
|
||||
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?
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user