Difference between revisions of "Team:TUDelft/Testpage3"

 
(117 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{:Team:TUDelft/Head}}
 +
 
<html>
 
<html>
−
<head>
+
<head>  
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<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://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
+
−
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Lato" rel="stylesheet">
+
−
 
+
−
   
+
 
<style>
 
<style>
  
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
  #home_logo,
 
−
  #sideMenu {
 
−
    display: none;
 
−
  }
 
−
 
−
  #sideMenu,
 
−
  #top_title,
 
−
  .patrollink {
 
−
    display: none;
 
−
  }
 
  
−
  #content {
+
#showcase{
−
    margin-left: 0px;
+
  background-image:url('https://static.igem.org/mediawiki/2018/8/84/T--TUDelft--runner.jpg');
−
    margin-top: -7px;
+
  background-size:cover;
−
    padding: 0px;
+
  background-position:center;
−
    width: 100%;
+
   background-repeat: no-repeat;
−
   }
+
  height:100vh;
−
 
+
   display:flex;
−
  body {
+
   flex-direction:column;
−
    background-color: white;
+
   justify-content:center;
−
    margin-top: +20px;
+
  align-items:center;
−
   }
+
  text-align:center;
−
 
+
   margin-top: -100px;
−
   #bodyContent h1,
+
  position: relative;  
−
  #bodyContent h2,
+
−
  #bodyContent h3,
+
−
  #bodyContent h4,
+
−
  #bodyContent h5 {
+
−
    margin-bottom: 0px;
+
−
   }
+
−
 
+
−
  .judges-will-not-evaluate {
+
−
    border: 4px solid #e4dede;
+
−
    padding: 2% !important;
+
−
    width: 92%!important;
+
−
   }
+
−
 
+
−
 
+
−
  /**************************************************************************************************************************************************************************************************/
+
−
 
+
−
 
+
−
        body {
+
−
        background-color: rgba(226, 232, 228, 0.1);
+
−
        font-family: 'Lato', sans-serif;
+
−
       
+
 
}
 
}
−
    h4 {
 
−
        color: rgba(255, 204, 187, 1);
 
−
        font-family: 'Comfortaa', cursive;
 
−
        font-size: 20px;
 
−
    }
 
  
  
−
    .testing {
+
.text-block2 {
−
     background-color: rgba(226, 232, 228, 0.1);
+
     position: absolute;
 +
    top: 12%;
 +
    left: 1%;
 +
    color: grey;
 +
    width: 200px;
 +
    z-index: 5;
 
}
 
}
−
 
 
      
 
      
−
    .navbar {
+
#fadein5 {
−
 
+
    position: absolute;
−
     overflow: hidden;
+
     top: 16%;
−
     background-color: rgba(0, 108, 132, 0.6);
+
     right: 1%;
−
     font-family: 'Lato', sans-serif;
+
     width: 220px;
 +
    z-index: 500;}
 +
   
 +
#fadein5 img{   
 +
    max-height: 80px !important;
 
}
 
}
 +
   
 +
.tulogo {
 +
    max-height: 150px !important;
 +
    width: auto;
 +
    z-index: 1;
 +
}
 +
   
 +
.overlaycontainer {
 +
    z-index: 400 !important;
 +
} 
  
−
.navbar a {
+
      
−
     float: right;
+
#fadein1, #fadein2, #fadein3, #fadein4, #fadein5 {
−
    font-size: 16px;
+
     opacity: 0;
−
     color: white;
+
 
     text-align: center;
 
     text-align: center;
−
     padding: 14px 16px;
+
     position: absolute;  
−
     text-decoration: none;
+
     font-weight: 90;
−
}
+
    }
  
−
.dropdown {
+
#fadein1, #fadein2, #fadein3 {
−
     float: right;
+
     font-size: 90px !important;
−
     overflow: hidden;
+
     line-height: 90px;
 
}
 
}
  
−
.dropdown .dropbtn {
+
#fadein4 {
−
     font-size: 16px;  
+
     font-size: 50px !important;
−
     border: none;
+
     line-height: 50px;
−
    outline: none;
+
−
    color: white;
+
−
    padding: 14px 16px;
+
−
    background-color: inherit;
+
−
    font-family: inherit;
+
−
    margin: 0;
+
 
}
 
}
−
 
+
 
