Difference between revisions of "Team:Colegio EmelinaU"

 
(138 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
  
−
<html lang="en">
+
<!-- Declare that you are going to use html code instead of wiki code -->
 +
<html>
 +
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
  
−
<head>
+
<!-- Start of CSS-->
 +
<style type="text/css">
  
−
    <meta charset="utf-8">
+
body{
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <meta name="description" content="">
+
−
    <meta name="author" content="">
+
−
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+
−
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
+
−
    <title>UV WRITESBAND - EMELINA URRUTIA</title>
+
  
  
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
}
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
−
    <!--[if lt IE 9]>
+
−
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
−
    <![endif]-->
+
−
<style>
+
  
  
−
 
+
.intro{
−
*{
+
text-align:left;
−
 
+
−
margin: 0 ;
+
−
padding: 0;
+
  
 
}
 
}
  
−
 
+
p{
−
.contenedor{
+
text-align:justify;
−
 
+
−
width:80%;
+
−
margin:0 auto;
+
−
background-color:#E5F4FF;
+
−
display: flex;
+
−
flex-direction:column;
+
−
 
+
−
 
+
−
 
+
 
}
 
}
  
−
#globalWrapper, #content{
+
.imagen{
  
−
background-color: transparent;
+
float:left;
−
border: 0px;
+
padding:10px;
−
float:none;
+
box-sizing: border-box;
−
margin:0;
+
−
padding: 0;
+
  
 
}
 
}
  
−
header{
 
−
 
−
width:100%;
 
−
height:150px;
 
−
background:white;
 
−
 
−
 
−
 
−
}         
 
 
.logo{
 
.logo{
−
 
+
padding-top:50px;
−
width: 100%;
+
−
height: 100%;
+
−
text-align: center;
+
−
padding: 10px 0px 0px 0px;
+
−
 
+
  
 
}
 
}
  
−
/* Menu */
+
#globalWrapper, #content{
 +
float:none;
 +
margin:0 auto;
  
−
/* RESET STYLES */
 
−
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
 
−
table { border-collapse:collapse; border-spacing:0 }
 
−
fieldset, img { border:0 }
 
−
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
 
−
ol, ul, li { list-style:none }
 
−
caption, th { text-align:left }
 
−
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
 
−
q:before, q:after { content:''}
 
−
strong { font-weight: bold }
 
−
em { font-style: italic }
 
−
.italic { font-style: italic }
 
−
.aligncenter { display:block; margin:0 auto; }
 
−
.alignleft { float:left; margin:10px; }
 
−
.alignright { float:right;margin:10px; }
 
−
.no-margin{margin:0px;}
 
−
.no-bottom{margin-bottom:0px;}
 
−
.no-padding{padding:0px;}
 
−
.margin-t{margin-top:22px;}
 
−
div { position:relative }
 
−
a{text-decoration:none;}
 
−
a:hover{text-decoration:underline;}
 
−
a:active,a:focus{outline: none;}
 
  
−
img.alignleft, img.alignright, img.aligncenter {
 
−
    margin-bottom: 11px;
 
 
}
 
}
  
−
.alignleft, img.alignleft{
+
/* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */
−
display: inline;
+
−
    float: left;
+
−
    margin-right: 22px;
+
−
}
+
  
−
.alignright, img.alignright {
+
p, #content {
−
    display: inline;
+
color:#808284;
−
    float: right;
+
}
−
    margin-left: 22px;
+
−
}
+
  
−
.aligncenter, img.aligncenter {
+
a, a:visited {
−
    clear: both;
+
color:#22BCB9;
−
    display: block;
+
}
−
    margin-left: auto;
+
−
    margin-right: auto;
+
−
}
+
  
−
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
 
  
  
−
*{
+
/* PAGE LAYOUT */
−
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+
−
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+
−
    box-sizing: border-box;        /* Opera/IE 8+ */
+
−
}
+
  
 +
 +
/* Set up a width, height and color of the body wrapper*/
 +
body {
 +
background-color:#ffffff;
 +
                                font-family: 'Roboto', sans-serif;
 +
}
  
 +
/* Creates a container that will wrap all of the content inside your wiki pages. */
 +
#mainContainer { 
 +
width: 980px;
 +
overflow:hidden;
 +
float:left;
 +
margin-left:20px;
 +
margin-bottom: 10px;
 +
background-color: #fff;
 +
 +
                                -webkit-box-shadow: 2px 0px 34px 0px rgba(145,145,145,0.72);
 +
                                -moz-box-shadow: 2px 0px 34px 0px rgba(145,145,145,0.72);
 +
                                box-shadow: 2px 0px 34px 0px rgba(145,145,145,0.72);
  
