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

added aboutUs: added content and a bunch of css

Browse Source
This commit is contained in:
darkicewolf50 2024-03-23 16:35:13 -06:00 committed by darkicewolf50
parent f669a3a72e
commit 71a9ddc7e1
2 changed files with 118 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/AboutUs/AboutUs.css
View File

@ -9,7 +9,11 @@
flex-direction: column; flex-direction: column;
} }
.aboutUs article { #benefits h2 {
text-align: center;
}
.aboutUs div {
display: grid; display: grid;
grid-template-columns: 50% 45%; grid-template-columns: 50% 45%;
column-gap: 15px; column-gap: 15px;
@ -19,7 +23,41 @@
padding-right: 5%; padding-right: 5%;
} }
.aboutUs div div {
display: flex;
flex-direction: column;
}
.aboutUs h2 {
border-bottom: solid 2px black;
}
.aboutUs img { .aboutUs img {
height: 300px; height: 300px;
width: 100%; width: 100%;
} }
.aboutUs div img {
padding-top: 4rem;
}
.aboutUs ul {
padding: 0px;
padding-left: 10%;
}
.aboutUs li {
max-width: 15rem;
}
.aboutUs table {
display: flex;
justify-content: center;
padding-bottom: 2rem;
}
.aboutUs td {
padding: 5rem;
padding-top: 0px;
padding-bottom: 0px;
}

92
src/AboutUs/AboutUs.js
View File

@ -5,7 +5,7 @@ import "./AboutUs.css";
* @returns {JSX.Element} page - returns the content of the page * @returns {JSX.Element} page - returns the content of the page
* @description The home/About us Page * @description The home/About us Page
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo Add content in paragraphs, real photos add add banner image slider * @todo Add real photos add add banner image slider
*/ */
const AboutsUs = () => { const AboutsUs = () => {
return ( return (
@ -14,34 +14,92 @@ const AboutsUs = () => {
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg" src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
alt="Schulich off Road Banner" alt="Schulich off Road Banner"
/> />
<article> <div>
<img <img
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg" src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
alt="Who we are//temp" alt="Who we are//temp"
/> />
<p>Who we are</p> <div>
</article> <h2>Schulich Off-Road</h2>
<article>
<p> <p>
What we do, breifly list the broad categories of what people do in our Schulich Off-Road is a student organization responsible for
team 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>
<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>
</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 <img
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg" src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
alt="montage of images mainly showcasing team memebers working" alt="montage of images mainly showcasing team memebers working"
/> />
</article> </div>
<article id="benefits"> <div id="benefits">
<p> <h2>Benefits of being a part of the team</h2>
What are the benefits of joing the team small list of how we actually <table>
beneit new members <tbody>
</p> <tr>
<td>
<h3>Hands on-Experience</h3>
</td>
<td>
<h3>Application of knowledge</h3>
</td>
</tr>
<tr>
<td>
<ul> <ul>
<li>benefit 1</li> <li>Designing & Drawings</li>
<li>benefit 2</li> <li>Testing Parts</li>
<li>benefit 3</li> <li>Manufacturing the product</li>
</ul> </ul>
</article> </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> </main>
); );
}; };