added sponsor: added side border and started on sponsor css

src/OurSponsors/OurSponsors.css

@@ -1,6 +1,12 @@
 :root {
 	--tableBackground: white;
+	--sponsorBorderWidth: 2px;
+	--sponsorBorderStyle: solid;
+	--sponsorBorderColour: black;
+	--sponsorBorder: var(--sponsorBorderWidth) var(--sponsorBorderStyle)
+		var(--sponsorBorderColour);
 }
+
 #OurSponsors {
 	display: flex;
 	flex-direction: column;
@@ -17,7 +23,6 @@
 #BecomeASponsors div {
 	display: flex;
 	flex-direction: column;
-	border-bottom: 2px solid black;
 	padding-bottom: 4svh;
 	margin-left: 1svw;
 	margin-right: 1svw;
@@ -90,10 +95,48 @@
 	text-align: end;
 }
 
-h1 {
+#OurSponsors h1 {
+	position: relative;
 	text-align: left;
-	border-bottom: 2px solid black;
+	border-bottom: var(--sponsorBorder);
+	border-top: var(--sponsorBorder);
 	width: fit-content;
+	padding-top: 2svh;
+	padding-bottom: 2svh;
+}
+
+#OurSponsors #h1Exception {
+	border-top: none;
+}
+
+/* this hurt me  but we now have a border at the side*/
+#sideBorder {
+	display: flex;
+	flex-direction: row;
+	padding-top: 2svh;
+	padding-bottom: 2svh;
+	margin-top: 2svh;
+	margin-bottom: 4svh;
+	border-bottom: var(--sponsorBorder);
+	align-items: center;
+}
+
+#sideBorder h1 {
+	padding-right: 2svw;
+	margin: 0px;
+	width: fit-content;
+	border: none;
+}
+
+#sideBorder div {
+	background-color: var(--sponsorBorderColour);
+	flex: 1;
+	height: var(--sponsorBorderWidth);
+}
+
+#Sponsor .Sponsors h1 {
+	width: 100%;
+	border: none;
 }
 
 .Sponsors {
@@ -122,17 +165,18 @@ h1 {
 	flex-direction: row;
 }
 
+.Sponsors a div div {
+	display: flex;
+	flex-direction: column;
+	padding-left: 5svw;
+}
+
 .Sponsors a h4 {
-	width: 30%;
+	width: fit-content;
+	border-bottom: var(--sponsorBorder);
 }
 
 .Sponsors a img {
-	max-height: 8rem;
+	max-height: 24svh;
-	max-width: 70%;
+	width: 25svw;
-}
-
-.Sponsors a p {
-	padding: 2rem;
-	padding-top: 5px;
-	padding-bottom: 5px;
 }

src/OurSponsors/OurSponsors.js

@@ -64,7 +64,7 @@ const OurSponsors = () => {
 		<div id="OurSponsors">
 			<div id="BecomeASponsors">
 				<div>
-					<h1>How sponsors help us</h1>
+					<h1 id="h1Exception">How sponsors help us</h1>
 					<p>
 						Schulich Off-Road expresses deep appreciation for sponsors' crucial
 						support in various team operations, from sourcing parts to
@@ -244,7 +244,10 @@ const OurSponsors = () => {
 				</div>
 			</div>
 			<div id="Sponsor">
-				<h1>Current Sponsors</h1>
+				<div id="sideBorder">
+					<h1>Current Sponsors</h1>
+					<div></div>
+				</div>
 				{/* shows the current sponsors only after the data has been recieved */}
 				{currentSponsorsDict === undefined ? (
 					<p>Loading...</p>
@@ -253,7 +256,9 @@ const OurSponsors = () => {
 						{/* gets the outmost name of the Object Name of tier*/}
 						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
 							return (
-								<div className="Sponsors">
+								<div
+									key={sponsorsTier}
+									className="Sponsors">
 									<h3>{sponsorsTier}</h3>
 									{/* gets key form list of tier */}
 									{Object.keys(currentSponsorsDict[sponsorsTier]).map(
@@ -270,22 +275,25 @@ const OurSponsors = () => {
 															];
 														return (
 															<a
+																key={sponsorData}
 																href={sponsorData.Url}
 																target="_blank"
 																rel="noreferrer">
 																<div>
-																	<h4>{sponsorName}</h4>
 																	<img
 																		src={sponsorData.LogoUrl}
 																		alt={sponsorName + "'s Logo"}
 																	/>
-																</div>
-																{(sponsorsTier !== "Silver Tier" ||
-																	sponsorsTier !== "Bronze Tier") && (
 																	<div>
-																		<p>{sponsorData.DescriptionAboutSponsor}</p>
+																		<h4>{sponsorName}</h4>
+																		{(sponsorsTier !== "Silver Tier" ||
+																			sponsorsTier !== "Bronze Tier") && (
+																			<p>
+																				{sponsorData.DescriptionAboutSponsor}
+																			</p>
+																		)}
 																	</div>
-																)}
+																</div>
 															</a>
 														);
 													})}