From fe9d92c444f80750e8f485e41635399ed8f0cb7d Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 12 Jul 2025 12:54:00 -0600 Subject: [PATCH] feat(contactUs and History): finished with mobile layout, todo functionality --- src/Contact/Contact.css | 76 ++++++++--------------------- src/Contact/Contact.jsx | 23 +-------- src/Contact/ContactUs.css | 85 +++++++++++++++++++++++++++++++++ src/Contact/ContactUs.jsx | 26 ++++++++++ src/History/History.css | 37 +++++++++----- src/History/History.jsx | 19 ++++---- src/OurSponsors/OurSponsors.jsx | 4 +- 7 files changed, 169 insertions(+), 101 deletions(-) create mode 100644 src/Contact/ContactUs.css create mode 100644 src/Contact/ContactUs.jsx diff --git a/src/Contact/Contact.css b/src/Contact/Contact.css index 6f426d2..389017c 100644 --- a/src/Contact/Contact.css +++ b/src/Contact/Contact.css @@ -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; + } } diff --git a/src/Contact/Contact.jsx b/src/Contact/Contact.jsx index afde978..3ce9f12 100644 --- a/src/Contact/Contact.jsx +++ b/src/Contact/Contact.jsx @@ -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() { - -
-
-

Get in Touch

-

- 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 -

-
-
- - - - - - -

- -
-
+ ); } diff --git a/src/Contact/ContactUs.css b/src/Contact/ContactUs.css new file mode 100644 index 0000000..3d4af09 --- /dev/null +++ b/src/Contact/ContactUs.css @@ -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; +} diff --git a/src/Contact/ContactUs.jsx b/src/Contact/ContactUs.jsx new file mode 100644 index 0000000..e1f6314 --- /dev/null +++ b/src/Contact/ContactUs.jsx @@ -0,0 +1,26 @@ +import "./ContactUs.css"; + +export default function ContactUs() { + return ( +
+
+

Get in Touch

+

+ 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 +

+
+
+ + + + + + + 0 + +
+
+ ); +} diff --git a/src/History/History.css b/src/History/History.css index 6aef932..7d3cd19 100644 --- a/src/History/History.css +++ b/src/History/History.css @@ -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 */ diff --git a/src/History/History.jsx b/src/History/History.jsx index e1c471a..cc85436 100644 --- a/src/History/History.jsx +++ b/src/History/History.jsx @@ -146,16 +146,15 @@ function CompetitionInfo({ year, competitions }) { className="HistoryCompInfo">

{year}

Overall Competition Results

- + + {competitions.map((comp, index) => { + return ( + + ); + })} ); } diff --git a/src/OurSponsors/OurSponsors.jsx b/src/OurSponsors/OurSponsors.jsx index d391627..e34ab11 100644 --- a/src/OurSponsors/OurSponsors.jsx +++ b/src/OurSponsors/OurSponsors.jsx @@ -58,10 +58,10 @@ const OurSponsors = () => {