add the staff page

4 files changed, 440 insertions, 140 deletions

diff --git a/CS 1300_files/style.css b/CS 1300_files/style.css
index eb61d67..5e84dee 100644
--- a/CS 1300_files/style.css
+++ b/CS 1300_files/style.css
@@ -76,11 +76,6 @@ html {
 	margin: 0px 15px;
 }
 
-.header {
-	width: 65%;
-	align-self: center;
-}
-
 #nav-box {
 	padding: 15px 0px;
 	position: fixed;
@@ -131,126 +126,10 @@ html {
 	align-items: center;
 }
 
-.section {
-	display: flex;
-	min-height: 70vh;
-	flex-direction: column;
-	justify-content: center;
-	padding-bottom: 20px;
-	top: 0;
-	width: 100%;
-	max-width: 100vw;
-	border-top: 5px solid rgb(10,10,10,0.5);
-}
-
-.small-icon {
-	height: 25px;
-	width: auto;
-	margin-right: 10px;
-}
-
-#helpful-links-box {
-	width: 80%;
-	max-width: 700px;
-	flex-wrap: wrap;
-	align-self: center;
-	margin-bottom: 25px;
-	align-content: center;
-}
-
-#helpful-links-box h2 {
-	color: #f5ce5b;
-}
-
-.helpful-link {
-	text-decoration: none;
-	color: white;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	width: 275px;
-	padding: 5px 15px;
-	border-radius: 5px;
-	border: 3px solid white;
-	margin: 10px 0px;
-}
-
-.helpful-link h3 {
-	color: white;
-	margin-left: 5px;
-}
-
-.helpful-link:hover h3 {
-	color: #706881;
-}
-
-.helpful-link:hover {
-	background-color: white;
-	color: black;
-}
-
-.helpful-link .svg-hover {
-	display: none;
-}
-.helpful-link:hover .svg-show {
-	display: none;
-}
-.helpful-link:hover .svg-hover {
-	display: inline;
-}
-
-
-.no-border-helpful-link .svg-hover {
-	display: none;
-}
-.no-border-helpful-link:hover .svg-show {
-	display: none;
-}
-.no-border-helpful-link:hover .svg-hover {
-	display: inline;
-}
-
-.no-border-helpful-link {
-	color: white;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	width: 275px;
-	margin: 10px 0px;
-	text-decoration: underline;
-}
-
-.no-border-helpful-link h3 {
-	color: white;
-	margin-left: 5px;
-}
-.no-border-helpful-link:hover h3 {
-	color: #52A25E;
-}
-
-.no-border-helpful-link:hover {
-	color: #52A25E;
-}
-
-#schedule-iframe {
-	width: 90%;
-	max-width: 985px;
-	height: 80vw;
-	max-height: 800px;
-	margin-bottom: 30px;
-}
-
-#calendar-iframe {
-	max-width: 90%;
-	margin-bottom: 30px;
-}
-
 #faq p {
 	font-size: 16px;
   font-weight: normal;
-  margin: 0px 0px 0px 25px;
+  margin: 0 0 0 25px;
   color: rgb(256,256,256,0.75);
 }
 