−
html{-webkit-font-smoothing:antialiased;}
 
  
−
a{color:#BA0707;}
+
−
a:hover{color:#BA0707;text-decoration:underline;}
+
}
  
−
body{
+
/* Creates the container for the menu */
−
background: #E4CAF2;
+
#menuContainer  {  
−
color:#3E4156;
+
      width: 200px;
−
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
+
                              background: #BA00E8;
−
-webkit-font-smoothing: antialiased;
+
                              font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
−
-webkit-text-size-adjust: 100%;
+
                              zoom: 1;
−
line-height:1;
+
                              font-size: 12px;
−
width:100%;}
+
                              float:left;
 +
                              margin-right:15px;
 +
                              height:700px;
 +
                           
 +
                           
 +
                               
  
−
hr{color:#F9FBFA}
+
}
−
h1{font-size:36px;line-height:1.3em; }
+
−
h2{font-size:32px;line-height:1.3em;}
+
−
h3{font-size:24px;line-height:1.3em;}
+
−
h4{font-size:18px;line-height:1.3em;}
+
−
h5{font-size:16px;}
+
−
h6{font-size:14px;}
+
−
p{padding-bottom:11px; text-align: justify; font-family: 'Roboto', sans-serif;}
+
−
p,div, span{line-height:1.5em;}
+
−
.column-clear{clear:both;}
+
−
.clear{overflow: hidden;}
+
  
 +
/* Creates the container for the content */
 +
#contentContainer {
 +
padding-top:10px;
 +
padding-right:10px;
 +
margin-bottom: 20px;
 +
padding-left: 50px;
 +
background-color: #fff;
 +
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
             
 +
                         
 +
                             
 +
}
  
−
.mainWrap{width:960px;margin:0 auto;}
 
  
−
.title{margin:100px 0 20px 0;
+
/*Set up height place holder for the banner*/
−
text-align:center;
+
      #bannerContainer {
−
color:#3E4156;}
+
height:200px;
−
.back{text-align:center;}
+
margin:auto;
 +
text-align:center;
 +
color: #24B694;
 +
                                background:url(https://static.igem.org/mediawiki/2015/2/29/Banner_wiki_03.png);
 +
                             
 +
                               
 +
}
  
−
nav{display:block;
+
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
−
background:#9c27b0;
+
−
}
+
  
−
.menu{display:block;}
+
/*Change the styling of text for everything inside main container*/
 +
#mainContainer p {  
 +
font-size: 13px;
 +
color: #000000;
 +
}
 +
 +
/*This changes the color and font family */
 +
#contentContainer h1, h2, h3, h4, h5, h6 {
 +
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
color: #29221F;
 +
border-bottom: none;
 +
font-weight: bold;
 +
margin-top:10px;
 +
}
  
−
.menu li{display: inline-block;
+
/*Style of the links - links are different inside the menu */
−
position: relative;
+
#contentContainer a {  
−
z-index:100;}
+
font-weight: bold;
 +
color: #22BCB9;
 +
}
  
−
.menu li:first-child{margin-left:0;}
+
  /* Styling links on hover- links are different inside the menu */
 +
#contentContainer a:hover {  
 +
color: #14747D;
 +
}
  
−
.menu li a {font-weight:normal;
+
/*Change the styling of tables */
−
text-decoration:none;
+
        #contentContainer table {
−
padding:11px;
+
    border: 2px solid #29221F;
−
display:block;
+
    border-collapse: collapse;
−
color:#ffffff;
+
    margin: auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    margin-right: 10px;
 +
    margin-left: 10px;
 +
    }
  
−
-webkit-transition: all 0.2s ease-in-out 0s;
+
/*Change the styling of table cells*/
−
  -moz-transition: all 0.2s ease-in-out 0s;
+
    #contentContainer  td {
−
  -o-transition: all 0.2s ease-in-out 0s;
+
    background-color: #fff;
−
  -ms-transition: all 0.2s ease-in-out 0s;
+
    padding: 20px;
−
  transition: all 0.2s ease-in-out 0s;
+
    border: 2px solid #29221F;
−
}
+
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
  
