Difference between revisions of "Team:NUS Singapore-A/shadow/Notebook"

 
(22 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{NUS_Singapore-A}}
 
{{NUS_Singapore-A}}
 +
{{:Team:NUS_Singapore-A/Templates/Style}}
 
<html>
 
<html>
 
      
 
      
Line 10: Line 11:
 
<script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
<script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  
−
<style>
 
−
    /***************************************************CSS STARTS HERE*********************************************************/
 
−
 
−
 
−
    table, th, td {
 
−
        border: none;
 
−
        border-collapse: collapse;
 
−
    }
 
−
    table {
 
−
        font-family: "Lora";
 
−
        font-size: 12px;
 
−
        word-spacing: 0.5em;
 
−
    }
 
−
    th, td {
 
−
        text-align: left;
 
−
        padding: 1px;
 
−
    }
 
−
 
−
    h1 {
 
−
        color: #000;
 
−
        font-family: "montserrat", sans-serif;
 
−
        font-weight: bold;
 
−
    }
 
−
   
 
−
    h2 {
 
−
        font-family: "Montserrat", sans-serif;
 
−
        font-size: 15px;
 
−
        font-weight: normal;
 
−
        text-align: left;
 
−
        color: black;
 
−
        padding-left: 1%;
 
−
        padding-top: 1.5%;
 
−
        padding-bottom: 1%;
 
−
        margin-left: 1%; 
 
−
    }
 
−
 
−
    h3 {
 
−
        font-family: "Lora", sans;
 
−
        font-size: 12px;
 
−
        font-weight: bold;
 
−
        text-align: left;
 
−
        color: black;
 
−
        margin-left: 15%;
 
−
        margin-bottom: 5px;
 
−
    }
 
−
   
 
−
    p {
 
−
        font-family: "Lora", serif;
 
−
        font-size: 14px;
 
−
        word-spacing: 0.5em;
 
−
        text-align:justify;
 
−
        margin-left:5%;
 
−
        margin-right:5%;
 
−
    }
 
−
 
−
    img {
 
−
        display: block;
 
−
        margin-left: auto;
 
−
        margin-right: auto;
 
−
    }
 
−
 
−
    .discussion_graph, .measurement_table{
 
−
        width: 70%;
 
−
        height: auto;
 
−
        margin: auto;
 
−
    }
 
−
 
−
    .notebook-header{
 
−
        width: 50%;
 
−
        height: auto;
 
−
        margin: auto;
 
−
    }
 
−
 
−
 
−
/* Style the main tab content */
 
−
.tabcontent {
 
−
    display: none;
 
−
    border: none;
 
−
    margin: none;
 
−
    -webkit-animation: fadeEffect 1s;
 
−
    animation: fadeEffect 1s;
 
−
    min-height: 500px;
 
−
}
 
−
 
−
/* Fade in tabs */
 
−
@-webkit-keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
−
}
 
−
 
−
@keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
−
}
 
−
 
−
 
−
 
−
/* Style the vertical tab */
 
−
.tab_vertical {
 
−
    float: left;
 
−
    border: 1px solid #ccc;
 
−
    background-color: #f1f1f1;
 
−
    width: 10%;
 
−
    min-height: 300px;
 
−
    height: 300px;
 
−
    overflow-y: auto;
 
−
}
 
−
 
−
/* Style the buttons inside the tab */
 
−
.tab_vertical button {
 
−
    display: block;
 
−
    background-color: inherit;
 
−
    color: black;
 
−
    padding: 15px 12px;
 
−
    width: 100%;
 
−
    border: none;
 
−
    outline: none;
 
−
    text-align: left;
 
−
    cursor: pointer;
 
−
    transition: 0.3s;
 
−
    font-size: 17px;
 
−
}
 
−
 
−
/* Change background color of buttons on hover */
 
−
.tab_vertical button:hover {
 
−
    background-color: #ddd;
 
−
}
 
−
 
−
/* Create an active/current "tab button" class */
 
−
.tab_vertical button.active {
 
−
    background-color: #ccc;
 
−
}
 
−
 
−
/* Style the tab content */
 
−
.tabcontent_vertical {
 
−
    float: left;
 
−
    padding: 0 1%;
 
−
    width: 85%;
 
−
    border: none;
 
−
    min-height: 400px;
 
−
}
 
−
 
−
 
−
   
 
−
    /***************************************************CSS ENDS HERE**********************************************************/
 
−
</style>
 
  
 
<body>
 
<body>
 
<div class="inner-border" style="border-top: none;">
 
<div class="inner-border" style="border-top: none;">
−
     <img src="https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--Notebook.jpg" class="notebook-header">
+
<div class="all-wrapper">
 +
<div class="content-wrapper">
 +
     <img src="https://static.igem.org/mediawiki/2018/e/e7/T--NUS_Singapore-A--Notebook_heading_C.png" class="notebook-header">
 +
    <div class="all-wrapper">
 
     <br>
 
     <br>
 
     <img src="https://static.igem.org/mediawiki/2018/9/9b/T--NUS_Singapore-A--Notebook_heading.png" width="1090" height="160" alt="Notebook heading" usemap="#workmap">
 
     <img src="https://static.igem.org/mediawiki/2018/9/9b/T--NUS_Singapore-A--Notebook_heading.png" width="1090" height="160" alt="Notebook heading" usemap="#workmap">
 +
 +
    <div class="months-container">
 +
    <div><span>Protocol</span></div>
 +
    <div><span>May</span></div>
 +
    <div><span>June</span></div>
 +
    <div><span>July</span></div>
 +
    <div><span>August</span></div>
 +
    <div><span>September</span></div>
 +
    <!--<div><span>October</span></div>-->
 +
    </div>
  
 
