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

(Prototype team page)
 
 
(37 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{NTHU_Formosa}}
+
{{NTHU_Formosa}} {{NTHU_Formosa/NavBar}}
 
<html>
 
<html>
  
 +
<head>
 +
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/Lato&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">
 +
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS2&action=raw&ctype=text/css">
 +
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/initial&action=raw&ctype=text/css">
 +
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/wordcss0&action=raw&ctype=text/css">
  
<div class="column full_size">
+
  <style>
 +
    /* unvisited link */
  
<h1>Notebook</h1>
+
    a {
<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>
+
      color: #0645AD;
 +
    }
  
</div>
+
    /* visited link */
<div class="clear"></div>
+
  
 +
    a:visited {
 +
      color: green;
 +
    }
  
 +
    /* mouse over link */
  
<div class="column two_thirds_size">
+
    a:hover {
<h3>What should this page have?</h3>
+
      color: hotpink;
<ul>
+
      cursor: pointer;
<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>
+
  
 +
    .w3-wide{
 +
        font-weight: 900;
 +
        font-size: 350%;
 +
        font-family:  "Josefin Sans","JosefinSans-Bold",NotoSansCJKtc-Regular,'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
 +
    }
 +
 +
    /* selected link */
 +
 +
    a:active {
 +
      color: blue;
 +
    }
 +
 +
 +
#pdf {width: 700px; height: 800px;margin: 1em auto;padding-right:92%;}
 +
#pdf object {display: block;border: solid 10px #666;}
 +
.shadow-bottom {box-shadow: 3px 3px 5px #888888;padding-bottom: 1em; margin-bottom: 10em;
 +
background:palegreen;}
 +
.shadow-bottom p {margin:1em;}
 +
 +
 +
  </style>
 +
</head>
 +
 +
<!-- Main Section -->
 +
 +
 +
 +
<div class="w3-container  w3-padding-64 w3-center">
 +
  <div class="w3-content"><br><br><br>
 +
    <h2 class="w3-wide" style="font-size:60px;font-family:Quicksand;">Notebook</h2><br>
 +
    <p class="w3-justify"> </p>
 +
   
 +
    <div class="shadow-bottom">
 +
<p><a href="https://static.igem.org/mediawiki/2018/8/85/T--NTHU_Formosa--Notebook_wiki.pdf">[Notebook_PDF]</a></p>
 +
<div id="pdf">
 +
<object data="https://static.igem.org/mediawiki/2018/8/85/T--NTHU_Formosa--Notebook_wiki.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH"
 +
type="application/pdf"
 +
width="900px"
 +
height="800px">
 +
</object></div></div>
 +
   
 +
 +
 +
 +
  </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>

Latest revision as of 14:10, 17 October 2018




Notebook