−
.menu li a:hover, .menu li:hover > a{color:#ffffff;
 
−
background:#9CA3DA;}
 
  
−
.menu ul {display: none;
+
/*Change the styling of table headers */
−
margin: 0;
+
    #contentContainer th {
−
padding: 0;
+
    background-color: #F4F0D8;
−
width: 150px;
+
    padding: 10px;
−
position: absolute;
+
    border: 2px solid #29221F;
−
top: 43px;
+
    border-collapse: collapse;
−
left: 0px;
+
    vertical-align: text-top;
−
background: #ffffff;
+
    }
−
}
+
  
−
.menu ul li {display:block;
 
−
float: none;
 
−
background:none;
 
−
margin:0;
 
−
padding:0;
 
−
}
 
−
.menu ul li a {font-size:12px;
 
−
font-weight:normal;
 
−
display:block;
 
−
color:#797979;
 
−
border-left:3px solid #ffffff;
 
−
background:#ffffff;}
 
  
−
.menu ul li a:hover, .menu ul li:hover > a{
 
−
background:#f0f0f0;
 
−
border-left:3px solid #9CA3DA;
 
−
color:#797979;
 
−
}
 
  
−
.menu li:hover > ul{ display: block;}
 
−
.menu ul ul {left: 149px;
 
−
    top: 0px;
 
−
}
 
  
−
.mobile-menu{display:none;
+
/*MENU STYLING */
−
width:100%;
+
−
padding:11px;
+
−
background:#3E4156;
+
−
color:#ffffff;
+
−
text-transform:uppercase;
+
−
font-weight:600;
+
−
}
+
−
.mobile-menu:hover{background:#3E4156;
+
−
color:#ffffff;
+
−
text-decoration:none;
+
−
}
+
  
 +
/*Styling for the links in the menu */
 +
#menuContainer a {
 +
color: #fff;
 +
text-decoration:none;
 +
                               
 +
 +
}
  
−
@media (min-width: 970px) and (max-width: 960px) {
+
/* Sets the style for lists inside menuContainer  */
 +
#menuContainer ul {
 +
list-style: none;
 +
margin-left:5px;
 +
}
  
−
.mainWrap{width:768px;}
+
/*Styles the list items to become menu buttons */
−
.menu ul {top:0px;}
+
#menuContainer ul li {  
−
.menu li a{font-size:12px;
+
−
padding:8px;}
+
display: block;
−
}
+
width: 100%;
 +
height:30px;
 +
padding-top:10px;
 +
                                padding-left:0px;
 +
                                border-bottom: 1px solid #fff;
 +
                             
  
−
@media (max-width: 767px) {
+
}
  
−
.mainWrap{width:auto;padding:50px 20px;}
+
/*For the menu buttons, changes the color when hovering*/
 +
#menuContainer li:hover {
 +
color:  #FFF;
 +
background-color: #ED417B;
 +
                                transition:1s;
 +
                                margin-left:10px;
 +
}
  
−
.menu{display:none;}
+
/*Submenus are not displayed as default*/
 +
#menuContainer li ul {
  
−
.mobile-menu{display:block;
+
display: none;
−
margin-top:100px;}
+
padding-top:15px;
 +
margin-left: 0px;
  
−
nav{margin:0;
 
−
background:none;}
 
  
−
.menu li{display:block;
+
}
−
margin:0;}
+
  
−
.menu li a {background:#ffffff;
+
/*Submenus are displayed when hovering the menu button */
−
color:#797979;
+
#menuContainer li:hover ul {
−
border-top:1px solid #e0e0e0;
+
/*display: inline-block; */
−
border-left:3px solid #ffffff;}
+
display: block;  
 +
position: absolute;  
 +
float:right;
 +
margin-left: 150px;
 +
                                margin-top:-42px;
  
−
.menu li a:hover, .menu li:hover > a{
 
−
background:#f0f0f0;
 
−
color:#797979;
 
−
border-left:3px solid #9CA3DA;}
 
  
−
.menu ul {display:block;
+
}
−
position:relative;
+
−
top:0;
+
−
left:0;
+
−
width:100%;}
+
  
−
.menu ul ul {left:0;}
+
/*Style the submenu buttons*/
 +
#menuContainer li ul li{
 +
                                background-color: rgba(172, 41, 229, 0.8);
 +
                                background: rgba(172, 41, 229, 0.8);
 +
                                color: rgba(172, 41, 229, 0.8);
 +
padding-left:20px;
 +
padding-right:20px;
 +
height:30px;
 +
padding-top:10px;
 +
margin-top:-3px;
 +
color: white;
 +
                                font-size:1rem;
 +
                                width:200px;
 +
}
  
−
}
+
/*CLASSES */
  
