Difference between revisions of "Team:Colegio EmelinaU"

 
(102 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<html>
 
<html>
 
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 
<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'>
  
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
 +
 +
body{
 +
 +
 +
}
 +
 +
 +
.intro{
 +
text-align:left;
 +
 +
}
 +
 +
p{
 +
text-align:justify;
 +
}
 +
 +
.imagen{
 +
 +
float:left;
 +
padding:10px;
 +
box-sizing: border-box;
 +
 +
}
  
 
.logo{
 
.logo{
Line 38: Line 61:
 
/* Set up a width, height and color of the body wrapper*/
 
/* Set up a width, height and color of the body wrapper*/
 
body {  
 
body {  
−
background-color: #E6E6E6;
+
background-color:#ffffff;
 
                                 font-family: 'Roboto', sans-serif;
 
                                 font-family: 'Roboto', sans-serif;
 
}
 
}
Line 49: Line 72:
 
margin-left:20px;
 
margin-left:20px;
 
margin-bottom: 10px;
 
margin-bottom: 10px;
−
background-color: #fff;  
+
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);
 +
 
 +
 
 
 
 
}
 
}
Line 55: Line 84:
 
/* Creates the container for the menu */
 
/* Creates the container for the menu */
 
#menuContainer  {  
 
#menuContainer  {  
−
float:left;
+
      width: 200px;
−
width: 150px;
+
                              background: #BA00E8;
−
padding: 20px 0px;
+
                              font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
−
background-color: #9C27B0 ;
+
                              zoom: 1;
−
border-top: 5px solid #EC407A;
+
                              font-size: 12px;
−
font-family: 'Roboto', sans-serif;
+
                              float:left;
 +
                              margin-right:15px;
 +
                              height:700px;
 +
                           
 +
                           
 +
                               
 +
 
 
}
 
}
  
 
/* Creates the container for the content */
 
/* Creates the container for the content */
 
#contentContainer {
 
#contentContainer {
−
padding-top:20px;
+
padding-top:10px;
 
padding-right:10px;
 
padding-right:10px;
 
margin-bottom: 20px;
 
margin-bottom: 20px;
−
width: 800px;
+
padding-left: 50px;
−
padding-left: 20px;
+
−
float: left;
+
−
border-top: 5px solid #CFA0E4;
+
 
background-color: #fff;  
 
background-color: #fff;  
 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
             
 +
                         
 +
                             
 
}
 
}
  
  
 
/*Set up height place holder for the banner*/
 
/*Set up height place holder for the banner*/
−
#bannerContainer {
+
      #bannerContainer {
 
height:200px;
 
height:200px;
 
margin:auto;
 
margin:auto;
 
text-align:center;
 
text-align:center;
 
color: #24B694;
 
color: #24B694;
−
                                 background:url(https://static.igem.org/mediawiki/2015/b/b5/Banner_bg_01.jpg);
+
                                 background:url(https://static.igem.org/mediawiki/2015/2/29/Banner_wiki_03.png);
 +
                             
 
                                  
 
                                  
 
}
 
}
Line 129: Line 165:
 
     #contentContainer  td {
 
     #contentContainer  td {
 
     background-color: #fff;
 
     background-color: #fff;
−
     padding: 10px;
+
     padding: 20px;
 
     border: 2px solid #29221F;
 
     border: 2px solid #29221F;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
Line 154: Line 190:
 
color: #fff;
 
color: #fff;
 
text-decoration:none;
 
text-decoration:none;
 +
                               
 
 
 
}
 
}
Line 160: Line 197:
 
#menuContainer ul {  
 
#menuContainer ul {  
 
list-style: none;
 
list-style: none;
−
margin-left:0px;
+
margin-left:5px;
 
}
 
}
  
Line 170: Line 207:
 
height:30px;
 
height:30px;
 
padding-top:10px;
 
padding-top:10px;
−
                                 padding-left:10px;
+
                                 padding-left:0px;
 +
                                border-bottom: 1px solid #fff;
 +
                             
 +
 
 
}
 
}
  
Line 177: Line 217:
 
color:  #FFF;
 
color:  #FFF;
 
background-color: #ED417B;
 
background-color: #ED417B;
−
                                 transition:.4s;
+
                                 transition:1s;
 +
                                margin-left:10px;
 
}
 
}
  
 
/*Submenus are not displayed as default*/
 
/*Submenus are not displayed as default*/
 
#menuContainer li ul {
 
#menuContainer li ul {
 +
 
display: none;
 
display: none;
 
padding-top:15px;
 
padding-top:15px;
−
margin-left: -19px;
+
margin-left: 0px;
 +
 
 +
 
 
}
 
}
  
Line 193: Line 237:
 
position: absolute;  
 
position: absolute;  
 
float:right;
 
float:right;
−
margin-left: 150px;
+
margin-left: 150px;
−
margin-top:-42px;
+
                                margin-top:-42px;
 +
 
 +
 
 
  }
 
  }
  
 
/*Style the submenu buttons*/
 
/*Style the submenu buttons*/
−
#menuContainer li ul li{
+
#menuContainer li ul li{
−
background-color: #CF94D8;  
+
                                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-left:20px;
 
