From 4049a1584a979b56e29430c07f44178f02bc77bd Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Wed, 1 Jun 2022 19:32:00 -0700
Subject: [PATCH] Added Teams Section

---
 css/general.css | 61 +++++++++++++++++++++++++++++-
 index.html      | 98 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 157 insertions(+), 2 deletions(-)

diff --git a/css/general.css b/css/general.css
index d8f55a5..8057749 100644
--- a/css/general.css
+++ b/css/general.css
@@ -327,7 +327,7 @@ main {
 
 section {
     width: auto;
-    padding: 70px 0px 0 0px;
+    padding-top: 70px;
     text-align: center;
     align-items: center;
     max-width: 1500px;
@@ -915,6 +915,65 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   color: #ffde59;
 }
 
+#team-container {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+}
+
+#team-container article {
+  padding: 20px 50px;
+  width: 400px;
+}
+
+.team-title {
+  font-size: 25px;
+  color:rgb(161, 245, 150)
+}
+
+.team-entry {
+  display: flex;
+  align-content: stretch;
+  padding: 15px 0;
+}
+
+.team-picture {
+  width: auto;
+  height: auto;
+}
+
+.team-picture img {
+  height: 100px;
+  border-radius: 50%;
+  border: 1px solid white;
+}
+
+.team-description {
+  text-align: left;
+  width: auto;
+  display: block;
+  margin-left: 18px;
+}
+
+.person-name {
+  font-size: 20px;
+  color:rgb(99, 169, 250);
+  padding-bottom: 2px;
+}
+
+.person-subtitle {
+  font-size: 15px;
+  color: rgb(129, 129, 129);
+}
+
+.person-contact {
+  font-size: 15px;
+  padding-top: 15px;
+}
+
 /* Utilities */
 #line-header {
     width: 200px;
diff --git a/index.html b/index.html
index a191b7e..63dd8ec 100644
--- a/index.html
+++ b/index.html
@@ -377,7 +377,103 @@
         <section id="team">
             <h2 class="topic">Hackathon Team</h2>
             <hr class="line">
-            
+            <div id="team-container">
+                <article>
+                    <h3 class="team-title">Administration</h3>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                </article>
+                <article>
+                    <h3 class="team-title">Logistics</h3>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                </article>
+                <article>
+                    <h3 class="team-title">Outreach</h3>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                </article>
+                <article>
+                    <h3 class="team-title">Tech</h3>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                </article>
+                <article>
+                    <h3 class="team-title">Marketing</h3>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                    <div class="team-entry">
+                        <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
+                        <div class="team-description">
+                            <h4 class="person-name">Isaac Hwang</h4>
+                            <h5 class="person-subtitle">Lead Organizer</h5>
+                            <h5 class="person-contact">[Email]</h5>
+                        </div>
+                    </div>
+                </article>
+            </div>
         </section>
     </main>
 <!--Footer-->