−
@media (max-width: 480px) {
+
/*Clear class for all the pages, adds spacing too*/
 +
.clear{
 +
clear:both;
 +
height: 10px;
 +
}
  
−
}
 
  
 +
/* highlight box for special messages */
 +
          .highlightBox {
 +
            width:500px;
 +
            margin:auto;
 +
            background-color: #F4F0D8;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    padding: 15px;
 +
    padding-top: 5px;
 +
            }
 +
.animated {
 +
    -webkit-animation-duration: 4s;
 +
    animation-duration: 4s;
 +
    -webkit-animation-fill-mode: both;
 +
    animation-fill-mode: both;
 +
}
  
−
@media (max-width: 320px) {
+
@-webkit-keyframes bounceIn {
−
}
+
    0% {
 +
        opacity: 0;
 +
        -webkit-transform: scale(.3);
 +
    }  
  
−
.team{
+
    50% {  
 +
        opacity: 1;
 +
        -webkit-transform: scale(1.05);
 +
    }
  
 +
    70% {
 +
        -webkit-transform: scale(.9);
 +
    }
  
−
float: left;
+
    100% {
−
padding: 10px 10px 0px 0px;
+
        -webkit-transform: scale(1);  
 +
    }
 +
}
  
−
}
+
@keyframes bounceIn {
 +
    0% {
 +
        opacity: 0;
 +
        transform: scale(.3);
 +
    }  
  
 +
    50% {
 +
        opacity: 1;
 +
        transform: scale(1.05);
 +
    }
  
−
.intro{
+
    70% {  
 +
        transform: scale(.9);
 +
    }
  
−
margin-top: 0px;
+
    100% {
−
padding: 0px 50px 0px 50px;
+
        transform: scale(1);  
 +
    }
 +
}
  
 +
.bounceIn {
 +
    -webkit-animation-name: bounceIn;
 +
    animation-name: bounceIn;
 
}
 
}
  
 +
</style>
 +
<!-- End of CSS -->
  
  
−
/* slider */
+
<!-- Start of the template html elements. -->
 +
<div id ="mainContainer"><!--This div will close on the page.-->
  
 +
 +
<div id="bannerContainer">
 +
<div class="logo">
 +
<img src="https://static.igem.org/mediawiki/2015/3/33/Logo_oficial.png">
  
 +
</div>
 +
</div>
  
−
#slider{
+
<!-- Start of menu -->
−
margin:50px auto;
+
<div id="menuContainer">
−
box-shadow: 0 .1em 1em black;
+
−
-webkit-box-shadow: 0 .1em 1em black;
+
−
-moz-box-shadow: 0 .1em 1em black;
+
−
-o-box-shadow: 0 .1em 1em black;
+
−
}
+
−
+
−
+
−
/* ESTILOS DEL SLIDESHOW */
+
−
+
−
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
+
−
li.bjqs-slide{position:absolute; display:none;}
+
−
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
+
−
ul.bjqs-controls.v-centered li a{position:absolute;}
+
−
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
+
−
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
+
−
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
+
−
ol.bjqs-markers.h-centered{text-align: center;}
+
−
ol.bjqs-markers li{display:inline;}
+
−
ol.bjqs-markers li a{display:inline-block;}
+
−
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
+
−
+
−
+
−
.bjqs-caption{
+
−
color:black;
+
−
background:whitesmoke;
+
−
opacity:.75;
+
−
}
+
−
+
−
/* BOTONERA UBICADA AL PIE DEL SLIDESHOW */
+
−
ol.bjqs-markers{
+
−
margin-top:35px;
+
−
}
+
−
ol.bjqs-markers li a{
+
−
padding: 5px 10px;
+
−
background: #000;
+
−
color: #fff;
+
−
margin: 5px;
+
−
text-decoration: none;
+
−
transition:background .5s ease;
+
−
-webkit-transition:background .5s ease;
+
−
-moz-transition:background .5s ease;
+
−
-o-transition:background .5s ease;
+
−
}
+
−
li.active-marker a, ol.bjqs-markers li a:hover{
+
−
background:gray!important;
+
−
}
+
−
+
−
/* CONTROLES ATRAS Y ADELANTE */
+
−
ul.bjqs-controls.v-centered li a {
+
−
display: block;
+
−
padding: 10px;
+
−
background: whitesmoke;
+
−
color: #000;
+
−
text-decoration: none;
+
−
opacity:.75;
+
−
+
−
transition:color .5s ease, background .5s ease;
+
−
-webkit-transition:color .5s ease, background .5s ease;
+
−
-moz-transition:color .5s ease, background .5s ease;
+
−
-o-transition:color .5s ease, background .5s ease;
+
−
}
+
−
ul.bjqs-controls.v-centered li a:hover{
+
−
    background:#000;
+
−
    color:#fff;
+
−
}
+
  