@@ -261,7 +140,6 @@ html {
 }
 
 .important-note {
-	width: 60%;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
diff --git a/index.html b/index.html
index 0939daa..765e2e2 100644
--- a/index.html
+++ b/index.html
@@ -926,8 +926,7 @@
       <div
         id="calendar"
         class="flex-column section"
-        style="background-color: #cde6cb"
-      >
+        style="background-color: #cde6cb">
         <div class="header flex-row">
           <img src="./CS 1300_files/succulents-07.png" class="succulent-png" />
           <h1 style="color: #f5ce5b">calendar</h1>
@@ -957,8 +956,7 @@
               margin-bottom: 20px;
               color: #0e6a3e;
               text-transform: uppercase;
-              font-size: 12px;
-            "
+              font-size: 12px;"
           >
             (( Zoom links for TA hours will be in the SignMeUp queue ))
           </h4>
diff --git a/index2.html b/index2.html
index a3c9656..1f05bf3 100644
--- a/index2.html
+++ b/index2.html
@@ -4,13 +4,30 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>HTML 5 Boilerplate</title>
     <link rel="stylesheet" href="/css/reset.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="animations.css">
 
-    <script src="index.js" defer></script>
+    <title>CS 1300 - UI/UX 2022</title>
+    <link rel="icon" href="./images/favicon.png" />
+
+    <link rel="stylesheet" type="text/css" href="./CS 1300_files/style.css" />
+    <link
+            rel="stylesheet"
+            type="text/css"
+            href="./CS 1300_files/convenience.css"
+    />
+    <link rel="stylesheet" type="text/css" href="./CS 1300_files/guest.css" />
+    <link
+            rel="shortcut icon"
+            type="image/png"
+            href="./CS 1300_files/succulents-02.png"
+    />
+    <!--fonts -->
+    <link href="./CS 1300_files/css2" rel="stylesheet" />
 
+    <script src="index.js" defer></script>
+    <script src="./CS 1300_files/jquery.min.js" defer></script>
 </head>
 <body class="text-scale">
     <div class="main-container">
@@ -21,7 +38,7 @@
                 <a class="link" href="#course_info">Course Info</a>
                 <a class="link" href="#full_menu">Full Menu</a>
                 <a class="link" href="#calendar">Calendar</a>
-                <a class="link" href="#kitchen_staff">Kitchen Staff</a>
+                <a class="link" href="#staff">Kitchen Staff</a>
                 <a class="link" href="#faq">FAQ</a>
             </nav>
 
@@ -150,24 +167,414 @@
             </section>
 
             <section id="full_menu">
-                <h2>Full Menu</h2>
-                <p>We <strong>strongly recommend</strong> bookmarking this schedule, as this contains all information regarding
-                        assignments, lectures, studios, and readings.</p>
-                <a class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
+                <div class="header flex-row">
+                    <img src="./CS 1300_files/succulents-02.png" class="succulent-png" />
+                    <h1 style="color: #a29bba">SCHEDULE</h1>
+                    <img src="./CS 1300_files/succulents-02.png" class="succulent-png" />
+                </div>
+                <div class="important-note">
+                    <p>
+                        We <strong>strongly recommend</strong> bookmarking this schedule, as
+                        this contains all information regarding assignments, lectures,
+                        studios, and readings.
+                    </p>
+                    <a class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
+                </div>
 
                 <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?widget=true&amp;headers=false"></iframe>
             </section>
 
             <section id="calendar">
-                <h2>Calendar</h2>
-                    <p>To subscribe to the course gcal, click <a href="https://calendar.google.com/calendar?cid=Y19nMXR0M2lpbjZ2ZDJqcTJlbzFpamJxNmJya0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" target="_blank" class="glow-on-hover">here</a>.</p>
-                    <p>To sign up for TA Hours, please go to <a href="https://hours.cs.brown.edu/" target="_blank" class="glow-on-hover">Hours</a>.</p>
-                    <h4>(( Zoom links for TA hours will be in the Hours queue ))</h4>
+                <div class="header flex-row">
+                    <img src="./CS 1300_files/succulents-07.png" class="succulent-png" />
+                    <h1 style="color: #f5ce5b">calendar</h1>
+                    <img src="./CS 1300_files/succulents-07.png" class="succulent-png" />
+                </div>
+                <div class="important-note">
+                    <p style="color: #2b2a2d; margin-bottom: 10px">
+                        To subscribe to the course gcal, click
+                        <a
+                                class="glow-on-hover"
+                                href="https://calendar.google.com/calendar?cid=Y19nMXR0M2lpbjZ2ZDJqcTJlbzFpamJxNmJya0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t"
+                                target="_blank"
+                                style="color: #52a25e"
+                        >here</a
+                        >.
+                    </p>
+                    <p style="color: #2b2a2d; margin-bottom: 5px">
+                        To sign up for TA Hours, please go to
+                        <a
+                                class="glow-on-hover"
+                                href="https://signmeup.cs.brown.edu/"
+                                target="_blank"
+                                style="color: #52a25e"
+                        >SignMeUp</a
+                        >.
+                    </p>
+                    <h4
+                            style="
+              margin-bottom: 20px;
+              color: #0e6a3e;
+              text-transform: uppercase;
+              font-size: 12px;"
+                    >
+                        (( Zoom links for TA hours will be in the SignMeUp queue ))
+                    </h4>
+                </div>
                 <iframe id="calendar-iframe" class="embedded-iframe"  src="https://calendar.google.com/calendar/embed?src=c_igafsu38m7acism73deqltp8s4%40group.calendar.google.com&ctz=America%2FNew_York"></iframe>
             </section>
 
-            <section id="kitchen_staff">
+            <section id="staff" class="flex-column section" style="background-color: #706881">
+                <div
+                        class="flex-column section"
+                        style="background-color: #706881"
+                >
+                    <div class="header flex-row">
+                        <img src="./CS 1300_files/succulents-06.png" class="succulent-png" />
+                        <h1 style="color: #2bb673">STAFF</h1>
+                        <img src="./CS 1300_files/succulents-06.png" class="succulent-png" />
+                    </div>
+
+                    <div id="emails" class="flex-row wrap-container">
+                        <div class="email">
+                            <h3 style="color: white">uiuxtas@lists.cs.brown.edu</h3>
+                            <h4>(email all TAs, use this by default)</h4>
+                        </div>
+                        <div class="email">
+                            <h3 style="color: white">uiuxhtas@lists.cs.brown.edu</h3>
+                            <h4>(HTAs, Grad TA, &amp; Jeff)</h4>
+                        </div>
+                        <div class="email">
+                            <h3 style="color: white">jeff@cs.brown.edu</h3>
+                            <h4>(sensitive issues)</h4>
+                        </div>
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./CS 1300_files/succulents-jeff.png"
+                                        class="ta-cactus"
+                                />
+                                <img src="./CS 1300_files/jeff.jpg" class="ta-img" />
+                            </div>
+
+                            <div class="flex-column bio-text">
+                                <h3>[professor] jeff</h3>
+                                <h4>
+                                    jeff has been teaching cs 1300 for 8 years ever since its
+                                    inception. he’s studying cs and is an amateur farmer👨‍🌾, plays
+                                    keyboard in a local band, and holds the world record for tech
+                                    internships!
+                                </h4>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-sarah.png"
+                                            class="ta-cactus"
+                                            id="sarah-cactus"
+                                            style="margin-bottom: 3px"
+                                    />
+                                    <img src="./CS 1300_files/sarah.jpg" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>[hta] anika</h3>
+                                    <h4>
+                                        Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.
+                                    </h4>
+                                </div>
+                            </div>
+
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-laura.png"
+                                            class="ta-cactus"
+                                            id="laura-cactus"
+                                            style="margin-bottom: -20px"
+                                    />
+                                    <img src="./CS 1300_files/laura.png" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>[hta] michael</h3>
+                                    <h4>
+                                        Ciao, I’m Michael. I grew up in Cleveland, live in Florida, and was raised by Italians.
+                                        Big olive oil, basketball, and senior vibes.
+                                    </h4>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./CS 1300_files/succulents-talie.png"
+                                        class="ta-cactus"
+                                        style="margin-bottom: 5px"
+                                />
+                                <img src="./CS 1300_files/talie.jpg" class="ta-img" />
+                            </div>
+                            <div class="flex-column bio-text">
+                                <h3>[grad ta] tongyu</h3>
+                                <h4>
+                                    [FIX] Hello I'm Talie. I'm a PhD student working with Jeff on building
+                                    systems to improve mental health. You are welcome and encouraged
+                                    to come ask me for weird bird facts at any time.
+                                </h4>
+                            </div>
+                        </div>
+                        <img
+                                src="./CS 1300_files/shelf.png"
+                                class="shelf-png"
+                                style="margin-top: -35px"
+                        />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>aubrey</h3>
+                                    <h4>
+                                        Hello!! I'm Aubrey, a senior studying cs. I really like studio Ghibli a decade back and drew half of the storyboard of Spirited Away. I'm also really into skiing and photography :)
+                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-michael.png"
+                                            class="ta-cactus"
+                                            id="michael-cactus"
+                                            style="margin-bottom: -53px"
+                                    />
+                                    <img src="./CS 1300_files/michael.jpg" class="ta-img" />
+                                </div>
+                            </div>
+
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>connie</h3>
+                                    <h4>
+                                        Fan of Pantone 3435 C 🍉.
+                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-felicia.png"
+                                            class="ta-cactus"
+                                            id="felicia-cactus"
+                                            style="margin-bottom: 20px"
+                                    />
+                                    <img src="./CS 1300_files/felicia.png" class="ta-img" />
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            id="gabby-cactus"
+                                            src="./CS 1300_files/succulents-gabby.png"
+                                            class="ta-cactus"
+                                            style="margin-bottom: -12px"
+                                    />
+                                    <img src="./CS 1300_files/gabby.jpg" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>dylan</h3>
+                                    <h4>
+                                        Hi everyone, I'm so excited to meet all of you :D -- my name is Dylan, I'm a junior at Brown, and I'm from central MA. I enjoy playing with a new JavaScript framework every week and sometimes actually get real work done. In my free time, I enjoy playing competitive Valorant (join Brown's team!), overspending at cafés, and reading.
+                                    </h4>
+                                </div>
+                            </div>
+
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-sophia.png"
+                                            class="ta-cactus"
+                                    />
+                                    <img src="./CS 1300_files/sophia.jpg" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>isaac</h3>
+                                    <h4>
+                                        Hi! I'm Isaac, a senior studying cognitive science from California. I enjoy playing the violin, exploring with my electric skateboard, running Brown Esports, and shooting films!
+                                    </h4>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>jenny</h3>
+                                    <h4>
+                                        Hey, I am a junior studying CS. Always on the search for cute and elegant designs, places to watch sunsets, and good food!
+                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-ifechi.png"
+                                            class="ta-cactus"
+                                            id="ifechi-cactus"
+                                            style="margin-bottom: -50px"
+                                    />
+                                    <img src="./CS 1300_files/ifechi.png" class="ta-img" />
+                                </div>
+                            </div>
+
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>jessie</h3>
+                                    <h4>
+                                        hi everyone! i’m jessie, a senior from las vegas studying cs and applied math. i love live music, being outdoors, and drinking matcha lattes.
+                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-ndunge.png"
+                                            class="ta-cactus"
+                                            id="ndunge-cactus"
+                                            style="margin-bottom: 15px"
+                                    />
+                                    <img src="./CS 1300_files/ndunge.jpg" class="ta-img" />
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-miranda.png"
+                                            class="ta-cactus"
+                                            id="miranda-cactus"
+                                            style="margin-bottom: -10px"
+                                    />
+                                    <img src="./CS 1300_files/miranda.jpg" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>kelly</h3>
+                                    <h4>
+                                        Hello! I am Kelly, a Senior from California concentrating in CS-Econ and EAS. I enjoy digital illustration, listening to J-pop/K-pop, and watching anime/reading manga. I love Salmon, especially in sushi. I also like collecting things.
+                                    </h4>
+                                </div>
+                            </div>
+
+                            <div class="ta-box-left flex-row">
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-stanley.png"
+                                            class="ta-cactus"
+                                            id="stanley-cactus"
+                                            style="margin-bottom: -5px"
+                                    />
+                                    <img src="./CS 1300_files/stanley.jpg" class="ta-img" />
+                                </div>
+                                <div class="flex-column bio-text">
+                                    <h3>lauren</h3>
+                                    <h4>
+                                        Hi! My name’s Lauren, and I’m a senior studying CS. I love hiking, traveling, and rom-coms, and I’m super excited to meet y’all!
+                                    </h4>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>melissa</h3>
+                                    <h4>Hi I'm a senior studying CS and IAPA from Vancouver, Canada. I love being in the outdoors skiing, hiking, biking or anything at all. I also enjoy eating honey cruller donuts, reading, and playing the board game Go.</h4>
+                                </div>
+                                <!-- <div class="img-box"> -->
+                                <img
+                                        src="./CS 1300_files/succulents-zach.png"
+                                        class="ta-cactus"
+                                />
+                                <!-- <img src="staff/zach.jpg" class="ta-img"> -->
+                                <!-- </div> -->
+                            </div>
+
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>miku</h3>
+                                    <h4>
+                                        Hi I'm Miku, a senior concentrating in CS. I am from Bangkok, Thailand. I love tiramisu, strawberry shortcake, macaron, banana bread, cream puff, mille-feuille, baklava, donuts.... ..
+                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-minna.png"
+                                            class="ta-cactus"
+                                            style="margin-bottom: -5px"
+                                    />
+                                    <img src="./CS 1300_files/minna.jpg" class="ta-img" />
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+
+                    <div class="shelf flex-column">
+                        <div class="flex-row ta-wrapper">
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>nick</h3>
+                                    <h4>Hi! My name is Nick Vadasz and I am a junior studying CS. I'm from rural East Texas, though my whole family is from Hungary. Besides computer science, I love listening to and performing music (Brown U Orchestra 4 lyfe), art, gaming, philosophy, and starting projects that I will never finish.</h4>
+                                </div>
+                                <!-- <div class="img-box"> -->
+                                <img
+                                        src="./CS 1300_files/succulents-zach.png"
+                                        class="ta-cactus"
+                                />
+                                <!-- <img src="staff/zach.jpg" class="ta-img"> -->
+                                <!-- </div> -->
+                            </div>
 
