m |
|||
Line 5: | Line 5: | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
<style> | <style> | ||
− | + | body { | |
− | + | font-family: "Century Gothic"; | |
− | + | } | |
+ | |||
+ | #top_title { | ||
+ | display: none; | ||
+ | } | ||
#content { | #content { | ||
background: none; | background: none; | ||
margin: 0 auto; | margin: 0 auto; | ||
+ | width: 95%; | ||
+ | } | ||
+ | |||
+ | .banner-team { | ||
+ | background: url("https://scontent-ams3-1.xx.fbcdn.net/v/t31.0-8/29060507_156657905011398_6757642805609854850_o.jpg?_nc_cat=0&oh=ce645b18fb057bfab894f3cf4ff94942&oe=5B8DA1D9"); | ||
+ | background-size: 100%; | ||
+ | width: 100%; | ||
+ | height: 500px; | ||
} | } | ||
Line 75: | Line 87: | ||
display: block; | display: block; | ||
} | } | ||
− | |||
− | |||
− | + | /* ------ TEAMLEDEN CSS ------ */ | |
+ | .team-members { | ||
+ | background: white; | ||
+ | } | ||
− | + | .team-members h1 { | |
− | + | background: whitesmoke; | |
− | + | text-align: center; | |
− | + | padding: 20px 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .item p { | |
− | + | margin: 0; | |
− | + | padding: 10px; | |
− | + | } | |
− | + | .item h3 { | |
− | + | margin: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .item ul { | |
− | + | margin: 0; | |
− | + | padding-left: 10px; | |
− | + | list-style-type: none; | |
− | + | border-left: black solid 2px; | |
− | + | } | |
− | + | ||
− | + | .multiple-items { | |
− | + | display: flex; | |
+ | flex-wrap: wrap; | ||
+ | width: 90%; | ||
+ | justify-content: space-evenly; | ||
+ | margin: 0 auto; | ||
+ | } | ||
− | + | .item { | |
+ | transition: 0.2s; | ||
+ | margin: 10px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .item .summary { | ||
+ | background: rgba(255, 255, 255, 0.8); | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .item .profile-picture { | ||
+ | width: 320px; | ||
+ | height: 320px; | ||
+ | border-radius: 50%; | ||
+ | transition: 0.2s; | ||
+ | } | ||
− | + | .item .title { | |
− | + | margin: 10px 0; | |
− | + | padding: 5px 0; | |
− | + | background: whitesmoke; | |
− | + | display: flex; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .item .title .linked-in:hover { | ||
+ | filter: grayscale(50%); | ||
+ | } | ||
− | + | .item .title .linked-in { | |
− | + | margin: 5px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .item:hover { | |
− | + | margin: 0; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .item:hover .summary{ | ||
+ | display: block; | ||
+ | } | ||
+ | .item:hover .profile-picture { | ||
+ | border-radius: 0%; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | /* ------ PROFILE PICTURES ------ */ | ||
+ | .item #mei-ju { | ||
+ | background: url(''); | ||
+ | background-size: 100%; | ||
+ | } | ||
− | + | .item #dustin { | |
− | + | background: url(''); | |
+ | background-size: 100%; | ||
+ | } | ||
+ | .item #suzanne { | ||
+ | background: url(''); | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | .item #randall { | ||
+ | background: url(''); | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- ------ NAVIGATION BAR ------ --> | ||
− | + | <div class="navbar"> | |
− | + | <a href="#home">Home</a> | |
− | < | + | <a href="#team">Team</a> |
− | + | <div class="dropdown"> | |
− | + | <button class="dropbtn">Project | |
− | + | <i class="fa fa-caret-down"></i> | |
− | + | </button> | |
+ | <div class="dropdown-content"> | ||
+ | <a href="#1">Link 1</a> | ||
+ | <a href="#2">Link 2</a> | ||
+ | <a href="#3">Link 3</a> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div class="dropdown"> | |
− | + | <button class="dropbtn">Results | |
− | + | <i class="fa fa-caret-down"></i> | |
− | + | </button> | |
− | + | <div class="dropdown-content"> | |
− | + | <a href="#4">Link 4</a> | |
+ | <a href="#5">Link 5</a> | ||
+ | <a href="#6">Link 6</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <!-- ------ TEAM ------ --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="banner-team"></div> | |
− | + | <div class="team-members"> | |
+ | <h1>Team members</h1> | ||
+ | <div class="multiple-items"> | ||
+ | <div class="item"> | ||
+ | <div class="profile-picture" id="mei-ju"> | ||
+ | <div class="summary"> | ||
+ | <p> | ||
+ | <strong>Chemistry student | 18</strong> | ||
+ | <br> | ||
+ | <i> | ||
+ | "I think that my knowledge of chemistry can be useful for the development of our project. | ||
+ | And I am sure that I will learn a lot about biology and biochemistry because of this experience and by the knowledge of my colleagues. | ||
+ | <br><br> | ||
+ | See you in Boston!" | ||
+ | </i> | ||
+ | </p> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | <div class="title"> | |
− | + | <div class="linked-in"> | |
− | < | + | <a href="https://www.linkedin.com/in/mei-ju-goemans-073a32158/" target="_blank"><img src="../images/linkedIn-circle.png" style="width: 35px; height: 35px;"></a> |
− | + | </div> | |
− | + | <div> | |
− | + | <ul> | |
− | + | <li><h3>Mei Ju Goemans</h3></li> | |
− | + | <li><h3>Team Leader</h3></li> | |
− | + | </ul> | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class="item"> | |
− | <div class=" | + | <div class="profile-picture" id="dustin"> |
− | + | <div class="summary"> | |
− | + | <p> | |
− | + | <strong>Biology and Medical Laboratory research student | 19</strong> | |
− | + | ||
− | + | ||
− | + | ||
− | <div class=" | + | |
− | <div class=" | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br> | <br> | ||
− | + | <i> | |
− | + | "Hi, my name is Dustin van der Meulen, I'm 19 years old and the team leader of the iGEM team Hogeschool Rotterdam. | |
+ | I'm currently in my third year of my bachelor, biology and medical laboratory research. | ||
+ | My hobbies include aikido and philosophy. Another thing I like is biochemistry at college. | ||
+ | I hope to improve my knowledge during iGEM. | ||
+ | <br><br> | ||
+ | I'll see everyone from iGEM in Boston!" | ||
+ | </i> | ||
+ | </p> | ||
</div> | </div> | ||
− | + | </div> | |
− | <div class=" | + | <div class="title"> |
− | + | <div class="linked-in"> | |
− | + | <a href="https://www.linkedin.com/in/mei-ju-goemans-073a32158/" target="_blank"><img src="../images/linkedIn-circle.png" style="width: 35px; height: 35px;"></a> | |
− | + | </div> | |
− | + | <div> | |
− | + | <ul> | |
− | + | <li><h3>Dustin van der Meulen</h3></li> | |
− | < | + | <li><h3>Budget and fundraising</h3></li> |
− | + | </ul> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class="item"> | |
− | <div class=" | + | <div class="profile-picture" id="randall"> |
− | + | <div class="summary"> | |
− | + | <p> | |
− | + | <strong>Biology and Medical Laboratory research student | unknown</strong> | |
− | + | ||
− | + | ||
− | + | ||
− | <div class=" | + | |
− | <div class=" | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br> | <br> | ||
− | + | <i> | |
− | + | As this is the first time our school joins the iGEM competition I'm looking forwards to the challenges that it will present us. | |
− | + | And building up a base on which future teams of our school can expand upon. | |
+ | For this reason, I hope to be a valuable asset to the team. | ||
+ | <br><br>I wish the other iGEM | ||
+ | teams the best of luck, and I’ll see you in Boston! | ||
+ | </i> | ||
+ | </p> | ||
</div> | </div> | ||
− | + | </div> | |
− | <div class=" | + | <div class="title"> |
− | + | <div class="linked-in"> | |
− | + | <a href="https://www.linkedin.com/in/mei-ju-goemans-073a32158/" target="_blank"><img src="../images/linkedIn-circle.png" style="width: 35px; height: 35px;"></a> | |
− | + | </div> | |
− | + | <div> | |
− | + | <ul> | |
− | + | <li><h3>Randall de Waard</h3></li> | |
− | < | + | <li><h3>Budget and fundraising</h3></li> |
− | + | </ul> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class="item"> | |
− | <div class=" | + | <div class="profile-picture" id="suzanne"> |
− | + | <div class="summary"> | |
− | + | <p> | |
− | + | <strong>Chemistry student | 18</strong> | |
− | + | ||
− | + | ||
− | + | ||
− | <div class=" | + | |
− | <div class=" | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br> | <br> | ||
− | + | <i> | |
− | + | "My role in our team is keeping the social media up tot date. | |
− | + | At the moment we have a twitter (@IGEM_HR_2018), facebook (IGEM team Hogeschool Rotterdam) and an instagram account (@igemhr). | |
+ | From the IGEM experience I hope to gain a lot of knowledge from the biochemical side of the project and a lot of new friends of course. | ||
+ | <br><br> | ||
+ | Really looking forward to meet you all in Boston!" | ||
+ | </i> | ||
+ | </p> | ||
</div> | </div> | ||
− | + | </div> | |
− | <div class=" | + | <div class="title"> |
− | + | <div class="linked-in"> | |
− | + | <a href="https://www.linkedin.com/in/mei-ju-goemans-073a32158/" target="_blank"><img src="../images/linkedIn-circle.png" style="width: 35px; height: 35px;"></a> | |
− | + | </div> | |
− | + | <div> | |
− | + | <ul> | |
− | < | + | <li><h3>Suzanne Romeijn</h3></li> |
− | + | <li><h3>Social media</h3></li> | |
− | + | </ul> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- ------ FOOTER ------ --> | ||
− | + | <div id="footer" style="padding:40px;background:#BDBDBD;text-align:center;color:#fff;font-size:17px;"> | |
− | + | <b style="letter-spacing:3px;font-size:20px;">Contact Info</b> | |
− | + | <br> | |
− | + | <i style="text-transform:lowercase;font-family:Palatino Linotype;"> | |
− | + | iGEM team Hogeschool Rotterdam | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br> | <br> | ||
− | + | igemteam.HR@gmail.com ~ +31 10 7944554 | |
− | + | </i> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:28, 11 May 2018
Team members
Chemistry student | 18
"I think that my knowledge of chemistry can be useful for the development of our project.
And I am sure that I will learn a lot about biology and biochemistry because of this experience and by the knowledge of my colleagues.
See you in Boston!"
Biology and Medical Laboratory research student | 19
"Hi, my name is Dustin van der Meulen, I'm 19 years old and the team leader of the iGEM team Hogeschool Rotterdam.
I'm currently in my third year of my bachelor, biology and medical laboratory research.
My hobbies include aikido and philosophy. Another thing I like is biochemistry at college.
I hope to improve my knowledge during iGEM.
I'll see everyone from iGEM in Boston!"
Biology and Medical Laboratory research student | unknown
As this is the first time our school joins the iGEM competition I'm looking forwards to the challenges that it will present us.
And building up a base on which future teams of our school can expand upon.
For this reason, I hope to be a valuable asset to the team.
I wish the other iGEM
teams the best of luck, and I’ll see you in Boston!
Chemistry student | 18
"My role in our team is keeping the social media up tot date.
At the moment we have a twitter (@IGEM_HR_2018), facebook (IGEM team Hogeschool Rotterdam) and an instagram account (@igemhr).
From the IGEM experience I hope to gain a lot of knowledge from the biochemical side of the project and a lot of new friends of course.
Really looking forward to meet you all in Boston!"