Difference between revisions of "Team:Colegio EmelinaU/Parts"
Line 1: | Line 1: | ||
+ | {{Template_All_Teams}} | ||
+ | |||
+ | <!-- Declare that you are going to use html code instead of wiki code --> | ||
<html> | <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'> | |
− | + | ||
− | + | <!-- Start of CSS--> | |
− | + | <style type="text/css"> | |
− | + | ||
− | + | body{ | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | <style type="text/css"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | - | + | |
− | + | .intro{ | |
− | + | text-align:left; | |
+ | |||
} | } | ||
− | + | ||
− | + | p{ | |
− | + | text-align:justify; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | .imagen{ | |
− | + | ||
− | + | float:left; | |
+ | padding:10px; | ||
+ | box-sizing: border-box; | ||
+ | |||
} | } | ||
− | . | + | |
− | + | .logo{ | |
− | + | padding-top:50px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #globalWrapper, #content{ | |
+ | float:none; | ||
+ | margin:0 auto; | ||
+ | |||
+ | |||
} | } | ||
− | . | + | |
− | color: | + | /* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */ |
+ | |||
+ | p, #content { | ||
+ | color:#808284; | ||
+ | } | ||
+ | |||
+ | a, a:visited { | ||
+ | color:#22BCB9; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* PAGE LAYOUT */ | ||
+ | |||
+ | |||
+ | /* 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); | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /* Creates the container for the menu */ | ||
+ | #menuContainer { | ||
+ | width: 200px; | ||
+ | background: #BA00E8; | ||
+ | font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; | ||
+ | zoom: 1; | ||
+ | font-size: 12px; | ||
+ | float:left; | ||
+ | margin-right:15px; | ||
+ | height:700px; | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /* 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; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /*Set up height place holder for the banner*/ | ||
+ | #bannerContainer { | ||
+ | height:200px; | ||
+ | margin:auto; | ||
+ | text-align:center; | ||
+ | color: #24B694; | ||
+ | background:url(https://static.igem.org/mediawiki/2015/2/29/Banner_wiki_03.png); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
+ | |||
+ | /*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; | ||
+ | } | ||
+ | |||
+ | /*Style of the links - links are different inside the menu */ | ||
+ | #contentContainer a { | ||
+ | font-weight: bold; | ||
+ | color: #22BCB9; | ||
+ | } | ||
+ | |||
+ | /* Styling links on hover- links are different inside the menu */ | ||
+ | #contentContainer a:hover { | ||
+ | color: #14747D; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of tables */ | ||
+ | #contentContainer table { | ||
+ | border: 2px solid #29221F; | ||
+ | border-collapse: collapse; | ||
+ | margin: auto; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of table cells*/ | ||
+ | #contentContainer td { | ||
+ | background-color: #fff; | ||
+ | padding: 20px; | ||
+ | border: 2px solid #29221F; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Change the styling of table headers */ | ||
+ | #contentContainer th { | ||
+ | background-color: #F4F0D8; | ||
+ | padding: 10px; | ||
+ | border: 2px solid #29221F; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*MENU STYLING */ | ||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | #menuContainer a { | ||
+ | color: #fff; | ||
+ | text-decoration:none; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #menuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:5px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #menuContainer ul li { | ||
+ | |||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | padding-left:0px; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #menuContainer li:hover { | ||
+ | color: #FFF; | ||
+ | background-color: #ED417B; | ||
+ | transition:1s; | ||
+ | margin-left:10px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #menuContainer li ul { | ||
+ | |||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: 0px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 150px; | ||
+ | margin-top:-42px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*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 */ | ||
+ | |||
+ | /*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; | ||
+ | } | ||
+ | |||
+ | @-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> | |
− | + | <!-- End of CSS --> | |
− | + | ||
− | + | ||
− | + | <!-- 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> | |
− | + | ||
− | + | <!-- Start of menu --> | |
− | + | <div id="menuContainer"> | |
− | + | ||
− | + | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | |
− | + | <ul class="animated bounceIn"> | |
− | + | <a href="https://2015.igem.org/Team:Colegio_EmelinaU"><li>HOME</li></a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Team"><li>TEAM</li></a> | |
− | + | ||
− | + | <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> | |
− | + | ||
− | + | <a href="#"><li>PARTS > | |
− | + | <ul> | |
− | + | <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Parts"><li>Team Parts</li></a> | |
− | + | ||
− | + | </ul> | |
− | + | </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:Colegio_EmelinaU/Modeling"><li>MODELING</li></a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Attributions"><li>ATTRIBUTIONS</li></a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:Colegio_EmelinaU/Collaborations"><li>COLLABORATIONS</li></a> | |
− | + | ||
− | + | ||
− | + | ||
− | + | </ul> | |
− | + | </div> | |
− | + | <!-- End of menu --> | |
− | + | ||
− | + | <!-- Start of content --> | |
− | + | <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.--> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | - | + | |
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | src="https://static.igem.org/mediawiki/2015/ | + | |
− | + | ||
− | < | + | |
− | < | + | |
− | < | + | |
− | + | ||
− | < | + | |
− | < | + | |
− | + | ||
− | class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/Team | + | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/Description | + | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | </a | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | href="https://2015.igem.org/Team:Colegio_EmelinaU/ | + | |
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | </ | + | |
− | </ | + | |
− | < | + | |
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
</html> | </html> |
Revision as of 01:43, 19 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.