diff options
| -rwxr-xr-x | index.html | 146 | ||||
| -rwxr-xr-x | styles.css | 35 |
2 files changed, 88 insertions, 93 deletions
@@ -218,16 +218,7 @@ </div> <article class="flex-column"> <div class="shelf flex-column"> - <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> - <h3>[professor] jeff</h3> - <h4> - jeff has been teaching cs 1300 for 10 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 class="ta-box-left flex-row ta-wrapper"> <div class="img-box"> <img src="./assets/pastry-photos/jeff.png" @@ -236,28 +227,36 @@ /> <img src="assets/bio-photos/jeff.jpg" class="ta-img" alt="jeff's image"/> </div> + <div class="bio-text"> + <h3>[professor] jeff</h3> + <p> + jeff has been teaching cs 1300 for 10 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! + </p> + </div> </div> <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/> </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>[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 class="ta-box-left flex-row"> <div class="img-box"> <img - src="./assets/pastry-photos/anika.png" - class="ta-pastry" - id="anika-pastry" - style="margin-bottom: 3px" - alt="anika's pastry" + src="./assets/pastry-photos/anika.png" + class="ta-pastry" + id="anika-pastry + alt="anika's pastry" /> - <img src="./assets/bio-photos/anika.jpeg" class="ta-img" alt="anika's image"/> + <img src="./assets/bio-photos/anika.jpeg" class="ta-img" alt="anika's image"/> + </div> + <div class="bio-text"> + <h3>[hta] anika</h3> + <p> + Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods. + </p> </div> </div> @@ -267,16 +266,15 @@ src="./assets/pastry-photos/michael.png" class="ta-pastry" id="michael-pastry" - style="margin-bottom: 3px" alt="michael's pastry" /> <img src="./assets/bio-photos/michael.jpg" class="ta-img" alt="michael's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>[hta] michael</h3> - <h4> + <p> Ciao! Give me a cannoli or a sfogliatella then I'll be happy 😄😋 - </h4> + </p> </div> </div> </div> @@ -284,7 +282,7 @@ </div> <div class="shelf flex-column"> - <div class="ta-box-left flex-row"> + <div class="ta-wrapper ta-box-left flex-row"> <div class="img-box"> <img src="./assets/pastry-photos/tongyu.png" @@ -294,11 +292,11 @@ /> <img src="./assets/bio-photos/tongyu.jpeg" class="ta-img" alt="tongyu's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>[grad ta] tongyu</h3> - <h4> + <p> Hiya, I'm Tongyu! I'm a PhD student working with Jeff on creativity support and specifically drawing/design tools. I doodle with watercolours a lot and play all types of video games except FPSes (they make me dizzy @_@) - </h4> + </p> </div> </div> <img @@ -311,18 +309,17 @@ <div class="shelf flex-column"> <div class="flex-row ta-wrapper"> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>aubrey</h3> - <h4> + <p> 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> + </p> </div> <div class="img-box"> <img src="./assets/pastry-photos/aubrey.png" class="ta-pastry" id="aubrey-pastry" - style="margin-bottom: 3px" alt="aubrey's pastry" /> <img src="./assets/bio-photos/aubrey.jpeg" class="ta-img" alt="aubrey's image"/> @@ -330,18 +327,17 @@ </div> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>connie</h3> - <h4> + <p> Fan of Pantone 3435 C 🍉. - </h4> + </p> </div> <div class="img-box"> <img src="./assets/pastry-photos/connie.png" class="ta-pastry" id="connie-pastry" - style="margin-bottom: 3px" alt="connie's pastry" /> <img src="./assets/bio-photos/connie.jpg" class="ta-img" alt="connie's image"/> @@ -359,16 +355,15 @@ src="./assets/pastry-photos/dylan.png" class="ta-pastry" id="dylan-pastry" - style="margin-bottom: 3px" alt="dylan's pastry" /> <img src="./assets/bio-photos/dylan.jpg" class="ta-img" alt="dylan's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>dylan</h3> - <h4> + <p> 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> + </p> </div> </div> @@ -378,16 +373,15 @@ src="./assets/pastry-photos/isaac.png" class="ta-pastry" id="isaac-pastry" - style="margin-bottom: 3px" alt="isaac's pastry" /> <img src="./assets/bio-photos/isaac.jpg" class="ta-img" alt="isaac's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>isaac</h3> - <h4> + <p> 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> + </p> </div> </div> </div> @@ -397,18 +391,17 @@ <div class="shelf flex-column"> <div class="flex-row ta-wrapper"> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>jenny</h3> - <h4> + <p> Hey, I am a junior studying CS. Always on the search for cute and elegant designs, places to watch sunsets, and good food! - </h4> + </p> </div> <div class="img-box"> <img src="./assets/pastry-photos/jenny.png" class="ta-pastry" id="jenny-pastry" - style="margin-bottom: 3px" alt="jenny's pastry" /> <img src="./assets/bio-photos/jenny.jpeg" class="ta-img" alt="jenny's image"/> @@ -416,18 +409,17 @@ </div> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>jessie</h3> - <h4> + <p> 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> + </p> </div> <div class="img-box"> <img src="./assets/pastry-photos/jessie.png" class="ta-pastry" id="jessie-pastry" - style="margin-bottom: 3px" alt="jessie's pastry" /> <img src="./assets/bio-photos/jessica.jpeg" class="ta-img" alt="jessie's image"/> @@ -445,16 +437,15 @@ src="./assets/pastry-photos/kelly.png" class="ta-pastry" id="kelly-pastry" - style="margin-bottom: 3px" alt="kelly's pastry" /> <img src="./assets/bio-photos/kelly.jpg" class="ta-img" alt="kelly's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>kelly</h3> - <h4> + <p> 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> + </p> </div> </div> @@ -464,16 +455,15 @@ src="./assets/pastry-photos/lauren.png" class="ta-pastry" id="lauren-pastry" - style="margin-bottom: 3px" alt="lauren's pastry" /> <img src="./assets/bio-photos/lauren.jpeg" class="ta-img" alt="lauren's image"/> </div> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>lauren</h3> - <h4> + <p> 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> + </p> </div> </div> </div> @@ -483,16 +473,15 @@ <div class="shelf flex-column"> <div class="flex-row ta-wrapper"> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="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> + <p>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.</p> </div> <div class="img-box"> <img src="./assets/pastry-photos/melissa.png" class="ta-pastry" id="melissa-pastry" - style="margin-bottom: 3px" alt="melissa's pastry" /> <img src="./assets/bio-photos/melissa.jpg" class="ta-img" alt="melissa's image"/> @@ -500,18 +489,17 @@ </div> <div class="ta-box-right flex-row"> - <div class="flex-column bio-text"> + <div class="bio-text"> <h3>miku</h3> - <h4> + <p> 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> + </p> </div> <div class="img-box"> <img src="./assets/pastry-photos/miku.png" class="ta-pastry" id="miku-pastry" - style="margin-bottom: 3px" alt="miku's pastry" /> <img src="./assets/bio-photos/miku.jpeg" class="ta-img" alt="miku's image"/> @@ -529,33 +517,31 @@ src="./assets/pastry-photos/nick.png" class="ta-pastry" id="nick-pastry" - style="margin-bottom: 3px" alt="nick's pastry" /> <img src="./assets/bio-photos/nick.png" class="ta-img" alt="nick's image"/> </div> - <div class="flex-column bio-text"> + <div class="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> + <p>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.</p> </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="ta-box-left flex-row"> <div class="img-box"> <img src="./assets/pastry-photos/sunny.png" class="ta-pastry" id="sunny-pastry" - style="margin-bottom: 3px" alt="sunny's pastry" /> <img src="./assets/bio-photos/sunny.jpeg" class="ta-img" alt="sunny's image"/> </div> + <div class="bio-text"> + <h3>sunny</h3> + <p> + 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~ </p> + </div> </div> </div> <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/> @@ -570,25 +570,31 @@ staff area } .ta-box-left, .ta-box-right { - margin: 0 20px; + margin: 0 10px; +} + +.ta-box-left .img-box { + margin-right: 10px; +} + +.ta-box-right .img-box { + margin-left: 10px; } .ta-pastry { - width: 150px; + width: 120px; height: auto; text-shadow: 0 0 25px brown; z-index: 1; align-self: flex-end; opacity: 1; transition: .5s ease; - border-radius: 25%; - padding-bottom: 20px; } .bio-text { justify-content: center; - text-align: center; font-size: 120%; + padding: 5px; } .bio-text h3 { @@ -596,20 +602,18 @@ staff area margin: 0; } -.bio-text h4 { - font-size: 14px; +.bio-text p { + font-size: 12px; letter-spacing: normal; text-transform: none; - max-width: 200px; + max-width: 250px; line-height: 1.25; - margin-bottom: 35px; font-weight: normal; - padding: 0 5px; color: var(--second-accent-color); } .shelf-png { - width: 800px; + width: 900px; height: auto; margin-top: -30px; } @@ -618,14 +622,15 @@ staff area cursor: default; position: relative; height: 100%; + margin-bottom: 3px; } .ta-img { transition: .5s ease; opacity: 0; position: absolute; - top: calc(50% - 25px); + top: calc(50% - 5px); left: 50%; - height: 150px; + height: 120px; border-radius: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); @@ -642,6 +647,10 @@ staff area align-items: flex-end; } +.ta-wrapper { + margin-bottom: 35px; +} + /* faq area |