(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | {{NTHU_Formosa}} | + | {{NTHU_Formosa}} {{NTHU_Formosa/NavBar}} |
<html> | <html> | ||
+ | <head> | ||
+ | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | ||
+ | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | ||
+ | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS01&action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css" /> | ||
+ | <style> | ||
+ | /* unvisited link */ | ||
− | + | a { | |
+ | color: #0645AD; | ||
+ | } | ||
− | + | /* visited link */ | |
− | + | ||
− | + | a:visited { | |
+ | color: green; | ||
+ | } | ||
− | + | /* mouse over link */ | |
+ | a:hover { | ||
+ | color: hotpink; | ||
+ | cursor: pointer; | ||
+ | } | ||
− | + | /* selected link */ | |
− | + | ||
− | < | + | a:active { |
+ | color: blue; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
− | < | + | <!-- Main Section --> |
− | < | + | <div class="w3-container w3-pale-blue w3-padding-64 w3-center"> |
− | < | + | <div class="w3-content"> |
− | < | + | <h1 class="w3-wide">Safety</h1> |
− | < | + | <p class="w3-justify"> </p> |
− | </ | + | |
+ | </div> | ||
</div> | </div> | ||
− | < | + | <!-- Trigger/Open The Modal --> |
− | < | + | <!-- <a id="myLink"><u>Open Modal</u></a> --> |
− | <p> | + | <!-- The Modal Box--> |
+ | <div id="myModal" class="modal"> | ||
+ | <!-- Modal content --> | ||
+ | <div class="modal-content"> | ||
+ | <span class="close">×</span> | ||
+ | <p>Description text in the box. Image can also be included</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Modal script, DO NOT MODIFY!!! --> | ||
+ | <script> | ||
+ | // Get the modal | ||
+ | var modal = document.getElementById('myModal'); | ||
+ | // Get the hyperlink | ||
+ | var link = document.getElementById("myLink"); | ||
+ | // // When the user clicks the hyperlink, open the modal | ||
+ | link.onclick = function() { | ||
+ | modal.style.display = "block"; | ||
+ | } | ||
+ | // Get the <span> element that closes the modal | ||
+ | var span = document.getElementsByClassName("close")[0]; | ||
+ | // When the user clicks on <span> (x), close the modal | ||
+ | span.onclick = function() { | ||
+ | modal.style.display = "none"; | ||
+ | } | ||
− | + | // When the user clicks anywhere outside of the modal, close it | |
− | + | window.onclick = function(event) { | |
− | + | if (event.target == modal) { | |
− | </ | + | modal.style.display = "none"; |
− | + | } | |
+ | } | ||
+ | </script> | ||
</html> | </html> |
Revision as of 12:46, 30 September 2018
Safety