Difference between revisions of "Team:EPFL/Team"

 
(106 intermediate revisions by 6 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
 +
#loading {
 +
    display: block;
 +
    position: absolute ;
 +
    top: 0;
 +
    left: 0;
 +
    z-index: 100;
 +
    width: 100vw;
 +
    height:100vh;
 +
    background-color: #fffaff;
 +
    background-image: url("https://static.igem.org/mediawiki/2019/c/cd/T--EPFL--ViTESTloader.gif");
 +
    background-repeat: no-repeat;
 +
    background-position: top;
 +
}
 +
a {
 +
color: #e45245;
 +
}
  
 +
a:hover {
 +
text-decoration: none;
 +
}
  
−
/* The Modal (background) */
+
/* Team Starts */
−
.modal {
+
.team-members {
−
  display: none; /* Hidden by default */
+
transform: rotate(-45deg);
−
  position: fixed; /* Stay in place */
+
}
−
  z-index: 1; /* Sit on top */
+
.team-members li > div {
−
  padding-top: 100px; /* Location of the box */
+
float: left;
−
  left: 0;
+
width: 20%;
−
  top: 0;
+
−
  width: 100%; /* Full width */
+
−
  height: 100%; /* Full height */
+
−
  overflow: auto; /* Enable scroll if needed */
+
−
  background-color: rgb(0,0,0); /* Fallback color */
+
−
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
 
}
 
}
  
−
/* Modal Content */
+
.team-members li:nth-child(2) > div:first-child {
−
.modal-content {
+
margin-left: 20%;
−
  background-color: #fefefe;
+
−
  margin: auto;
+
−
  padding: 20px;
+
−
  border: 1px solid #888;
+
−
  width: 80%;
+
 
}
 
}
  
−
/* The Close Button */
+
.team-members li:last-child > div:first-child {
−
.close {
+
margin-left: 40%;
−
  color: #aaaaaa;
+
−
  float: right;
+
−
  font-size: 28px;
+
−
  font-weight: bold;
+
 
}
 
}
  
−
.close:hover,
+
.member-details > div {
−
.close:focus {
+
background-color: #ddd;
−
  color: #000;
+
margin: 5px;
−
  text-decoration: none;
+
}
−
  cursor: pointer;
+
.member-details img {
 +
transform: rotate(45deg) translate(0, 15px) scale(1.2);
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 
}
 
}
−
</style>
 
  
 +
/* hover content - style */
 +
.member-details > div {
 +
position: relative;
 +
overflow: hidden;
 +
}
  
 +
.member-info {
 +
position: absolute;
 +
top: 50%;
 +
transform: rotate(45deg) translate(-12px, 15px);
 +
left: 0;
 +
right: 0;
 +
z-index: 2;
 +
text-align: center;
 +
}
  
−
  <script>
+
.member-info h3,
−
       
+
.member-info p {
−
//show the descriptions on mobile
+
margin: 0;
−
$(function () {      
+
color: #fff;
−
$(".ImgContainer").click(function() {
+
position: relative;
−
  $(".ImgContainer").not(this).removeClass("mobileShow");
+
opacity: 0;
−
  $(this).toggleClass("mobileShow");
+
visibility: hidden;
−
});
+
}
−
});
+
 
 +
.member-info h3 {
 +
text-transform: uppercase;
 +
font-size: 14px;
 +
font-weight: 400;
 +
top: -100px;
 +
}
 +
 
 +
.member-info p {
 +
font-weight: 300;
 +
font-size: 12px;
 +
bottom: -150px;
 +
}
 +
 
 +