padding-right:20px;
 
padding-right:20px;
 
height:30px;
 
height:30px;
 
padding-top:10px;
 
padding-top:10px;
−
margin-top:-2px;
+
margin-top:-3px;
 
color: white;
 
color: white;
−
width: 170px;
+
                                font-size:1rem;
 +
                                width:200px;
 
}
 
}
  
Line 228: Line 277:
 
     padding-top: 5px;
 
     padding-top: 5px;
 
             }
 
             }
 +
.animated {
 +
    -webkit-animation-duration: 4s;
 +
    animation-duration: 4s;
 +
    -webkit-animation-fill-mode: both;
 +
    animation-fill-mode: both;
 +
}
  
 +
@-webkit-keyframes bounceIn {
 +
    0% {
 +
        opacity: 0;
 +
        -webkit-transform: scale(.3);
 +
    }
 +
 +
    50% {
 +
        opacity: 1;
 +
        -webkit-transform: scale(1.05);
 +
    }
 +
 +
    70% {
 +
        -webkit-transform: scale(.9);
 +
    }
 +
 +
    100% {
 +
        -webkit-transform: scale(1);
 +
    }
 +
}
 +
 +
@keyframes bounceIn {
 +
    0% {
 +
        opacity: 0;
 +
        transform: scale(.3);
 +
    }
 +
 +
    50% {
 +
        opacity: 1;
 +
        transform: scale(1.05);
 +
    }
 +
 +
    70% {
 +
        transform: scale(.9);
 +
    }
 +
 +
    100% {
 +
        transform: scale(1);
 +
    }
 +
}
 +
 +
.bounceIn {
 +
    -webkit-animation-name: bounceIn;
 +
    animation-name: bounceIn;
 +
}
  
 
</style>
 
</style>
Line 240: Line 339:
 
<div id="bannerContainer">
 
<div id="bannerContainer">
 
<div class="logo">
 
<div class="logo">
−
<img src="https://static.igem.org/mediawiki/2015/a/a0/LOGO_UVWRITSBAND4.png">
+
<img src="https://static.igem.org/mediawiki/2015/3/33/Logo_oficial.png">
  
 
</div>
 
</div>
Line 249: Line 348:
  
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
−
<ul>
+
<ul class="animated bounceIn">
−
<a href="https://2015.igem.org/Team:Example2"><li>HOME</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU"><li>HOME</li></a>
  
−
<a href="https://2015.igem.org/Team:Example2/Team"><li>TEAM</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Team"><li>TEAM</li></a>
  
 
<a href="#"><li>PROJECT >
 
<a href="#"><li>PROJECT >
 
             <ul>
 
             <ul>
−
<a href="https://2015.igem.org/Team:Example2/Description"><li>Description</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Description"><li>Description</li></a>
−
<a href="https://2015.igem.org/Team:Example2/Experiments"><li>Experiments & Protocols</li></a>   
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Experiments"><li>Experiments & Protocols</li></a>   
−
<a href="https://2015.igem.org/Team:Example2/Results"><li>Results</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>
 
</ul>
 
</li></a>
 
</li></a>
Line 264: Line 365:
 
<a href="#"><li>PARTS >
 
<a href="#"><li>PARTS >
 
             <ul>
 
             <ul>
−
<a href="https://2015.igem.org/Team:Example2/Parts"><li>Team Parts</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Parts"><li>Team Parts</li></a>
−
<a href="https://2015.igem.org/Team:Example2/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Example2/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Example2/Part_Collection"><li>Part Collection</li></a> 
+
 
</ul>
 
</ul>
 
</li></a>
 
</li></a>
  
−
<a href="https://2015.igem.org/Team:Example2/Notebook"><li>NOTEBOOK</li></a>
+
                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Practices"><li>HUMAN PRACTICES</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Notebook"><li>NOTEBOOK</li></a>
 
        
 
        
−
<a href="https://2015.igem.org/Team:Example2/Attributions"><li>ATTRIBUTIONS</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Modeling"><li>MODELING</li></a>
  
−
<a href="https://2015.igem.org/Team:Example2/Collaborations"><li>COLLABORATIONS</li></a>
+
                                        <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Attributions"><li>ATTRIBUTIONS</li></a>
  
−
<a href="https://2015.igem.org/Team:Example2/Practices"><li>HUMAN PRACTICES</li></a>
+
<a href="https://2015.igem.org/Team:Colegio_EmelinaU/Collaborations"><li>COLLABORATIONS</li></a>
  
−
<a href="https://2015.igem.org/Team:Example2/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example2/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example2/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example2/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example2/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
  
 
</ul>
 
</ul>
Line 294: Line 387:
  
 
<!-- Start of content -->
 
<!-- Start of content -->
−
<div id="contentContainer"> <!--This div will close on the page.-->
+
<div id="contentContainer">  
 +
 
 +
 
 +
                        <div class="intro">
 +
<h1>Description: </h1>
 +
<hr>
 +
<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.
 +
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>
 +
<center>
 +
<h2>Spot UV Wristband </h2>
 +
 
 +
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q1o9Ai9g6Bo" frameborder="0" allowfullscreen></iframe>
 +
</center>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</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