|
|
(28 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
| + | {{NUS_Singapore-A}} |
| + | {{:Team:NUS_Singapore-A/Templates/Style}} |
| + | |
| <html> | | <html> |
| + | |
| <head> | | <head> |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | <meta charset="utf-8"> |
− | <meta charset="utf-8">
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
− | <meta http-equiv="X-UA-Compatible" content="IE=edge">
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | | |
− | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
| |
− | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
| |
− | <link rel="icon" href="https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png">
| |
− |
| |
− | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
| |
| </head> | | </head> |
− | <style>
| |
− | /***************************************************** DEFAULT WIKI SETTINGS ***************************************/
| |
− | /* Clear the default wiki settings */
| |
− |
| |
− | #home_logo, #sideMenu { display:none; }
| |
− | #sideMenu, #top_title, .patrollink {display:none;}
| |
− | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
| |
− | body {background-color:white; }
| |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
− |
| |
− | /**************************************************************** MENU ***********************************************/
| |
| | | |
| | | |
− | /**** Class for splitting different section = Clear content below while adds extra spacing when clearing content ****/ | + | <script> |
− | .clear {
| + | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
− | clear:both;
| + | |
− | height: 50px;
| + | |
− | }
| + | |
| | | |
− | .clear-largespace{
| |
− | clear:both;
| |
− | height: 100px;
| |
− | }
| |
| | | |
| | | |
− | /************************************************** Back to top button style ****************************************/ | + | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
− | #BacktoTopBtn {
| + | </script> |
− | display: none;
| + | |
− | position: fixed;
| + | |
− | bottom: 20px;
| + | |
− | right: 50px;
| + | |
− | z-index: 99;
| + | |
− | border: none;
| + | |
− | outline: none;
| + | |
− | background-color: #F5B041;
| + | |
− | color: white;
| + | |
− | cursor: pointer;
| + | |
− | padding: 15px;
| + | |
− | border-radius: 20px;
| + | |
− | }
| + | |
| | | |
− | #BacktoTopBtn:hover {
| + | <style> |
− | background-color: #2980B9; | + | /**************************************************************************************************************************************************************************************************/ |
| + | .container{ |
| + | position: relative; |
| + | width: 80%; |
| + | margin: 65px auto; |
| } | | } |
− | | + | .container div{ |
− | | + | |
− | | + | |
− | /***************************************** Top menu and Dropdown list **************************************/
| + | |
− | | + | |
− | /* The outer border wraps the content outside of the box */
| + | |
− | .outer-border{ | + | |
− | max-width: 100%;
| + | |
− | height: auto;
| + | |
− | margin: 0px;
| + | |
− | padding-top: 20px;
| + | |
− | padding-left: 35px;
| + | |
− | padding-right: 35px;
| + | |
− | }
| + | |
− | | + | |
− | /*This controls the 'Connect with us' that is rotated on the left side*/
| + | |
− | .nusgem_mail{
| + | |
− | font-family: "Montserrat" !important;
| + | |
− | font-size: .9em !important;
| + | |
− | letter-spacing: .275em !important;
| + | |
− | font-weight: 100 !important;
| + | |
− | width: auto;
| + | |
− | height: auto;
| + | |
− | -ms-transform: rotate(270deg);
| + | |
− | -webkit-transform: rotate(270deg);
| + | |
− | transform: rotate(270deg);
| + | |
− | transform-origin: left 0;
| + | |
− | position: fixed;
| + | |
− | top: 380px;
| + | |
− | left: 10px;
| + | |
− | }
| + | |
− | | + | |
− | .welcome-message{
| + | |
− | font-family: "Roboto", sans-serif !important;
| + | |
− | font-size: 20px;
| + | |
− | letter-spacing: .1em;
| + | |
− | font-weight: 300;
| + | |
− | width: auto;
| + | |
| position: absolute; | | position: absolute; |
− | top: 20px; | + | border-radius: 2px; |
− | left: 50px; | + | font-size: calc(4px + 1.2vw); |
| + | font-family: Garamond; |
| + | text-align: center; |
| + | line-height: 1.025; |
| } | | } |
− | | + | .main-page-img{ |
− | /* Positioning and sizing of the social media icons */
| + | width: 100%; |
− | .instalogo{ | + | |
− | position: fixed; | + | |
− | top: 65px;
| + | |
− | left: 8px;
| + | |
− | font-size: 2.0em !important;
| + | |
− | color: #1e1e1e;
| + | |
| } | | } |
− | .instalogo:hover{ | + | .text-box-description{ |
− | color: #3d4d6d; | + | top: 3.35%; |
| + | left: 3%; |
| + | width: 45%; |
| } | | } |
− | .fblogo{ | + | .text-box-design{ |
− | position: fixed;
| + | top: 20%; |
− | top: 108px; | + | right: 6%; |
− | left: 12px; | + | width: 55%; |
− | font-size: 1.5em !important;
| + | |
− | color: #1e1e1e; | + | |
| } | | } |
− | .fblogo:hover{ | + | .text-box-ihp{ |
− | color: #3d4d6d; | + | top: 37%; |
| + | left: 6%; |
| + | width: 40%; |
| } | | } |
− | .maillogo{ | + | .text-box-results{ |
− | position: fixed;
| + | top: 58%; |
− | top: 145px; | + | right: 8%; |
− | left: 8px; | + | width: 60%; |
− | font-size: 1.5em !important;
| + | |
− | color: #1e1e1e; | + | |
| } | | } |
− | .maillogo:hover{ | + | .text-box-modeling{ |
− | color: #3d4d6d; | + | top: 75%; |
| + | left: 6%; |
| + | width: 40%; |
| } | | } |
− | | + | .text-box-team{ |
− | | + | top: 86%; |
− | /*********** Change of Background Color *************/
| + | right: 10%; |
− | .bg-primary { | + | width: 40%; |
− | background-image: url("https://static.igem.org/mediawiki/2018/0/04/T--NUS_Singapore-A--Wiki_theme5.jpg"); | + | |
− | background-size: 100% 100%; | + | |
− | color: black; | + | |
| } | | } |
− | | + | video { |
− | | + | width: 70%; |
− | /* The inner border contains the nav bar, header and whatever content is in the page....I NEED TO USE THIS CLASS FOR EVERY DIV AS AN OVERALL PAGE WRAPPER*/
| + | |
− | .inner-border{
| + | |
− | border-left: 2px solid black; | + | |
− | border-right: 2px solid black;
| + | |
− | border-top: 2px solid black;
| + | |
− | max-width: 100%;
| + | |
| height: auto; | | height: auto; |
− | margin: 0px 5px -10px 5px;
| |
− | text-align: center;
| |
− | /*background-color: white;*/
| |
− | }
| |
− |
| |
− | .content-wrapper{
| |
− | max-width: 90%;
| |
− | position: relative;
| |
− | margin: auto;
| |
− | }
| |
− |
| |
− | /* The NUSIGEM logo, no background-color added*/
| |
− | .nus-logo{
| |
− | max-width: 100%;
| |
− | height: 150px;
| |
− | width: 150px;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /************** NavBar ****************/
| |
− |
| |
− | /* The wrapper for the nav menu*/
| |
− | .nav {
| |
− | width: 100%;
| |
− | min-height: 45px;
| |
− | /*padding-top: 1em;*/
| |
− | /* This color means white and slightly transparent */
| |
− | background-color: rgba(255, 255, 255, 0.95);
| |
− | text-align: center;
| |
− | position: relative;
| |
− | z-index: 3;
| |
− | }
| |
− |
| |
− | /* Add an active class to highlight the current page */
| |
− | .active {
| |
− | background-color:rgba(255, 255, 255, 0.95);
| |
− | }
| |
− |
| |
− | /* Hide the link that should open and close the topnav on small screens */
| |
− | .nav .icon {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | /* the dropdwn class is given to any button which require a dropdown menu...which is all*/
| |
− | .nav .dropdown{
| |
− | display: inline-block;
| |
− | overflow: hidden;
| |
− | height: 100%;
| |
− | margin-top: 8px;
| |
− | font-size: 24px !important;
| |
− | font-family: "Montserrat" !important;
| |
− | letter-spacing: 0.1em !important;
| |
− | font-weight: 400 !important;
| |
− | }
| |
− |
| |
− | /* This configures the main button (Project, Hardware, Team, blah blah) */
| |
− | .nav .dropdown .dropbtn{
| |
− | font-family: "Montserrat" !important;
| |
− | font-weight: 400;
| |
− | font-size: 24px !important;
| |
− | letter-spacing: 0.1em;
| |
− | margin: auto 6px;
| |
− | padding: 10px 5px;
| |
− | height: 100%;
| |
− | border: none;
| |
− | outline: none;
| |
− | background-color: transparent;
| |
− | display: flex;
| |
− | }
| |
− |
| |
− | /* The dropdwn-content class contains the hidden content (sub-menu) */
| |
− | .nav .dropdown .dropdown-content{
| |
− | display: none;
| |
− | position: absolute;
| |
− | /*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
| |
− | background-color: rgba(255, 255, 255, 0.95);
| |
− | text-align: left;
| |
− | max-width: 250px;
| |
− | z-index: 3;
| |
− | }
| |
− |
| |
− | /* This styles the links within the dropdwn-content */
| |
− | .nav .dropdown .dropdown-content a{
| |
− | float: none;
| |
− | padding-top: 5px;
| |
− | padding-bottom: 5px;
| |
− | padding-left: 4px;
| |
| margin: auto auto; | | margin: auto auto; |
− | text-decoration: none;
| |
− | color: black;
| |
− | display: block;
| |
− | min-width: inherit;
| |
− | font-size: 1.2em;
| |
− | font-family: "Montserrat" !important;
| |
− | font-weight: 400;
| |
− | letter-spacing: 0.1em;
| |
| } | | } |
− |
| |
− | /* Add the hover colors and the reveal of the menu */
| |
− | .nav .dropdown:hover {
| |
− | background-color: #dddddd;
| |
| } | | } |
− | | + | .font-class-5{ |
− | .nav .dropdown:hover .dropdown-content {
| + | font-size: calc(4px + 1.4vw); |
− | display: block; | + | |
| } | | } |
− | | + | .font-class-6{ |
− | .nav .dropdown-content a:hover{
| + | font-size: calc(4px + 1.8vw); |
− | background-color: #dddddd; | + | |
| } | | } |
− | | + | .font-class-9{ |
− | /* A sticky class cause this fking mediawiki doesn't have one */
| + | font-size: calc(4px + 1.8vw); |
− | .sticky{
| + | |
− | position: fixed; | + | |
− | top: 1%;
| + | |
− | left: 0;
| + | |
− | padding-left: 42px;
| + | |
− | padding-right: 42px;
| + | |
| } | | } |
− | | + | .font-class-10{ |
− | | + | font-size: calc(8px + 2.4vw); |
− | /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
| + | |
− | @media screen and (max-width: 700px) {
| + | |
− | .nav .dropdown, .nusgem_mail, .welcome-message, .instalogo, .fblogo, .maillogo, .nus-logo {
| + | |
− | display: none;
| + | |
− | } | + | |
− | .nav a.icon {
| + | |
− | float: right;
| + | |
− | display: block;
| + | |
− | position: relative;
| + | |
− | font-size: 30px;
| + | |
− | }
| + | |
− | .nav .dropdown .dropdown-content {
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .outer-border {
| + | |
− | padding: 0px;
| + | |
− | margin: 0px;
| + | |
− | }
| + | |
− | .inner-border{
| + | |
− | border: none;
| + | |
− | max-width: 100%;
| + | |
− | height: auto;
| + | |
− | margin: 0px;
| + | |
− | }
| + | |
− | | + | |
| } | | } |
− | | + | .font-class-12{ |
− | /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
| + | font-size: calc(8px + 2.8vw); |
− | @media screen and (max-width: 700px) {
| + | |
− | .nav.responsive {position: relative;} | + | |
− | .nav.responsive a.icon {
| + | |
− | position: absolute;
| + | |
− | right: 0;
| + | |
− | top: 2.5%;
| + | |
− | }
| + | |
− | .nav.responsive .dropdown {float: none; display: block; background-color: #dddddd;}
| + | |
− | .nav.responsive .dropdown-content {position: relative; display: block; background-color: #dddddd;}
| + | |
− | .nav.responsive .dropdown .dropbtn {
| + | |
− | display: block;
| + | |
− | width: 100%;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /************************************************** Back to top button style **************************************************/
| + | |
− | | + | |
− | #BacktoTopBtn {
| + | |
− | display: none;
| + | |
− | position: fixed;
| + | |
− | bottom: 3px;
| + | |
− | right: 10px;
| + | |
− | z-index: 99;
| + | |
− | border: none;
| + | |
− | outline: none;
| + | |
− | background-color: #F5B041;
| + | |
− | color: white;
| + | |
− | cursor: pointer;
| + | |
− | padding: 5px;
| + | |
− | border-radius: 20px;
| + | |
− | }
| + | |
− | | + | |
− | #BacktoTopBtn:hover {
| + | |
− | background-color: #2980B9;
| + | |
− | }
| + | |
− | | + | |
| } | | } |
| </style> | | </style> |
| | | |
| | | |
| + | <!------------------------------------------------------ALL HTML BELONGS BELOW HERE------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
| + | <head> |
| | | |
− |
| |
− | <script>
| |
− | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
− |
| |
− | $(document).ready(function() {
| |
− |
| |
− | $("#HQ_page").attr('id','');
| |
− |
| |
− |
| |
− | //highlight current page on the menu
| |
− | highlight_current_page_menu();
| |
− |
| |
− | //accessing submenus
| |
− | $(".menu_item").click(function(){
| |
− | $(".submenu_control_icon", this).toggleClass("open");
| |
− | $(this).next(".submenu").fadeToggle(400);
| |
− | });
| |
− |
| |
− | //mobile menu access
| |
− | $(".igem_2018_team_mobile_bar").click(function(){
| |
− | $(this).next().toggleClass("displaying_menu");
| |
− | });
| |
− |
| |
− | });
| |
− |
| |
− |
| |
− | function highlight_current_page_menu() {
| |
− |
| |
− | var page_url="https://2018.igem.org/";
| |
− | page_url = page_url + wgPageName;
| |
− | $("a[href$='"+ page_url +"']").children().addClass("current_page");
| |
− |
| |
− | //if the page is in a submenu, open the submenu and make the appropiate changes
| |
− | if( $( ".current_page" ).hasClass( "submenu_item" )){
| |
− |
| |
− | $(".current_page").parent().parent().fadeToggle(400);
| |
− | $(".current_page").parent().parent().prev().addClass("current_page");
| |
− | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
| |
− |
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
− | </script>
| |
| </head> | | </head> |
| | | |
| + | <body> |
| | | |
| + | <div class="inner-border" style="border-top: none;"> |
| + | <div class="all-wrapper" style="background-color: transparent;"> |
| + | <div class="content-wrapper"> |
| + | <img src="https://static.igem.org/mediawiki/2018/3/38/T--NUS_Singapore-A--the_main_header_gais.png"> |
| + | <div class="container"> |
| + | <img src="https://static.igem.org/mediawiki/2018/8/8d/T--NUS_Singapore-A--FrontPage_Trans2.png" class="main-page-img"> |
| | | |
| | | |
| + | <div class="text-box-description">Biomanufacturing opens up possibilities for sustainable <br>production of useful materials. <br><br> |
| | | |
− | <!--******************************** Here is where the main content starts ************************************--> | + | We, <b>Team NUSGEM</b>, created <font class="font-class-12"><b><i>Coup Dy’état</i></b></font>,<br> <font class="font-class-5">an environmentally-friendly platform to advance biomanufacturing.</font><br><br><a href="https://2018.igem.org/Team:NUS_Singapore-A/Description"><b>Discover our project</b></a> |
− | | + | |
− | <body> | + | |
− | <!-------------------------------------START OF NAV BAR HTML------------------------------------------------------>
| + | |
− | | + | |
− | <div class="welcome-message">Welcome to NUSGEM2018!</div> | + | |
− | <div class="nusgem_mail">CONNECT WITH US</div> | + | |
− | | + | |
− | <div class="outer-border bg-primary"> | + | |
− | <div class="w3-hide-small">
| + | |
− | <a href="https://www.instagram.com/nusgem2018/"><i class="fa fa-instagram instalogo"></i></a>
| + | |
− | <a href="https://www.facebook.com/NUSGEM2018/"><i class="fa fa-facebook fblogo"></i></a>
| + | |
− | <a href="mailto:nusigem@gmail.com"><i class="fa fa-envelope maillogo"></i></a>
| + | |
| </div> | | </div> |
| | | |
− | <div class="inner-border" style="background-image: none;">
| |
− | <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
| |
− | </div>
| |
− |
| |
− | <div class="nav" id="myNav">
| |
− |
| |
− | <div class="dropdown" style="margin-top: 2px; padding: 12px 12px;">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A" style="text-decoration: none; color: black;">HOME</a>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">PROJECT</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results">Results</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate">Demonstrate</a>
| |
− | </div>
| |
− | </div>
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">LAB</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">PARTS</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection">Parts Overview</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" style="text-decoration: none; color: black;">MODEL</a>
| |
− | </button>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">HARDWARE</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor">Light Wait - 2-in-1 Sensor</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump">Light Wait - Peristaltic Pump</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar">Light Wait - Fermentation Chamber</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Futuristic_Bioreactor">Futuristic Bioreactor</a>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">HUMAN PRACTICES</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborative_Report">Collaborative Report</a>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">TEAM</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">Members</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">Sponsors</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">Attributions</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">Collaborations</a>
| |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery">Gallery</a>
| |
− | </div>
| |
− | </div>
| |
| | | |
− | <div class="dropdown">
| + | <div class="text-box-design">Current biomanufacturing platforms are <br>chemical-intensive and expensive. <br><br> |
− | <button class="dropbtn">
| + | <b><i>Coup Dy’état</i></b> is not only <font class="font-class-6"><b>environmentally-friendly</b></font>, but also potentially <font class="font-class-6"><b>cheaper</b></font>. <br><br><a href="https://2018.igem.org/Team:NUS_Singapore-A/Design"><b>Find out how we designed our platform</b></a> |
− | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" style="text-decoration: none; color: black;">MEDAL</a>
| + | |
− | </button>
| + | |
− | </div>
| + | |
− |
| + | |
− | <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
| + | |
− | </div>
| + | |
| </div> | | </div> |
| | | |
| | | |
− | <!----------------------------------------SCRIPT FOR STICKY NAV BAR-------------------------------------------------> | + | <div class="text-box-ihp">Integrating findings from our human practices has helped us make sure that our platform is <font class="font-class-6"><b>relevant</b></font> and <font class="font-class-6"><b>useful</b></font> to biomanufacturers. <br><br><a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices"><b>Find out who we spoke to</b></a></div> |
− | <script> | + | |
| | | |
− | var yourNavigation = $(".nav");
| |
− | stickyDiv = "sticky";
| |
− | yourHeader = $('.logo').height()+225;
| |
| | | |
− | $(window).scroll(function() {
| + | <div class="text-box-results"> |
− | if( $(this).scrollTop() > yourHeader ) { | + | |
− | yourNavigation.addClass(stickyDiv);
| + | |
− | } else {
| + | |
− | yourNavigation.removeClass(stickyDiv);
| + | |
− | }
| + | |
− | });
| + | |
| | | |
| + | <br><br> To prove that our platform works, we decided to produce flavonoids to be used as dyes.<br><br> |
| + | This is because the textile dyeing and dyestuff production industry is the <i>second most pollutive industry in the world</i>. <br><br> |
| + | Our biomanufacturing platform can <br> <font class="font-class-10"><b>help</b></font>.<br><br> |
| | | |
− | /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
| + | <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results"><b>See our results</b></a></div> |
− | function myFunction() {
| + | |
− | var x = document.getElementById("myNav");
| + | |
− | if (x.className === "nav") {
| + | |
− | x.className += " responsive";
| + | |
− | } else {
| + | |
− | x.className = "nav";
| + | |
− | }
| + | |
− | }
| + | |
| | | |
− | </script> | + | <div class="text-box-modeling">No system would work without its <font class="font-class-6"><b>support</b></font>.<br><br> Find out how we <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model"><b>modelled</b></a> our complete system and how we built our <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware"><b>hardware</b></a> system to support our platform.</div> |
− | <!------------------------------------END OF SCRIPT FOR STICKY NAV BAR-----------------------------------------------> | + | |
| | | |
− | <!------------------------------------------END OF NAV BAR HTML------------------------------------------------------>
| |
| | | |
| + | <div class="text-box-team">Our team of 13 is made up <font class="font-class-6"><b><i>intensely</i> motivated</b></font> students across all disciplines. <br><br><a href="https://2018.igem.org/Team:NUS_Singapore-A/Team"><b>Find out who we are</b></a></div> |
| + | </div> |
| | | |
| + | <div class="container"> |
| + | <font class="font-class-9"><center><b>Our Achievements</b></center></font> |
| + | <br> |
| + | <a target="_blank" href="https://www.eng.nus.edu.sg/2018/gold-for-nus-igem-team-2018/"><img src="https://static.igem.org/mediawiki/2018/c/cc/T--NUS_Singapore-A--Group_Photo.jpeg"></a> |
| + | <br> |
| + | <figcaption><b>Here's a lovely photo of us, flush with post-Jamboree endorphins! Click to read more on our university's website.</figcaption> |
| + | <br> |
| | | |
| + | <p>We are thrilled to announce that <i>Coup Dy’état</i> has won a <b>Gold Medal</b> and obtained 3 nominations for special awards: <b>Best Manufacturing Project, Best Hardware</b>, and the <b>Safety Commendation</b>. Thank you for being with us on our iGEM journey!</p><br><br> |
| + | </div> |
| | | |
− | <!--****************************************** Back to top button ***********************************************--> | + | <font class="font-class-9"><center><b>Join us in our vision for the <br><br> Biomanufacturing of the Future.</b></center></font><br> |
− | <button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button> | + | |
| | | |
| + | <video src="https://static.igem.org/mediawiki/2018/0/01/T--NUS_Singapore-A--Video.mp4" controls onclick="this.paused ? this.play() : this.pause();">The video may not be supported by your browser. Please try with Mozilla Firefox, Google Chrome or Safari</video> |
| | | |
− | <script> | + | </div> |
− | //**************************************** Back to top button Javascript ****************************************// | + | </div> |
− | // When the user scrolls down 50px from the top of the document, show the button
| + | </div> |
− | window.onscroll = function() {scrollFunction()};
| + | |
− | | + | |
− | function scrollFunction() {
| + | |
− | if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
| + | |
− | document.getElementById("BacktoTopBtn").style.display = "block";
| + | |
− | } else {
| + | |
− | document.getElementById("BacktoTopBtn").style.display = "none";
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | // When the user clicks on the button, scroll to the top of the document
| + | |
− | function topFunction() {
| + | |
− | document.body.scrollTop = 0;
| + | |
− | document.documentElement.scrollTop = 0;
| + | |
− | }
| + | |
− | </script> | + | |
| | | |
| </body> | | </body> |
− |
| |
| | | |
| </html> | | </html> |
| + | {{:Team:NUS_Singapore-A/Templates/Footer}} |