Difference between revisions of "Team:EPFL/Team"

Line 1: Line 1:
 
{{EPFL}}
 
{{EPFL}}
 
<html>
 
<html>
 +
<style>
  
 +
.pictureTitle{
 +
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.6)), url("https://static.igem.org/mediawiki/2018/b/ba/T--Munich--home_Team.jpg");
 +
 
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position:center;
 +
 +
}
 +
.ImgContainer {
 +
  position: relative;
 +
  cursor:zoom-in;
 +
}
 +
 +
.Img {
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
  opacity: 1; 
 +
  border-width: 2px !important;
 +
  border-color: white;
 +
}
 +
 +
.ImgOverlay {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  transition: .5s ease;
 +
  background-color: rgba(30,30,30,1);
 +
  z-index: 99;
 +
}
 +
 +
/*
 +
.ImgContainer:hover .ImgOverlay {
 +
  opacity: 1;
 +
}
 +
*/
 +
 +
   
 +
.ImgContainer.mobileShow .ImgOverlay {
 +
  visibility: visible;
 +
  opacity: 0.97;
 +
  transition: .5s ease;
 +
}
 +
.ImgContainer.mobileShow .Img {
 +
  transition: .5s ease;
 +
  opacity: 1;
 +
}
 +
.ImgContainer.mobileShow {
 +
  cursor:zoom-out;
 +
}
 +
 +
.ImgText {
 +
  color: rgba(220,220,220,1);
 +
  position: absolute;
 +
  top: 15%;
 +
  left: 10%;
 +
  -webkit-transform: translate(-5%, -10%);
 +
  -ms-transform: translate(-5%, -10%);
 +
  transform: translate(-5%, -10%);
 +
}
 +
   
 +
.ImgText b{
 +
  color: rgba(255,255,255,1);
 +
}
 +
   
 +
.parallax {
 +
    /* The image used */
 +
    background: linear-gradient(rgba(0, 0, 0,.4), rgba(0, 0, 0,.4)), url('https://static.igem.org/mediawiki/2018/e/e9/T--munich--building.jpeg');
 +
 +
    /* Full height */
 +
    height: 50vh;
 +
 +
    /* Create the parallax scrolling effect */
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
}
 +
   
 +
@media only screen and (max-width: 575.98px) {
 +
.ImgText {
 +
  font-size: 1rem;
 +
}
 +
}
 +
 +
@media only screen and (min-width: 575.98px) {
 +
.ImgText {
 +
font-size: 1.5rem;
 +
}
 +
}
 +
 +
@media only screen and (min-width: 767.98px) {
 +
 +
.ImgText {
 +
font-size: 1rem;
 +
}
 +
 +
}
 +
 +
@media only screen and (min-width: 991.98px) {
 +
 +
.ImgText {
 +
font-size: 1.2rem;
 +
}
 +
 +
}
 +
 +
@media only screen and (min-width: 1199.98px) {
 +
.ImgText {
 +
font-size: 1rem;
 +
}
 +
.ImgOverlay {
 +
  width: 100%;
 +
    top: 100%;
 +
height:140%;
 +
}
 +
.Img {
 +
  transition: .5s ease;
 +
  opacity: 0.7;
 +
}
 +
}
 +
    </style>
 +
 +
  <script>
 +
       
 +
//show the descriptions on mobile
 +
$(function () {       
 +
$(".ImgContainer").click(function() {
 +
  $(".ImgContainer").not(this).removeClass("mobileShow");
 +
  $(this).toggleClass("mobileShow");
 +
});
 +
});
 +
 +
    </script>
 
<!-- Wrapper-->
 
<!-- Wrapper-->
 
         <div class="wrapper">
 
         <div class="wrapper">
Line 43: Line 184:
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
<div class="col-12 col-md-6 col-xl-3 mb-3">
+
 
−
  <div class="ImgContainer">
+
−
  <img src="https://static.igem.org/mediawiki/2018/4/4a/T--munich--Ariane.jpg" alt="Avatar" class="Img border" Style="">
+
−
  <div class="ImgOverlay text-justify">
+
−
    <div class="ImgText"><p class="text-left"><b>Field of Study:</b> Biology</p><p class="text-left"><b>Fun Fact:</b> I am from Bavaria. But nobody believes me.</p><p><b>Why iGEM:</b>  I enjoy the challenge of the scientific discussions and learning about all the innovative ideas.</p></div>
+
−
  </div>
+
−
</div>
+
−
  <h3 class="mt-2">
+
−
Ariane Krus (21)
+
−
</h3>
+
−
<div>
+
−
Wetlab
+
−
</div>
+
−
</div>
+
 
                         <div class="col-md-4">
 
                         <div class="col-md-4">
 
                             <div class="team-item">
 
                             <div class="team-item">

Revision as of 08:46, 30 September 2019

Team

Laura
Team Leader - Create a colorimetric signal
Leonard
Toehold switches, grammar corrector
Théo
Make amplification by RPA work
Dana
Create a colorimetric signal
Hana
DNA extraction with micro needle patch and wiki creation
Luc
Make amplification by RPA work
Konstantinos
One Pot
Dodo
<3
Stefania
wiki & DNA extraction


© iGEM EPFL 2019