−
</style>
+
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
−
</head>
+
<ul class="animated bounceIn">
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU"><li>HOME</li></a>
  
−
<body>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Team"><li>TEAM</li></a>
  
−
<div class="contenedor">
+
<a href="#"><li>PROJECT >
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Description"><li>Description</li></a>
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Experiments"><li>Experiments & Protocols</li></a> 
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Results"><li>Results</li></a>
 +
                                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Design"><li>Design</li></a>
 +
                                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Bussingmodels"><li>Bussing Models</li></a> 
 +
</ul>
 +
</li></a>
  
−
<header>
+
<a href="#"><li>PARTS >
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Parts"><li>Team Parts</li></a>
 +
 +
</ul>
 +
</li></a>
  
−
<div class="logo">
+
                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Practices"><li>HUMAN PRACTICES</li></a>
−
<img src="https://static.igem.org/mediawiki/2015/a/a0/LOGO_UVWRITSBAND4.png">
+
  
−
</div>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Notebook"><li>NOTEBOOK</li></a>
 +
     
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Modeling"><li>MODELING</li></a>
  
 +
                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Attributions"><li>ATTRIBUTIONS</li></a>
  
−
</header>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Collaborations"><li>COLLABORATIONS</li></a>
  
−
<a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a>
+
−
   
+
−
    <nav>
+
−
    <ul class="menu">
+
−
    <li><a  href="#"><i class="icon-envelope-alt"></i>HOME</a></li>
+
−
    <li><a  href="#"><i class="icon-envelope-alt"></i>TEAM</a></li>
+
−
  <li><a href="#"><i class="icon-home"></i>PROYECTS</a>
+
−
  <ul class="sub-menu">
+
−
  <li><a href="#">DESCRIPTION</a></li>
+
−
  <li><a href="#">PROTOCOLS</a></li>
+
−
  <li><a href="#">RESULTS</a></li>
+
−
  <li><a href="#">DESING</a></li>
+
−
  </ul>
+
−
  </li>
+
−
  <li><a  href="#"><i class="icon-envelope-alt"></i>MODELING</a></li>
+
−
  <li><a  href="#"><i class="icon-camera"></i>PARTS</a>
+
−
  <ul class="sub-menu">
+
−
    <li><a href="#">TEAM PARTS</a></li>
+
−
  <li><a href="#">BASIC PARTS</a></li>
+
−
  <li><a href="#">COMPOSITE PARTS</a></li>
+
−
  <li><a href="#">PARTS COLLECTION</a></li>
+
−
+
−
 
+
−
  </ul>
+
−
  </li>
+
−
  <li><a  href="#"><i class="icon-bullhorn"></i>NOTEBOOK</a></li>
+
−
  <li><a  href="#"><i class="icon-envelope-alt"></i>ATTRIBUTIONS</a></li>
+
−
  <li><a  href="#"><i class="icon-bullhorn"></i>COLLABORATIONS</a></li>
+
−
  </ul>
+
−
  </nav>
+
  
−
<section>
+
</ul>
−
<!-- SLIDESHOW -->
+
</div>
−
   
+
<!-- End of menu  -->
−
    <div id="slider">
+
−
        <ul class="bjqs">
+
−
            <li>
+
−
                <img src="https://static.igem.org/mediawiki/2015/a/a7/Picture_slider_01.jpg" alt="" title="Este mensaje se ve automaticamente si se incluye en el tag title de la imagen" />
+
−
            </li>
+
−
            <li>
+
−
                <img src="https://static.igem.org/mediawiki/2015/3/32/Picture_slider_02.jpg" alt="" title="El aspecto de este texto se modifica con CSS en la clase bjqs-caption" />
+
−
            </li>
+
−
            <li>
+
−
                <img src="https://static.igem.org/mediawiki/2015/3/31/Picture_slider_03.jpg" alt="" title="Para eliminarlo, simplemente remover el tag title en la imagen" />
+
−
            </li>
+
−
        </ul>
+
−
    </div>
+
  
−
</section>
+
<!-- Start of content -->
 +
<div id="contentContainer">  
  
  
−
<div class="intro">
+
                        <div class="intro">
−
<h1>Description:</h1>
+
<h1>Description: </h1>
 
<hr>
 
