From c156e3f62f157a26118560d48d27c7f385671205 Mon Sep 17 00:00:00 2001
From: Rushil Umaretiya <rushilwiz@gmail.com>
Date: Mon, 16 Aug 2021 18:15:27 +0200
Subject: [PATCH] feat: finished template for officers

---
 css/index.css     |  2 +-
 css/officers.css  | 54 ++++++++++++++++++++++++++++
 css/officers.sass | 41 ++++++++++++++++++++-
 officers.html     | 91 ++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 185 insertions(+), 3 deletions(-)

diff --git a/css/index.css b/css/index.css
index e122d85..ef7b2bd 100755
--- a/css/index.css
+++ b/css/index.css
@@ -5,7 +5,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   pointer-events: none;
-  overflow: hidden !important;
+  overflow-x: hidden;
 }
 
 a {
diff --git a/css/officers.css b/css/officers.css
index adaeed3..b86d6f5 100755
--- a/css/officers.css
+++ b/css/officers.css
@@ -159,7 +159,22 @@ header nav .burger div {
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   width: 100%;
+  margin-bottom: 2em;
+}
+
+@media (max-width: 1100px) {
+  .row {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
 }
 
 .column {
@@ -182,4 +197,43 @@ header nav .burger div {
   text-align: center;
   font-size: 4em;
 }
+
+.profile {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.profile img {
+  width: 200px;
+  height: 200px;
+  background-color: #ffd1dc;
+  border-radius: 50%;
+}
+
+.profile h1 {
+  font-family: "Poppins", sans-serif;
+  font-size: 1.6em;
+  margin-top: 0.3em;
+}
+
+.profile h2 {
+  font-family: "Playfair Display", serif;
+  font-size: 1em;
+}
+
+.profile p {
+  font-family: sans-serif;
+  width: 60%;
+  margin: 0 auto;
+  margin-top: 0.5em;
+}
+
+.profile p a {
+  text-decoration: none;
+  color: #11c1e0;
+}
+
+.profile.single p {
+  width: 30%;
+}
 /*# sourceMappingURL=officers.css.map */
\ No newline at end of file
diff --git a/css/officers.sass b/css/officers.sass
index 51e2fe5..0508751 100755
--- a/css/officers.sass
+++ b/css/officers.sass
@@ -7,7 +7,13 @@
   display: flex
   flex-direction: row
   flex-wrap: wrap
+  align-content: center
+  justify-content: center
   width: 100%
+  margin-bottom: 2em
+
+  @include mobile
+    flex-direction: column
 
 .column 
   display: flex
@@ -18,4 +24,37 @@
 .header
   font-family: $subtitle-stack
   text-align: center
-  font-size: 4em
\ No newline at end of file
+  font-size: 4em
+
+
+.profile
+  margin: 0 auto
+  text-align: center
+
+  img
+    width: 200px
+    height: 200px
+    background-color: #ffd1dc
+    border-radius: 50%
+  
+  h1
+    font-family: $title-stack
+    font-size: 1.6em
+    margin-top: 0.3em
+  
+  h2
+    font-family: $subtitle-stack
+    font-size: 1em
+  
+  p
+    font-family: sans-serif
+    width: 60%
+    margin: 0 auto
+    margin-top: 0.5em
+
+    a
+      text-decoration: none
+      color: #11c1e0
+  
+  &.single p
+    width: 30%
\ No newline at end of file
diff --git a/officers.html b/officers.html
index ebb51cb..a1269c1 100755
--- a/officers.html
+++ b/officers.html
@@ -37,10 +37,99 @@
         <div class="column">
           <div class="profile">
             <img />
+            <h1>Swesik Ramenini</h1>
+            <h2>Captain</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
           </div>
         </div>
         <div class="column">
-          <div>Some Text in Column Two</div>
+          <div class="profile">
+            <img />
+            <h1>Atin Pothiraj</h1>
+            <h2>Captain</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="column">
+          <div class="profile">
+            <img />
+            <h1>Rhea Goswami</h1>
+            <h2>Teaching Coordinator</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="profile">
+            <img />
+            <h1>Arya Sapra</h1>
+            <h2>Teaching Coordinator</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="column">
+          <div class="profile">
+            <img />
+            <h1>Rushil Umaretiya</h1>
+            <h2>Treasurer/Webmaster</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="profile">
+            <img />
+            <h1>Allison Zhong</h1>
+            <h2>Publicist</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="column">
+          <div class="profile single">
+            <img />
+            <h1>Tanvi Pedireddi</h1>
+            <h2>Research Coordinator</h2>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
+              quisquam magni rerum, beatae vel deleniti temporibus tempore
+              voluptas impedit enim similique vero eos est, molestiae explicabo
+              quam eligendi sapiente odit? <a href="#">More</a>
+            </p>
+          </div>
         </div>
       </div>
     </section>