|
|
Line 2: |
Line 2: |
| | | |
| <html> | | <html> |
− | <head>
| + | <style> |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | /* Add a black background color to the top navigation */ |
− | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
| + | .topnav { |
− | <style>
| + | background-color: #333; |
− | | + | |
− | .container { | + | |
| overflow: hidden; | | overflow: hidden; |
− | background-color: #FFFFFF;
| |
− | font-family: Arial;
| |
| } | | } |
| | | |
− | .container a { | + | /* Style the links inside the navigation bar */ |
| + | .topnav a { |
| float: left; | | float: left; |
− | font-size: 16px; | + | display: block; |
− | color: black; | + | color: #f2f2f2; |
| text-align: center; | | text-align: center; |
| padding: 14px 16px; | | padding: 14px 16px; |
| text-decoration: none; | | text-decoration: none; |
| + | font-size: 17px; |
| } | | } |
| | | |
− | h2 {
| + | /* Change the color of links on hover */ |
− | text-align: center; | + | .topnav a:hover { |
| + | background-color: #ddd; |
| + | color: black; |
| } | | } |
| | | |
− | .igem_2017_menu_wrapper #display_menu_control { | + | /* Hide the link that should open and close the topnav on small screens */ |
− | display:none;
| + | .topnav .icon { |
− | text-align:center
| + | display: none; |
| } | | } |
− | | + | </style> |
− | .buttons
| + | <body> |
− | {
| + | |
− | overflow:auto;
| + | |
− | text-align: left;
| + | |
− | font-size: 1.0em;
| + | |
− | font-weight: bold;
| + | |
− | line-height: 200%;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | body {
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | #section1 {padding-top:120px;height:4500px;color: #000; background-color: #FAFAFA;}
| + | |
− | #section2 {padding-top:120px;height:1800px;color: #000; background-color: #FFFFFF;}
| + | |
− | #section3 {padding-top:120px;height:1400px;color: #000; background-color: #FAFAFA;}
| + | |
− | #section4 {padding-top:120px;height:800px;color: #000; background-color: #FFFFFF;}
| + | |
− |
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .box-1{
| + | |
− | float: right;
| + | |
− | background-color: #404244;
| + | |
− | width: 4.6%;
| + | |
− | color:#fff;
| + | |
− | text-transform: uppercase;
| + | |
− | font-family:'PT_Sans_Caption_Bold';
| + | |
− | font-size: 16px;
| + | |
− | height: 58px;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | .box-1 span{
| + | |
− | position: relative;
| + | |
− | top:16px;
| + | |
− | }
| + | |
− | | + | |
− | .nav-wrapp .navbar-default{
| + | |
− | background-color: #fff;
| + | |
− | border:0px;
| + | |
− | margin-bottom:0px;
| + | |
− | height: 100%;
| + | |
− | font-family:'PT_Sans_Caption_Bold';
| + | |
− | font-size: 16px;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | ul.nav.navbar-nav {
| + | |
− | display: flex;
| + | |
− | justify-content: space-between;
| + | |
− | width: 100%;
| + | |
− | flex-wrap: wrap;
| + | |
− | }
| + | |
− | ul.nav.navbar-nav li a{
| + | |
− | display: block;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | ul.nav.navbar-nav li{
| + | |
− | flex: 1 1 auto;
| + | |
− | }
| + | |
− | .nav-wrapp .nav.navbar-nav>li{
| + | |
− | border-right:1px solid #ccc;
| + | |
− | min-height:55px;
| + | |
− | }
| + | |
− | .nav-wrapp .nav.navbar-nav>li:last-child{
| + | |
− | border-right:0px;
| + | |
− | }
| + | |
− | #nav-expander{
| + | |
− | display: none;
| + | |
− | visibility: hidden;
| + | |
− | }
| + | |
− | | + | |
− | .button-look{
| + | |
− | width: 100%;
| + | |
− | border:1px solid #fff;
| + | |
− | text-align: center;
| + | |
− | float:left;
| + | |
− | margin-top:15px;
| + | |
− | padding-top:10px;
| + | |
− | padding-bottom:10px;
| + | |
− | font-family:'PT_Sans_Caption_Bold';
| + | |
− | font-size: 16px;
| + | |
− | }
| + | |
− | a.button-look {
| + | |
− | color:#fff;
| + | |
− | }
| + | |
− | a.button-look:hover{
| + | |
− | color:#fff;
| + | |
− | text-decoration: none;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .row-box mark{
| + | |
− | background: transparent;
| + | |
− | text-transform: uppercase;
| + | |
− | font-family:'PT_Sans_Caption_Bold';
| + | |
− | color: #282828;
| + | |
− | font-size: 14px;
| + | |
− | padding-top:35px;
| + | |
− | padding-bottom:20px;
| + | |
− | float: left;
| + | |
− | width: 100%;
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | .row-box .media{
| + | |
− | float: left;
| + | |
− | width: 100%;
| + | |
− | padding-bottom:25px;
| + | |
− | border-bottom:1px solid #ccc;
| + | |
− | }
| + | |
− | .col-md-6.img-box{
| + | |
− | padding-left: 0;
| + | |
− | }
| + | |
− | .row-box .media-heading{
| + | |
− | font-size: 32px;
| + | |
− | font-family:'PT_Serif_Bold';
| + | |
− | }
| + | |
− | .p-intro{
| + | |
− | font-family:'PT_Sans_Regular';
| + | |
− | font-size:13px;
| + | |
− | color: #282828;
| + | |
− | }
| + | |
− | | + | |
− | .col-md-3.media-small{
| + | |
− | border-left:1px solid #ccc;
| + | |
− | padding-top:20px;
| + | |
− | padding-bottom:20px;
| + | |
− | border-bottom:1px solid #ccc;
| + | |
− | border-top:1px solid #ccc;
| + | |
− | }
| + | |
− | .col-md-3.media-small:first-child{
| + | |
− | border-left: none;
| + | |
− | }
| + | |
− | .row-box .col-md-12>.col-md-3.media-small:first-child{
| + | |
− | | + | |
− | }
| + | |
− | .row-box .col-md-12>.col-md-3.media-small:first-child{
| + | |
− |
| + | |
− | border-left:none;
| + | |
− | }
| + | |
− | | + | |
− | .row-box .col-md-12>.col-md-6.media-no:first-child{
| + | |
− | border-left:none;
| + | |
− | padding-left: 0;
| + | |
− | }
| + | |
− | .row-box .col-md-12>.col-md-3.media-small:last-child{
| + | |
− | border-right:none;
| + | |
− | }
| + | |
− | .row-box.tabs-box{
| + | |
− | float: left;
| + | |
− | width: 100%;
| + | |
− | margin-top:35px;
| + | |
− | }
| + | |
− | | + | |
− | /*RESPONSIVE*/
| + | |
− | @media screen and (max-width: 1260px) {
| + | |
− | #nav-expander{
| + | |
− | display:block;
| + | |
− | visibility: visible;
| + | |
− | color:#000;
| + | |
− | font-family:'PT_Sans_Caption_Bold';
| + | |
− | font-size: 20px;
| + | |
− | }
| + | |
− | .navbar.navbar-default.pull-left{
| + | |
− | display: none;
| + | |
− | visibility: hidden;
| + | |
− | }
| + | |
− | .nav-box{
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | .box-1{
| + | |
− | display: none;
| + | |
− | visibility: hidden;
| + | |
− | }
| + | |
− |
| + | |
− | }
| + | |
− | | + | |
− | @media screen and (max-width: 968px) {
| + | |
− | .p-intro {
| + | |
− | font-size: 12px!important;
| + | |
− | }
| + | |
− | #weather span {
| + | |
− | font-size: 35px!important;
| + | |
− | }
| + | |
− | .col-md-6.eu-fond-right-news .media-heading {
| + | |
− | font-size: 20px!important;
| + | |
− | }
| + | |
− | .color-box label.title {
| + | |
− | font-size: 23px;
| + | |
− | line-height: 25px;
| + | |
− | }
| + | |
− | .row-box .col-md-12 label {
| + | |
− | font-size: 12px!important;
| + | |
− | }
| + | |
− | ul.nav.navbar-default > li > a {
| + | |
− | padding-right: 0px!important;
| + | |
− | padding-left: 12px!important;
| + | |
− | font-size: 13px;
| + | |
− | }
| + | |
− | .row-box .media-heading {
| + | |
− | font-size: 22px;
| + | |
− | }
| + | |
− | .right-box-content .left-box-inner p {
| + | |
− | font-size: 10px;
| + | |
− | }
| + | |
− | .btn {
| + | |
− | font-size: 12px!important;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− |
| + | |
− | | + | |
− | | + | |
− | .row-box .col-md-12 label{
| + | |
− | font-family: 'PT_Serif_Bold';
| + | |
− | font-size: 15px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .news-box .col-md-12 {
| + | |
− | padding-left: 0px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | ul.list-of-consalting{
| + | |
− | list-style: decimal;
| + | |
− | min-height: 250px;
| + | |
− | padding-left: 0px;
| + | |
− | }
| + | |
− | ul.list-of-consalting > li {
| + | |
− | list-style: decimal;
| + | |
− | font-family: 'PT_Sans_Caption_Bold';
| + | |
− | font-size: 14px;
| + | |
− | color: #282828;
| + | |
− | float: left;
| + | |
− | width: calc(50% - 10px);
| + | |
− | list-style-position: inside;
| + | |
− | border-bottom: 1px solid #ccc;
| + | |
− | margin-left: 10px;
| + | |
− | padding: 10px;
| + | |
− | }
| + | |
− | | + | |
− | ul.list-of-consalting > li:nth-child(even){
| + | |
− | float: right;
| + | |
− | }
| + | |
− | | + | |
− | ul.list-of-consalting li .dropdown{
| + | |
− | width: 90%;
| + | |
− | float: right;
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | ul.list-of-consalting li .dropdown .dropdown-toggle{
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | ul.list-of-consalting li .dropdown .dropdown-toggle span:first-child{
| + | |
− | float: left;
| + | |
− | text-align: left;
| + | |
− | width: 94%;
| + | |
− | }
| + | |
− | ul.list-of-consalting li .dropdown .dropdown-toggle span:nth-child(2){
| + | |
− | float: right;
| + | |
− | }
| + | |
− | | + | |
− | ul.list-of-consalting li .dropdown ul.expand-details li{
| + | |
− | font-family: 'PT_Sans_Regular';
| + | |
− | width: 100%;
| + | |
− | float:left;
| + | |
− | font-size: 14px;
| + | |
− | color:black;
| + | |
− | border-bottom: none;
| + | |
− | margin-left: 0px;
| + | |
− | list-style-position: outside;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− |
</style>
| + | |
− | </head>
| + | |
− | | + | |
− |
<body>
| + | |
− | | + | |
| <section id="section01"> | | <section id="section01"> |
| <div class="splash" id="mainsplash"> | | <div class="splash" id="mainsplash"> |
Line 324: |
Line 39: |
| </div> | | </div> |
| <div class="column full_size"> | | <div class="column full_size"> |
| + | <div class="topnav" id="myTopnav"> |
| + | <a href="#home">Local public engagement</a> |
| + | <a href="#news">International public engagment</a> |
| + | <a href="#contact">iGEM confernece</a> |
| + | <a href="#about">Reproducible and Consistency</a> |
| + | </div> |
| | | |
− | <div class="container-fluid">
| |
− | <div class="collapse navbar-collapse" id="myNavbar">
| |
− | <table border="1" width="90%" class="buttons">
| |
− | <tr>
| |
− | <td bgcolor="#FF0000"><a href="#section1"><b><font color="white">Local public engagement</b><span>
| |
− | <br>
| |
− | <p>High School</p>
| |
− | <ul>
| |
− | <li>One day Synthetic biology workshop</li>
| |
− | </ul>
| |
− | <br>
| |
− | <p>University</p>
| |
− | <ul>
| |
− | <li>CUHK Art Fair</li>
| |
− | <li>CUHK Information day</li>
| |
− | </ul>
| |
− | <br>
| |
− | <p>General Public</p>
| |
− | <ul>
| |
− | <li>Local Community lab: DIYBio Visit</li>
| |
− | <li>Vibrant Science Academy- Summer Science Party@ Hong Kong Science& Technology Park</li>
| |
− | <li>Facebook Page</li>
| |
− | </ul>
| |
− | </span></font></a></td>
| |
− |
| |
− | <td bgcolor="#F7FE2E"><a href="#section2"><b>International public engagement</b><span>
| |
− | <br>
| |
− | <p>Bangladesh</p>
| |
− | <ul>
| |
− | <li>FIRST EVER synthetic biology event in Bangladesh</li>
| |
− | <li>Questionnaire (Hong Kong vs Bangladesh)</li>
| |
− | </ul>
| |
− | <br>
| |
− | <p>Pakistan</p>
| |
− | <ul>
| |
− | <li>Skype meeting with Pakistan Bio-hacking space</li>
| |
− | </ul>
| |
− | </span></a></td>
| |
− | </tr>
| |
− |
| |
− | <tr>
| |
− | <td bgcolor="#2EFE64"><a href="#section3"><b>iGEM Conference</b><span>
| |
− | <ul>
| |
− | <li>The 4th iGEM Asia-Pacific Conference</li>
| |
− | <li>Pan-Pearl iGEM Teams Meeting</li>
| |
− | <li>DIYBio Biosafety Sharing</li>
| |
− | </ul>
| |
− | </span></a></td>
| |
− |
| |
− | <td bgcolor="#819FF7"><a href="#section4"><font color="white"><b>Reproducible and Consistency</b><span>
| |
− | <p>Protocol and event details available to be downloaded!!!</p>
| |
− | </span></font></a></td>
| |
− | </tr>
| |
− |
| |
− | </table>
| |
− | </div>
| |
− | </div>
| |
| | | |
| | | |
| | | |
− | <div id="section1" class="container-fluid">
| |
| <h2><u><b>Local Public Engagement</b></u></h2> | | <h2><u><b>Local Public Engagement</b></u></h2> |
| <p>In order to gain acceptance of our project, we need to allow the publics in Hong Kong to know about our project and synthetic biology. We achieved youth education on synthetic biology by our workshop, introduced participants to what synthetic biology is and induced their deeper thought on ethical issues connected to synthetic biology. Through in-campus activities, we promoted synthetic biology to our schoolmates of different majors and specialties, aroused attention to this topic. Holding outreach activities, we made our project more connected to the public, we gained opinions and so we could make improvements for the real-life practice of our project.</p> | | <p>In order to gain acceptance of our project, we need to allow the publics in Hong Kong to know about our project and synthetic biology. We achieved youth education on synthetic biology by our workshop, introduced participants to what synthetic biology is and induced their deeper thought on ethical issues connected to synthetic biology. Through in-campus activities, we promoted synthetic biology to our schoolmates of different majors and specialties, aroused attention to this topic. Holding outreach activities, we made our project more connected to the public, we gained opinions and so we could make improvements for the real-life practice of our project.</p> |
Line 592: |
Line 255: |
| | | |
| </div> | | </div> |
− |
| |
− |
| |
− | <script>
| |
− | $(document).ready(function(){
| |
− | // Add scrollspy to <body>
| |
− | $('body').scrollspy({target: ".navbar", offset: 50});
| |
− |
| |
− | // Add smooth scrolling on all links inside the navbar
| |
− | $("#myNavbar a").on('click', function(event) {
| |
− | // Make sure this.hash has a value before overriding default behavior
| |
− | if (this.hash !== "") {
| |
− | // Prevent default anchor click behavior
| |
− | event.preventDefault();
| |
− |
| |
− | // Store hash
| |
− | var hash = this.hash;
| |
− |
| |
− | // Using jQuery's animate() method to add smooth page scroll
| |
− | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
| |
− | $('html, body').animate({
| |
− | scrollTop: $(hash).offset().top
| |
− | }, 800, function(){
| |
− |
| |
− | // Add hash (#) to URL when done scrolling (default click behavior)
| |
− | window.location.hash = hash;
| |
− | });
| |
− | } // End if
| |
− | });
| |
− | });
| |
− | </script>
| |
| | | |
| | | |