Difference between revisions of "Template:BIMATOX Project"

 
(387 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
 +
</script>
 +
<script>
 +
  $(document).ready(function(){
 +
    $('meta[name="viewport"]').prop('content', 'width=1280');
 +
});
 +
</script>
  
 
<script>
 
<script>
  
−
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+
/* When the user clicks on the button,
−
function myFunction() {
+
toggle between hiding and showing the dropdown content */
−
    var x = document.getElementById("barrasuperior");
+
function myFunction(id) {
−
    if (x.className === "topnav") {
+
document.getElementById(id).classList.toggle("show");
−
        x.className += " responsive";
+
}
−
    } else {
+
 
−
        x.className = "topnav";
+
// Close the dropdown if the user clicks outside of it
−
    }
+
 
−
}
+
window.onclick = function(event) {
 +
  if (!event.target.matches('.dropbtn')) {
 +
 
 +
    var dropdowns = document.getElementsByClassName("dropdown-content");
 +
    var i;
 +
    for (i = 0; i < dropdowns.length; i++) {
 +
      var openDropdown = dropdowns[i];
 +
      if (openDropdown.classList.contains('show')) {
 +
        openDropdown.classList.remove('show');
 +
      }
 +
    }
 +
  }
 +
}
 +
 
 +
var slideIndex = 1;
 +
showSlides(slideIndex);
 +
 
 +
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("dot");
 +
  if (n > slides.length) {slideIndex = 1}
 +
  if (n < 1) {slideIndex = slides.length}
 +
  for (i = 0; i < slides.length; i++) {
 +
      slides[i].style.display = "none";
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
      dots[i].className = dots[i].className.replace(" active", "");
 +
  }
 +
  slides[slideIndex-1].style.display = "block";
 +
  dots[slideIndex-1].className += " active";
 +
}
 +
 
 +
function openModal() {
 +
  document.getElementById('myModal').style.display = "block";
 +
}
 +
 
 +
function closeModal() {
 +
  document.getElementById('myModal').style.display = "none";
 +
}
 +
 
 +
var slideIndex = 1;
 +
showSlides(slideIndex);
 +
 
 +
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("dot");
 +
  if (n > slides.length) {slideIndex = 1}   
 +
  if (n < 1) {slideIndex = slides.length}
 +
  for (i = 0; i < slides.length; i++) {
 +
      slides[i].style.display = "none"; 
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
      dots[i].className = dots[i].className.replace(" active", "");
 +
  }
 +
  slides[slideIndex-1].style.display = "block"; 
 +
  dots[slideIndex-1].className += " active";
 +
}
  
 
</script>
 
</script>
  
−
<style>
+
<Style>
  
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
Line 29: Line 111:
 
/**************************************************************** MENU ***************************************************************/
 
/**************************************************************** MENU ***************************************************************/
  
−
/* Add a black background color to the top navigation */
+
/* DROPDOWN AND NAVBAR */
−
.topnav {
+
−
    width:100%;
+
−
    height:10%;
+
−
background-color: #333;
+
−
    overflow: hidden;
+
−
position: fixed;
+
−
top:2%
+
−
text-align:center;
+
−
}
+
−
+
  
−
/* this hides the scrollbar to keep view consistency */
+
.navbar {
−
.topnav::-webkit-scrollbar {
+
    overflow: hidden;
−
display: none;  
+
    background-color: #CA6065;
−
}
+
    font-family: Arial;
 +
    width:100%;
 +
    height:100px;
 +
    margin-bottom:0;
 +
}
  
−
/* Style the links inside the navigation bar */
+
.navbar a {
−
.topnav a {
+
    float: left;
−
    float: left;
+
    font-size: 18px;
−
top:2%;
+
    font-family: Arial;
−
    display: block;
+
    font-weight: bold;
−
    color: #f2f2f2;
+
    color: #2F4641;
−
    text-align: center;
+
    text-align: center;
−
    padding: 2% 16px;
+
    padding: 45px 16px;
−
    text-decoration: none;
+
    text-decoration: none;
−
    font-size: 17px;
+
}
−
}
+
  
 +
.navbar img {
 +
    float: left;
 +
    font-size: 16px;
 +
    color: white;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
  
−
/* styling for the images in the menu */
+
.dropdown {
−
.topnav img {  
+
    float: left;
−
width: 10%;
+
    overflow: hidden;
−
}
+
}
  
−
/* Change the color of links on hover */
+
.dropdown .dropbtn {
−
.topnav a:hover {
+
    cursor: pointer;
−
    background-color: #ddd;
+
    font-size: 18px;   
−
    color: black;
+
    border: none;
−
}
+
    outline: none;
 +
    color: #2F4641;
 +
    padding: 43px 16px;
 +
    background-color: inherit;
 +
}
  
−
/* Hide the link that should open and close the topnav on small screens */
+
.navbar a:hover, .dropdown:hover .dropbtn {
−
.topnav .icon {
+
    background-color: #199797;
−
    display: none;
+
}
−
}
+
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #49A4AC;
 +
    font-family: Arial;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 
 +
.dropdown-content a {
 +
    float: none;
 +
    color: white;
 +
    font-family: Arial;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
    background-color: #199797;
 +
}
 +
 
 +
.show {
 +
    display: block;
 +
}
 +
 
 +
/* 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: 600px) {
 +
  .navbar a:not(:first-child) {display: none;}
 +
  .navbar a.icon {
 +
    float: right;
 +
    display: block;
 +
  }
 +
}
 +
 
 +
/* 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) */
 +
@media screen and (max-width: 600px) {
 +
  .navbar.responsive {position: relative;}
 +
  .navbar.responsive a.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  .navbar.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
}
 +
 
 +
/* FOOTER */
 +
 
 +
.footer {
 +
  position: absolute;
 +
  right: 0;
 +
  bottom: -20px;
 +
  left: 0;
 +
  height:220px;
 +
  background-color: #FFFFFF;
 +
  text-align: center;
 +
  display: inline-block;
 +
}
 +
 
 +
.footer img {
 +
    float: left;
 +
    color: white;
 +
    text-align: center;
 +
    padding: 0 0 0 0;
 +
}
  
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
Line 79: Line 236:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.igem_2017_content_wrapper {
 
.igem_2017_content_wrapper {
−
width: 97%;
+
width: 86%;
−
padding-top:7%;
+
padding-top:8%;
−
padding-left:3%;
+
padding-left:7%;
 +
padding-bottom:20%;
 +
padding-right:7%;
 
display:block;
 
display:block;
 
float:left;  
 
float:left;  
−
background-color:white;
 
 
overflow-y:hidden;  
 
overflow-y:hidden;  
−
font-family:Tahoma, Geneva, sans-serif;  
+
margin: 0px 0px -20px 0px;
 +
background-image: url('https://static.igem.org/mediawiki/2017/a/a9/T--Uchile_Biotec--Fondo2.jpg');
 +
background-repeat: no-repeat;
 +
background-position: right top;
 +
background-color: #C0DACF;  
 
}
 
}
  
Line 92: Line 254:
 
/********************************* HTML STYLING  *********************************/
 
/********************************* HTML STYLING  *********************************/
  
−
/* styling for the titles h1 h2 */
+
/* styling for the titles h1 */
−
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
+
.igem_2017_content_wrapper h1 {
−
padding:5px 15px;  
+
padding:15px 15px 20px !important;  
 
border-bottom: 0px;  
 
border-bottom: 0px;  
−
color: #3399ff;
+
color: #CC6666;
 +
font-size: 30px !important;
 
}
 
}
  
 +
/* styling for the titles h2 */
 +
.igem_2017_content_wrapper h2 {
 +
padding:15px 24px 15px !important;
 +
border-bottom: 0px;
 +
color: #CE6161;
 +
font-size: 28px !important;
 +
}
  
−
/* styling for the titles  h3 h4 h5 h6*/
+
/* styling for the titles  h3 */
−
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {  
+
.igem_2017_content_wrapper h3 {  
 
padding:5px 15px;  
 
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #000000;
+
color: #003333;
 +
font-size: 26px !important;  
 
}
 
}
  
 +
/* styling for the titles h4 */
 +
.igem_2017_content_wrapper h4 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #003333;
 +
font-size: 24px !important;
 +
}
 +
 +
/* styling for the titles h5 */
 +
.igem_2017_content_wrapper h5 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #003333;
 +
font-size: 22px !important;
 +
}
 +
 +
/* styling for the titles h6 */
 +
.igem_2017_content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #003333;
 +
font-size: 20px !important;
 +
}
  
 
/* font and text */
 
/* font and text */
 
.igem_2017_content_wrapper p {  
 
.igem_2017_content_wrapper p {  
 
padding: 0px 15px;  
 
padding: 0px 15px;  
−
font-size: 13px;
+
font-size: 18px !important;
 +
text-shadow: -1px 0 #C0DACF, 0 1px #C0DACF, 1px 0 #C0DACF, 0 -1px #C0DACF;
 
}
 
}
  
Line 119: Line 314:
 
text-decoration: underline;
 
text-decoration: underline;
 
text-decoration-color: #3399ff;
 
text-decoration-color: #3399ff;
−
color:  #3399ff;
+
color:  #339999;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
Line 136: Line 331:
 
.igem_2017_content_wrapper ul {
 
.igem_2017_content_wrapper ul {
 
padding:0px 20px;
 
padding:0px 20px;
−
font-size: 13px;
+
font-size: 18px !important;
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
Line 143: Line 338:
 
.igem_2017_content_wrapper ol {
 
.igem_2017_content_wrapper ol {
 
padding:0px;  
 
padding:0px;  
−
font-size: 13px;
+
font-size: 18px !important;
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
Line 151: Line 346:
 
width: 97%;  
 
width: 97%;  
 
margin:15px 10px;  
 
margin:15px 10px;  
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #dclass="dropbtn" onclick="3d3d3;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
}
 
}
Line 217: Line 412:
 
height: 30px;
 
height: 30px;
 
}
 
}
−
 
  
 
/* highlight class, makes content slightly smaller */
 
/* highlight class, makes content slightly smaller */
Line 256: Line 450:
 
}
 
}
  
−
/* styling for button on hover */
+
/***************************************************** RESPONSIVE STYLING ****************************************************/
−
.igem_2017_content_wrapper .button:hover{
+
class="dropbtn" onclick="
−
background-color: #3399ff;
+
</Style>
−
    color: #000000;
+
−
}
+
  
 +
<head>
  
 +
</head>
  
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
  
−
/***************************************************** RESPONSIVE STYLING ****************************************************/
+
<head>
  
−
/* 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) */
+
<div class="navbar" id="myTopnav">
−
@media screen and (max-width: 600px) {
+
−
  .topnav a:not(:first-child) {display: none;}
+
−
  .topnav a.icon {
+
−
    float: right;
+
−
    display: block;
+
−
  }
+
−
}
+
  
−
/* 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) */
+
  <img src="https://static.igem.org/mediawiki/2017/1/13/T--Uchile_Biotec--LogoFull.jpg" style="width:100px;height:100px;margin: 0px 0px 0px 10px"></img>
−
@media screen and (max-width: 600px) {
+
−
  .topnav.responsive {position: relative;}
+
−
  .topnav.responsive a.icon {
+
−
    position: absolute;
+
−
    right: 0;
+
−
    top: 0;
+
−
  }
+
−
  .topnav.responsive a {
+
−
    float: none;
+
−
    display: block;
+
−
    text-align: left;
+
−
  }
+
−
}
+
−
+
−
</style>
+
  
 +
  <img src="https://static.igem.org/mediawiki/2017/c/ce/T--Uchile_Biotec--Bimatox.jpg" style="width:132px;height:80px;margin: 0px 10px"></img>
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
  
 +
  <a href="https://2017.igem.org/Team:UChile_Biotec">Home</a>
  
 +
  <div class="dropdown">
 +
    <button class="dropbtn" onclick="myFunction('1')"><b>Team∇</b></button>
 +
    <div class="dropdown-content" id="1">
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Team">Team</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Sponsors">Sponsors</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Attributions">Attributions</a>
 +
    </div>
 +
  </div>
  
−
<head>  
+
  <a href="https://2017.igem.org/Team:UChile_Biotec/igem_latam">iGEM LATAM</a>
  
−
<!-- This tells the browser that your page is responsive -->
+
  <div class="dropdown">
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
    <button class="dropbtn" onclick="myFunction('2')"><b>Project∇</b>
 +
    </button>
 +
    <div class="dropdown-content" id="2">
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Proyect">Description</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Design">Design</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Experiments">Experiments</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Collaborations">Collaborations</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Afters">Improve</a>
 +
    </div>
 +
  </div>  
  
−
</head>
+
  <div class="dropdown">
 +
    <button class="dropbtn" onclick="myFunction('6')"><b>Results∇</b>
 +
    </button>
 +
    <div class="dropdown-content" id="6">
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Notebook">Notebook</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Model">Model</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Results">Results</a>
 +
    </div>
 +
  </div>  
  
−
<div class="topnav" id="barrasuperior">
 
−
  <img src="https://static.igem.org/mediawiki/2017/0/0b/T--Uchile_biotec--LogoFinalvacio.jpg">
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec">Home</a>
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Team">Team</a>
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Proyect">Project</a>
 
 
   <a href="https://2017.igem.org/Team:UChile_Biotec/Parts">Parts</a>
 
   <a href="https://2017.igem.org/Team:UChile_Biotec/Parts">Parts</a>
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Safety">Safety</a>
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Human_Practices">Human Practices</a>
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Awards">Awards</a>
 
−
  <a href="https://2017.igem.org/Team:UChile_Biotec/Judging_Form">Judging Form</a>
 
−
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
 
−
</div>
 
  
 +
  <a href="https://2017.igem.org/Team:UChile_Biotec/Safety"><b>Safety</b></a>
 +
 +
  <div class="dropdown">
 +
    <button class="dropbtn" onclick="myFunction('4')"><b>Practices∇</b>
 +
    </button>
 +
    <div class="dropdown-content" id="4">
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Practices/Overview">Overview</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/HP/Integrated">Integrated</a>
 +
      <a href="https://2017.igem.org/Team:UChile_Biotec/Public_engagement">Public Engagement</a>
 +
    </div>
 +
  </div>
 +
 +
  <a href="https://2017.igem.org/Team:UChile_Biotec/Judging"><b>For Judges</b></a>
 +
 +
</div>
  
 
<!-- start of content -->
 
<!-- start of content -->
 +
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
−
<h1>UChile_Biotec</h1>
+
<h1></h1>

Latest revision as of 03:44, 2 November 2017