Difference between revisions of "Team:Colegio EmelinaU/Team"

Line 2: Line 2:
  
 
<html lang="en">
 
<html lang="en">
−
<head>
 
−
<meta charset="utf-8">
 
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
<title>One-column full-width responsive layout</title>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<meta name="Description" lang="en" content="ADD SITE DESCRIPTION">
 
−
<meta name="author" content="ADD AUTHOR INFORMATION">
 
−
<meta name="robots" content="index, follow">
 
  
−
<!-- icons -->
+
<head>
−
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
+
−
<link rel="shortcut icon" href="favicon.ico">
+
  
−
<!-- Override CSS file - add your own CSS rules -->
+
    <meta charset="utf-8">
−
<link rel="stylesheet" href="assets/css/styles.css">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
</head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
<style type="text/css">
+
    <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>
 +
 
 +
 
 +
 
 +
*{
 +
 
 +
margin: 0 ;
 +
padding: 0;
 +
 
 +
}
 +
 
 +
 
 +
.contenedor{
 +
 
 +
width:80%;
 +
margin:0 auto;
 +
background-color:#FAFAFA;
 +
display: flex;
 +
flex-direction:column;
 +
 
 +
 
 +
 
 +
}
  
 
#globalWrapper, #content{
 
#globalWrapper, #content{
  
 +
background-color: transparent;
 +
border: 0px;
 
float:none;
 
float:none;
−
margin: 0 auto;
+
margin:0;
 +
padding: 0;
  
 
}
 
}
  
−
body
+
header{
−
{
+
 
−
margin: 0;
+
width:100%;
−
padding: 0;
+
height:150px;
−
color: #333;
+
background:white;
−
background-color: #eee;
+
 
−
font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+
 
−
}
+
 
 +
}         
 +
.logo{
 +
 
 +
width: 100%;
 +
height: 100%;
 +
text-align: center;
 +
padding: 10px 0px 0px 0px;
 +
 
  
−
h1,h2,h3,h4,h5,h6
 
−
{
 
−
margin: 0 0 .5em;
 
−
font-weight: 500;
 
−
line-height: 1.1;
 
 
}
 
}
  
−
h1 { font-size: 2.25em; } /* 36px */
+
/* Menu */
−
h2 { font-size: 1.75em; } /* 28px */
+
−
h3 { font-size: 1.375em; } /* 22px */
+
−
h4 { font-size: 1.125em; } /* 18px */
+
−
h5 { font-size: 1em; } /* 16px */
+
−
h6 { font-size: .875em; } /* 14px */
+
  
−
p
+
/* 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 }
−
margin: 0 0 1.5em;
+
table { border-collapse:collapse; border-spacing:0 }
−
line-height: 1.5;
+
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;
 
}
 
}
  
−
blockquote
+
.alignleft, img.alignleft{
−
{
+
display: inline;
−
padding: 1em 2em;
+
    float: left;
−
margin: 0 0 2em;
+
    margin-right: 22px;
−
border-left: 5px solid #eee;
+
 
}
 
}
  
−
hr
+
.alignright, img.alignright {
−
{
+
    display: inline;
−
height: 0;
+
    float: right;
−
margin-top: 1em;
+
    margin-left: 22px;
−
margin-bottom: 2em;
+
−
border: 0;
+
−
border-top: 1px solid #ddd;
+
 
}
 
}
  
−
table
+
.aligncenter, img.aligncenter {
−
{
+
    clear: both;
−
background-color: transparent;
+
    display: block;
−
border-spacing: 0;
+
    margin-left: auto;
−
border-collapse: collapse;
+
    margin-right: auto;
−
border-top: 1px solid #ddd;
+
 
}
 
}
  
−
th, td
+
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
−
{
+
 
−
padding: .5em 1em;
+
 
−
vertical-align: top;
+
*{
−
text-align: left;
+
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
−
border-bottom: 1px solid #ddd;
+
    -moz-box-sizing: border-box;   /* Firefox, other Gecko */
 +
    box-sizing: border-box;         /* Opera/IE 8+ */
 
}
 
}
  
−
a:link { color: royalblue; }
 
−
a:visited { color: purple; }
 
−
a:focus { color: black; }
 
−
a:hover { color: green; }
 
