(24 intermediate revisions by 5 users not shown) | |||
Line 10: | Line 10: | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | ||
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
</head> | </head> | ||
Line 31: | Line 32: | ||
.mySlides {display: none} | .mySlides {display: none} | ||
− | .bgimg- | + | .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 { |
background-attachment: fixed; | background-attachment: fixed; | ||
background-position: center; | background-position: center; | ||
Line 38: | Line 39: | ||
} | } | ||
− | .bgimg- | + | .bgimg-1 { |
− | background-image: url("https://static.igem.org/mediawiki/2018/ | + | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); |
min-height: 400px; | min-height: 400px; | ||
} | } | ||
− | .bgimg- | + | .bgimg-2 { |
− | background-image: url("https://static.igem.org/mediawiki/2018/ | + | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); |
min-height: 400px; | min-height: 400px; | ||
} | } | ||
− | .bgimg- | + | .bgimg-3 { |
− | background-image: url("https://static.igem.org/mediawiki/2018/ | + | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); |
+ | min-height: 400px; | ||
+ | } | ||
+ | |||
+ | .bgimg-4 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); | ||
+ | min-height: 400px; | ||
+ | } | ||
+ | |||
+ | .bgimg-5 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); | ||
min-height: 400px; | min-height: 400px; | ||
} | } | ||
Line 59: | Line 70: | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.container { | .container { | ||
position: relative; | position: relative; | ||
Line 132: | Line 77: | ||
margin-right: auto; | margin-right: auto; | ||
} | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .container{ | ||
+ | max-width: 970px; | ||
+ | } | ||
+ | } | ||
.image { | .image { | ||
Line 138: | Line 88: | ||
height: auto; | height: auto; | ||
} | } | ||
+ | |||
.overlay { | .overlay { | ||
Line 170: | Line 121: | ||
text-align: center; | text-align: center; | ||
} | } | ||
+ | <!---- MT NAVBAR ---> | ||
+ | .sidebar-nav { | ||
+ | padding: 9px 0; | ||
+ | } | ||
+ | .dropdown-menu .sub-menu { | ||
+ | left: 100%; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | visibility: hidden; | ||
+ | margin-top: -1px; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu li:hover .sub-menu { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-menu { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .nav-tabs .dropdown-menu, | ||
+ | .nav-pills .dropdown-menu, | ||
+ | .navbar .dropdown-menu { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | .navbar .sub-menu:before { | ||
+ | border-bottom: 7px solid transparent; | ||
+ | border-left: none; | ||
+ | border-right: 7px solid rgba(0, 0, 0, 0.2); | ||
+ | border-top: 7px solid transparent; | ||
+ | left: -7px; | ||
+ | top: 10px; | ||
+ | } | ||
+ | |||
+ | .navbar .sub-menu:after { | ||
+ | border-top: 6px solid transparent; | ||
+ | border-left: none; | ||
+ | border-right: 6px solid #fff; | ||
+ | border-bottom: 6px solid transparent; | ||
+ | left: 10px; | ||
+ | top: 11px; | ||
+ | left: -6px; | ||
+ | } | ||
+ | |||
+ | .dropdown>ul{ | ||
+ | background-color:#ddffdd; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover{ | ||
+ | background-color:#9ff99f; | ||
+ | } | ||
+ | .navbar-header:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .dropdown-menu>li>a:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .navbar-nav>li:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | |||
+ | .navbar-default{ | ||
+ | background-color:#1F2421} | ||
+ | border-color:none; | ||
+ | } | ||
+ | .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{ | ||
+ | color:white;} | ||
+ | .navbar-default .navbar-brand{ | ||
+ | color:white;} | ||
+ | .navbar-default .navbar-nav>li>a{ | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu{ | ||
+ | background-color:#ddffdd; | ||
+ | } | ||
+ | .current{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .navbar-default .navbar-nav>.open>a{ | ||
+ | background-color:1F2421;color:white;} | ||
+ | |||
+ | .navbar{ | ||
+ | margin:0px;border:0px;} | ||
+ | h5{ | ||
+ | font-size:20px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | h6{ | ||
+ | font-size:16px; | ||
+ | } | ||
+ | .ref{ | ||
+ | font-size:18px; | ||
+ | } | ||
+ | #myBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | font-size: 18px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color:transparent; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | #myBtn:hover { | ||
+ | background-color: #555; | ||
+ | } | ||
</style> | </style> | ||
<body> | <body> | ||
+ | <button onclick="topFunction()" id="myBtn" title="Go to top"><img src="https://image.flaticon.com/icons/png/512/14/14747.png" style="width:50px;height:50px;"></button> | ||
<!-- Navbar --> | <!-- Navbar --> | ||
− | <div class="navbar"> | + | <nav class="navbar navbar-default"> |
− | <a href="https://2018.igem.org/Team:UI_Indonesia">Home</a> | + | <div class="navbar-inner"> |
− | + | <div class="container-fluid"> | |
− | + | <div class="navbar-header"> | |
− | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | </div> | + | </button> |
+ | <a class="navbar-brand" href="https://2018.igem.org/Team:UI_Indonesia">Home</a> | ||
+ | </div> | ||
+ | <div class="collapse navbar-collapse" id="myNavbar"> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <li class="dropdown navbar-project"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/Project">Project<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#">Overview</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#ourproject">Our Project</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#resultsanddiscuccions">Results and Discussions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-parts"><a href="https://2018.igem.org/Team:UI_Indonesia/Parts">Parts</a></li> | ||
+ | <li class="navbar-safety"><a href="https://2018.igem.org/Team:UI_Indonesia/Safety">Safety</a></li> | ||
+ | <li class="dropdown navbar-interlab"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/InterLab">InterLab<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#intro">Introduction</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#materials">Materials and Equipment</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#methods">Methods</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#results">Results and Discussions</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#conclusions">Conclusions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-model"><a href="https://2018.igem.org/Team:UI_Indonesia/Model">Model</a></li> | ||
+ | <li class="dropdown navbar-humanpractice current"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices">Human Practices<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse1">Integrated Human Practice</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse2">Publication and Public Engagement</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse3">Booklet</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-improve"><a href="https://2018.igem.org/Team:UI_Indonesia/Improve">Improve</a></li> | ||
+ | <li class="navbar-team"><a href="https://2018.igem.org/Team:UI_Indonesia/Team">Team</a></li> | ||
+ | <li class="navbar-collaborations"><a href="https://2018.igem.org/Team:UI_Indonesia/Collaborations">Collaborations</a></li> | ||
+ | <li class="dropdown navbar-attributions"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/Attributions">Attributions<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/MedalCriteria">Medal Criteria</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | </nav> | |
− | + | <!-------------------------TEST-------------------------------------------> | |
− | + | <style> | |
− | </ | + | .headerTestDiv{ |
− | + | border-right:4px solid lime; | |
− | <!-- | + | border-bottom:4px solid lime; |
− | <div class=" | + | } |
− | <div class="w3- | + | .headerTest{ |
− | < | + | text-align: right !important; |
+ | font-size: 100px !important; | ||
+ | line-height: 100px !important; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif !important; | ||
+ | font-weight: 700 !important; | ||
+ | color:4CAF50; | ||
+ | } | ||
+ | .header2ndTest{ | ||
+ | text-align: right !important; | ||
+ | font-size: 50px !important; | ||
+ | line-height: 50px !important; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif !important; | ||
+ | font-weight: 700 !important; | ||
+ | color:#216869; | ||
+ | } | ||
+ | @media only screen and (max-width: 600px) and (min-width: 100px){ | ||
+ | .headerTest{ | ||
+ | font-size: 50px !important; | ||
+ | line-height: 50px !important; | ||
+ | } | ||
+ | .header2ndTest{ | ||
+ | font-size: 30px !important; | ||
+ | line-height: 30px !important; | ||
+ | color:#216869; | ||
+ | } | ||
+ | } | ||
+ | .panel-default{ | ||
+ | border:none; | ||
+ | background-color:white; | ||
+ | border-left:4px solid lime; | ||
+ | } | ||
+ | .panel-default>.panel-heading{ | ||
+ | background-color:white; | ||
+ | } | ||
+ | .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body{ | ||
+ | border:none; | ||
+ | } | ||
+ | .panel-title{ | ||
+ | text-align: center !important; | ||
+ | font-size: 30px !important; | ||
+ | line-height: 30px !important; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif !important; | ||
+ | font-weight: 700 !important; | ||
+ | color:#4CAF50; | ||
+ | } | ||
+ | </style> | ||
+ | <!----------------HEADER----------> | ||
+ | <div class="w3-content w3-container w3-padding-48"></div> | ||
+ | <div class="w3-content w3-container w3-padding-64 headerTestDiv""> | ||
+ | <div class="headerTest">Human Practices</div> | ||
+ | <div class="header2ndTest">Overview</div> | ||
</div> | </div> | ||
− | < | + | |
− | + | <!-------------------Accordion---> | |
− | <div class="w3-content w3-container | + | |
− | + | <div class="w3-content w3-container" style="padding:0px;"> | |
− | + | <div class="panel-group" id="accordion"> | |
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Integrated Human Practice</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse1" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <h5>The news of diphtheria outbreak that lately happened in Indonesia, especially in West Java, is widely spread over the country. Our team considers that the solution of it—which is our project, Finding Diphty—has to work the same, widely spread. Campus campaign as a start of our public engagement is aiming to raise public awareness about our project and also gaining public opinion about Finding Diphty.</h5> | ||
<br> | <br> | ||
Line 254: | Line 417: | ||
<br> | <br> | ||
− | </div> | + | </div> |
− | + | </div> | |
− | < | + | </div> |
− | <div class=" | + | <div class="panel panel-default"> |
− | + | <div class="panel-heading"> | |
− | + | <h4 class="panel-title"> | |
− | + | <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Publication and Public Engagement</a> | |
− | </div> | + | </h4> |
− | + | </div> | |
− | <div class=" | + | <div id="collapse2" class="panel-collapse collapse"> |
− | + | <div class="panel-body"> | |
− | + | <h5>Our team understands that the future implementation of Finding Diphty Project will need a real foundation from any society levels. Through KERSOS, we are aiming to reach the grass-root level. Not only focusing on educating the people about diphtheria outbreak and our project, moreover we want to know about their health needs. From the insights, we understand how our project would affect the society’s life.</h5> | |
<br> | <br> | ||
Line 340: | Line 503: | ||
</div> | </div> | ||
<br> | <br> | ||
− | + | </div> | |
− | </div> | + | </div> |
− | + | </div> | |
− | < | + | <div class="panel panel-default"> |
− | <div class=" | + | <div class="panel-heading"> |
− | + | <h4 class="panel-title"> | |
− | + | <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Booklet</a> | |
− | + | </h4> | |
− | </div> | + | </div> |
− | + | <div id="collapse3" class="panel-collapse collapse"> | |
− | <div class=" | + | <div class="panel-body"> |
− | + | <h5>Research Center of Virology and Cancer Health Services Pathobiology (PRVKP), Faculty of Medicine, University of Indonesia is one of the best research centers in Indonesia. PRVKP accommodates research activities focused on the agents that cause diseases such as virus and cancer in humans. In addition, PRVKP also train and provide opportunities for students to conduct research. Other activities that are also conducted by PRVKP, which supports research and education purposes, is training, seminars and others.</h5><br> | |
− | + | ||
<h5>IGEM University of Indonesia 2018 attend a series of Biosafety & Biosecurity training at PRVKP to enhance our knowledge in biomedical laboratory techniques, including basic safety and safety requirements to prepare. Such knowledge will surely produce accurate and non-harmful results for the surrounding environment in our researches at the laboratory. Researches with biological agents, proper use of chemicals, as well as good laboratory techniques require studies in the safety aspects of biological materials.</h5> | <h5>IGEM University of Indonesia 2018 attend a series of Biosafety & Biosecurity training at PRVKP to enhance our knowledge in biomedical laboratory techniques, including basic safety and safety requirements to prepare. Such knowledge will surely produce accurate and non-harmful results for the surrounding environment in our researches at the laboratory. Researches with biological agents, proper use of chemicals, as well as good laboratory techniques require studies in the safety aspects of biological materials.</h5> | ||
Line 358: | Line 520: | ||
<br> | <br> | ||
<div class="w3-row w3-center"> | <div class="w3-row w3-center"> | ||
− | + | <img src="https://static.igem.org/mediawiki/2018/1/1c/T--UI_Indonesia--hpt1.png" class="w3-image" width="500"> | |
− | + | ||
− | + | ||
</div> | </div> | ||
<br> | <br> | ||
− | |||
− | |||
− | |||
− | |||
<h5>On the first day of the training, IGEM UI 2018 team obtained lessons on Biosafety, Biosecurity, Code of Conduct and Dual Use Research. This will deepen our knowledge of techniques and equipment to protect ourselves, also the environment from exposure to biological agents; potentially causes illness, mitigation action, and misuse of a pathogen or toxin into the environment. In addition, IGEM UI 2018 also study microbiology techniques including biological hazards.</h5><br> | <h5>On the first day of the training, IGEM UI 2018 team obtained lessons on Biosafety, Biosecurity, Code of Conduct and Dual Use Research. This will deepen our knowledge of techniques and equipment to protect ourselves, also the environment from exposure to biological agents; potentially causes illness, mitigation action, and misuse of a pathogen or toxin into the environment. In addition, IGEM UI 2018 also study microbiology techniques including biological hazards.</h5><br> | ||
Line 374: | Line 530: | ||
<br> | <br> | ||
<div class="w3-row w3-center"> | <div class="w3-row w3-center"> | ||
− | + | <img src="https://static.igem.org/mediawiki/2018/2/2d/T--UI_Indonesia--hpt2.png" class="w3-image" width="500"> | |
− | + | ||
− | + | ||
</div> | </div> | ||
<br> | <br> | ||
Line 383: | Line 537: | ||
<h5>On the last day, IGEM UI 2018 received a lesson on emergency response, which is useful to know the effective response to emergency situations; minimizing the effects of emergency situations. In the last day, the team also conducted a lab practice to simulate directly the lesson that have been learnt in the last 4 day. IGEM UI 2018 are very excited in participating the training.</h5> | <h5>On the last day, IGEM UI 2018 received a lesson on emergency response, which is useful to know the effective response to emergency situations; minimizing the effects of emergency situations. In the last day, the team also conducted a lab practice to simulate directly the lesson that have been learnt in the last 4 day. IGEM UI 2018 are very excited in participating the training.</h5> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | </ | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | <script> | ||
+ | // When the user scrolls down 20px from the top of the document, show the button | ||
+ | window.onscroll = function() {scrollFunction()}; | ||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
+ | document.getElementById("myBtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("myBtn").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> | ||
<!-- Footer --> | <!-- Footer --> | ||
<footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off"> | <footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off"> |
Latest revision as of 06:24, 17 October 2018
Human Practices
Overview