Difference between revisions of "Team:NTHU Formosa/Notebook"

(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 */
  
−
<div class="column full_size">
+
    a {
 +
      color: #0645AD;
 +
    }
  
−
<h1>Notebook</h1>
+
    /* visited link */
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
  
−
</div>
+
    a:visited {
−
<div class="clear"></div>
+
      color: green;
 +
    }
  
 +
    /* mouse over link */
  
 +
    a:hover {
 +
      color: hotpink;
 +
      cursor: pointer;
 +
    }
  
−
<div class="column two_thirds_size">
+
    /* selected link */
−
<h3>What should this page have?</h3>
+
−
<ul>
+
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
 +
    a:active {
 +
      color: blue;
 +
    }
 +
  </style>
 +
</head>
 +
 +
<!-- Main Section -->
 +
<div class="w3-container w3-pale-blue w3-padding-64 w3-center">
 +
  <div class="w3-content">
 +
    <h2 class="w3-wide">Notebook</h2>
 +
    <p class="w3-justify"> </p>
 +
 +
  </div>
 
</div>
 
</div>
  
−
<div class="column third_size">
+
<!-- Trigger/Open The Modal -->
−
<div class="highlight decoration_A_full">
+
<!-- <a id="myLink"><u>Open Modal</u></a> -->
−
<h3>Inspiration</h3>
+
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>  
+
<!-- The Modal Box-->
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
<div id="myModal" class="modal">
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
  <!-- Modal content -->
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
  <div class="modal-content">
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
    <span class="close">&times;</span>
−
</ul>
+
    <p>Description text in the box. Image can also be included</p>
−
</div>
+
  </div>
 
</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 13:17, 30 September 2018

Notebook