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

feat(contact): desktop page finished

Browse Source
This commit is contained in:
darkicewolf50 2025-06-11 15:08:48 -06:00
parent a0c3d51743
commit ff0134eb0f
3 changed files with 124 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/Contact/Contact.css
View File

@ -0,0 +1,86 @@
#Contact a {
text-decoration: none;
color: inherit;
}
#Contact ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#Contact img {
width: 100px;
height: 100px;
}
#Contact h1,
#Contact h4,
#Contact p {
margin: 1svh 0svw;
}
#Contact div {
display: flex;
flex-direction: row;
align-items: flex-start;
row-gap: 2svh;
}
#Contact div:nth-child(1) {
flex-direction: row;
column-gap: 2svw;
/* justify-content: center; */
align-items: center;
background: black;
color: white;
padding: 2svh 0svw;
}
#Contact div:nth-child(1) div:first-child {
flex-direction: row;
margin-left: 4svw;
}
#Contact div:nth-child(1) div:last-child {
flex-direction: column;
margin-left: auto;
margin-right: 16svw;
}
#Contact div:nth-child(1) div:last-child h1 {
margin: 0px;
font-size: 40px;
}
#Contact div:nth-child(1) img {
width: 300px;
height: 80svh;
}
#Contact div:nth-child(2) div {
flex-direction: column;
font-size: 30px;
font-weight: bold;
margin: 0px;
padding: 0svh 2svw;
}
#Contact div:nth-child(2) h1 {
text-wrap: nowrap;
align-self: flex-start;
margin-left: 2svw;
margin-right: 2svw;
font-size: 60px;
}
#Contact div:nth-child(2) {
margin: 0svh 0svw;
justify-content: flex-start;
height: 40svh;
}
#Contact div:last-child {
margin: 4svh 0svw;
justify-content: space-evenly;
}

49
src/Contact/Contact.jsx
View File

@ -3,23 +3,39 @@ import "./Contact.css";
export default function Contact() {
return (
<>
<div id="Contact">
<UpdateBanner
updatedTitleText="Contact Us"
updatedTitleText=""
updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
updatedImgUrl=""
updatetdImgAlt="Lorem Picsum"
/>
<div>
<h1>Hours of Operation</h1>
<a href="mailto:uofcbaja@gmail.com">
<h4>Send us an email.</h4>
<h4>uofcbaja@gmail.com</h4>
</a>
<ul>
<li>Wednesday: 6pm - 8pm</li>
<li>Saturday: 10am - 4pm</li>
</ul>
<div>
<img
src="https://static.wixstatic.com/media/5824fc_7b1be3e69c074f669945ecdbd23ce4ce~mv2.jpg/v1/fill/w_482,h_1068,fp_0.38_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1822_edited.jpg"
alt="Team members bending a tube"
/>
<img
src="https://static.wixstatic.com/media/5824fc_b83d649723274d5aa1455380f96e35c3~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/20240203_155632.jpg"
alt="Team member filing"
/>
<img
src="https://static.wixstatic.com/media/5824fc_065658fda1d94a7b8b620a7ce43a503d~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1830_edited.jpg"
alt="Team member welding"
/>
</div>
<div>
<h1>Hours of Operation</h1>
<a href="mailto:uofcbaja@gmail.com">
<h4>Send us an email.</h4>
<h4>uofcbaja@gmail.com</h4>
</a>
<ul>
<li>Wednesday: 6pm - 8pm</li>
<li>Saturday: 10am - 4pm</li>
</ul>
</div>
</div>
<div>
<h1>Join the team</h1>
@ -31,15 +47,20 @@ export default function Contact() {
<a href="https://www.instagram.com/ucalgarybaja/">@UofCBaja</a>
</div>
</div>
<img
src="https://static.wixstatic.com/media/baac51_880011a7327649cd8870a61f80595ebf~mv2.jpg/v1/fill/w_2520,h_462,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/baac51_880011a7327649cd8870a61f80595ebf~mv2.jpg"
alt="Carbon Fiber Transition"
style={{ height: "30svh", width: "100%" }}
/>
<div>
<h1>Sponsor the Team</h1>
<a href="mailto:uofcbaja@gmail.com?subject=Lets start something great">
<img
src="https://www.svgrepo.com/show/390657/email-envelope-letter-mail-message-communication.svg"
alt="email symbol"
/>
</a>
<h1>Sponsor the Team</h1>
</div>
</>
</div>
);
}

3
src/Header/Header.css
View File

@ -228,3 +228,6 @@ nav a li:hover {
#root.darkmode #darkModeToggle {
filter: hue-rotate(180deg);
}
a {
cursor: pointer;
}