Alex's sponor tiers update v1.0 (#53)

* my changes * deleted the packet changed some of the texts * nearly finished with moving the sponor tiers just swap and crop the image at ~line 81 and we should be good! * Update sponsors.html this will be probably be the final update until I figure out how to get the boxes correct
iscumd · Aug 5, 2024 · fd4719b · fd4719b
1 parent a6632e2
commit fd4719b
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 5 deletions.
diff --git a/sass/components/_alexbox.scss b/sass/components/_alexbox.scss
@@ -0,0 +1,43 @@
+.box {
+    border: 2px solid #000;
+    padding: 20px;
+    width: 80%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--bg-color); /* Use the CSS variable for background color */
+    border-radius: 25px;
+}
+.box-img {
+    max-width: 30%;
+    height: 100px;
+    width: 100px;
+    align-items: right;
+}
+.box-content-with-image {
+    max-width: 65%;
+    height: auto;
+    width: auto;
+    display: grid;
+    align-items: center;
+
+}
+.box-content{
+    align-items: center;
+}
+.box-content-super{
+    margin: 5%;
+    width: 90%;
+    align-self: auto;
+}
+.header {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center; /* Center-align the header */
+}
+.paragraph {
+    font-size: 18px;
+    margin: 8px;
+}
diff --git a/sponsors.html b/sponsors.html
@@ -61,12 +61,75 @@ <h2>Sponsorship Levels</h2>
 
 						<!-- Level Descriptions image -->
 						<!-- <img src="images/IAVS_topdown_compressed.jpg" style="height: 100%; width: 100%; object-fit: contain" alt="Working in lab-space"> -->
-						<img src="images/level_descriptions.jpg" style="height: 100%; width: 100%; object-fit: contain" alt="Sponsor Level Descriptions"> 
-					</section>
+
+					<!-- Better Sponsor packet description -->
+
+
+		<link rel="stylesheet" href="sass/components/_alexbox.scss"> <!-- Link to the external CSS file -->
+					<body>
+						<div class="body" style="--bg-color: rgb(227, 218, 218);">
+							<div class="box-content-super">
+    					<div class="box" style="--bg-color: rgb(255, 188, 146);">
+        				<div class="box-content">
+							<!-- for an image use the "box-content-with-image"-->
+           					<div class="header">NATTU | $10,000+</div>
+
+            				<div class="paragraph">Named in honor of club founder Professor Nattu Natarajan for the time and effort
+								he put into ISC. Your support of the club is indispensable much like his. In addition
+								to all the benefits below, you also get mentioned in our social media posts.
+							</div>
+       					</div>
+						<!--
+						<div class="box-img">
+							<img src="images\kart scene.jpg" alt="cooler Image">
+						</div>
+						-->
+    					</div>
+						<div class="box" style="--bg-color: rgb(255, 233, 165);">
+        					<div class="box-content">
+            				<div class="header">MAIZE | $5,000+</div>
+
+            					<div class="paragraph">As a Maize level sponsor, you are a pillar of our club. Your substantial contribution is greatly
+									valued and instrumental in supporting our projects and competitions. You get early access to ISC
+									resumes for internship and job recruitment. You also get featured on our website.
+								</div>
+        					</div>
+    						</div>
+
+							<div class="box" style="--bg-color: rgb(160, 182, 203);">        				
+								<div class="box-content">
+            				<div class="header">BLUE | $1,000+</div>
+
+            					<div class="paragraph">Your generous donation allows us to implement major improvements and initiatives within our
+									club. With your support, we can achieve substantial progress on projects. You get to have your
+									logo on our uniforms.</div>
+        					</div>
+    						</div>	
+						<div class="box" style="--bg-color: rgb(228, 228, 228);">
+        					<div class="box-content">
+            				<div class="header">PARTNER | $500+</div>
+
+            					<div class="paragraph">We deeply appreciate your commitment and support at this level. Your contribution helps us
+									cover essential expenses, driving the club towards greater success. You get a decal on our
+									autonomous go-kart Phoenix</div>
+        					</div>
+    						</div>
+						<div class="box" style="--bg-color: rgb(202, 241, 236);">
+        					<div class="box-content">
+            				<div class="header">FRIEND | < $500</div>
+
+            					<div class="paragraph">Contributions at this level demonstrate your belief in our mission and help us steadily advance
+									towards our objectives. We appreciate every contribution, no matter the size. You get to have
+									your logo displayed on our website.</div>
+        					</div>
+    						</div>
+							</div>
+						</div>
+					</body>
+
 					<!-- Sponsor payment form and logo -->
 					<section id="sponsor_form" class="main special">
 						<header class="major">
-							<h2>Supporting ISC</h2>
 						</header>
 						<div style="text-align: center;">
 							<p>
@@ -86,8 +149,8 @@ <h2>Supporting ISC</h2>
 							<iframe src="https://leadersandbest.umich.edu/find/#!/give/basket/fund/326936" style="border-width:0; min-width: 100%" height="1100"></iframe>
 							-->
 							<p>
-								In addition to contributing to the learning of students at University of Michigan-Dearborn, your company logo
-								will be added to our club apparel and added to our list of sponsors shown below!
+								A special thanks to all of our generous supporters!<br>
+								we couldn't have done it Without you!
 							</p>
 							<!-- <img class="sponsor-logo" src="images/ford-logo-2017.png" alt="Ford logo"> As of 2024 Ford is not a sponsor -->
 							<img class="sponsor-logo" src="images/magna-logo.svg" alt="Magna logo">