Difference between revisions of "Team:TUDelft/Testpage3"

Line 1: Line 1:
 
{{:Team:TUDelft/Head}}
 
{{:Team:TUDelft/Head}}
 +
 
<html>
 
<html>
 +
<head>   
 
<style>
 
<style>
  
Line 22: Line 24:
 
.text-block2 {
 
.text-block2 {
 
     position: absolute;
 
     position: absolute;
−
     top: 15%;
+
     top: 12%;
 
     left: 1%;
 
     left: 1%;
 
     color: grey;
 
     color: grey;
 
     width: 200px;
 
     width: 200px;
 
     z-index: 5;
 
     z-index: 5;
−
}
 
−
.tulogo {
 
−
    max-height: 150px !important;
 
−
    width: auto;
 
−
    z-index: 1;
 
 
}
 
}
 
      
 
      
 
#fadein5 {
 
#fadein5 {
 
     position: absolute;
 
     position: absolute;
−
     top: 17%;
+
     top: 16%;
 
     right: 1%;
 
     right: 1%;
 
     width: 220px;
 
     width: 220px;
 
     z-index: 500;}
 
     z-index: 500;}
 
      
 
      
−
.adopenormal{     
+
#fadein5 img{     
 
     max-height: 80px !important;
 
     max-height: 80px !important;
−
    width: auto;
 
 
}
 
}
 
      
 
      
−
+
.tulogo {
 +
    max-height: 150px !important;
 +
    width: auto;
 +
    z-index: 1;
 +
}
 +
   
 
.overlaycontainer {
 
.overlaycontainer {
 
     z-index: 400 !important;
 
     z-index: 400 !important;
Line 56: Line 57:
 
     text-align: center;
 
     text-align: center;
 
     position: absolute;  
 
     position: absolute;  
−
     font-weight: 100;
+
     font-weight: 90;
 
     }
 
     }
  
Line 68: Line 69:
 
     line-height: 50px;
 
     line-height: 50px;
 
}
 
}
−
   
+
 
−
.rdmrbttn .britney, .rdmrbttn2 .britney{
+
.rdmrbttn .britney, .rdmrbttn2 .britney, rdmrbttn3 .britney{
 
   font-size:18px;
 
   font-size:18px;
 
   text-decoration:none;
 
   text-decoration:none;
Line 76: Line 77:
 
   border:#FFF 1px solid;
 
   border:#FFF 1px solid;
 
   padding:10px 20px;
 
   padding:10px 20px;
−
  border-radius:10px;
 
 
   margin-top:20px;
 
   margin-top:20px;
 
}
 
}
  
−
.rdmrbttn .britney:hover{
+
.rdmrbttn .britney:hover, .rdmrbttn3 .britney{
 
   background: rgba(0,0,0,0.4);
 
   background: rgba(0,0,0,0.4);
 
   color:#fff;
 
   color:#fff;
Line 90: Line 90:
 
     left: 45%;
 
     left: 45%;
 
}
 
}
−
.rdmrbttn:hover {
+
/*.rdmrbttn:hover, .rdmrbttn3:hover {
 
     -webkit-transform: scale(1.2);
 
     -webkit-transform: scale(1.2);
 
     -ms-transform: scale(1.2);
 
     -ms-transform: scale(1.2);
 
     transform: scale(1.2);
 
     transform: scale(1.2);
−
}  
+
}   */
 
      
 
      
 
div.pree {
 
div.pree {
Line 105: Line 105:
 
.caption h3 {
 
.caption h3 {
 
         color: white;
 
         color: white;
−
}     
+
    }     
 
      
 
      
 
.thumbnail {
 
.thumbnail {
−
     background-color: #F1F1F1;
+
     background-color: transparent;
−
     min-height: 600px;
+
     max-height: 600px;
−
    max-height: 700px;
+
 
     overflow: auto;
 
     overflow: auto;
 +
    border-color: aliceblue;
 +
    border-radius: 0px;   
 
}   
 
}   
 +
   
 
.thumbnail img {
 
.thumbnail img {
 
     opacity: 0.7;
 
     opacity: 0.7;
 
}     
 
}     
 
.thumbnail:hover {
 
.thumbnail:hover {
−
     background-color: #F2F2F2;
+
     background-color: rgba(240, 248, 255, 0.3);
 
     -webkit-transform: scale(1.05);
 
     -webkit-transform: scale(1.05);
 
     -ms-transform: scale(1.05);
 
     -ms-transform: scale(1.05);
Line 176: Line 178:
 
     left: 45%;
 
     left: 45%;
 
}   
 
}   
 +
#moremore {
 +
        position: relative;
 +
        top: 90%;
 +
        left: 40%;
 +
    }   
 
#jointherace {
 
#jointherace {
 
     font-size: 25px !important;
 
     font-size: 25px !important;
Line 183: Line 190:
 
     top: 40%;
 
     top: 40%;
 
     font-weight: 100;
 
     font-weight: 100;
−
     }
+
}
 +