−
a:active { color: red; }
 
  
−
/* -----------------------
 
−
Layout styles
 
−
------------------------*/
 
  
−
.container
+
html{-webkit-font-smoothing:antialiased;}
−
{
+
−
max-width: 50em;
+
−
margin: 0 auto;
+
−
        width:100%;
+
  
−
}
+
a{color:#BA0707;}
 +
a:hover{color:#BA0707;text-decoration:underline;}
  
−
.header
+
body{
−
{
+
background: #E4CAF2;
−
color: #fff;
+
color:#3E4156;
−
background: #555;
+
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
−
padding: 1em 1.25em;
+
-webkit-font-smoothing: antialiased;
−
}
+
-webkit-text-size-adjust: 100%;
 +
line-height:1;
 +
width:100%;}
  
−
.header-heading { margin: 0; }
+
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;}
  
−
.nav-bar
 
−
{
 
−
background: #000;
 
−
padding: 0;
 
−
}
 
  
−
.content
+
.mainWrap{width:960px;margin:0 auto;}
−
{
+
 
−
padding: 1em 1.25em;
+
.title{margin:100px 0 20px 0;
−
background-color: #fff;
+
text-align:center;
−
}
+
color:#3E4156;}
 +
.back{text-align:center;}
  
−
.footer
+
nav{display:block;
−
{
+
background:#9c27b0;
−
color: #fff;
+
−
background: #000;
+
−
padding: 1em 1.25em;
+
 
}
 
}
  
−
/* -----------------------
+
.menu{display:block;}
−
Nav
+
−
------------------------*/
+
  
−
.nav
+
.menu li{display: inline-block;
−
{
+
position: relative;
−
margin: 0;
+
z-index:100;}
−
padding: 0;
+
−
list-style: none;
+
−
}
+
  
−
.nav li
+
.menu li:first-child{margin-left:0;}
−
{
+
 
−
display: inline;
+
.menu li a {font-weight:normal;
−
margin: 0;
+
text-decoration:none;
 +
padding:11px;
 +
display:block;
 +
color:#ffffff;
 +
 
 +
-webkit-transition: all 0.2s ease-in-out 0s;
 +
  -moz-transition: all 0.2s ease-in-out 0s;
 +
  -o-transition: all 0.2s ease-in-out 0s;
 +
  -ms-transition: all 0.2s ease-in-out 0s;
 +
  transition: all 0.2s ease-in-out 0s;
 
}
 
}
  
−
.nav a
+
.menu li a:hover, .menu li:hover > a{color:#ffffff;
−
{
+
background:#9CA3DA;}
−
display: block;
+
 
−
padding: .7em 1.25em;
+
.menu ul {display: none;
−
color: #fff;
+
margin: 0;
−
text-decoration: none;
+
padding: 0;
−
border-bottom: 1px solid gray;
+
width: 150px;
 +
position: absolute;
 +
top: 43px;
 +
left: 0px;
 +
background: #ffffff;
 
}
 
}
  
−
.nav a:link { color: white; }
+
.menu ul li {display:block;
−
.nav a:visited { color: white; }
+
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;}
  
−
.nav a:focus
+
.menu ul li a:hover, .menu ul li:hover > a{
−
{
+
background:#f0f0f0;
−
color: black;
+
border-left:3px solid #9CA3DA;
−
background-color: white;
+
color:#797979;
 
}
 
}
  
−
.nav a:hover
+
.menu li:hover > ul{ display: block;}
−
{
+
.menu ul ul {left: 149px;
−
color: white;
+
    top: 0px;
−
background-color: green;
+
 
}
 
}
  
−
.nav a:active
+
.mobile-menu{display:none;
−
{
+
width:100%;
−
color: white;
+
padding:11px;
−
background-color: red;
+
background:#3E4156;
 +
color:#ffffff;
 +
text-transform:uppercase;
 +
font-weight:600;
 +
}
 +
.mobile-menu:hover{background:#3E4156;
 +
color:#ffffff;
 +
text-decoration:none;
 
}
 
}
  
−
/* -----------------------
 
−
Single styles
 
−
------------------------*/
 
  
−
.img-responsive { max-width: 100%; }
+
@media (min-width: 970px) and (max-width: 960px) {
  
−
.btn
+
.mainWrap{width:768px;}
−
{
+
.menu ul {top:0px;}
−
color: #fff !important;
+
.menu li a{font-size:12px;
−
background-color: royalblue;
+
padding:8px;}
−
border-color: #222;
+
−
display: inline-block;
+
−
padding: .5em 1em;
+
−
margin-bottom: 0;
+
−
font-weight: 400;
+
−
line-height: 1.2;
+
−
text-align: center;
+
−
white-space: nowrap;
+
−
vertical-align: middle;
+
−
cursor: pointer;
+
−
border: 1px solid transparent;
+
−
border-radius: .2em;
+
−
text-decoration: none;
+
 
}
 
}
  
−
.btn:hover
+
@media (max-width: 767px) {
−
{
+
−
color: #fff !important;
+
−
background-color: green;
+
−
}
+
  
−
.btn:focus
+
.mainWrap{width:auto;padding:50px 20px;}
−
{
+
−
color: #fff !important;
+
−
background-color: black;
+
−
}
+
  
−
.btn:active
+
.menu{display:none;}
−
{
+
 
−
color: #fff !important;
+
.mobile-menu{display:block;
−
background-color: red;
+
margin-top:100px;}
−
}
+
 
 +
nav{margin:0;
 +
background:none;}
 +
 
 +
.menu li{display:block;
 +
margin:0;}
 +
 
 +
.menu li a {background:#ffffff;
 +
color:#797979;
 +
border-top:1px solid #e0e0e0;
 +
border-left:3px solid #ffffff;}
 +
 
 +
.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;}
  
−
.table
 
−
{
 
−
width: 100%;
 
−
max-width: 100%;
 
−
margin-bottom: 20px;
 
 
}
 
}
  
−
.list-unstyled
+
@media (max-width: 480px) {
−
{
+
 
−
padding-left: 0;
+
−
list-style: none;
+
 
}
 
}
  
−
.list-inline
+
 
−
{
+
@media (max-width: 320px) {
−
padding-left: 0;
+
−
margin-left: -5px;
+
−
list-style: none;
+
 
}
 
}
  
−
.list-inline > li
+
.team{
−
{
+
 
−
display: inline-block;
+
 
−
padding-right: 5px;
+
float: left;
−
padding-left: 5px;
+
padding: 10px 10px 0px 0px;
 +
 
 
}
 
}
  
−
/* -----------------------
 
−
Wide styles
 
−
------------------------*/
 
  
−
@media (min-width: 42em)
+
.intro{
−
{
+
 
−
.header { padding: 1.5em 3em; }
+
margin-top: 0px;
−
.nav-bar { padding: 1em 3em; }
+
padding: 0px 50px 0px 50px;
−
.content { padding: 2em 3em; }
+
 
−
.footer { padding: 2em 3em; }
+
−
+
−
.nav li
+
−
{
+
−
display: inline;
+
−
margin: 0 1em 0 0;
+
−
}
+
−
+
−
.nav a
+
−
{
+
−
display: inline;
+
−
padding: 0;
+
−
border-bottom: 0;
+
−
}
+
 
}
 
}
  
 +
 +
 +
/* slider */
 +
 +
 +
 +
#slider{
 +
margin:50px auto;
 +
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>
 
</style>
 +
</head>
 +
 +
<body>
 +
 +
<div class="contenedor">
 +
 +
<header>
 +
 +
<div class="logo">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a0/LOGO_UVWRITSBAND4.png">
 +
 +
</div>
 +
 +
 +
</header>
 +
 +
<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>
 +
<!-- SLIDESHOW -->
 +
   
 +
    <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>
 +
 +
 +
<div class="intro">
 +
<h1>Description:</h1>
 +
<hr>
 +
<img class="team" 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
 +
 +
<p>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
</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');
 +
        }
 +
    });
 +
   
 +
});
  