<hr>
−
<img class="team" src="https://static.igem.org/mediawiki/2015/f/f4/Img_portada.jpg"><p>
+
<img class="imagen" src="https://static.igem.org/mediawiki/2015/f/f4/Img_portada.jpg"><p>According to the Ministry of Health in Chile in the last 5 years there have been 20-25 cases of skin cancer per 100 inhabitants. One of the main factors causing skin cancer is the ultraviolet radiation (UV). This is a natural radiation which in low dose is harmless to the cells, even it can be beneficial for an organism survival. However, when a certain amount is exceeded, it can cause a serious cell damage. The highest levels of UV radiation are reported in Chile.
−
According to the Ministry of Health in Chile in the last 5 years there have been 20-25 cases of skin cancer per 100 inhabitants. One of the main factors causing skin cancer is the ultraviolet radiation (UV). This is a natural radiation which in low dose is harmless to the cells, even it can be beneficial for an organism survival. However, when a certain amount is exceeded, it can cause a serious cell damage. The highest levels of UV radiation are reported in Chile.
+
Our team proposes a system that alerts the intensity of UV radiation. In detail, the project it is represented in a bracelet which it is composed by Bacillus subtilis bacteria that is modified genetically with a system that senses ultraviolet light and according to the intensity it generate the correct coloration . This will allow people to protect themselves from UV rays when its intensity is harmful for the cells.</p>
−
Our team proposes a system that alerts the intensity of UV radiation. In detail, the project it is represented in a bracelet which it is composed by Bacillus subtilis bacteria that is modified genetically with a system that senses ultraviolet light and according to the intensity it generate the correct coloration . This
+
<center>
 +
<h2>Spot UV Wristband </h2>
  
−
<p>
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q1o9Ai9g6Bo" frameborder="0" allowfullscreen></iframe>
 +
</center>
 
</div>
 
</div>
  
Line 468: Line 407:
  
  
−
</div>
 
  
−
<script type="text/javascript">
 
−
 
−
$(document).ready(function(){
 
−
    var touch  = $('#touch-menu');
 
−
    var menu    = $('.menu');
 
−
 
−
    $(touch).on('click', function(e) {
 
−
        e.preventDefault();
 
−
        menu.slideToggle();
 
−
    });
 
−
   
 
−
    $(window).resize(function(){
 
−
        var w = $(window).width();
 
−
        if(w > 767 && menu.is(':hidden')) {
 
−
            menu.removeAttr('style');
 
−
        }
 
−
    });
 
−
   
 
−
});
 
−
 
−
 
−
</script>
 
−
 
−
<script>
 
−
jQuery(document).ready(function($) {
 
−
    $('#slider').bjqs({
 
−
 
−
       
 
−
// PARAMETROS OPCIONALES QUE NOS OFRECE EL PLUGIN
 
−
width : 900,
 
−
height : 300,
 
−
 
−
// animation values
 
−
animtype : 'fade', // accepts 'fade' or 'slide'
 
−
animduration : 500, // how fast the animation are
 
−
animspeed : 4000, // the delay between each slide
 
−
automatic : true, // automatic
 
−
 
−
// control and marker configuration
 
−
showcontrols : true, // show next and prev controls
 
−
centercontrols : true, // center controls verically
 
−
nexttext : 'Next', // Text for 'next' button (can use HTML)
 
−
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
 
−
showmarkers : false, // Show individual slide markers
 
−
centermarkers : true, // Center markers horizontally
 
−
 
−
// interaction values
 
−
keyboardnav : true, // enable keyboard navigation
 
−
hoverpause : true, // pause the slider on hover
 
−
 
−
// presentational options
 
−
usecaptions : true, // show captions for images using the image title tag
 
−
responsive : true // enable responsive capabilities (beta)
 
−
    });
 
−
});
 
−
 
−
 
−
 
−
</script>
 
−
 
−
<script>
 
−
 
