mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-28 05:55:59 -06:00
feat(contactUs and History): finished with mobile layout, todo functionality
This commit is contained in:
@ -9,30 +9,25 @@
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#Contact img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#Contact h1,
|
||||
#Contact h4,
|
||||
#Contact p {
|
||||
margin: 1svh 0svw;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
#Contact div {
|
||||
#Contact > div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
row-gap: 2svh;
|
||||
}
|
||||
|
||||
#Contact div:nth-child(1) {
|
||||
#Contact > div:nth-child(1) {
|
||||
flex-direction: row;
|
||||
column-gap: 2svw;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
background: black;
|
||||
background: var(--BajaBlack);
|
||||
color: white;
|
||||
padding: 2svh 0svw;
|
||||
}
|
||||
@ -58,54 +53,25 @@
|
||||
|
||||
#Contact div:nth-child(1) img {
|
||||
width: 300px;
|
||||
height: 80svh;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#Contact div:nth-child(2) div {
|
||||
flex-direction: column;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
padding: 0svh 2svw;
|
||||
@media only screen and (max-width: 1025px) {
|
||||
#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#Contact div:nth-child(1) div:last-child {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#Contact #ContactUs {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#Contact #ContactUs div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 450px;
|
||||
min-width: 300px;
|
||||
height: auto;
|
||||
padding: 1svh 1svw;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin: 0px;
|
||||
row-gap: 0px;
|
||||
@media only screen and (max-width: 550px) {
|
||||
#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
import "./Contact.css";
|
||||
import ContactUs from "./ContactUs";
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
@ -43,27 +44,7 @@ export default function Contact() {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ContactUs">
|
||||
<div>
|
||||
<h2>Get in Touch</h2>
|
||||
<p>
|
||||
Please feel free to reach out about questions, opporunities or just
|
||||
want to connect. Feel free to either fill out this form or contact
|
||||
me through one of the many of the platforms below
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>Name</label>
|
||||
<input data-dioxus-id="360" />
|
||||
<label>Email</label>
|
||||
<input data-dioxus-id="361" />
|
||||
<label>Message</label>
|
||||
<textarea data-dioxus-id="362"></textarea>
|
||||
<p></p>
|
||||
<button data-dioxus-id="363">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<ContactUs />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
85
src/Contact/ContactUs.css
Normal file
85
src/Contact/ContactUs.css
Normal file
@ -0,0 +1,85 @@
|
||||
:root {
|
||||
--card-background-color: rgba(38, 38, 38, 0.5);
|
||||
--card-border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#ContactUs {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
row-gap: 4svh;
|
||||
min-height: 70svh;
|
||||
padding: 4svh 0svw;
|
||||
justify-content: space-evenly;
|
||||
color: white;
|
||||
background-color: var(--BajaBlack);
|
||||
}
|
||||
|
||||
#ContactUs div {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
background-color: var(--card-background-color) !important;
|
||||
border-radius: var(--card-border-radius);
|
||||
flex-direction: column !important;
|
||||
justify-content: center;
|
||||
margin: 2svh 0.5svw !important;
|
||||
padding: 2svh 1svw !important;
|
||||
max-width: 600px !important;
|
||||
height: inherit !important;
|
||||
}
|
||||
|
||||
#ContactUs p {
|
||||
margin: 2svh 0svw;
|
||||
padding: 0svh 0svw;
|
||||
}
|
||||
|
||||
#ContactUs input {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#ContactUs textarea {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.4);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
min-height: 25svh;
|
||||
}
|
||||
|
||||
#ContactUs button {
|
||||
border-radius: var(--card-border-radius);
|
||||
color: inherit;
|
||||
background-color: rgba(0, 128, 0, 0.6);
|
||||
border-color: transparent;
|
||||
align-items: start;
|
||||
margin: 1svh 0.5svw;
|
||||
padding: 1svh 0svw;
|
||||
/* width: 99%; */
|
||||
}
|
||||
|
||||
#ContactUs button:hover {
|
||||
cursor: pointer;
|
||||
color: #91a4d2;
|
||||
background-color: rgba(0, 150, 0, 0.6);
|
||||
}
|
||||
|
||||
#ContactUs span {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0.25svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
}
|
||||
26
src/Contact/ContactUs.jsx
Normal file
26
src/Contact/ContactUs.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import "./ContactUs.css";
|
||||
|
||||
export default function ContactUs() {
|
||||
return (
|
||||
<div id="ContactUs">
|
||||
<div>
|
||||
<h2>Get in Touch</h2>
|
||||
<p>
|
||||
Please feel free to reach out about questions, opporunities or just
|
||||
want to connect. Feel free to either fill out this form or contact me
|
||||
through one of the many of the platforms below
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>Name</label>
|
||||
<input />
|
||||
<label>Email</label>
|
||||
<input />
|
||||
<label>Message</label>
|
||||
<textarea></textarea>
|
||||
<span> 0</span>
|
||||
<button>Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -55,23 +55,32 @@
|
||||
|
||||
#History table tr {
|
||||
position: relative;
|
||||
margin: 4svh 0svw;
|
||||
}
|
||||
|
||||
#History tr td {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#History tr td img {
|
||||
aspect-ratio: 1;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
min-width: 192px;
|
||||
max-width: 400px;
|
||||
height: 400px;
|
||||
margin: 0svh auto;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1025px) {
|
||||
#History tr td img {
|
||||
width: 10svw;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@ -83,29 +92,29 @@
|
||||
|
||||
#History td > div {
|
||||
width: 100%;
|
||||
/* width: fit-content; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo h2,
|
||||
#History .HistoryCompInfo h4 {
|
||||
width: fit-content;
|
||||
margin: 2svh auto;
|
||||
margin: 2svh 2svw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
column-gap: 1svw;
|
||||
row-gap: 1svh;
|
||||
padding: 0svh 2svw;
|
||||
margin: 0px;
|
||||
/* width: 90%; */
|
||||
padding: 0px;
|
||||
margin: 0.5svh 0svw;
|
||||
}
|
||||
|
||||
/*
|
||||
#History .HistoryCompInfo ul li {
|
||||
flex: 40%;
|
||||
}
|
||||
width: 10ch;
|
||||
} */
|
||||
|
||||
#History .HistoryCompInfo ul li:nth-child(odd) {
|
||||
text-align: start;
|
||||
@ -119,6 +128,7 @@
|
||||
position: relative;
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#History .symbol::before {
|
||||
@ -159,10 +169,11 @@
|
||||
|
||||
#History #HistoryJoin div {
|
||||
text-wrap: nowrap;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
z-index: 2; /* above line */
|
||||
margin: 0svh 0svw;
|
||||
margin-bottom: 4svh;
|
||||
}
|
||||
|
||||
/* without this line will stop at the div */
|
||||
|
||||
@ -146,16 +146,15 @@ function CompetitionInfo({ year, competitions }) {
|
||||
className="HistoryCompInfo">
|
||||
<h2>{year}</h2>
|
||||
<h4>Overall Competition Results</h4>
|
||||
<ul>
|
||||
{competitions.map((comp, index) => {
|
||||
return (
|
||||
<React.Fragment key={comp + index}>
|
||||
<li key={index + "location"}>{comp.location}</li>
|
||||
<li key={index + "place"}>{comp.placement} place</li>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{competitions.map((comp, index) => {
|
||||
return (
|
||||
<ul key={comp + index}>
|
||||
<li key={index + "location"}>{comp.location}</li>
|
||||
<li key={index + "place"}>{comp.placement} place</li>
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -58,10 +58,10 @@ const OurSponsors = () => {
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">Learn More</a>
|
||||
<a href="/">Learn More</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Support Us</a>
|
||||
<a href="/">Support Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user