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

(Created page with "{{NUS_Singapore-A}} <html> </html>")
 
Line 1: Line 1:
 
{{NUS_Singapore-A}}
 
{{NUS_Singapore-A}}
 
<html>
 
<html>
 +
   
 +
    <head>
 +
        <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">
 +
    </head>
  
 +
<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 {font-family: Arial;}
 +
 +
/* Style the tab */
 +
.tab {
 +
    overflow: hidden;
 +
    border: 1px solid #ccc;
 +
    background-color: #f1f1f1;
 +
}
 +
 +
/* Style the buttons inside the tab */
 +
.tab button {
 +
    background-color: inherit;
 +
    float: left;
 +
    border: none;
 +
    outline: none;
 +
    cursor: pointer;
 +
    padding: 14px 16px;
 +
    transition: 0.3s;
 +
    font-size: 17px;
 +
}
 +
 +
/* Change background color of buttons on hover */
 +
.tab button:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
/* Create an active/current tablink class */
 +
.tab button.active {
 +
    background-color: #ccc;
 +
}
 +
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    padding: 6px 12px;
 +
    border: 1px solid #ccc;
 +
    border-top: none;
 +
}
 +
 +
    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: 5%;
 +
        padding-top: 1.5%;
 +
        padding-bottom: 1%;   
 +
    }
 +
 +
    h3 {
 +
        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 {
 +
        display: block;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
 +
    .discussion_graph, .measurement_table{
 +
        width: 70%;
 +
        height: auto;
 +
        margin: auto;
 +
    }
 +
 +
 +
    .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="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 id="London" class="tabcontent">
 +
  <h3>Protocols</h3>
 +
  <p>Congrats France!!!</p>
 +
  <img src="https://wwwcompletesportsnigeriacom-xzvtxvtv.stackpathdns.com/wp-content/uploads/2018/07/france_vs_croatia_world_cup_final-e1531498346839.jpg">
 +
</div>
 +
 +
<div id="June" class="tabcontent">
 +
  <h3>June</h3>
 +
  <p>Crotia, great team!!!</p>
 +
</div>
 +
 +
<div id="July" class="tabcontent">
 +
  <h3>July</h3>
 +
  <p>NUSGEM GO GO GO GO!</p>
 +
</div>
 +
 +
<div id="August" class="tabcontent">
 +
  <h3>July</h3>
 +
  <p>NUSGEM GO GO GO GO!</p>
 +
</div>
 +
 +
<div id="September" class="tabcontent">
 +
  <h3>July</h3>
 +
  <p>NUSGEM GO GO GO GO!</p>
 +
</div>
 +
 +
<script>
 +
function openCity(evt, cityName) {
 +
    var i, tabcontent, tablinks;
 +
    tabcontent = document.getElementsByClassName("tabcontent");
 +
    for (i = 0; i < tabcontent.length; i++) {
 +
        tabcontent[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>
 +
   
 +
</body>
 +
   
 +
<script>
 +
        /***************************************************JAVASCRIPT STARTS HERE**************************************************/
 +
       
 +
 +
    /***************************************************JAVASCRIPT ENDS HERE****************************************************/
 +
</script>
 +
   
 +
     
 
</html>
 
</html>
 +
 +
{{:Team:NUS_Singapore-A/Templates/Footer}}

Revision as of 18:20, 15 July 2018

CONNECT WITH US

Protocols

Congrats France!!!

June

Crotia, great team!!!

July

NUSGEM GO GO GO GO!

July

NUSGEM GO GO GO GO!

July

NUSGEM GO GO GO GO!



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