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

 
(68 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 5: Line 6:
 
         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
 +
        <link rel="stylesheet" href="/w3css/4/w3.css">
 
     </head>
 
     </head>
  
 
<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*********************************************************/
 
−
    /* The accordion is the class given to the drop-down menu thingy */
 
−
    .accordion {
 
−
        background-color: #f2f2f2;
 
−
        color: black;
 
−
        cursor: pointer;
 
−
        padding: 15px;
 
−
        width: 90%;
 
−
        text-align: left;
 
−
        margin-left: 5%;
 
−
        margin-right: 5%;
 
−
        border: none;
 
−
        outline: none;
 
−
        /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 
−
        /*  transition: 0.4s linear;    */
 
−
        font-family: "Montserrat", sans-serif;
 
−
        font-weight: 300;
 
−
        font-size: 20px;
 
−
    }
 
−
   
 
−
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 
−
    .active, .accordion:hover {
 
−
        font: bold 20px "Montserrat", sans-serif;
 
−
        background-color: #e6e6e6;
 
−
    }
 
−
   
 
−
    /* Style the accordion panel. Note: hidden by default */
 
−
    .panel {
 
−
        background-color: white;
 
−
        text-align: left;
 
−
        margin-top: 10px;
 
−
        max-height: 0;
 
−
        overflow: hidden;
 
−
        transition: max-height 0.2s ease-out;
 
−
    }
 
−
    .accordion:after {
 
−
        content: '+';
 
−
        font-size: 13px;
 
−
        color: #777;
 
−
        float: right;
 
−
        margin-left: 5px;
 
−
    }
 
−
   
 
−
    /* Not sure why this function does not work. Need to check */
 
−
    .active:after {
 
−
        content: "-";
 
−
    }
 
  
 +
<body>
 +
<div class="inner-border" style="border-top: none;">
 +
<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>
 +
    <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">
  
−
     body {font-family: Arial;}
+
     <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>
  
−
/* Style the tab */
+
<p style="text-align: center;">Click on different notebooks to see our records.</p>
−
.tab {
+
−
    overflow: hidden;
+
−
    border: 1px solid #ccc;
+
−
    background-color: #f1f1f1;
+
−
}
+
  
−
/* Style the buttons inside the tab */
+
<hr>
−
.tab button {
+
<map name="workmap">
−
     background-color: inherit;
+
     <area shape="rect" coords="90,10,200,130" alt="Protocols" class="tablinks" onclick="openCity(event, 'Protocols')">
−
     float: left;
+
     <area shape="rect" coords="250,10,360,130" alt="June" class="tablinks" onclick="openCity(event, 'June')">
−
     border: none;
+
     <area shape="rect" coords="410,10,520,130" alt="July" class="tablinks" onclick="openCity(event, 'July')">
−
     outline: none;
+
     <area shape="rect" coords="570,10,680,130" alt="July" class="tablinks" onclick="openCity(event, 'August')">
−
     cursor: pointer;
+
     <area shape="rect" coords="730,10,840,130" alt="July" class="tablinks" onclick="openCity(event, 'September')">
−
     padding: 14px 16px;
+
     <area shape="rect" coords="890,10,1000,130" alt="July" class="tablinks" onclick="openCity(event, 'October')">
−
    transition: 0.3s;
+
</map>
−
    font-size: 17px;
+
−
}
+
  
−
/* Change background color of buttons on hover */
+
<div id="Protocols" class="tabcontent">
−
.tab button:hover {
+
<h1>Protocols</h1>
−
    background-color: #ddd;
+
−
}
+
  
−
/* Create an active/current tablink class */
+
<object data="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf" type="application/pdf" width="80%" height="900px">
−
.tab button.active {
+
  <p>It appears you don't have a PDF plugin for this browser.
−
    background-color: #ccc;
+
  No biggie... you can <a href="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf">click here to
−
}
+
  download the PDF file.</a></p> 
 +
</object>
 +
 
 +
</div>
  
−
/* Style the tab content */
+
<div id="June" class="tabcontent">
−
.tabcontent {
+
  <h2>June</h2>
−
    display: none;
+
  <p>PDF here</p>
−
    padding: 6px 12px;
+
−
    border: 1px solid #ccc;
+
−
    border-top: none;
+
−
}
+
  
−
    table, th, td {
+
</div>
−
        border: none;
+
−
        border-collapse: collapse;
+
−
    }
+
−
    table {
+
−
        font-family: "Lora";
+
−
        font-size: 12px;
+
−
        word-spacing: 0.5em;
+
−
    }
+
−
    th, td {
+
−
        text-align: left;
+
−
        padding: 1px;
+
−
    }
+
  
−
    h1 {
+
<div id="July" class="tabcontent">
−
        color: #000;
+
  <h2>July</h2>
−
        font-family: "montserrat", sans-serif;
+
  <p>PDF here</p>
−
        font-weight: bold;
+
−
    }
+
−
   
+
−
    h2 {
+
−
        font-family: "Montserrat", sans-serif;
+
−
        font-size: 15px;
+
−
        font-weight: normal;
+
−
        text-align: left;
+
−
        color: black;
+
−
        padding-left: 5%;
+
−
        padding-top: 1.5%;
+
−
        padding-bottom: 1%;   
+
−
    }
+
  
−
    h3 {
+
</div>
−
        font-family: "Lora", sans;
+
−
        font-size: 12px;
+
−
        font-weight: bold;
+
−
        text-align: left;
+
−
        color: black;
+
−
        margin-left: 5%;
+
−
        margin-bottom: 5px;
+
−
    }
+
−
   
+
−
    p {
+
−
        font-family: "Lora", serif;
+
−
        font-size: 12px;
+
−
        word-spacing: 0.5em;
+
−
        text-align:justify;
+
−
    }
+
  
−
    img {
+
<div id="August" class="tabcontent">
−
        display: block;
+
  <h2>August</h2>
−
        margin-left: auto;
+
  <p>PDF here</p>
−
        margin-right: auto;
+
−
    }
+
  
−
    .discussion_graph, .measurement_table{
+
</div>
−
        width: 70%;
+
−
        height: auto;
+
−
        margin: auto;
+
−
    }
+
  
 +
<div id="September" class="tabcontent">
 +
  <h2>September</h2>
 +
  <p>PDF here</p>
  
−
    .interlab-header{
 
−
        width: 50%;
 
−
        height: auto;
 
−
        margin: auto;
 
−
    }
 
−
 
−
    /**********************
 
−
    Start of two columns */
 
−
    * {
 
−
    box-sizing: border-box;
 
−
    }
 
−
 
−
    /* Create two columns that floats next to each other */
 
−
    .column {
 
−
        float: left;
 
−
        text-align: left;
 
−
    }
 
−
   
 
−
    .left {
 
−
        width: 50%;
 
−
        padding-left: 5%;
 
−
        padding-right: 2.5%;
 
−
    }
 
−
 
−
    .right {
 
−
        width: 50%;
 
−
        padding-left: 2.5%;
 
−
        padding-right: 5%;
 
−
    }
 
−
 
−
    /* Clear floats after the columns */
 
−
    .row:after {
 
−
        content: "";
 
−
        display: table;
 
−
        clear: both;
 
−
    }
 
−
 
−
    /********************
 
−
    End of two columns */
 
−
   
 
−
    /***************************************************CSS ENDS HERE**********************************************************/
 
−
</style>
 
−
 
−
<body>
 
−
<div class="inner-border" style="border-top: none;">
 
−
<div class="tab">
 
−
  <button class="tablinks" onclick="openCity(event, 'Protocols')">Protocols</button>
 
−
  <button class="tablinks" onclick="openCity(event, 'June')">June</button>
 
−
  <button class="tablinks" onclick="openCity(event, 'July')">July</button>
 
−
  <button class="tablinks" onclick="openCity(event, 'August')">August</button>
 
−
  <button class="tablinks" onclick="openCity(event, 'September')">September</button>
 
 
</div>
 
</div>
  
−
<div id="Protocols" class="tabcontent">
+
<div id="October" class="tabcontent">
−
   <h3>Protocols</h3>
+
   <h2>October</h2>
−
   <p>Congrats France!!!</p>
+
   <p>PDF here</p>
−
  <p>Great match Crotia!!!</p>
+
−
  <img src="https://pbs.twimg.com/media/DiKfpjMVMAAJbQQ.jpg">
+
−
  <img src="https://pbs.twimg.com/media/DiKg7upWkAA0CQO.jpg">
+
−
</div>
+
  
−
<div id="June" class="tabcontent">
 
−
  <h3>June</h3>
 
−
  <p>We had fun!!!</p>
 
 
</div>
 
</div>
  
−
<div id="July" class="tabcontent">
+
</div>
−
  <h3>July</h3>
+
−
  <p>NUSGEM GO GO GO GO!</p>
+
 
</div>
 
</div>
−
 
−
<div id="August" class="tabcontent">
 
−
  <h3>July</h3>
 
−
  <p>NUSGEM GO GO GO GO!</p>
 
 
</div>
 
</div>
−
 
−
<div id="September" class="tabcontent">
 
−
  <h3>July</h3>
 
−
  <p>NUSGEM GO GO GO GO!</p>
 
 
</div>
 
</div>
−
 
+
</body>
 +
   
 
<script>
 
<script>
 
function openCity(evt, cityName) {
 
function openCity(evt, cityName) {
Line 254: Line 104:
 
     evt.currentTarget.className += " active";
 
     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