p.introp {
 +
    font-size: 16px !important; 
 +
    }   
 +
 
 +
    div.caption h3.adpbl {
 +
        font-size: 20px;
 +
    }   
 +
    em {
 +
        font-style: normal!important;
 +
        letter-spacing: 0.1em;
 +
     }  
 
    
 
    
 
</style>
 
</style>
  
 +
   
 +
</head>
 
<body>
 
<body>
 +
 +
<header>
 +
<nav class="navbar navbar-default navbar-fixed-top">
 +
<div class="container-fluid">
 +
 +
<!-- Brand and toggle get grouped for better mobile display -->
 +
<div class="navbar-header">
 +
 +
<!-- Button that toggles the navbar on and off on small screens -->
 +
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#adopenav" aria-expanded="false">
 +
 +
<!-- Hides information from screen readers -->
 +
<span class="sr-only"></span>
 +
 +
<!-- Draws 3 bars in navbar button when in small mode -->
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
</button>
 +
 +
<!-- You'll have to add padding in your image on the top and right of a few pixels (CSS Styling will break the navbar) -->
 +
<a class="pull-left" href="https://2018.igem.org/Team:TUDelft"><img class="adopeicon" src="https://static.igem.org/mediawiki/2018/7/75/T--TUDelft--2018_adope_logo.png"></a>
 +
</div>
 +
 +
<!-- Collect the nav links, forms, and other content for toggling -->
 +
<div class="collapse navbar-collapse" id="adopenav">
 +
<ul class="nav navbar-nav">
 +
  <!-- Project -->
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project<span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Description">Description</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Design">Design</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Notebook">Notebook</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Results">Results</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Demonstration">Demonstration</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Attributions">Attributions</a></li>
 +
  </ul>
 +
</li>
 +
  <!-- Modeling -->
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Modeling<span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Model">Model</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Software">Software Tool</a></li>
 +
  </ul>
 +
</li>
 +
      <!-- Team -->
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team<span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Team">Team Members</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Team_Building">Team Building</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Collaborations">Collaborations</a></li>
 +
  </ul>
 +
</li>
 +
      <!-- Parts -->
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Parts<span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Basic_Part">Basic Parts</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Composite_Parts">Composite Parts</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Part_Collection">Part Collection</a></li>
 +
  </ul>
 +
</li>
 +
    <!-- Human Practices -->
 +
<li class="dropdown">
 +
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices<span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Human_Practices">Integrated Human Practices</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Public_Engagement">Education and Engagement</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Entrepreneurship">Entrepreneurship</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Applied_Design">Applied Design</a></li>
 +
 +
  </ul>
 +
</li>
 +
<!-- EurAsian Meetup -->
 +
<li><a href="https://2018.igem.org/Team:TUDelft/EurAsianMeetup">EurAsian Meetup</a></li>
 +
<!-- Safety -->
 +
<li><a href="https://2018.igem.org/Team:TUDelft/Safety">Safety</a></li>
 +
<!-- Sponsors -->
 +
<li><a href="https://2018.igem.org/Team:TUDelft/Sponsors">Sponsors</a></li>
 +
</ul>
 +
</div><!-- /.navbar-collapse -->
 +
</div><!-- /.container-fluid -->
 +
</nav>
 +
</header>
 +
 +
<!-- WRITE YOUR STUFF RIGHT HERE -->
 +
 +
 
<header id="showcase" class="hidden-xs">
 
<header id="showcase" class="hidden-xs">
 
<div class="overlaycontainer " class="text-center">
 
<div class="overlaycontainer " class="text-center">
Line 198: Line 309:
 
     <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo"></div>
 
     <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo"></div>
 
     <div id="fadein5">
 
     <div id="fadein5">
−
     <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png" class="adopelogo2"></div>
+
     <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png"></div>
 
      
 
      
−
     <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More</a></div>
+
     <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More <i class="fas fa-angle-double-down"></i></a></div>
 
</div>
 
</div>
 
