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;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
<div id="AboutUs">
|
||||||
<img
|
<div id="AboutEvents">
|
||||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
|
<h2>Upcoming Events</h2>
|
||||||
alt="Who we are//temp"
|
</div>
|
||||||
/>
|
|
||||||
<div>
|
<div>
|
||||||
<h2>Schulich Off-Road</h2>
|
<div>
|
||||||
|
<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.
|
||||||
|
</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,
|
||||||
|
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
||||||
|
Testing.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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://picsum.photos/200"
|
||||||
|
alt="temp"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
<article>
|
||||||
|
<p>Slight info about our car but also link that leads to history</p>
|
||||||
|
</article>
|
||||||
|
<div id="AboutJoin">
|
||||||
<p>
|
<p>
|
||||||
Schulich Off-Road is a student organization responsible for
|
Intersted in joining?{" "}
|
||||||
designing, building, and racing an off-road vehicle in the Baja SAE
|
<a href="mailto:uofcbaja@gmail.com">email us</a>
|
||||||
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,
|
|
||||||
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
|
||||||
Testing.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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.
|
|
||||||
</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"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Get the chance to work on one or more of the many projects
|
|
||||||
offered by your chosen sub-team
|
|
||||||
</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)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user