added sponsor: sponsor table css finished, page finished

src/OurSponsors/OurSponsors.css

@@ -1,3 +1,6 @@
+:root {
+	--tableBackground: white;
+}
 #OurSponsors {
 	display: flex;
 	flex-direction: column;
@@ -12,8 +15,19 @@
 }
 
 #BecomeASponsors div {
+	display: flex;
+	flex-direction: column;
+	border-bottom: 2px solid black;
+	padding-bottom: 4svh;
+	margin-left: 1svw;
+	margin-right: 1svw;
+}
+
+#BecomeASponsors div div {
 	display: flex;
 	flex-direction: row;
+	border-bottom: none;
+	padding: 0px;
 }
 
 #BecomeASponsors a {
@@ -24,6 +38,7 @@
 	border-radius: 5px;
 	margin-left: 1rem;
 	margin-right: 3rem;
+	width: fit-content;
 }
 
 #BecomeASponsors a:hover {
@@ -41,6 +56,32 @@
 	width: 60%;
 }
 
+#BecomeASponsors table {
+	background-color: white;
+}
+
+#BecomeASponsors table caption {
+	background-color: red;
+	color: white;
+	text-align: start;
+	padding-left: 4svw;
+	font-size: larger;
+}
+
+#BecomeASponsors table thead {
+	background-color: black;
+	color: white;
+	padding: 10px;
+}
+
+.evenRow {
+	background-color: lightgrey;
+}
+
+.oddRow {
+	background-color: whitesmoke;
+}
+
 #Sponsor {
 	background-color: white;
 }
@@ -52,6 +93,7 @@
 h1 {
 	text-align: left;
 	border-bottom: 2px solid black;
+	width: fit-content;
 }
 
 .Sponsors {

src/OurSponsors/OurSponsors.js

@@ -14,7 +14,8 @@ import yaml from "js-yaml";
 const OurSponsors = () => {
 	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
 	const [pastSponsorsDict, setPastSponsorsDict] = useState();
-	const LinktoSponsorOutreachForm = "https://google.com";
+	const LinktoSponsorOutreachForm =
+		"https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
 
 	useEffect(() => {
 		getCurrentSponsors();
@@ -62,6 +63,7 @@ const OurSponsors = () => {
 	return (
 		<div id="OurSponsors">
 			<div id="BecomeASponsors">
+				<div>
 					<h1>How sponsors help us</h1>
 					<p>
 						Schulich Off-Road expresses deep appreciation for sponsors' crucial
@@ -69,7 +71,8 @@ const OurSponsors = () => {
 						participating in competitions. Tailored sponsorship agreements
 						acknowledge each sponsor's unique contributions. As a student-led
 						team, every form of support, whether monetary or in goods and
-					services, is essential for success. Past sponsor assistance includes:
+						services, is essential for success. Past sponsor assistance
+						includes:
 					</p>
 					<ul>
 						<li>Design fabrication</li>
@@ -81,6 +84,8 @@ const OurSponsors = () => {
 						These partnerships signify a commitment to excellence and innovation
 						in engineering.
 					</p>
+				</div>
+				<div>
 					<h1>Become a sponsor</h1>
 					<div>
 						<a
@@ -94,10 +99,12 @@ const OurSponsors = () => {
 							<p>Click on this to open the contact form</p>
 						</a>
 						<p>
-						Talk about how you can reach out to sponsor us. (Maybe also include
+							Talk about how you can reach out to sponsor us. (Maybe also
-						a link to the form as well)
+							include a link to the form as well)
 						</p>
 					</div>
+				</div>
+				<div>
 					<h1>Why Sponsor Us?</h1>
 					<ul>
 						<li>
@@ -110,8 +117,8 @@ const OurSponsors = () => {
 							the Schulich Off-Road team
 						</li>
 						<li>
-						Build mutually beneficial relationships with dedicated and ambitious
+							Build mutually beneficial relationships with dedicated and
-						students
+							ambitious students
 						</li>
 						<li>
 							Benefits include perks for advertising and promoting services and
@@ -121,11 +128,15 @@ const OurSponsors = () => {
 							Collaboration with leading companies to ensure members learn
 							sought-after skills
 						</li>
-					<li>Mitigate frictional unemployment for graduating team members</li>
-					<li>Networking opportunities for members with potential employers</li>
 						<li>
-						Employers can build connections with new generation of engineers to
+							Mitigate frictional unemployment for graduating team members
-						secure jobs and potential employees
+						</li>
+						<li>
+							Networking opportunities for members with potential employers
+						</li>
+						<li>
+							Employers can build connections with new generation of engineers
+							to secure jobs and potential employees
 						</li>
 					</ul>
 					<a
@@ -133,10 +144,10 @@ const OurSponsors = () => {
 						target="_blank"
 						rel="noreferrer">
 						<table>
-						<thead>
+							<caption>
 								<h2>Sponsor Packages</h2>
-						</thead>
+							</caption>
-						<tbody>
+							<thead>
 								<tr>
 									<td>{/*blank on purpose to add spcae for a black box */}</td>
 									<td>Diamond $10,000+</td>
@@ -145,38 +156,57 @@ const OurSponsors = () => {
 									<td>Silver $500</td>
 									<td>Bronze $200</td>
 								</tr>
-							<tr>
+							</thead>
+							<tbody>
+								<tr className="evenRow">
 									<td>Skill Development</td>
 									<td>8</td>
 									<td>4</td>
 									<td>2</td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="oddRow">
 									<td>Shop Visits</td>
 									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="evenRow">
 									<td>Interviews</td>
 									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="oddRow">
 									<td>Portfolios</td>
 									<td>&#10003; (Detailed)</td>
 									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="evenRow">
 									<td>Company Into to team</td>
 									<td>&#10003;</td>
 									<td>&#10003;</td>
 									<td>&#10003;</td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="oddRow">
 									<td>Custom Gift</td>
 									<td>&#10003;</td>
 									<td>&#10003;</td>
 									<td>&#10003;</td>
+									<td></td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="evenRow">
 									<td>Branding on Apperal (single colour)</td>
 									<td>On full sleeve</td>
 									<td>On Sleeve Forearm</td>
@@ -184,7 +214,7 @@ const OurSponsors = () => {
 									<td>Small on back</td>
 									<td>Small on back</td>
 								</tr>
-							<tr>
+								<tr className="oddRow">
 									<td>Logo on Vehicle</td>
 									<td>
 										36in<sup>2</sup>
@@ -198,8 +228,9 @@ const OurSponsors = () => {
 									<td>
 										10in<sup>2</sup>
 									</td>
+									<td></td>
 								</tr>
-							<tr>
+								<tr className="evenRow">
 									<td>Social Media (Min.)</td>
 									<td>Once/2 Weeks</td>
 									<td>Once/Month</td>
@@ -211,6 +242,7 @@ const OurSponsors = () => {
 						</table>
 					</a>
 				</div>
+			</div>
 			<div id="Sponsor">
 				<h1>Current Sponsors</h1>
 				{/* shows the current sponsors only after the data has been recieved */}