Add sponsors

Author: ryanzhangofficial

index.html

@@ -40,12 +40,26 @@ <h1>Orbotics</h1>
   </div>
 </section>
 
+
 <section class="stats container">
   <div class="stat"><h2>40+</h2><p>Active Members</p></div>
   <div class="stat"><h2>1</h2><p>Seasons</p></div>
   <div class="stat"><h2>∞</h2><p>Innovation</p></div>
 </section>
 
+<section class="sponsors container">
+  <h2>Our Sponsors</h2>
+  <div class="sponsor-grid">
+    <img src="images/sponsors/csf.png" alt="CSF Logo">
+    <img src="images/sponsors/nasa.png" alt="NASA Logo">
+    <img src="images/sponsors/rlc.png" alt="RLC Logo">
+    <img src="images/sponsors/indus.png" alt="Indus Logo">
+    <img src="images/sponsors/cph.png" alt="CPH Logo">
+    <img src="images/sponsors/lin.jpg" alt="Lin Logo">
+    <img src="images/sponsors/clubfit.png" alt="ClubFit Logo">
+  </div>
+</section>
+
 <section class="gallery container">
   <h2>Season Highlights</h2>
   <div class="gallery-grid">

styles.css

@@ -266,6 +266,31 @@ a {
   }
 }
 
+/* SPONSORS */
+.sponsors {
+  padding-block: 8rem;
+}
+
+.sponsors h2 {
+  text-align: center;
+  color: var(--clr-accent);
+  font-weight: 800;
+  margin-bottom: 2rem;
+}
+
+.sponsor-grid a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sponsor-grid img {
+  max-width: 100%;
+  max-height: 120px;
+  object-fit: contain;
+}
+
+
 /* STATS */
 .stats {
   display: flex;
@@ -289,7 +314,8 @@ a {
 /* GALLERY */
 .gallery {
   padding-block: 4rem;
-  text-align: center
+  text-align: center;
+  color: var(--clr-accent);
 }
 
 .gallery-grid {
@@ -326,12 +352,97 @@ a {
   padding-block: 3rem
 }
 
-.values {
-  list-style: disc;
-  padding-left: 1.5rem;
-  margin-top: 1rem
+.about-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: center;
+  padding-block: 3rem;
+  margin-top: 1.2rem;
+}
+
+.about-text {
+  flex: 1 1 320px
+}
+
+.about-img {
+  flex: 0 1 320px;
+  text-align: center
 }
 
+.about-img img {
+  width: 100%;
+  max-width: 320px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+@media(max-width:800px) {
+  .about-grid {
+    flex-direction: column
+  }
+}
+
+/* ── COACHES GRID ─────────────────────────────────────── */
+.coaches {
+  padding-block: 4rem;
+  text-align: center
+}
+
+.coaches h2 {
+  font-size: clamp(2rem, 5vw, 2.6rem);
+  color: var(--clr-red);
+  margin-bottom: 2rem
+}
+
+.coaches-grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.coach-card {
+  background: var(--clr-surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 2rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: transform var(--transition)
+}
+
+.coach-card:hover {
+  transform: translateY(-6px)
+}
+
+.coach-card img {
+  width: 220px;
+  max-width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: 50%;
+  box-shadow: var(--shadow);
+  margin-bottom: 1rem;
+}
+
+.coach-card h3 {
+  margin: .6rem 0 .25rem;
+  font-size: 1.35rem
+}
+
+.coach-card .role {
+  font-weight: 600;
+  color: var(--clr-accent);
+  margin-bottom: .6rem
+}
+
+.coach-card .desc {
+  font-size: .95rem;
+  line-height: 1.55
+}
+
+
 /* TIMELINE */
 .timeline {
   position: relative;