.member-details > div:after {
 +
content: '';
 +
background-image: linear-gradient(45deg, rgb(184, 71, 180, .8) 50%, transparent 50%);
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
z-index: 1;
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 
 +
/* hover content - onhover */
 +
.member-details *,
 +
.member-details > div:after {
 +
cursor: pointer;
 +
transition: all .4s ease;
 +
}
 +
 
 +
.member-details:hover *,
 +
.member-details:hover > div:after {
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 
 +
.member-details:hover .member-info h3 {
 +
top: 0;
 +
}
 +
 
 +
.member-details:hover .member-info p {
 +
bottom: 0;
 +
}
 +
 
 +
/* Team overview */
 +
.team-overview {
 +
padding-right: 15px;
 +
}
 +
.team-overview h2 {
 +
text-transform: uppercase;
 +
font-size: 22px;
 +
font-weight: 700;
 +
margin-bottom: 5px;
 +
}
 +
 
 +
.team-overview > a {
 +
margin-bottom: 30px;
 +
display: block;
 +
}
 +
 
 +
.team-overview > a:before {
 +
content: '';
 +
width: 10px;
 +
height: 2px;
 +
position: relative;
 +
top: -3px;
 +
margin-right: 5px;
 +
background-color: #ccc;
 +
display: inline-block;
 +
}
 +
 
 +
 
 +
/* For centering elements - optional - Can use table,tablecell instead */
 +
.flex-center {
 +
display: flex;
 +
flex-direction: row;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
 
 +
.flex-center > div:first-child {
 +
order: 2;
 +
}
 +
 
 +
/* RESPONSIVE */
 +
@media only screen and (max-width : 992px) {
 +
.sm-no-flex {
 +
display: block;
 +
}
 +
.sm-no-float {
 +
float: none !important;
 +
}
 +
.sm-text-center {
 +
text-align: center;
 +
}
 +
}
 +
 
 +
@media only screen and (max-width : 550px) {
 +
.team-members li {
 +
text-align: center;
 +
}
 +
.team-members li > div {
 +
float: none;
 +
display: inline-block;
 +
width: 30%;
 +
margin: 0 !important;
 +
}
 +
.team-members {
 +
transform: rotate(0);
 +
}
 +
.member-details img {
 +
transform: rotate(0) translate(0, 0);
 +
}
 +
.team-overview {
 +
padding: 15px;
 +
}
 +
 +
}
 +
 
 +
@media only screen and (max-width : 399px) {
 +
.team-members li > div {
 +
width: 48%;
 +
}
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
<div class="page-loader">
 +
    <div class="page-loader-inner">
 +
      <div id="loading"></div>
 +
    </div>
 +
</div>
  
−
    </script>
 
 
<!-- Wrapper-->
 
<!-- Wrapper-->
−
        <div class="wrapper">
+
<!-- Page Header-->
−
            <!-- Page Header-->
+
  <div class="wrapper">
−
            <section class="module-page-title bg-blue">
+
<section class="module parallax"  data-jarallax-video="mp4:https://static.igem.org/mediawiki/2019/3/3c/T--EPFL--headerfinal.mp4" >
 +
  <div class="col-md-4">
 +
                        <h1 style="color:purple" ><br> Team</h1>
 +
                  </div>
 +
</section>
 +
<!-- Page Header end-->
 +
  <section>
 +
<div class="container">
 +
<div class="row flex-center sm-no-flex">
 +
 
 +
<div class="pull-right sm-no-float col-m12">
 +
<ul class="team-members">
 +
<!-- single member row starts -->
 +
<li class="clearfix">
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/3/32/T--EPFL--dodo.jpeg">
 +
<div class="member-info">
 +
<h3> <a href="#Dodo">Junyan</a></h3>
 +
<p>Toehold</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/7/73/T--EPFL--hana.png" >
 +
<div class="member-info">
 +
<h3><a href="#Hana">Hana</a></h3>
 +
<p>DNA Extraction</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/4/4d/T--EPFL--Konstadinos.png" >
 +
<div class="member-info">
 +
<h3><a href="#Konstantinos">Konstantinos</a></h3>
 +
<p>OnePot PURE system</p>
 +
</div>
 +
</div>
 +
</div>
 +
</li><!-- /single member row ends -->
 +
 +
<!-- single member row starts -->
 +
<li class="clearfix">
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/a/aa/T--EPFL--luc.png">
 +
<div class="member-info">
 +
<h3><a href="#Luc">Luc</a></h3>
 +
<p>DNA Amplification
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/6/69/T--EPFL--steph.png">
 +
<div class="member-info">
 +
<h3><a href="#Stef">Stefania</a></h3>
 +
<p>DNA Extraction</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/9/95/T--EPFL--leo.png" >
 +
<div class="member-info">
 +
<h3><a href="#Leo">Leo</a></h3>
 +
<p> Toehold </p>
 +
</div>
 +
</div>
 +
</div>
 +
</li><!-- /single member row ends -->
 +
 
 +
<!-- single member row starts -->
 +
<li class="clearfix">
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/9/9c/T--EPFL--dana1.png">
 +
<div class="member-info">
 +
<h3><a href="#Dana">Dana</a></h3>
 +
<p>Signal Generation</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/9/99/T--EPFL--laura.png" >
 +
<div class="member-info">
 +
<h3><a href="#Laura">Laura</a></h3>
 +
<p>Team Leader</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="member-details">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2019/5/59/T--EPFL--theo1.png" >
 +
<div class="member-info">
 +
<h3><a href="#Theo">Theo</a></h3>
 +
<p>DNA Amplification</p>
 +
</div>
 +
</div>
 +
</div>
 +
</li><!-- /single member row ends -->
 +
 
 +
</ul><!-- /end team-photos -->
 +
</div><!-- /end col-md-8 -->
 +
</div><!-- /end row -->
 +
</div><!-- /end container -->
 +
</section>
 +
 
 +
<!-- DANA-->
 +
         
 +
            <section class="module">
 
                 <div class="container">
 
                 <div class="container">
 
                     <div class="row align-items-center">
 
                     <div class="row align-items-center">
−
                         <div class="col-md-6">
+
                         <div class="col-lg-6">
−
                             <div class="page-title-desc">
+
                             <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/f/fc/T--EPFL--dana2.png" alt="" id="Dana"></p>
−
                                <h2>Team</h2>
+
                        </div>
−
                                <!--p This theme will shake your world.-->
+
                        <div class="col-lg-5 offset-lg-1">
−
                            </div>
+
                            <h2> Dana Mozaffari</h2>
 +
                            <p class="lead m-b-30"> <strong> Mission: </strong> Create a colorimetric signal <br>
 +
<strong> Studies: </strong> Master in Chemical Engineering <br>
 +
<strong> Fun fact: </strong> He once found a giant pickle jar for the whole team <br>
 +
<strong> Favourite wine: </strong> Les Portes de Novembre </p>
 +
 
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 +
                   
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
−
             <!-- Page Header end-->
+
              
−
<center>
+
         
−
            <!-- Team-->
+
 
 +
<!-- Laura-->
 +
         
 
             <section class="module">
 
             <section class="module">
 
                 <div class="container">
 
                 <div class="container">
−
                     <div class="row">
+
                     <div class="row align-items-center">
−
                         <div class="col-md-4">
+
                       
−
                             <div class="team-item">
+
                         <div class="col-lg-5 offset-lg-1">
−
                                <div class="team-image" id="Dana"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                             <h2> Laura Kvedarauskaite</h2>
−
                                    <div class="team-wrap">
+
                            <p class="lead m-b-30"> <strong> Mission: </strong> Team Leader <br>
−
                                        <div class="team-content">
+
<strong> Studies: </strong> Bachelor in Life Sciences engineering <br>
−
                                            <h6 class="team-name">Laura</h6>
+
<strong> Fun fact: </strong> Likes to spray ethanol on gloves <br>
−
                                            <div class="team-role">Team Leader - Create a colorimetric signal </div>
+
<strong> Favourite wine: </strong> Primitivo </p>
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
  
−
                                    </div>
 
−
                                </div>
 
−
                            </div>
 
 
                         </div>
 
                         </div>
 +
                        <div class="col-lg-6">
 +
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/0/0b/T--EPFL--laura2.png" alt="" id="Laura"></p>
 +
                        </div>
 +
                    </div>
 +
                   
 +
                </div>
 +
            </section>
  
−
                        <div class="col-md-4">
+
<!-- LEO-->
−
                            <div class="team-item">
+
         
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
            <section class="module">
−
                                    <div class="team-wrap">
+
                <div class="container">
−
                                        <div class="team-content">
+
                    <div class="row align-items-center">
−
                                          <h6 class="team-name">Leonard</h6>
+
                        <div class="col-lg-6">
−
                                            <div class="team-role">Toehold switches, grammar corrector</div>
+
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/7/71/T--EPFL--leo2.png" alt="" id="Leo"></p>
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                         <div class="col-md-4">
+
                         <div class="col-lg-5 offset-lg-1">
−
                             <div class="team-item">
+
                             <h2> Leonard Karsunky</h2>
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                            <p class="lead m-b-30"> <strong> Mission: </strong> Toehold switches, grammar corrector
−
                                    <div class="team-wrap">
+
<br>
−
                                        <div class="team-content">
+
<strong> Studies: </strong> Bachelor in Life Sciences engineering <br>
−
                                            <h6 class="team-name">Théo</h6>
+
<strong> Fun fact: </strong> He always has a debate idea to share at 8am <br>
−
                                            <div class="team-role">Make amplification by RPA work </div>
+
<strong> Favourite wine: </strong> Veldepeñas </p>
−
                                        </div>
+
 
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                        <div class="col-md-4">
+
                    </div>
−
                            <div class="team-item">
+
                   
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                </div>
−
                                    <div class="team-wrap">
+
            </section>
−
                                        <div class="team-content">
+
           
−
                                            <h6 class="team-name">Dana</h6>
+
         
−
                                            <div class="team-role">Create a colorimetric signal</div>
+
 
−
                                        </div>
+
<!-- Theo-->
−
                                        <div class="team-content-social">
+
         
−
                                            <ul>
+
            <section class="module">
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
                <div class="container">
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
                    <div class="row align-items-center">
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
                       
−
                                            </ul>
+
                        <div class="col-lg-5 offset-lg-1">
−
                                        </div>
+
                            <h2> Theo Nass </h2>
−
                                    </div>
+
                            <p class="lead m-b-30"> <strong> Mission: </strong> Make amplification by RPA work <br>
−
                                </div>
+
<strong> Studies: </strong> Bachelor in Life Sciences engineering <br>
−
                            </div>
+
<strong> Fun fact: </strong> If you meet him, there is a 50% chance he will be napping <br>
 +
<strong> Favourite wine: </strong> Champagne </p>
 +
 
 
                         </div>
 
                         </div>
−
                         <div class="col-md-4">
+
                         <div class="col-lg-6">
−
                             <div class="team-item">
+
                             <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/9/9a/T--EPFL--theo2.jpg" alt="" id="Theo"></p>
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Hana</h6>
+
−
                                            <div class="team-role">DNA extraction with micro needle patch and wiki creation</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                        <div class="col-md-4">
+
                    </div>
−
                            <div class="team-item">
+
                   
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                </div>
−
                                    <div class="team-wrap">
+
            </section>
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Luc</h6>
+
−
                                            <div class="team-role">Make amplification by RPA work</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
  
−
                                    </div>
+
<!-- Stephania-->
−
                                </div>
+
         
−
                            </div>
+
            <section class="module">
−
</div>
+
                <div class="container">
−
                        <div class="col-md-4">
+
                    <div class="row align-items-center">
−
                            <div class="team-item">
+
                        <div class="col-lg-6">
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                             <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/c/cf/T--EPFL--steph2.png" alt="" id="Stef"></p>
−
                                    <div class="team-wrap">
+
                        </div>
−
                                        <div class="team-content">
+
                        <div class="col-lg-5 offset-lg-1">
−
                                            <h6 class="team-name">Konstantinos</h6>
+
                            <h2> Stefania Konstantinidi </h2>
−
                                            <div class="team-role">One Pot</div>
+
                            <p class="lead m-b-30"> <strong> Mission: </strong> DNA Extraction and wiki creation <br>
−
                                        </div>
+
<strong> Studies: </strong> Master in Medical Orientated Robotics <br>
−
                                        <div class="team-content-social">
+
<strong> Fun fact: </strong> She owns a fishing permit <br>
−
                                            <ul>
+
<strong> Favourite wine: </strong> Sociando </p>
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
−
</div>
+
−
                        <div class="col-md-4">
+
−
                             <div class="team-item">
+
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Dodo</h6>
+
−
                                            <div class="team-role"><3</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                               
+
−
</div>
+
−
</div>
+
  
−
</div>
 
−
                        <div class="col-md-4">
 
−
                            <div class="team-item">
 
−
                                <div class="team-image"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
 
−
                                    <div class="team-wrap">
 
−
                                        <div class="team-content">
 
−
                                            <h6 class="team-name">Stefania</h6>
 
−
                                            <div class="team-role">wiki & DNA extraction</div>
 
−
                                        </div>
 
−
                                        <div class="team-content-social">
 
−
                                            <ul>
 
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
 
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
 
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
 
−
                                            </ul>
 
−
                                        </div>
 
−
                                    </div>
 
−
                                </div>
 
−
                            </div>
 
 
                         </div>
 
                         </div>
−
                  
+
                    </div>
 +
                   
 +
                 </div>
 +
            </section>
 +
           
 +
         
  
−
                 
+
<!-- Hana-->
 +
         
 +
            <section class="module">
 +
                <div class="container">
 +
                    <div class="row align-items-center">
 +
                       
 +
                        <div class="col-lg-5 offset-lg-1">
 +
                            <h2> Hana Samet</h2>
 +
                            <p class="lead m-b-30"> <strong> Mission: </strong> DNA extraction and wiki creation <br>
 +
<strong> Studies: </strong> Master in microengineering <br>
 +
<strong> Fun fact: </strong> She knows exactly where the Starbucks are in every city  <br>
 +
<strong> Favourite wine: </strong> *Confidential information* </p>
 +
 
 +
                        </div>
 +
                        <div class="col-lg-6">
 +
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/a/ac/T--EPFL--hana2.png" alt="" id="Hana"></p>
 +
                        </div>
 +
                    </div>
 +
                   
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
−
</center>
 
−
            <!-- Team end-->
 
−
<!-- The Modals -->
 
−
<div id="Dana_modal" class="modal">
 
  
−
  <!-- Modal content -->
+
<!-- Luc-->
−
  <div class="modal-content">
+
         
−
    <article class="post row align-items-center">
+
            <section class="module">
−
                                    <div class="col-md-5">
+
                <div class="container">
−
                                        <div class="post-preview"><a href="#"><img src="assets/images/epfl_team.jpg" alt=""></a></div>
+
                    <div class="row align-items-center">
−
                                    </div>
+
                        <div class="col-lg-6">
−
                                    <div class="col-md-7">
+
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/3/34/T--EPFL--LUC2.png" alt="" id="Luc"></p>
−
                                        <div class="post-wrapper">
+
                        </div>
−
                                            <div class="post-header">
+
                        <div class="col-lg-5 offset-lg-1">
−
                                                <h2 class="post-title"><a href="https://2019.igem.org/Team:EPFL/Team">Our Team</a></h2>
+
                            <h2> Luc Gabel</h2>
−
                                                <ul class="post-meta">
+
                            <p class="lead m-b-30"> <strong> Mission: </strong> Make amplification by RPA work <br>
−
                                                    <li>June, 2019</li>
+
<strong> Studies: </strong> Bachelor in Life Sciences <br>
−
                                                    <li><a href="#">Team</a>, <a href="#">EPFL</a></li>
+
<strong> Fun fact: </strong> He has a baby face on most of his pictures <br>
−
                                                </ul>
+
<strong> Favourite wine: </strong> Pinot gris </p>
−
                                            </div>
+
−
                                            <div class="post-content">
+
−
                                                <p>Learn more about us !</p>
+
−
                                                <p><a href="#">Read more</a></p>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </article>
+
−
  </div>
+
  
−
</div>
+
                        </div>
−
<script>
+
                    </div>
−
// Get the modal
+
                   
−
var modal = document.getElementById("Dana_modal");
+
                </div>
 +
            </section>
 +
           
 +
         
  
−
// Get the button that opens the modal
+
<!-- Konstantinos-->
−
var btn = document.getElementById("Dana");
+
         
 +
            <section class="module">
 +
                <div class="container">
 +
                    <div class="row align-items-center">
 +
                       
 +
                        <div class="col-lg-5 offset-lg-1">
 +
                            <h2> Konstantinos Ragios</h2>
 +
                            <p class="lead m-b-30"> <strong> Mission: </strong> Produces the OnePot PURE cell-free system <br>
 +
<strong> Studies: </strong> Master in Life Science engineering <br>
 +
<strong> Fun fact: </strong> He cannot stand white beer anymore because of LB medium cultures <br>
 +
<strong> Favourite wine: </strong> Xinomavro </p>
  
−
// Get the <span> element that closes the modal
+
                        </div>
−
var span = document.getElementsByClassName("close")[0];
+
                        <div class="col-lg-6">
 +
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/8/81/T--EPFL--konstantinos.jpeg" alt="" id="Konstantinos"></p>
 +
                        </div>
 +
                    </div>
 +
                   
 +
                </div>
 +
            </section>
  
−
// When the user clicks the button, open the modal
+
<!-- Junyan-->
−
btn.onclick = function() {
+
         
−
  modal.style.display = "block";
+
            <section class="module">
−
}
+
                <div class="container">
 +
                    <div class="row align-items-center">
 +
                        <div class="col-lg-6">
 +
                            <p class="m-b-30"><img src="https://static.igem.org/mediawiki/2019/5/52/T--EPFL--DODO2.png" alt="" id="Dodo"></p>
 +
                        </div>
 +
                        <div class="col-lg-5 offset-lg-1">
 +
                            <h2> Junyan Qian </h2>
 +
                            <p class="lead m-b-30"> <strong> Mission: </strong> Toehold switches <br>
 +
<strong> Studies: </strong> Bachelor in Microengineering <br>
 +
<strong> Fun fact: </strong> Can’t pronounce “all in all” <br>
 +
<strong> Favourite wine: </strong> Chinese rice wine </p>
  
−
// When the user clicks on <span> (x), close the modal
+
                        </div>
−
span.onclick = function() {
+
                    </div>
−
  modal.style.display = "none";
+
                   
−
}
+
                </div>
 +
            </section>
 +
          <a class="scroll-top" href="#top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
  
−
// When the user clicks anywhere outside of the modal, close it
+
 
−
window.onclick = function(event) {
+
<script src="/Template:EPFL/loader1?action=raw&amp;ctype=text/javascript"></script>
−
  if (event.target == modal) {
+
−
    modal.style.display = "none";
+
−
  }
+
−
}
+
−
</script>
+
 
</html>
 
</html>
 
{{EPFL/Footer}}
 
{{EPFL/Footer}}

Latest revision as of 13:09, 21 October 2019


Team

Dana Mozaffari

Mission: Create a colorimetric signal
Studies: Master in Chemical Engineering
Fun fact: He once found a giant pickle jar for the whole team
Favourite wine: Les Portes de Novembre

Laura Kvedarauskaite

Mission: Team Leader
Studies: Bachelor in Life Sciences engineering
Fun fact: Likes to spray ethanol on gloves
Favourite wine: Primitivo

Leonard Karsunky

Mission: Toehold switches, grammar corrector
Studies: Bachelor in Life Sciences engineering
Fun fact: He always has a debate idea to share at 8am
Favourite wine: Veldepeñas

Theo Nass

Mission: Make amplification by RPA work
Studies: Bachelor in Life Sciences engineering
Fun fact: If you meet him, there is a 50% chance he will be napping
Favourite wine: Champagne

Stefania Konstantinidi

Mission: DNA Extraction and wiki creation
Studies: Master in Medical Orientated Robotics
Fun fact: She owns a fishing permit
Favourite wine: Sociando

Hana Samet

Mission: DNA extraction and wiki creation
Studies: Master in microengineering
Fun fact: She knows exactly where the Starbucks are in every city
Favourite wine: *Confidential information*

Luc Gabel

Mission: Make amplification by RPA work
Studies: Bachelor in Life Sciences
Fun fact: He has a baby face on most of his pictures
Favourite wine: Pinot gris

Konstantinos Ragios

Mission: Produces the OnePot PURE cell-free system
Studies: Master in Life Science engineering
Fun fact: He cannot stand white beer anymore because of LB medium cultures
Favourite wine: Xinomavro

Junyan Qian

Mission: Toehold switches
Studies: Bachelor in Microengineering
Fun fact: Can’t pronounce “all in all”
Favourite wine: Chinese rice wine



© iGEM EPFL 2019