−
/*
 
−
* Basic jQuery Slider plug-in v.1.3
 
−
*
 
−
* http://www.basic-slider.com
 
−
*
 
−
* Authored by John Cobb
 
−
* http://www.johncobb.name
 
−
* @john0514
 
−
*
 
−
* Copyright 2011, John Cobb
 
−
* License: GNU General Public License, version 3 (GPL-3.0)
 
−
* http://www.opensource.org/licenses/gpl-3.0.html
 
−
*
 
−
*/(function(e){"use strict";e.fn.bjqs=function(t){var n={width:700,height:300,animtype:"fade",animduration:450,animspeed:4e3,automatic:!0,showcontrols:!0,centercontrols:!0,nexttext:"Next",prevtext:"Prev",showmarkers:!0,centermarkers:!0,keyboardnav:!0,hoverpause:!0,usecaptions:!0,randomstart:!1,responsive:!1},r=e.extend({},n,t),i=this,s=i.find("ul.bjqs"),o=s.children("li"),u=null,a=null,f=null,l=null,c=null,h=null,p=null,d=null,v={slidecount:o.length,animating:!1,paused:!1,currentslide:1,nextslide:0,currentindex:0,nextindex:0,interval:null},m={width:null,height:null,ratio:null},g={fwd:"forward",prev:"previous"},y=function(){o.addClass("bjqs-slide");r.responsive?b():E();if(v.slidecount>1){r.randomstart&&L();r.showcontrols&&x();r.showmarkers&&T();r.keyboardnav&&N();r.hoverpause&&r.automatic&&C();r.animtype==="slide"&&S()}r.usecaptions&&k();if(r.animtype==="slide"&&!r.randomstart){v.currentindex=1;v.currentslide=2}s.show();o.eq(v.currentindex).show();r.automatic&&(v.interval=setInterval(function(){O(g.fwd,!1)},r.animspeed))},b=function(){m.width=i.outerWidth();m.ratio=m.width/r.width,m.height=r.height*m.ratio;if(r.animtype==="fade"){o.css({height:r.height,width:"100%"});o.children("img").css({height:r.height,width:"100%"});s.css({height:r.height,width:"100%"});i.css({height:r.height,"max-width":r.width,position:"relative"});if(m.width<r.width){o.css({height:m.height});o.children("img").css({height:m.height});s.css({height:m.height});i.css({height:m.height})}e(window).resize(function(){m.width=i.outerWidth();m.ratio=m.width/r.width,m.height=r.height*m.ratio;o.css({height:m.height});o.children("img").css({height:m.height});s.css({height:m.height});i.css({height:m.height})})}if(r.animtype==="slide"){o.css({height:r.height,width:r.width});o.children("img").css({height:r.height,width:r.width});s.css({height:r.height,width:r.width*r.slidecount});i.css({height:r.height,"max-width":r.width,position:"relative"});if(m.width<r.width){o.css({height:m.height});o.children("img").css({height:m.height});s.css({height:m.height});i.css({height:m.height})}e(window).resize(function(){m.width=i.outerWidth(),m.ratio=m.width/r.width,m.height=r.height*m.ratio;o.css({height:m.height,width:m.width});o.children("img").css({height:m.height,width:m.width});s.css({height:m.height,width:m.width*r.slidecount});i.css({height:m.height});h.css({height:m.height,width:m.width});w(function(){O(!1,v.currentslide)},200,"some unique string")})}},w=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}(),E=function(){o.css({height:r.height,width:r.width});s.css({height:r.height,width:r.width});i.css({height:r.height,width:r.width,position:"relative"})},S=function(){p=o.eq(0).clone();d=o.eq(v.slidecount-1).clone();p.attr({"data-clone":"last","data-slide":0}).appendTo(s).show();d.attr({"data-clone":"first","data-slide":0}).prependTo(s).show();o=s.children("li");v.slidecount=o.length;h=e('<div class="bjqs-wrapper"></div>');if(r.responsive&&m.width<r.width){h.css({width:m.width,height:m.height,overflow:"hidden",position:"relative"});s.css({width:m.width*(v.slidecount+2),left:-m.width*v.currentslide})}else{h.css({width:r.width,height:r.height,overflow:"hidden",position:"relative"});s.css({width:r.width*(v.slidecount+2),left:-r.width*v.currentslide})}o.css({"float":"left",position:"relative",display:"list-item"});h.prependTo(i);s.appendTo(h)},x=function(){u=e('<ul class="bjqs-controls"></ul>');a=e('<li class="bjqs-next"><a href="#" data-direction="'+g.fwd+'">'+r.nexttext+"</a></li>");f=e('<li class="bjqs-prev"><a href="#" data-direction="'+g.prev+'">'+r.prevtext+"</a></li>");u.on("click","a",function(t){t.preventDefault();var n=e(this).attr("data-direction");if(!v.animating){n===g.fwd&&O(g.fwd,!1);n===g.prev&&O(g.prev,!1)}});f.appendTo(u);a.appendTo(u);u.appendTo(i);if(r.centercontrols){u.addClass("v-centered");var t=(i.height()-a.children("a").outerHeight())/2,n=t/r.height*100,s=n+"%";a.find("a").css("top",s);f.find("a").css("top",s)}},T=function(){l=e('<ol class="bjqs-markers"></ol>');e.each(o,function(t,n){var i=t+1,s=t+1;r.animtype==="slide"&&(s=t+2);var o=e('<li><a href="#">'+i+"</a></li>");i===v.currentslide&&o.addClass("active-marker");o.on("click","a",function(e){e.preventDefault();!v.animating&&v.currentslide!==s&&O(!1,s)});o.appendTo(l)});l.appendTo(i);c=l.find("li");if(r.centermarkers){l.addClass("h-centered");var t=(r.width-l.width())/2;l.css("left",t)}},N=function(){e(document).keyup(function(e){if(!v.paused){clearInterval(v.interval);v.paused=!0}if(!v.animating)if(e.keyCode===39){e.preventDefault();O(g.fwd,!1)}else if(e.keyCode===37){e.preventDefault();O(g.prev,!1)}if(v.paused&&r.automatic){v.interval=setInterval(function(){O(g.fwd)},r.animspeed);v.paused=!1}})},C=function(){i.hover(function(){if(!v.paused){clearInterval(v.interval);v.paused=!0}},function(){if(v.paused){v.interval=setInterval(function(){O(g.fwd,!1)},r.animspeed);v.paused=!1}})},k=function(){e.each(o,function(t,n){var r=e(n).children("img:first-child").attr("title");r||(r=e(n).children("a").find("img:first-child").attr("title"));if(r){r=e('<p class="bjqs-caption">'+r+"</p>");r.appendTo(e(n))}})},L=function(){var e=Math.floor(Math.random()*v.slidecount)+1;v.currentslide=e;v.currentindex=e-1},A=function(e){if(e===g.fwd)if(o.eq(v.currentindex).next().length){v.nextindex=v.currentindex+1;v.nextslide=v.currentslide+1}else{v.nextindex=0;v.nextslide=1}else if(o.eq(v.currentindex).prev().length){v.nextindex=v.currentindex-1;v.nextslide=v.currentslide-1}else{v.nextindex=v.slidecount-1;v.nextslide=v.slidecount}},O=function(e,t){if(!v.animating){v.animating=!0;if(t){v.nextslide=t;v.nextindex=t-1}else A(e);if(r.animtype==="fade"){if(r.showmarkers){c.removeClass("active-marker");c.eq(v.nextindex).addClass("active-marker")}o.eq(v.currentindex).fadeOut(r.animduration);o.eq(v.nextindex).fadeIn(r.animduration,function(){v.animating=!1;v.currentslide=v.nextslide;v.currentindex=v.nextindex})}if(r.animtype==="slide"){if(r.showmarkers){var n=v.nextindex-1;n===v.slidecount-2?n=0:n===-1&&(n=v.slidecount-3);c.removeClass("active-marker");c.eq(n).addClass("active-marker")}r.responsive&&m.width<r.width?v.slidewidth=m.width:v.slidewidth=r.width;s.animate({left:-v.nextindex*v.slidewidth},r.animduration,function(){v.currentslide=v.nextslide;v.currentindex=v.nextindex;if(o.eq(v.currentindex).attr("data-clone")==="last"){s.css({left:-v.slidewidth});v.currentslide=2;v.currentindex=1}else if(o.eq(v.currentindex).attr("data-clone")==="first"){s.css({left:-v.slidewidth*(v.slidecount-2)});v.currentslide=v.slidecount-1;v.currentindex=v.slidecount-2}v.animating=!1})}}};y()}})(jQuery);
 
−
 
−
 
−
</script>
 
−
</body>
 
  
 +
</div>
 +
<!--This div will close on the page.-->
 
</html>
 
</html>

Latest revision as of 21:24, 18 September 2015

Description:

According to the Ministry of Health in Chile in the last 5 years there have been 20-25 cases of skin cancer per 100 inhabitants. One of the main factors causing skin cancer is the ultraviolet radiation (UV). This is a natural radiation which in low dose is harmless to the cells, even it can be beneficial for an organism survival. However, when a certain amount is exceeded, it can cause a serious cell damage. The highest levels of UV radiation are reported in Chile. Our team proposes a system that alerts the intensity of UV radiation. In detail, the project it is represented in a bracelet which it is composed by Bacillus subtilis bacteria that is modified genetically with a system that senses ultraviolet light and according to the intensity it generate the correct coloration . This will allow people to protect themselves from UV rays when its intensity is harmful for the cells.

Spot UV Wristband