(38 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
<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; | ||
+ | width: 34%; | ||
padding: 5px 5px 5px 5px; | padding: 5px 5px 5px 5px; | ||
+ | height: 450px; /* Should be removed. Only for demonstration */ | ||
top:0vh; | top:0vh; | ||
position:relative; | 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 330: | Line 362: | ||
} | } | ||
+ | |||
</style> | </style> | ||
Line 370: | Line 403: | ||
<div class="row"> | <div class="row"> | ||
− | <div class="column" style=" | + | <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"; > | |
</video> | </video> | ||
</div> | </div> | ||
− | + | <div class="column middle" style="background-color:#4f0505;"> | |
− | <div class="column" style=" | + | |
<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" > | |
</video> | </video> | ||
</div> | </div> | ||
− | + | <div class="column right" style="background-color:#4f0505;"> | |
− | + | <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:76%; 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> |
− | + | <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> | |
− | + | </p> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </p> | + | |
− | + | ||
</div> | </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