−
.navbar a:hover, .dropdown:hover .dropbtn {
+
.rdmrbttn .britney, .rdmrbttn2 .britney, rdmrbttn3 .britney{
−
    background-color: rgba(0, 108, 132, 0.8);
+
  font-size:18px;
 +
  text-decoration:none;
 +
  color:#fff;
 +
  background: #0092CB;
 +
  border:#FFF 1px solid;
 +
  padding:10px 20px;
 +
  margin-top:20px;
 
}
 
}
  
−
.dropdown-content {
+
.rdmrbttn .britney:hover, .rdmrbttn3 .britney{
−
    display: none;
+
  background: rgba(0,0,0,0.4);
 +
  color:#fff;
 +
}   
 +
 
 +
.rdmrbttn {
 
     position: absolute;
 
     position: absolute;
−
     background-color: #f9f9f9;
+
     top: 90%;
−
     min-width: 160px;
+
     left: 45%;
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
    z-index: 1;
+
 
}
 
}
 +
/*.rdmrbttn:hover, .rdmrbttn3:hover {
 +
    -webkit-transform: scale(1.2);
 +
    -ms-transform: scale(1.2);
 +
    transform: scale(1.2);
 +
}  */
 +
   
 +
div.pree {
 +
    border-color: red;
 +
    border-radius: 50px;
 +
    background-color: transparent;
 +
    padding: 20px;
 +
}   
  
−
.dropdown-content a {
+
.caption h3 {
−
     float: none;
+
        color: white;
−
     color: black;
+
    }   
−
     padding: 12px 16px;
+
   
−
     text-decoration: none;
+
.thumbnail {
−
     display: block;
+
    background-color: transparent;
−
     text-align: left;
+
    max-height: 600px;
 +
    overflow: auto;
 +
    border-color: aliceblue;
 +
    border-radius: 0px;   
 +
} 
 +
   
 +
.thumbnail img {
 +
     opacity: 0.7;
 +
}   
 +
.thumbnail:hover {
 +
     background-color: rgba(240, 248, 255, 0.3);
 +
     -webkit-transform: scale(1.05);
 +
     -ms-transform: scale(1.05);
 +
     transform: scale(1.05);
 +
}     
 +
.thumbnail:hover div .boxhd {
 +
     font-weight: 300;
 +
}   
 +
.thumbnail:hover img {
 +
    opacity: 1;       
 +
}   
 +
/*SMALL SCREENS */
 +
#showcase2{
 +
  background-image:url('https://static.igem.org/mediawiki/2018/8/84/T--TUDelft--runner.jpg');
 +
  background-size:cover;
 +
  background-position:center;
 +
  background-repeat: no-repeat;
 +
  height:100vh;
 +
  display:flex;
 +
  flex-direction:column;
 +
  justify-content:center;
 +
  align-items:center;
 +
  text-align:center;
 +
  margin-top: -100px;
 +
  margin-left: 15px;
 +
  margin-right: 15px;
 +
  position: relative;
 +
} 
 +
.tulogosmall {
 +
    position: absolute;
 +
    top: 18%;
 +
    left: 1%;
 +
    color: grey;
 +
    max-height: 90px;
 +
    width: auto;
 +
    z-index: 5;
 +
}     
 +
.adopesmall {
 +
    position: absolute;
 +
    top: 20%;
 +
    right: 1%;
 +
    width: 150;
 +
    z-index: 5;
 
}
 
}
−
 
+
.tulogo2 {
−
.dropdown-content a:hover {
+
    max-height: 90px !important;
−
     background-color: rgba(226, 232, 228, 1);
+
    width: auto;
 +
    z-index: 1;
 +
}
 +
.adopelogo2 {
 +
     max-height: 70px !important;
 +
    width: auto;
 +
    z-index: 1;
 
}
 
}
−
 
+
.rdmrbttn2 {
−
.dropdown:hover .dropdown-content {
+
    position: absolute;
−
     display: block;
+
    top: 70%;
 +
    left: 45%;
 +
} 
 +
#moremore {
 +
        position: relative;
 +
        top: 90%;
 +
        left: 33%;
 +
     }   
 +
#jointherace {
 +
    font-size: 25px !important;
 +
    line-height: 25px;
 +
    text-align: center;
 +
    position: absolute;
 +
    top: 40%;
 +
    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>
 
</head>
 
<body>
 
<body>
  