</header>
 
</header>
Line 213: Line 324:
 
     <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png" class="adopelogo2 img-responsive" ></div>-->
 
     <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png" class="adopelogo2 img-responsive" ></div>-->
 
      
 
      
−
     <div class="rdmrbttn2"><a href="#getstarted" class="britney">Read More</a></div>
+
     <div class="rdmrbttn2"><a href="#getstarted" class="britney">Read More <i class="fas fa-angle-double-down"></i></a></div>
 
</div>
 
</div>
 
</header>
 
</header>
−
 
+
   
 
     <div id="spcmkr"></div>
 
     <div id="spcmkr"></div>
 
     <div id="getstarted" class="spcmkr"></div>
 
     <div id="getstarted" class="spcmkr"></div>
 
      
 
      
−
<div class="container-fluid">
+
<div class="container" >
−
     <div class="row">
+
<div class="row" style="border:1px solid black;">
−
         <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
+
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
 +
 
 +
    <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
 +
        <center><h3 style="text-align:center;">Introducing ADOPE<br><em>Advanced Detection Of Perfomance Enhancement</em></h3>
 +
        <img src="https://static.igem.org/mediawiki/2018/b/b1/T--TUDelft--2018_scanning.gif" class="img-fluid" style="margin:40px">
 +
        <br><h3><br>We are fighting for honest athletes and a clean sport by detecting gene doping - the newest threat to fair sport.</h3></center>
 +
                    <div class="spcmkr"></div>
 +
     <div class="rdmrbttn" id="moremore"><a href="#ourparts" class="britney">There's more <i class="fas fa-angle-double-down"></i></a></div>
 +
 
 +
    </div>
 +
 
 +
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
 +
</div>
 +
 
 +
<div class="row">
 +
         <div id="ourparts" class="spcmkr"></div>
 +
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
 +
 
 +
    <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
 
          
 
          
−
         <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
+
         <h3 style="text-align:center;">Learn more about each unique part of our project.</h3>
−
            <h1 style="text-align:center;">Detect the undecteable with iGEM TU Delft 2018!</h1>
+
        <br>
−
            <h4 style="text-align:justify;">Each year, new cases of doping increase the distrust in athletes. We are fighting for honest athletes and a clean sport by detecting gene doping - the newest threat to fair sport. </h4>
+
 
−
            <br>
+
−
        </div>
+
−
        <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
+
 
     </div>
 
     </div>
 +
 +
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
 
</div>
 
</div>
−
<div class="container">
+
   
 +
   
 
<div class="row">
 
<div class="row">
 
     <div class="col-sm-4 col-md-4 col-xs-12">
 
     <div class="col-sm-4 col-md-4 col-xs-12">
 
             <div class="thumbnail" >
 
             <div class="thumbnail" >
−
                 <img src="https://static.igem.org/mediawiki/2018/8/80/T--TUDelft--fusioncut.png" alt="Fusion protein">
+
                 <img src="https://static.igem.org/mediawiki/2018/2/21/T--TUDelft--2018_GifFusion.gif" alt="Fusion protein">
 
                 <div class="caption">
 
                 <div class="caption">
 
                     <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Description" class="adpbl">How-to: Detect gene doping</a></h3>
 
                     <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Description" class="adpbl">How-to: Detect gene doping</a></h3>
−
                     <p class="introp">With our newly developed <b>CRISPR-Cas based fusion protein</b>, we determine what we want to sequence. Find out all the measures we took to bring our project to perfection.<br> </p>
+
                     <p class="introp">With our newly designed <b>CRISPR-Cas based fusion protein</b>, we developed a next-generation <b>targeted sequencing platform</b>. Find out all the measures we took to bring our project to perfection.<br> </p>
−
                    <br>
+
 
                 </div>
 
                 </div>
 
         </div>
 
         </div>
Line 249: Line 377:
 
                 <div class="caption">
 
                 <div class="caption">
 
                 <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Model" class="adpbl">iGEM TU Delft's next top model</a></h3>
 
                 <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Model" class="adpbl">iGEM TU Delft's next top model</a></h3>
−
                 <p class="introp">Our wetlab and drylab are working side by side when it comes to gene doping detection - just like Dr. Watson and Sherlock Holmes need each other to solve crimes. Find out how both parts influenced each other. </p>
