Skip to content
Snippets Groups Projects
Commit 91321f03 authored by Karoline Krone's avatar Karoline Krone
Browse files

Team page done (missing minor features)

parent b0c4604d
No related branches found
No related tags found
No related merge requests found
Pipeline #417143 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
static/style.css
+ 122
− 26
View file @ 91321f03
/* Colors */
:root {
--pine-blue: rgb(28,68,68);
......@@ -10,6 +8,13 @@
--blue-hover: rgba(140, 244, 235, 0.4);
--red: rgb(255, 0, 0);
--white : rgb(255, 255, 255);
--team-leader: rgb(175, 175, 175);
--wetlab-leader: rgb(153,45,34);
--drylab-leader: rgb(113,54,139);
--outreach-leader: rgb(69,140,78);
--wetlab: rgb(231,76,60);
--drylab: rgb(155,89,183);
--outreach: rgb(92,189,158);
}
/* general */
......@@ -223,29 +228,6 @@ p {
transition: opacity 0.15s;
}
@media(max-width:800px) {
.navbar .links {
display: none;
flex-direction: column;
width: 100%;
top: 65px;
position: absolute;
background-color:var(--pine-blue);
}
.navbar .toggle_btn {
display: block;
}
.navbar .links.open {
display: flex;
padding: 0;
}
.navbar .links .dropdown_menu {
position: static;
width: 100%;
}
}
/* General Page Structure */
body {
font-family: arial;
......@@ -289,6 +271,88 @@ row-gap: 10px;
text-decoration: underline;
}
/* TEAM PAGE */
.team-content {
display: flex;
justify-content: center;
}
.member-grid {
display: grid;
grid-template-columns: repeat(4, 200px);
gap: 75px;
}
.team-div {
height: auto;
width: 200px;
text-align: center;
border-radius: 10px;
box-shadow: 0px 5px 10px #888888;
}
.team-div img {
display: block;
background-color: red;
object-fit: cover;
object-position: top;
height: 225px;
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.image-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.image-container:hover .overlay {
opacity: 1;
}
.member-name {
font-size: 18px;
}
.member-info {
margin: 5px 0px;
}
.team-leader, .wetlab-leader, .drylab-leader, .outreach-leader, .wetlab, .drylab, .outreach {
display: inline;
color: black;
background-color: var(--team-leader);
padding: 3px 12px;
border-radius: 15px;
}
.wetlab-leader {
background-color: var(--wetlab-leader);
}
.drylab-leader {
background-color: var(--drylab-leader);
}
.outreach-leader {
background-color: var(--outreach-leader);
}
.wetlab {
background-color: var(--wetlab);
}
.drylab {
background-color: var(--drylab);
}
.outreach {
background-color: var(--outreach);
}
/* Scaling */
@media (min-width: 1200px) {
.content {
......@@ -300,6 +364,11 @@ row-gap: 10px;
margin: 0px 100px;
}
}
@media (max-width: 1100px) {
.member-grid {
grid-template-columns: repeat(3, 200px);
}
}
@media (max-width: 1000px) {
.content {
margin: 0px;
......@@ -311,6 +380,30 @@ row-gap: 10px;
display: none;
}
}
@media(max-width:800px) {
.navbar .links {
display: none;
flex-direction: column;
width: 100%;
top: 65px;
position: absolute;
background-color:var(--pine-blue);
}
.navbar .toggle_btn {
display: block;
}
.navbar .links.open {
display: flex;
padding: 0;
}
.navbar .links .dropdown_menu {
position: static;
width: 100%;
}
.member-grid {
grid-template-columns: repeat(2, 200px);
}
}
@media (max-width: 650px) {
.content {
grid-template-columns: 1fr;
......@@ -329,4 +422,7 @@ row-gap: 10px;
.contact-container {
margin-top: 30px;
}
}
\ No newline at end of file
.member-grid {
grid-template-columns: repeat(1, 200px);
}
}
wiki/pages/team.html
+ 260
− 24
View file @ 91321f03
......@@ -5,30 +5,266 @@
{% block page_content %}
<div class="row">
<div class="col-8">
<h2>What should this page contain?</h2>
<hr>
<ul>
<li>Include pictures of your teammates, don't forget instructors and advisors!</li>
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
</ul>
<div class="bd-callout bd-callout-info"><strong>Important:</strong> Your wiki pages will be archived at the end of the iGEM season and this content will remain online. Please keep this in mind as you post photos and personal information on this page.</div>
</div>
<div class="col-4">
<h2>Inspirations</h2>
<hr>
<ul>
<li><a href="https://2019.igem.org/Team:CU/Team">2019 CU</a></li>
<li><a href="https://2019.igem.org/Team:UANL/Team">2019 UANL</a></li>
<li><a href="https://2019.igem.org/Team:William_and_Mary/Team">2019 William and Mary</a></li>
<li><a href="https://2020.igem.org/Team:BOKU-Vienna/Team">2020 BOKU Vienna </a></li>
<li><a href="https://2020.igem.org/Team:CAU_China/Team_Member">2020 CAU China</a></li>
<li><a href="https://2020.igem.org/Team:Lethbridge/Members">2020 Lethbridge</a></li>
</ul>
<div class="team-content">
<div class="member-grid">
<!-- Sarah -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/sarah-1.webp">
<div class="overlay">Hi, I’m Sarah (38). I’m the PI and biotechnology teacher for some of the team members. A fun fact about me is that I am really good at playing Mario Kart</div>
</div>
<div class="member-info">
<p class="member-name">
Sarah
</p>
<p class="team-leader">
PI
</p>
</div>
</div>
<!-- Viktor -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/viktor-3.webp">
<div class="overlay">Hi, I'm Viktor (19). I'm the team leader. A fun fact about me is that I can't sleep, nor do I have the time to</div>
</div>
<div class="member-info">
<p class="member-name">
Viktor
</p>
<p class="team-leader">
Team Leader
</p>
</div>
</div>
<!-- Caitlin -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/caitlin-1.webp">
<div class="overlay">Hi, I'm Caitlin (19). I'm the Co-leader of wetlab together with Marie. A fun fact about me is that I’m British but I really can’t stand tea, though I do enjoy scones and crumpets</div>
</div>
<div class="member-info">
<p class="member-name">
Caitlin
</p>
<p class="wetlab-leader">
Wetlab Leader
</p>
</div>
</div>
<!-- Marie -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/marie-1.webp">
<div class="overlay">Hi I’m Marie (19). I'm the co leader of wetlab together with Caitlin. A fun fact about me is that I am the team mommy and enjoy knitting</div>
</div>
<div class="member-info">
<p class="member-name">
Marie
</p>
<p class="wetlab-leader">
Wetlab Leader
</p>
</div>
</div>
<!-- Johannes -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/johannes-1.webp">
<div class="overlay">Hi, I’m Johannes (19). I’m the main leader at drylab. A fun fact about me is that I have a laboratory in my parents’ basement, like a true nerd, with a flow hood I built myself</div>
</div>
<div class="member-info">
<p class="member-name">
Johannes
</p>
<p class="drylab-leader">
Drylab Leader
</p>
</div>
</div>
<!-- Sara -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/sara-2.webp">
<div class="overlay">Hi, I’m Sara (18) I help lead drylab with Johannes. A fun fact about me is that I am probably the most biology-hating of the team. Letters and numbers are what I worship
</div>
</div>
<div class="member-info">
<p class="member-name">
Sara
</p>
<p class="drylab-leader">
Drylab Leader
</p>
</div>
</div>
<!-- Peter -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/peter-5.webp">
<div class="overlay">Hi, I'm Peter (18). I'm the Co. Leader of Outreach with Lou. A fun fact about me is that I wrote my final high school project about Biotech and Danish, and not just science like the rest of the team</div>
</div>
<div class="member-info">
<p class="member-name">
Peter
</p>
<p class="outreach-leader">
Outreach Leader
</p>
</div>
</div>
<!-- Lou -->
<div class="team-div">
<div class="image-container">
<img src="#">
<div class="overlay">Hi, I’m Lou (17). I’m the co-leader of outreach together with Peter. A fun fact about me is that…</div>
</div>
<div class="member-info">
<p class="member-name">
Lou
</p>
<p class="outreach-leader">
Outreach Leader
</p>
</div>
</div>
<!-- Dicte -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/dicte-1.webp">
<div class="overlay">Hi, I'm Dicte (18). I'm a member of wetlab. A fun fact about me is that I enjoy etymology except for silverfish (zygbomenta). Those I despise</div>
</div>
<div class="member-info">
<p class="member-name">
Dicte
</p>
<p class="wetlab">
Wetlab
</p>
</div>
</div>
<!-- Isabelle -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/isabelle.webp">
<div class="overlay">Hi, I'm Isabelle (19). I'm a member of outreach and wetlab. A fun fact about me is that I want to become a pilot</div>
</div>
<div class="member-info">
<p class="member-name">
Isabelle
</p>
<p>
<span class="outreach">Outreach</span> <span class="wetlab">Wetlab</span>
</p>
</div>
</div>
<!-- Karo -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/karo-2.webp">
<div class="overlay">Hi, I'm Karoline (16). I'm a member of drylab and I'm the primary programmer of our iGEM wiki. A fun fact about me is that I'm literally a little computer nerd (153 cm)</div>
</div>
<div class="member-info">
<p class="member-name">
Karoline
</p>
<p class="drylab">
Drylab
</p>
</div>
</div>
<!-- Anna -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/anna-1.webp">
<div class="overlay">Hi, I'm Anna (17). I'm project coordinator and in drylab and outreach. A quick fun fact about me is that I'm a somewhat closeted fan of humanities despite being a biotech student (don't tell the rest of the team, please)</div>
</div>
<div class="member-info">
<p class="member-name">
Anna
</p>
<p>
<span class="outreach">Outreach</span> <span class="drylab">Drylab</span>
</p>
</div>
</div>
<!-- Mads -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/mads-1.webp">
<div class="overlay">Hi, I'm Mads. I'm a member of wetlab. A fun fact about me is that I'm a hardware nerd and therefore an expert on being single for 10+ years</div>
</div>
<div class="member-info">
<p class="member-name">
Mads
</p>
<p class="wetlab">
Wetlab
</p>
</div>
</div>
<!-- Kiera -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/kiera-1.webp">
<div class="overlay">Hi, I’m Kiera (17). I'm a member of drylab. A fun fact about me is that I always buy honey as a souvenir when traveling (might be slightly addicted)<br>#winniethepooh</div>
</div>
<div class="member-info">
<p class="member-name">
Kiera
</p>
<p class="drylab">
Drylab
</p>
</div>
</div>
<!-- Jonathan -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/jonathan-2.webp">
<div class="overlay">Hi, I'm Jonathan (16) . I'm a member of outreach and wetlab. A fun fact about me is that I'm the youngest member in wetlab and I'm addicted to coke Coca-Cola
</div>
</div>
<div class="member-info">
<p class="member-name">
Jonathan
</p>
<p>
<span class="outreach">Outreach</span> <span class="wetlab">Wetlab</span>
</p>
</div>
</div>
<!-- Patryk -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/patryk-1.webp">
<div class="overlay">Hi, I’m Patryk (19). I'm a member of drylab. A fun fact about me is that I take the train every morning to get to school, just to join my fellow team members</div>
</div>
<div class="member-info">
<p class="member-name">
Patryk
</p>
<p>
<span class="outreach">Outreach</span> <span class="drylab">Drylab</span>
</p>
</div>
</div>
<!-- Oskar -->
<div class="team-div">
<div class="image-container">
<img src="https://static.igem.wiki/teams/5243/team-members/oskar-2.webp">
<div class="overlay">Hi, I'm Oskar (18). I'm a member of outreach and drylab. A fun fact about me is that I am the underpaid cook for the team <br> #let him cook #no more rice
</div>
</div>
<div class="member-info">
<p class="member-name">
Oskar
</p>
<p>
<span class="outreach">Outreach</span> <span class="drylab">Drylab</span>
</p>
</div>
</div>
</div>
</div>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment