Difference between revisions of "Template:BIMATOX Project"

 
(377 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<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>
 +
 +
/* When the user clicks on the button,
 +
toggle between hiding and showing the dropdown content */
 +
function myFunction(id) {
 +
document.getElementById(id).classList.toggle("show");
 +
}
 +
 +
// 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>
 +
 +
<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 ***************************************************************/
 +
 +
/* DROPDOWN AND NAVBAR */
 +
 +
.navbar {
 +
    overflow: hidden;
 +
    background-color: #CA6065;
 +
    font-family: Arial;
 +
    width:100%;
 +
    height:100px;
 +
    margin-bottom:0;
 +
}
 +
 +
.navbar a {
 +
    float: left;
 +
    font-size: 18px;
 +
    font-family: Arial;
 +
    font-weight: bold;
 +
    color: #2F4641;
 +
    text-align: center;
 +
    padding: 45px 16px;
 +
    text-decoration: none;
 +
}
 +
 +
.navbar img {
 +
    float: left;
 +
    font-size: 16px;
 +
    color: white;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
 +
 +
.dropdown {
 +
    float: left;
 +
    overflow: hidden;
 +
}
 +
 +
.dropdown .dropbtn {
 +
    cursor: pointer;
 +
    font-size: 18px;   
 +
    border: none;
 +
    outline: none;
 +
    color: #2F4641;
 +
    padding: 43px 16px;
 +
    background-color: inherit;
 +
}
 +
 +
.navbar a:hover, .dropdown:hover .dropbtn {
 +
    background-color: #199797;
 +
}
 +
 +
.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 {
 
.dropdown-content a {
 
     float: none;
 
     float: none;
−
     color: black;
+
     color: white;
 +
    font-family: Arial;
 
     padding: 12px 16px;
 
     padding: 12px 16px;
 
     text-decoration: none;
 
     text-decoration: none;
Line 11: Line 181:
  
 
.dropdown-content a:hover {
 
.dropdown-content a:hover {
−
     background-color: #ddd;
+
     background-color: #199797;
 
}
 
}
  
Line 17: Line 187:
 
     display: block;
 
     display: block;
 
}
 
}
−
</style>
+
 
 +
/* 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 ****************************************************/
 +
 
 +
/* Wrapper for the content */
 +
.igem_2017_content_wrapper {
 +
width: 86%;
 +
padding-top:8%;
 +
padding-left:7%;
 +
padding-bottom:20%;
 +
padding-right:7%;
 +
display:block;
 +
float:left;
 +
overflow-y:hidden;
 +
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;
 +
}
 +
 
 +
 
 +
/********************************* HTML STYLING  *********************************/
 +
 
 +
/* styling for the titles h1 */
 +
.igem_2017_content_wrapper h1 {
 +
padding:15px 15px 20px !important;
 +
border-bottom: 0px;
 +
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 */
 +
.igem_2017_content_wrapper h3 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
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 */
 +
.igem_2017_content_wrapper p {
 +
padding: 0px 15px;
 +
font-size: 18px !important;
 +
text-shadow: -1px 0 #C0DACF, 0 1px #C0DACF, 1px 0 #C0DACF, 0 -1px #C0DACF;
 +
}
 +
 
 +
/* Links */
 +
.igem_2017_content_wrapper a {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color: #3399ff;
 +
color:  #339999;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 
 +
/* hover for the links */
 +
.igem_2017_content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 
 +
/* non numbered lists */
 +
.igem_2017_content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 18px !important;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 
 +
/* numbered lists */
 +
.igem_2017_content_wrapper ol {
 +
padding:0px;
 +
font-size: 18px !important;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 
 +
/* Table */
 +
.igem_2017_content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #dclass="dropbtn" onclick="3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 
 +
/* table cells */
 +
.igem_2017_content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 
 +
/* table headers */
 +
.igem_2017_content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 
 +
 
 +
/**********************************LAYOUT CLASSES **********************************/
 +
 
 +
/* general class for column divs */
 +
.igem_2017_content_wrapper .column  {
 +
padding: 10px 0px;
 +
float:left;
 +
}
 +
 
 +
/* class for a full width column */
 +
.column .full_size {
 +
width:100%;
 +
}
 +
 
 +
/* styling for images in a full width column*/
 +
.column.full_size img {
 +
width:97%;
 +
padding: 10px 15px;
 +
}
 +
 
 +
/* class for a half width column */
 +
.column.half_size {
 +
width: 50%;
 +
}
 +
/* styling for images in a half width column*/
 +
.column.half_size img {
 +
width: 94.5%;
 +
padding: 10px 15px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/********************************* SUPPORT CLASSES ********************************/
 +
 
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 +
}
 +
 +
 +
/* adds extra spacing when clearing content */
 +
.igem_2017_content_wrapper  .clear.extra_space {
 +
height: 30px;
 +
}
 +
 
 +
/* highlight class, makes content slightly smaller */
 +
.igem_2017_content_wrapper .highlight {
 +
margin: 0px 15px;
 +
padding: 15px 0px;
 +
}
 +
 
 +
 
 +
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 +
}
 +
 
 +
/* highlight with decoration blue line on top */
 +
.igem_2017_content_wrapper .highlight.blue_top {
 +
    border-top: 4px solid #3399ff;
 +
}
 +
 
 +
/* highlight with a full blue border decoration */
 +
.igem_2017_content_wrapper .highlight.blue_border {
 +
    border: 4px solid  #3399ff;
 +
}
 +
 
 +
 
 +
/* button class */
 +
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #ffffff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
 +
 
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
class="dropbtn" onclick="
 +
</Style>
 +
 
 +
<head>
 +
 
 
</head>
 
</head>
−
<body>
 
  
−
<div class="navbar">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
   <a href="#home">Home</a>
+
 
−
   <a href="#news">News</a>
+
<head>
 +
 
 +
<div class="navbar" id="myTopnav">
 +
 
 +
  <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>
 +
 
 +
  <img src="https://static.igem.org/mediawiki/2017/c/ce/T--Uchile_Biotec--Bimatox.jpg" style="width:132px;height:80px;margin: 0px 10px"></img>
 +
 
 +
 
 +
   <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>
 +
 
 +
  <a href="https://2017.igem.org/Team:UChile_Biotec/igem_latam">iGEM LATAM</a>
 +
 
 
   <div class="dropdown">
 
   <div class="dropdown">
−
     <button class="dropbtn" onclick="myFunction()">Dropdown
+
     <button class="dropbtn" onclick="myFunction('2')"><b>Project∇</b>
−
      <i class="fa fa-caret-down"></i>
+
 
     </button>
 
     </button>
−
     <div class="dropdown-content" id="myDropdown">
+
     <div class="dropdown-content" id="2">
−
       <a href="#">Link 1</a>
+
       <a href="https://2017.igem.org/Team:UChile_Biotec/Proyect">Description</a>
−
       <a href="#">Link 2</a>
+
       <a href="https://2017.igem.org/Team:UChile_Biotec/Design">Design</a>
−
       <a href="#">Link 3</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>
 
   </div>  
 
   </div>  
−
</div>
 
  
−
<h3>Dropdown Menu inside a Navigation Bar</h3>
+
  <div class="dropdown">
−
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
+
    <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>  
  
−
<script>
+
  <a href="https://2017.igem.org/Team:UChile_Biotec/Parts">Parts</a>
−
/* When the user clicks on the button,
+
−
toggle between hiding and showing the dropdown content */
+
−
function myFunction() {
+
−
    document.getElementById("myDropdown").classList.toggle("show");
+
−
}
+
  
−
// Close the dropdown if the user clicks outside of it
+
  <a href="https://2017.igem.org/Team:UChile_Biotec/Safety"><b>Safety</b></a>
−
window.onclick = function(e) {
+
 
−
  if (!e.target.matches('.dropbtn')) {
+
  <div class="dropdown">
−
     var myDropdown = document.getElementById("myDropdown");
+
    <button class="dropbtn" onclick="myFunction('4')"><b>Practices∇</b>
−
       if (myDropdown.classList.contains('show')) {
+
     </button>
−
        myDropdown.classList.remove('show');
+
    <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>
−
</script>
+
    </div>
−
</body>
+
   </div>
−
</html>
+
 
 +
  <a href="https://2017.igem.org/Team:UChile_Biotec/Judging"><b>For Judges</b></a>
 +
 
 +
</div>  
 +
 
 +
<!-- start of content -->
 +
 
 +
<div class="igem_2017_content_wrapper">
 +
<h1></h1>

Latest revision as of 03:44, 2 November 2017