+
                 <p class="introp">Our wetlab and drylab are working side by side when it comes to gene doping detection. Find out how both parts influenced each other and how we simulated the entire dopping process within the human body. </p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 255: Line 383:
 
     <div class="col-sm-4 col-md-4 col-xs-12">
 
     <div class="col-sm-4 col-md-4 col-xs-12">
 
             <div class="thumbnail">
 
             <div class="thumbnail">
−
                 <img src="https://static.igem.org/mediawiki/2018/0/0e/T--TUDelft--HPcut.jpg" alt="...">
+
                 <img src="https://static.igem.org/mediawiki/2018/1/10/T--TUDelft--Moniekuncut.jpg" alt="...">
 
                 <div class="caption">
 
                 <div class="caption">
 
                 <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" class="adpbl">Everything you need to know about our HP</a></h3>
 
                 <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" class="adpbl">Everything you need to know about our HP</a></h3>
−
                 <p class="introp">Throughout our iGEM season, we actively involved stakeholders and the public with our project, which shaped it significantly. Read more about the interesting people we met and how each of them contributed.<br></p>
+
                 <p class="introp">Throughout our iGEM season, we actively involved stakeholders and the public with our project. Read more about the interesting people we met and how each of them contributed.<br></p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
     </div>  
+
     </div>
 +
   
 +
 
 +
    <!-- BETWEEN THESE TWO COMMENTS -->
 +
       
 +
        <!-- <div class="container">
 +
    <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
 +
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
 +
       
 +
        <br>
 +
       
 +
        <center><div clas="container" style="position:relative;"><img src="https://static.igem.org/mediawiki/2018/a/a1/T--TUDelft--2018_col_v2.png" alt="Circle of Life" usemap="#CircleOfLife" id="CircleLife" style="height:75%;length:auto;"><a href="https://2018.igem.org/Team:TUDelft/Description" title="Project" style="position: absolute; left: 30.83%; top: 4%; width: 38.63%; height: 18.65%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Description" title="Project" style="position: absolute; left: 42.82%; top: 22.65%; width: 14.37%; height: 17.6%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Model" title="Modeling" style="position: absolute; left: 11.23%; top: 26.93%; width: 18.93%; height: 27.02%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Model" title="Model" style="position: absolute; left: 30.35%; top: 36.25%; width: 9.51%; height: 16.65%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Experiments" title="Wetlab" style="position: absolute; left: 59.85%; top: 35.97%; width: 33.59%; height: 15.79%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Experiments" title="Wetlab" style="position: absolute; left: 70.79%; top: 25.31%; width: 20.93%; height: 10.28%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Parts" title="Parts" style="position: absolute; left: 32.73%; top: 58.04%; width: 16.94%; height: 31.97%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Parts" title="Parts" style="position: absolute; left: 19.41%; top: 60.89%; width: 12.37%; height: 23.12%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 49.95%; top: 56.04%; width: 18.55%; height: 37.68%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 69.36%; top: 64.13%; width: 13.32%; height: 21.41%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 84.21%; top: 90.2%; width: 10.85%; height: 4.28%; z-index: 2;"></a></div>
 +
           
 +
    </center>
 +
    </div>
 +
    <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
 
</div>
 
</div>
 +
        </div>
 +
        </div> -->
 +
       
 +
 +
   
 +
 +
   
  
  
Line 278: Line 428:
 
         $("#fadein5").delay(7500).animate({"opacity":"1"},700);
 
         $("#fadein5").delay(7500).animate({"opacity":"1"},700);
 
     </script>
 
     </script>
−
</body>  
+
    <script>
 +
  AOS.init();
 +
</script>
 +
</body>
 
</html>
 
</html>
−
 
+
   
−
 
+
−
 
+
 
{{:Team:TUDelft/Footer2}}
 
{{:Team:TUDelft/Footer2}}

Revision as of 22:32, 17 October 2018

ADOPE

Introducing ADOPE
Advanced Detection Of Perfomance Enhancement



We are fighting for honest athletes and a clean sport by detecting gene doping - the newest threat to fair sport.

Learn more about each unique part of our project.


Fusion protein

How-to: Detect gene doping

With our newly designed CRISPR-Cas based fusion protein, we developed a next-generation targeted sequencing platform. Find out all the measures we took to bring our project to perfection.

...

iGEM TU Delft's next top model

Our wetlab and drylab are working side by side when it comes to gene doping detection. Find out how both parts influenced each other and how we simulated the entire dopping process within the human body.

...

Everything you need to know about our HP

Throughout our iGEM season, we actively involved stakeholders and the public with our project. Read more about the interesting people we met and how each of them contributed.