−
<body>
 
−
<div class="header">
 
−
<div class="container">
 
−
<h1 class="header-heading">Sitename</h1>
 
−
</div>
 
−
</div>
 
−
<div class="nav-bar">
 
−
<div class="container">
 
−
<ul class="nav">
 
−
<li><a href="https://2015.igem.org/Team:Colegio_EmelinaU/Team">Team</a></li>
 
−
<li><a href="#">Nav item 2</a></li>
 
−
<li><a href="#">Nav item 3</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
−
<div class="content">
 
−
<div class="container">
 
−
<div class="main">
 
−
<h1>Page title</h1>
 
−
<hr>
 
  
−
<!-- Heading levels -->
+
</script>
−
<h1>Heading level 1</h1>
+
−
<h2>Heading level 2</h2>
+
−
<h3>Heading level 3</h3>
+
−
<h4>Heading level 4</h4>
+
−
<h5>Heading level 5</h5>
+
−
<h6>Heading level 6</h6>
+
−
<hr>
+
  
−
<!-- Paragraphs -->
+
<script>
−
<h3>Paragraphs</h3>
+
jQuery(document).ready(function($) {
−
<p>Ut wisi enim ad minim veniam, <a href="#">quis nostrud exerci tation ullamcorper</a> suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
    $('#slider').bjqs({
−
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
−
<hr>
+
       
 +
// 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)
 +
    });
 +
});
  
−
<!-- Responsive images -->
 
−
<h3>Responsive images</h3>
 