−
<div class="navbar">
+
<!-- WRITE YOUR STUFF RIGHT HERE -->
−
     <!-- Sponsors -->
+
<header id="showcase" class="hidden-xs">
−
  <a href="https://2018.igem.org/Team:TUDelft/Sponsors">Sponsors</a>
+
<div class="overlaycontainer " class="text-center">
−
     <!-- Safety -->
+
     <div id="fadein1">On your marks.</div>
−
  <a href="https://2018.igem.org/Team:TUDelft/Safety">Safety</a>
+
    <div id="fadein2">Get set.</div>
−
     <!-- EurAsian Meetup -->
+
    <div id="fadein3">Detect.</div>
−
  <a href="#newshttps://2018.igem.org/Team:TUDelft/EurAsianMeetup">EurAsian Meetup</a>
+
    <div id="fadein4">Join the race against gene doping.</div>
−
     <!-- Human Practices -->
+
 
−
  <div class="dropdown">
+
    <div class="text-block2">
−
    <button class="dropbtn">Human Practices 
+
    <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo"></div>
−
      <i class="fa fa-caret-down"></i>
+
     <div id="fadein5">
−
     </button>
+
    <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png"></div>
−
     <div class="dropdown-content">
+
   
−
      <a href="https://2018.igem.org/Team:TUDelft/Human_Practices">Integrated Human Practices</a>
+
    <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More <i class="fas fa-angle-double-down"></i></a></div>
−
      <a href="https://2018.igem.org/Team:TUDelft/Public_Engagement">Education and Engagement</a>
+
</div>
 +
</header>
 +
      
 +
<header id="showcase2" class="hidden-lg hidden-md hidden-sm">
 +
<div class="overlaycontainer " class="text-center">
 +
    <div id="jointherace"><br>Join the race against gene doping.</div>
 +
 
 +
    <div class="tulogosmall">
 +
    <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo2 img-responsive"></div>
 +
     <!--<div class="adopesmall">
 +
    <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 <i class="fas fa-angle-double-down"></i></a></div>
 +
</div>
 +
</header>
 +
      
 +
<br>
 +
    <div id="getstarted" class="spcmkr"></div>
 +
      
 +
<div class="container" >
 +
<div class="row">
 +
    <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>We are fighting for honest athletes and clean sports by detecting gene doping <br> a rising threat to fair sport.</h3></center>
 +
<br>
 +
 
 +
    <div class="rdmrbttn" id="moremore"><a href="#ourparts" class="britney">Learn more about ADOPE <i class="fas fa-angle-double-down"></i></a></div>
 +
 
 
     </div>
 
     </div>
−
  </div>
+
 
−
        <!-- Parts -->
+
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
−
  <div class="dropdown">
+
</div>
−
    <button class="dropbtn">Parts 
+
 
−
      <i class="fa fa-caret-down"></i>
+
<div class="row">
−
    </button>
+
        <div id="ourparts" class="spcmkr"></div>
−
     <div class="dropdown-content">
+
    <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
−
      <a href="https://2018.igem.org/Team:TUDelft/Basic_Part">Basic Parts Overview</a>
+
 
−
      <a href="https://2018.igem.org/Team:TUDelft/Composite_Parts">Composite Parts</a>
+
     <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
−
      <a href="https://2018.igem.org/Team:TUDelft/Part_Collection">Part Collection</a>
+
      <br><br><br>
 +
        <h3 style="text-align:center;">Learn more about each unique part of our project.</h3>
 +
        <br>
 +
 
 
     </div>
 
     </div>
−
  </div>
+
 
−
     <!-- Team -->
+
     <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div>
−
  <div class="dropdown">
+
</div>
−
     <button class="dropbtn">Team
+
   
−
      <i class="fa fa-caret-down"></i>
+
   
−
    </button>
+
<div class="row">
−
    <div class="dropdown-content">
+
     <div class="col-sm-4 col-md-4 col-xs-12">
−
      <a href="https://2018.igem.org/Team:TUDelft/Team">Team Members</a>
+
            <div class="thumbnail" >
−
      <a href="https://2018.igem.org/Team:TUDelft/Collaborations">Collaborations</a>
+
                <img src="https://static.igem.org/mediawiki/2018/2/21/T--TUDelft--2018_GifFusion.gif" alt="Fusion protein">
 +
                <div class="caption">
 +
                    <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 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>
 +
                </div>
 +
        </div>
 
     </div>
 
     </div>
