feat(homepage): postionsing started

This commit is contained in:
darkicewolf50 2025-05-31 14:50:03 -06:00
parent 1464667142
commit 4e3a66d33d
2 changed files with 115 additions and 44 deletions

View File

@ -35,18 +35,29 @@
/* #HomeTop div h2 {
} */
.HomePageLayout {
margin-left: auto;
margin-right: auto;
width: 70svw;
margin-top: 2svh;
}
.HomePageLayout div {
display: flex;
padding-top: 2.5svh;
padding-bottom: 2.5svh;
margin-left: 15svh;
margin-right: 15svh;
column-gap: 4svw;
}
.HomePageLayout img {
/* height: 5svh;
width: 5svw; */
flex-grow: 1;
/* flex-grow: 1; */
border-radius: 1rem;
width: 50%;
height: 55svh;
margin-top: auto;
/* margin: auto 0px; */
}
.HomePageLayout a {
@ -54,23 +65,41 @@
color: inherit;
border: solid 2px black;
border-radius: 1rem;
padding: 10px;
margin: 0svh 8svw;
font-size: large;
text-decoration: none;
text-align: center;
margin-top: 2svh;
}
.HomePageLayout a:hover {
background-color: grey;
}
.HomePageLayout h2 {
border-bottom: solid 3px black;
padding-left: 2svw;
/* padding-left: 2svw; */
padding-bottom: 0.5svh;
font-size: 36px;
/* margin-left: 2svw; */
/* margin-right: 2svw; */
/* margin: 0px; */
margin-bottom: 2svh;
}
.HomePageLayout p {
padding: 0px;
margin: 1svh 0svw;
font-size: larger;
}
.HomePageLayout div div {
display: flex;
flex-direction: column;
width: 50%;
justify-content: space-between;
/* justify-content: space-between; */
padding: 0px;
}
@ -89,6 +118,11 @@
border: solid 2px black;
padding: 30px;
margin-top: 4svh;
}
#HomeSponsors h2 {
margin-top: 0px;
}
#HomeSponsors div {
@ -98,11 +132,32 @@
#HomeSponsors div div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: inherit;
justify-content: space-around;
justify-content: center;
padding: 0px;
row-gap: 2svh;
column-gap: 6svw;
}
#HomeSponsors div div div {
display: flex;
flex-direction: column;
row-gap: 0px;
/* justify-content: center; */
align-items: center;
text-align: center;
}
#HomeSponsors div div div img {
width: 13svw;
height: 13svh;
}
#HomeSponsors div div div h3 {
margin: 1svh 0svw;
}
#HomeSponsorLinks {
@ -110,11 +165,17 @@
flex-direction: row;
width: inherit;
justify-content: space-around;
background-color: aqua;
justify-content: center;
padding-top: 2svh;
}
#HomeSponsorLinks a {
padding-left: 5svw;
padding-right: 5svw;
margin-top: auto;
padding: 1svh 4svw;
/* padding-left: 5svw; */
/* padding-right: 5svw; */
margin: 0px 2svw;
width: 8svw;
text-wrap: nowrap;
text-align: center;
}

View File

@ -24,44 +24,41 @@ export default function Home() {
alt="the team?"
/>
<div>
<h2>Who We Are</h2>
<h2>What We Do</h2>
<p>
UCalgary Baja is a student organization which designs, builds, 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.
racing an off-road vehicle in the Baja SAE 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>
UCalgary Baja 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.
In UCalgary Baja, we gain practical experience in design and
manufacturing by constructing various car components. We 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>
<Link to={"AboutUs"}>Learn More</Link>
</div>
</div>
<div>
<div>
<h2>Join the Team</h2>
<h2>Who We Are</h2>
<p>
Students involved in UCalgary Baja 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.
We are a team of engineering and business students who strive to
expand our horizons in our respective fields by getting real
world, hands on experience. Our members achieve this by being a
part of one of our 9 sub-teams: Suspension, Chassis, Ergonomics,
Steering, Powertrain, Final Drive, Electrical, Software, and
Business.
</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.
Each subteam handles a specific component, collaborating,
researching, and troubleshooting throughout the design process.
After building the vehicle, we attend competitions in the United
States, where our hard work is put to the test against the other
teams from all across the world.
</p>
<Link to={"/"}>Learn More</Link>
{/* Replace with Join later*/}
@ -75,14 +72,27 @@ export default function Home() {
<h2>Sponsor Section</h2>
<div>
<div>
<p>Sponsor 1</p>
<p>Sponsor 2</p>
<p>Sponsor 3</p>
</div>
<div>
<p>Sponsor 4</p>
<p>Sponsor 5</p>
<p>Sponsor 6</p>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU"
alt="Schulich logo"
/>
<h3>Schulich School of Engineering</h3>
</div>
<div>
<img
src="https://static.wixstatic.com/media/5824fc_2eca210b7d4a49298a70ad1f0a61886e~mv2.jpg/v1/crop/x_0,y_1,w_2707,h_1353/fill/w_410,h_206,fp_0.50_0.50,q_80,usm_0.66_1.00_0.01,enc_auto/5824fc_2eca210b7d4a49298a70ad1f0a61886e~mv2.jpg"
alt=""
/>
<h3>Morphgenix</h3>
</div>
<div>
<img
src="https://www.3ds.com/assets/3ds-navigation/3DS_corporate-logo_solidworks.svg"
alt=""
/>
<h3>Solidworks</h3>
</div>
</div>
</div>
<div id="HomeSponsorLinks">