−
<p>For images to be responsive (so that they will rescale to suit the width of the parent, use the <code>.img-responsive</code> class.</p>
 
−
<p><img class="img-responsive" src="http://placehold.it/800x350" alt=""></p>
 
  
−
<!-- Lists -->
 
−
<h3>Unordered list</h3>
 
−
<p>Unordered lists are used to markup lists where list items do not require numbering.</p>
 
−
<ul>
 
−
<li>Ut wisi enim ad minim veniam</li>
 
−
<li>Quis nostrud exerci tation</li>
 
−
<li>Lamcorper suscipit lobortis nis</li>
 
−
<li>Ut aliquip ex ea commodo consequat</li>
 
−
<li>Duis autem vel eum iriure dolor</li>
 
−
</ul>
 
−
<hr>
 
  
−
<h3>Ordered list</h3>
+
</script>
−
<p>Ordered lists are used to markup lists where list items require numbering.</p>
+
−
<ol>
+
−
<li>Hendrerit in vulputate velit esse</li>
+
−
<li>Olestie consequat</li>
+
−
<li>Vel illum dolore eu feugiat</li>
+
−
<li>Nulla facilisis at vero eros</li>
+
−
<li>Accumsan et iusto odio</li>
+
−
</ol>
+
−
<hr>
+
  
−
<h3>Unstyled list</h3>
+
<script>
−
<p>You can make the list unstyled using the <code>list-unstyled</code> class.</p>
+
−
<ul class="list-unstyled">
+
−
<li>Ut wisi enim ad minim veniam</li>
+
−
<li>Quis nostrud exerci tation</li>
+
−
<li>Lamcorper suscipit lobortis nis</li>
+
−
<li>Ut aliquip ex ea commodo consequat</li>
+
−
<li>Duis autem vel eum iriure dolor</li>
+
−
</ul>
+
−
<hr>
+
  
−
<h3>Inline list</h3>
+
/*
−
<p>You can make the list display inline using the <code>list-inline</code> class.</p>
+
* Basic jQuery Slider plug-in v.1.3
−
<ul class="list-inline">
+
*
−
<li>One</li>
+
* http://www.basic-slider.com
−
<li>Two</li>
+
*
−
<li>Three</li>
+
* Authored by John Cobb
−
<li>Four</li>
+
* http://www.johncobb.name
−
</ul>
+
* @john0514
−
<hr>
+
*
 +
* 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);
  
−
<!-- Blockquotes -->
 
−
<h3>Blockquotes</h3>
 
−
<p>The blockquote element is used to markup long quotations. Ideally, content inside should be wrapped in paragraph elements.</p>
 
−
<blockquote>
 
−
<p>The real names of our people were destroyed during slavery. The last name of my forefathers was taken from them when they were brought to America and made slaves, and then the name of the slave master was given, which we refuse, we reject that name today and refuse it. I never acknowledge it whatsoever.</p>
 
−
<footer><a href="http://en.wikipedia.org/wiki/Malcolm_X">Malcolm X</a></footer>
 
−
</blockquote>
 
−
<hr>
 
  
−
<h3>Buttons</h3>
+
</script>
−
<p>You can apply the <code>btn</code> class to any element that requires a button style.</p>
+
</body>
−
<p><a href="#" class="btn">Submit</a></p>
+
−
<hr>
+
  
−
<!-- Tables -->
 
−
<h3>Tables</h3>
 
−
<p>Tables should be given the class of <code>table</code>.</p>
 
−
<table class="table table-striped">
 
−
<thead>
 
−
<tr>
 
−
<th>#</th>
 
−
<th>First Name</th>
 
−
<th>Last Name</th>
 
−
<th>Username</th>
 
−
</tr>
 
−
</thead>
 
−
<tbody>
 
−
<tr>
 
−
<th scope="row">1</th>
 
−
<td>Mark</td>
 
−
<td>Otto</td>
 
−
<td>@mdo</td>
 
−
</tr>
 
−
<tr>
 
−
<th scope="row">2</th>
 
−
<td>Jacob</td>
 
−
<td>Thornton</td>
 
−
<td>@fat</td>
 
−
</tr>
 
−
<tr>
 
−
<th scope="row">3</th>
 
−
<td>Larry</td>
 
−
<td>the Bird</td>
 
−
<td>@twitter</td>
 
−
</tr>
 
−
</tbody>
 
−
</table>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="footer">
 
−
<div class="container">
 
−
&copy; Copyright 2015
 
−
</div>
 
−
</div>
 
−
</body>
 
 
</html>
 
</html>

Revision as of 02:14, 6 September 2015

UV WRITESBAND - EMELINA URRUTIA

Menu

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