−
  </div>
+
    <div class="col-sm-4 col-md-4 col-xs-12">
−
    <!-- Modelling -->
+
            <div class="thumbnail">
−
  <div class="dropdown">
+
                <img src="https://static.igem.org/mediawiki/2018/d/d8/T--TUDelft--modelcut.png" alt="...">
−
    <button class="dropbtn">Modelling
+
                <div class="caption">
−
      <i class="fa fa-caret-down"></i>
+
                <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Model" class="adpbl">iGEM TU Delft's next top model</a></h3>
−
    </button>
+
                <p class="introp">Our wetlab and <b>drylab</b> are working side by side when it comes to gene doping detection. Find out how both parts influenced each other and how we <b>simulated</b> the entire doping process within the human body. </p>
−
     <div class="dropdown-content">
+
</div>
−
      <a href="https://2018.igem.org/Team:TUDelft/Model">Model</a>
+
</div>
−
      <!-- what other subpages do we need for modelling? Like data analysis?<a href="https://2018.igem.org/Team:TUDelft/Collaborations">Collaborations</a> -->
+
</div>
 +
     <div class="col-sm-4 col-md-4 col-xs-12">
 +
            <div class="thumbnail">
 +
                <img src="https://static.igem.org/mediawiki/2018/1/10/T--TUDelft--Moniekuncut.jpg" alt="...">
 +
                <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 Human Practices</a></h3>
 +
                <p class="introp">During our iGEM season, we actively involved <b>stakeholders</b> and the public with our project. Read more about the interesting people we met and how each of them <b>contributed</b>.<br></p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
     </div>
 
     </div>
−
  </div>
+
   
−
     <!-- Project -->
+
 
−
  <div class="dropdown">
+
     <!-- BETWEEN THESE TWO COMMENTS -->
−
     <button class="dropbtn">Project
+
       
−
      <i class="fa fa-caret-down"></i>
+
        <!-- <div class="container">
−
    </button>
+
     <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
−
    <div class="dropdown-content">
+
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
−
      <a href="https://2018.igem.org/Team:TUDelft/Description">Description</a>
+
       
−
      <a href="https://2018.igem.org/Team:TUDelft/Design">Design</a>
+
        <br>
−
      <a href="https://2018.igem.org/Team:TUDelft/Experiments">Experiments</a>
+
       
−
      <a href="https://2018.igem.org/Team:TUDelft/Notebook">Notebook</a>
+
        <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>
−
      <a href="https://2018.igem.org/Team:TUDelft/Results">Results</a>
+
           
−
      <a href="https://2018.igem.org/Team:TUDelft/Demonstrate">Demonstration</a>
+
    </center>
−
      <a href="https://2018.igem.org/Team:TUDelft/Attributions">Attributions</a>
+
    </div>
−
      </div>
+
    <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
−
  </div>
+
−
    <!-- Home -->
+
−
  <a href="https://2018.igem.org/Team:TUDelft">Home</a>
+
 
</div>
 
</div>
 +
        </div>
 +
        </div> -->
 +
       
  
−
<div class="testing"><h4>Human Practices</h4>
+
   
−
<p>We are still working on our wiki. Please be patient.</p></div>
+
  
 +
   
 +
 +
 +
 +
    <script>
 +
        $("#fadein1").delay(1100).animate({"opacity":"1"},700);
 +
        $("#fadein1").delay(400).animate({"opacity":"0"},700);
 +
        $("#fadein2").delay(2700).animate({"opacity":"1"},700);
 +
        $("#fadein2").delay(400).animate({"opacity":"0"},700);
 +
        $("#fadein3").delay(4300).animate({"opacity":"1"},700);
 +
        $("#fadein3").delay(400).animate({"opacity":"0"},700);
 +
        $("#fadein4").delay(7000).animate({"opacity":"1"},700);
 +
        $("#fadein5").delay(7500).animate({"opacity":"1"},700);
 +
    </script>
 +
    <script>
 +
  AOS.init();
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 +
   
 +
{{:Team:TUDelft/Footer2}}

Latest revision as of 23:50, 17 October 2018

ADOPE


Introducing ADOPE
Advanced Detection Of Perfomance Enhancement


We are fighting for honest athletes and clean sports by detecting gene doping
a rising 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 doping process within the human body.

...

Everything you need to know about our Human Practices

During 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.