Difference between revisions of "Team:Mingdao"

 
(26 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
−
     <title>Home</title>
+
     <title>Description</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
<style>
 
<style>
 +
 +
#myBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 18px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: red;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 4px;
 +
}
 +
 +
#myBtn:hover {
 +
  background-color: #555;
 +
}
 +
 
* {
 
* {
 
     box-sizing: border-box;
 
     box-sizing: border-box;
Line 14: Line 35:
 
/* Create three equal columns that floats next to each other */
 
/* Create three equal columns that floats next to each other */
 
.column {
 
.column {
−
float:left;   
+
    float: left;
 +
    width: 34%;
 +
    padding: 5px 5px 5px 5px;
 +
    height: 450px; /* Should be removed. Only for demonstration */
 +
    top:0vh;
 +
    position:relative;
 +
 
 +
}
 +
 
 +
.middle {
 +
   width: 43%;
 +
}
 +
.right  {
 +
  width: 23%;
 
}
 
}
  
 
/* Clear floats after the columns */
 
/* Clear floats after the columns */
−
.row{
+
.row:after {
 
     content: "";
 
     content: "";
 
     display: table;
 
     display: table;
Line 24: Line 58:
 
}
 
}
  
−
<!-- Responsive layout - makes the three columns stack on top of each other instead of next to each other  
+
<!-- Responsive layout - makes the three columns stack on top of each other instead of next to each other -->
 
@media screen and (max-width: 600px) {
 
@media screen and (max-width: 600px) {
 
     .column {
 
     .column {
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
−
}-->
+
}
 
</style>
 
</style>
  
Line 328: Line 362:
  
 
}
 
}
 +
  
 
</style>
 
</style>
Line 341: Line 376:
 
     document.getElementById('vid').play();
 
     document.getElementById('vid').play();
 
</script>
 
</script>
 +
 +
 
      
 
      
 
<div class="bg-container" style="max-height:none;">  
 
<div class="bg-container" style="max-height:none;">  
 +
<!-- 
 +
<div class="my-main-container">
 +
<div class="main-content">     
 +
<div class="text-area"> -->
 +
 +
</div>
 +
</div>
 +
</div>
 
</div>   
 
</div>   
  
Line 358: Line 403:
  
 
<div class="row">
 
<div class="row">
−
   <div class="column" style="width:34%;background-color:#4f0505;">
+
   <div class="column left " style="background-color:#4f0505;">
 
     <h2 style="text-align: center" color="#FF8000">Project Motivation</h2>
 
     <h2 style="text-align: center" color="#FF8000">Project Motivation</h2>
 
     <video playinline controls="true">
 
     <video playinline controls="true">
−
    <source src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--HomePage_intro.mp4" type="video/mp4";>
+
  <source src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--HomePage_intro.mp4" type="video/mp4"; >
 
     </video>
 
     </video>
 
   </div>
 
   </div>
−
 
+
   <div class="column middle" style="background-color:#4f0505;">
−
   <div class="column" style="width:43%;background-color:#4f0505;">
+
 
     <h2 style="text-align: center" color="#FF8000">Experimental Principle</h2>
 
     <h2 style="text-align: center" color="#FF8000">Experimental Principle</h2>
 
     <video playinline controls="true">
 
     <video playinline controls="true">
−
    <source src="https://static.igem.org/mediawiki/2018/5/54/T--Mingdao--HomePage_BriefIntro.mp4" type="video/mp4" >
+
  <source src="https://static.igem.org/mediawiki/2018/5/54/T--Mingdao--HomePage_BriefIntro.mp4" type="video/mp4" >
 
     </video>
 
     </video>
 
   </div>
 
   </div>
−
 
+
  <div class="column right" style="background-color:#4f0505;">
−
<div class="column" style="width:23%;background-color:#4f0505;">
+
    <h2 style="text-align: center" color="#FF8000">DM</h2>     
−
  <h2 style="text-align: center" color="#FF8000">DM</h2>     
+
   <img  class="center" src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" alt="" style="width:76%; margin-bottom: 0px;">
−
   <img  class="center" src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" alt="" style="width:23%; margin-bottom: 0px;">
+
 
<p style="text-align:center">
 
<p style="text-align:center">
−
   <a href="https://2018.igem.org/Team:Mingdao/DM_test">
+
   <a href="https://2018.igem.org/Team:Mingdao/DM_test"> <font color="#ffffff">see more </font><i class="fa fa-search" style="font-size:15px; color:white"></i></a>
−
  <font color="#ffffff">see more</font>
+
  <a href="https://static.igem.org/mediawiki/2018/0/03/T--Mingdao--HomePage_DM.pdf"> <font color="#ffffff"> PDF </font><i class="fa fa-folder-open" style="font-size:15px; color:white"></i></a>
−
  <i style="font-size:20px; color:white"></i>
+
</p>
−
  </a>
+
   
−
 
+
−
  <a href="https://static.igem.org/mediawiki/2018/0/03/T--Mingdao--HomePage_DM.pdf">
+
−
  <font color="#ffffff">PDF</font>
+
−
  <i class="fa fa-folder-open" style="font-size:20px; color:white"></i>
+
−
  </a>
+
−
</p>
+
−
</div>
+
 
</div>
 
</div>
  
−
    <div class="top">
 
−
      <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 
−
    </div>
 
  
 +
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
 +
 +
 +
<script>
 +
// When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
        document.getElementById("myBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn").style.display = "none";
 +
    }
 +
}
 +
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{:Team:Mingdao/test6}}
 
{{:Team:Mingdao/test6}}

Latest revision as of 02:37, 18 October 2018

HOME
Description
Preview Preview Preview Preview Preview Preview

Project Motivation

Experimental Principle

DM

see more PDF