+                            <div class="ta-box-right flex-row">
+                                <div class="flex-column bio-text">
+                                    <h3>sunny</h3>
+                                    <h4>
+                                        Hello! I am a senior studying CS and Behavioral Decision Sciences. I will be working as a product designer in New York after graduation. I love drawing, owning plushies, and drinking boba (very basic, I know). My dream is to travel around the world while working remotely in the future~                                    </h4>
+                                </div>
+                                <div class="img-box">
+                                    <img
+                                            src="./CS 1300_files/succulents-minna.png"
+                                            class="ta-cactus"
+                                            id="minna-cactus"
+                                            style="margin-bottom: -5px"
+                                    />
+                                    <img src="./CS 1300_files/minna.jpg" class="ta-img" />
+                                </div>
+                            </div>
+                        </div>
+                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+                    </div>
+                </div>
             </section>
 
             <section id="faq">
diff --git a/style.css b/style.css
index 7e5662b..73c02f6 100644
--- a/style.css
+++ b/style.css
@@ -175,7 +175,6 @@ course info section
 
 #course_info, #full_menu, #calendar, #important_links {
     justify-content: space-between;
-    padding: 30px 50px 40px 50px;
     align-items: center;
 
     background-color: var(--secondary-color);
@@ -346,4 +345,22 @@ convenience for helpful links
 
 .no-border-helpful-link:hover {
     color: #52A25E;
+}
+
+/*
+kitchen staff - using a grid to match the figma layout
+ */
+#kitchen_staff {
+    grid-template-areas:
+            "jeff tongyu"
+            "shelf shelf shelf shelf shelf shelf"
+            "anika anika anika michael michael michael"
+            "shelf shelf shelf shelf shelf shelf"
+            "aubrey connie dylan"
+            "shelf shelf shelf shelf shelf shelf"
+            "isaac jenny jessie"
+            "shelf shelf shelf shelf shelf shelf"
+            "kelly lauren melissa miku nick sunny";
+            "shelf shelf shelf shelf shelf shelf"
+    grid-template-rows: 200px ;
 }
\ No newline at end of file