feat(homePage): css done, need to add perminant photos

src/Home/Home.css

@@ -35,11 +35,86 @@
 /* #HomeTop div h2 {
 } */
 
-#HomePageLayout div {
+.HomePageLayout div {
 	display: flex;
+	padding-top: 2.5svh;
+	padding-bottom: 2.5svh;
+	margin-left: 15svh;
+	margin-right: 15svh;
 }
 
-#HomePageLayout div div {
+.HomePageLayout img {
+	/* height: 5svh;
+	width: 5svw; */
+	flex-grow: 1;
+}
+
+.HomePageLayout a {
+	/* text-decoration: none; */
+	color: inherit;
+
+	border: solid 2px black;
+	padding: 10px;
+
+	text-align: center;
+}
+
+.HomePageLayout h2 {
+	border-bottom: solid 3px black;
+	padding-left: 2svw;
+	/* margin-left: 2svw; */
+	/* margin-right: 2svw; */
+}
+
+.HomePageLayout div div {
 	display: flex;
 	flex-direction: column;
+	width: 50%;
+	justify-content: space-between;
+	padding: 0px;
+}
+
+#HomeBottomGallery {
+	flex-grow: 0;
+	width: inherit;
+
+	height: 40svh;
+}
+
+#HomeSponsors {
+	display: flex;
+	flex-direction: column;
+
+	border-radius: 15px;
+	border: solid 2px black;
+
+	padding: 30px;
+}
+
+#HomeSponsors div {
+	width: inherit;
+}
+
+#HomeSponsors div div {
+	display: flex;
+	flex-direction: row;
+
+	width: inherit;
+
+	justify-content: space-around;
+	padding: 0px;
+}
+
+#HomeSponsorLinks {
+	display: flex;
+	flex-direction: row;
+	width: inherit;
+
+	justify-content: space-around;
+	background-color: aqua;
+}
+
+#HomeSponsorLinks a {
+	padding-left: 5svw;
+	padding-right: 5svw;
 }

src/Home/Home.jsx

@@ -45,7 +45,7 @@ export default function Home() {
 					<h2>Catchphase goes here</h2>
 				</div>
 			</div>
-			<div id="HomePageLayout">
+			<div className="HomePageLayout">
 				<div>
 					<img
 						src="https://picsum.photos/200"
@@ -99,9 +99,21 @@ export default function Home() {
 						alt="possibly a montage mainly showcasing team members working"
 					/>
 				</div>
-				<div>
+				<div id="HomeSponsors">
-					Sponsor Section
+					<h2>Sponsor Section</h2>
 					<div>
+						<div>
+							<p>Sponsor 1</p>
+							<p>Sponsor 2</p>
+							<p>Sponsor 3</p>
+						</div>
+						<div>
+							<p>Sponsor 4</p>
+							<p>Sponsor 5</p>
+							<p>Sponsor 6</p>
+						</div>
+					</div>
+					<div id="HomeSponsorLinks">
 						<Link to={"/OurSponsors"}>See All</Link>
 						<Link to={"/OurSponsors"}>Support Us</Link>
 					</div>
@@ -123,7 +135,7 @@ export default function Home() {
 						<Link to={"/OurSponsors"}>Learn More</Link>
 					</div>
 				</div>
-				<div>
+				<div id="HomeBottomGallery">
 					<img
 						src="https://picsum.photos/200"
 						alt="(If we do a rotating images thing for the top, and still want to keep this on the bottom, maybe we can change it to a more collage type thing for this box)"