<p style="text-align: center;">Click on different notebooks to see our records.</p>
 
<p style="text-align: center;">Click on different notebooks to see our records.</p>
Line 176: Line 44:
  
 
<div id="Protocols" class="tabcontent">
 
<div id="Protocols" class="tabcontent">
−
  <div class="tab_vertical">
+
<h1>Protocols</h1>
−
    <button class="tablinks" onclick="openCity(event, 'Protocol1')">Protocol 1</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol2')">Protocol 2</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol3')">Protocol 3</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol4')">Protocol 4</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol5')">Protocol 5</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol6')">Protocol 6</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol7')">Protocol 7</button>
+
−
    <button class="tablinks" onclick="openCity(event, 'Protocol8')">Protocol 8</button>
+
−
  </div>
+
  
−
  <div id="Protocol1" class="tabcontent_vertical">
+
<object data="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf" type="application/pdf" width="80%" height="900px">  
−
    <h2>Protocol 1</h2>
+
   <p>It appears you don't have a PDF plugin for this browser.
−
    <p>Add your protocols here.</p>
+
  No biggie... you can <a href="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf">click here to
−
  </div>
+
   download the PDF file.</a></p>
−
 
+
</object>
−
  <div id="Protocol2" class="tabcontent_vertical">
+
−
    <h2>Protocol 2</h2>
+
−
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
  </div>
+
−
 
+
−
  <div id="Protocol3" class="tabcontent_vertical">
+
−
    <h2>Protocol 3</h2>
+
−
  </div>
+
−
 
+
−
  <div id="Protocol4" class="tabcontent_vertical">
+
−
    <h2>Protocol 4</h2>
+
−
   </div>
+
−
 
+
−
  <div id="Protocol4" class="tabcontent_vertical">
+
−
    <h2>Protocol 5</h2>
+
−
  </div>
+
−
 
+
−
  <div id="Protocol4" class="tabcontent_vertical">
+
−
    <h2>Protocol 6</h2>
+
−
   </div>
+
−
 
+
−
  <div id="Protocol4" class="tabcontent_vertical">
+
−
    <h2>Protocol 7</h2>
+
−
  </div>
+
 
    
 
    
 
</div>
 
</div>
Line 221: Line 56:
 
<div id="June" class="tabcontent">
 
<div id="June" class="tabcontent">
 
   <h2>June</h2>
 
   <h2>June</h2>
−
   <p>We had fun!!!</p>  
+
   <p>PDF here</p>  
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+
 
 
</div>
 
</div>
  
 
<div id="July" class="tabcontent">
 
<div id="July" class="tabcontent">
 
   <h2>July</h2>
 
   <h2>July</h2>
−
   <p>NUSGEM GO GO GO GO!</p>
+
   <p>PDF here</p>
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+
 
 
</div>
 
</div>
  
 
<div id="August" class="tabcontent">
 
<div id="August" class="tabcontent">
 
   <h2>August</h2>
 
   <h2>August</h2>
−
   <p>NUSGEM GO GO GO GO!</p>
+
   <p>PDF here</p>
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+
 
 
</div>
 
</div>
  
 
<div id="September" class="tabcontent">
 
<div id="September" class="tabcontent">
 
   <h2>September</h2>
 
   <h2>September</h2>
−
   <p>NUSGEM GO GO GO GO!</p>
+
   <p>PDF here</p>
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+
 
 
</div>
 
</div>
  
 
<div id="October" class="tabcontent">
 
<div id="October" class="tabcontent">
 
   <h2>October</h2>
 
   <h2>October</h2>
−
   <p>NUSGEM GO GO GO GO!</p>
+
   <p>PDF here</p>
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+
 
 
</div>
 
</div>
  
 +
</div> 
 +
</div>
 +
</div>
 +
</div>
 +
</body>
 +
   
 
<script>
 
<script>
 
function openCity(evt, cityName) {
 
function openCity(evt, cityName) {
Line 264: Line 105:
 
}
 
}
  
−
function openCity(evt, cityName) {
 
−
    var i, tabcontent_vertical, tablinks;
 
−
    tabcontent_vertical = document.getElementsByClassName("tabcontent_vertical");
 
−
    for (i = 0; i < tabcontent_vertical.length; i++) {
 
−
        tabcontent_vertical[i].style.display = "none";
 
−
    }
 
−
    tablinks = document.getElementsByClassName("tablinks");
 
−
    for (i = 0; i < tablinks.length; i++) {
 
−
        tablinks[i].className = tablinks[i].className.replace(" active", "");
 
−
    }
 
−
    document.getElementById(cityName).style.display = "block";
 
−
    evt.currentTarget.className += " active";
 
−
}
 
−
</script>
 
−
</div> 
 
−
</body>
 
−
   
 
−
<script>
 
−
        /***************************************************JAVASCRIPT STARTS HERE**************************************************/
 
−
       
 
−
 
−
    /***************************************************JAVASCRIPT ENDS HERE****************************************************/
 
 
</script>
 
</script>
 
      
 
      

Latest revision as of 17:42, 12 October 2018

CONNECT WITH US

Notebook heading
Protocol
May
June
July
August
September

Click on different notebooks to see our records.

Protocols June July July July July

Protocols

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.

June

PDF here

July

PDF here

August

PDF here

September

PDF here

October

PDF here



HEAR OUR STORY

We’re using synthetic biology to change the way the world thinks and functions.

We’re a little disruptive, dangerous and maybe a tad too bold. But the world needs some shaking up every now and then, and we think we’re just the right people for that.

Together we’re going to engineer biology and create something awesome.

CONTACT US

nusigem@gmail.com

21 Lower Kent Ridge Rd, Singapore 119077