Difference between revisions of "Team:Valencia UPV"

 
(101 intermediate revisions by 6 users not shown)
Line 3: Line 3:
 
 
 
<html>
 
<html>
<!-- Banner -->
+
<link href='https://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
 
+
<!-- Banner -->
 +
<section id="banner">
 +
          <h1>AladDNA</h1>
 +
          <div id="slider">
 +
          <figure>
 +
<img src="https://static.igem.org/mediawiki/2015/7/72/ValenciaUPVMain1.png">
 +
<img src="https://static.igem.org/mediawiki/2015/9/97/ValenciaUPVMain2.png">
 +
<img src="https://static.igem.org/mediawiki/2015/2/24/ValenciaUPVMain3.png">
 +
<img src="https://static.igem.org/mediawiki/2015/7/72/ValenciaUPVMain1.png">
 +
<img src="https://static.igem.org/mediawiki/2015/9/97/ValenciaUPVMain2.png">
 +
          </figure>
 +
          </div>
 +
        </section>
 
<style>  
 
<style>  
#banner{background-image: url("images/overlay.png"), url("#");}
 
</style>
 
  
<style>
+
#main figure:hover >img {
 +
    opacity: 0.3;
 +
}
  
ul.img-list { list-style-type: none;margin:0;padding:0;text-align:center; }
+
#banner h1{
ul.img-list li {width:200px;height:150px;margin-right:1em;position:relative;margin-bottom:1.5em;display:inline-block;}
+
    padding-top:20px;
ul.img-list li:hover span.text-content {opacity:1;}
+
    font-family: 'Calligraffitti', cursive;
span.text-content {position:absolute;top:0;left:0;background:rgba(0,0,0,0.5);color:white;cursor:pointer;display:table;width:200px;height:150px;opacity:0;
+
    position: absolute;
     -webkit-transition: opacity 500ms;
+
    z-index: 1;
     -moz-transition: opacity 500ms;
+
    text-align: center;
     -o-transition: opacity 500ms;
+
    width: 100%;
     transition: opacity 500ms;}
+
     margin-top: 4%;
span.text-content span {display:table-cell;vertical-align:middle;text-align:center;}
+
     font-size: 90px;
 +
     color: black;
 +
     font-weight: bold;
 +
}
 +
#banner{background-image: url("images/overlay.png"), url("https://static.igem.org/mediawiki/2015/a/a5/Valencia_upv_soyseedling.jpg");}
  
</style>
+
figure {
 +
margin: 0;
 +
padding: 0;
 +
height: 85%;
 +
width:480px;
 +
position: relative;
 +
display: block;
 +
cursor: pointer;
 +
overflow: hidden;
 +
border: 3px solid #fff;
 +
}
  
<section id="banner">
+
figcaption {
<h2><b>Banner</b></h2>
+
opacity: 0;
<p>Be patient, we are under construction</p>
+
position: absolute;
<ul class="actions">
+
height: 60%;
<li><a href="#scroll1" class="button">1</a></li>
+
width: 110%;
<li><a href="#scroll2" class="button">2</a></li>
+
color: transparent;
<li><a href="#scroll3" class="button">3</a></li>
+
-webkit-transition: all .5s ease;
</ul>
+
-moz-transition: all .5s ease;
</section>
+
-o-transition: all .5s ease;
 +
-ms-transition: all .5s ease;
 +
transition: all .5s ease;
 +
-webkit-transition-delay: .5s;
 +
-moz-transition-delay: .5s;
 +
-o-transition-delay: .5s;
 +
-ms-transition-delay: .5s;
 +
transition-delay: .5s;
 +
}
  
 +
figure:hover figcaption {
 +
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
filter: alpha(opacity=100);
 +
opacity: 1;
 +
top: 0;
 +
}
  
<!-- Main -->
+
figure img {
 +
-webkit-transition: all 1s;
 +
-moz-transition: all 1s;
 +
-o-transition: all 1s;
 +
-ms-transition: all 1s;
 +
transition: all 1s;
 +
-webkit-transition-delay: 0.5s;
 +
-moz-transition-delay: 0.5s;
 +
-o-transition-delay: 0.5s;
 +
-ms-transition-delay: 0.5s;
 +
transition-delay: 0.5s;
 +
}
  
<section id="main" class="container">
+
.box.special{
<div id="scroll1" class="row" style="font-size:initial">
+
padding-bottom:35px;
 +
}
 +
 
 +
 
 +
.box .image.featured:first-child{
 +
margin-bottom:1em;
 +
    padding-bottom:15px;
 +
}
 +
figcaption h3 {
 +
padding: 10px 20px;
 +
margin-bottom: 0;
 +
position: relative;
 +
margin-right: 1em;
 +
margin-top: 150px;
 +
font-size: 30px;
 +
color: black;
 +
font-weight:bold;
 +
}
 +
 
 +
figure:hover h3,figure:hover p {
 +
left: 0;
 +
}
 +
 
 +
#banner{
 +
  background-image: none;
 +
  margin:0;
 +
  padding:0;
 +
}
 +
@keyframes slidy {
 +
0% { left: 0%; }
 +
20% { left: 0%; }
 +
25% { left: -100%; }
 +
45% { left: -100%; }
 +
50% { left: -200%; }
 +
70% { left: -200%; }
 +
75% { left: -300%; }
 +
95% { left: -300%; }
 +
100% { left: -400%; }
 +
}
 +
 
 +
body { margin: 0; }
 +
div#slider { overflow: hidden; height:inherit; margin-top:2.7em;}
 +
div#slider figure img { width: 20%; float: left; height: 508px;}
 +
div#slider figure {
 +
  position: relative;
 +
  width: 500%;
 +
  margin: 0;
 +
  left: 0;
 +
  text-align: left;
 +
  font-size: 0;
 +
  animation: 17s slidy infinite;
 +
}
 +
 
 +
</style>
 +
 
 +
 +
 +
</section>
 +
 +
<!-- Main -->
 +
<section id="main" style="padding:4em 0 0 0" class="container">
 +
 
 +
<div class="row" style="font-size:initial">
 
<div class="12u">
 
<div class="12u">
 
<section class="box">
 
<section class="box">
 
<header class="major">
 
<header class="major">
<h2>Section 1<br />
+
<h2>Jamboree Results!<br />
 +
 
 
</h2><hr>
 
</h2><hr>
 
</header>
 
</header>
+
<br>
<p>Hello world</p>
+
<div style="float:left"><img src="https://static.igem.org/mediawiki/2015/8/8f/Valencia_upv_teamjamboree.jpeg" style="width:20em; margin-right: 2em"></div>
 +
<br><p>In the 2015 Giant Jamboree we had a great time, learned an incredible amount of SynBio, and won a <b style="color:#FFD700">GOLD MEDAL!</b> Other teams were deeply attracted by our <a href="https://2015.igem.org/Team:Valencia_UPV/Practices/Minecraft">SynBiocraft</a> Minecraft mod, the light of our bioreactor model with <a href="https://2015.igem.org/Team:Valencia_UPV/Design">magic lamp</a> shape, and judges had a very positive valoration of our presentation and our <a href="https://2015.igem.org/Team:Valencia_UPV/Circuit">biological decoder</a>, the star of our project. Don't hesitate on checking our webpage. Enjoy your travel through the Valencia UPV iGEM project.</p>
  
<br/>
+
 
+
</section>
<header id="scrollsect1" class="major">
+
</div>
<h3 style="text-align:left">Sub section 1<br />
+
</div>
</h3>
+
 
 +
<div class="row" style="font-size:initial">
 +
<div class="12u">
 +
<section class="box">
 +
<header class="major">
 +
<h2>AladDNA<br />
 +
 
 +
</h2><hr>
 
</header>
 
</header>
+
 
<p>Hello world</p>
+
<p>
+
Conventional bioproduction methods require huge and specialized infrastructures for each new product, difficulting the fulfilment of the manufacturing needs in remote locations. What if we could just send information that could unfold on site? AladDNA is an innovative genetic design aimed to encode the manufacturing instructions for several bioproducts as genetic information. It is also capable to process this information on demand as single output products in response to the user´s wishes. Just like a genie in a lamp!  </p>
 +
 
 +
<p>This system uses DNA to store information inside a plant seed, acting as a miniaturized and flexible biofactory capable of producing different bioproducts such as interferon alpha or anti-choleric vaccines. Equipped with an optogenetically controlled decoder, AladDNA can activate the production of different high-added value products upon the reception of external signals based on combinations of light stimuli. AladDNA allows bioproduction in any condition avoiding prohibitive costs due to infrastructures.  </p>
 +
 
 +
<p> <div style="text-align: center;"><h7><b><i>No matter where you are or what you need, just ask your wish!</i></b></h7></div> </p>
 +
<p> <div style="text-align: center;"><h7><b><i> Because AladDNA has no frontiers!</i></b></h7></div>
 +
 
 +
</p>
 +
<div id="scroll1"></div>
 
</section>
 
</section>
 
</div>
 
</div>
</div>
+
</div>
 +
 
 +
 
 +
<div class="row" style="font-size:initial;">
 +
 
 +
<div class="6u 12u(narrower)">
 +
<section class="box special" style="margin: 0;padding-bottom: 2.3em;">
 +
<span class="image featured"style="margin-bottom: 0;padding-bottom: 0;">
 +
<figure>
 +
<img style="height: 23.5em;" src="https://static.igem.org/mediawiki/2015/b/b8/ValenciaUPV_HOME_3IDEAS.png"></a>
 +
<figcaption>
 +
<a href="https://2015.igem.org/Team:Valencia_UPV/Description" style="text-decoration: none;">
 +
<h3>Check here to meet our biological circuit</h3>
 +
</figcaption>
 +
</figure>
 +
</span>
 +
<h3>Project overview</h3>
 +
<ul class="actions">
 +
<li><a href="https://2015.igem.org/Team:Valencia_UPV/Description" class="button alt">Learn More</a></li>
 +
</ul>
 +
</section>
 +
 
 +
</div>
 +
 +
<div class="6u 12u(narrower)">
 +
<section class="box special">
 +
<span class="image featured">
 +
<figure>
 +
<img style="width:40em;height:22.5em;
 +
" src="https://static.igem.org/mediawiki/2015/6/64/UPV_fotobomb.png"></a>
 +
<figcaption>
 +
<a href="https://2015.igem.org/Team:Valencia_UPV/Modeling" style="text-decoration: none;">
 +
<h3>Great circuit, great modeling</h3>
 +
</figcaption>
 +
</figure>
 +
</span>
 +
<h3>Modeling</h3>
 +
<ul class="actions">
 +
<li><a href="https://2015.igem.org/Team:Valencia_UPV/Modeling" class="button alt">Learn More</a></li>
 +
</ul>
 +
</section>
 +
</div>
 +
 +
<div class="6u 12u(narrower)">
 +
<section class="box special">
 +
<span class="image featured">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/7/7d/Valencia_upv_lamparabuena.png"></a>
 +
<figcaption>
 +
<a href="https://2015.igem.org/Team:Valencia_UPV/Design" style="text-decoration: none;">
 +
<h3>Discover our magic lamp</h3>
 +
</figcaption>
 +
</figure>
 +
</span>
 +
<h3>The device</h3>
 +
<ul class="actions">
 +
<li><a href="https://2015.igem.org/Team:Valencia_UPV/Design" class="button alt">Learn More</a></li>
 +
</ul>
 +
</section>
 +
</div>
 
 
<ul class="img-list" id="scroll2" style="font-size:initial;margin-bottom:3em">
+
<div class="6u 12u(narrower)">
<li>
+
<section class="box special">
<a href="https://2015.igem.org/Team:Valencia_UPV/Overview">
+
<span class="image featured">
<img src="https://static.igem.org/mediawiki/2015/a/a8/Alpha.png" width="200" height="150" alt="">
+
<figure>
<span class="text-content"><span>What is our project about? Which are the parts? What have we done? Check here to meet our biological circuit</span></span>
+
<img src="https://static.igem.org/mediawiki/2015/4/42/Valencia_UPV_ConstruccionFinal.png" style="height: 22.2em;"></a>
</a>
+
<figcaption>
</li>
+
<a href="https://2015.igem.org/Team:Valencia_UPV/Practices/Minecraft" style="text-decoration: none;">
<li>
+
<h3>The treasure of our policy and practices</h3>
<a href="https://2015.igem.org/Team:Valencia_UPV/Practices">
+
</figcaption>
<img src="https://static.igem.org/mediawiki/2015/e/e2/Valencia_upv_minecraft_thumb.jpg" width="200" height="150" alt="">
+
</figure>
<span class="text-content"><span>The treasure of our policies and practices. The interactive platform has a lot of things to offer to you... Do you want to know more?</span></span>
+
</span>
</a>
+
<h3>SynbioCraft</h3>
</li>
+
<ul class="actions">
<li>
+
<li><a href="https://2015.igem.org/Team:Valencia_UPV/Practices/Minecraft" class="button alt">Learn More</a></li>
<a href="https://2015.igem.org/Team:Valencia_UPV/Design">
+
</ul>
<img src="https://static.igem.org/mediawiki/2015/9/98/Valencia_upv_geniologo.png" width="200" height="150" alt="">
+
</section>
<span class="text-content"><span>Discover our magic lamp, the device that makes the magic to put the biological circuit to work</span></span>
+
</div>
</a>
+
</div>
</li>
+
<li>
+
<a href="https://2015.igem.org/Team:Valencia_UPV/Modelling">
+
<img src="https://static.igem.org/mediawiki/2015/e/e6/Valencia_upv_circuit_thumb.png" width="200" height="150" alt="">
+
<span class="text-content"><span>A great multiplexed circuit needs a great modelling. So we did. Here the results!</span></span>
+
</a>
+
<li>
+
<a href="https://2015.igem.org/Team:Valencia_UPV/Achievements">
+
<img src="https://static.igem.org/mediawiki/2015/2/26/Valencia_upv_goldmedal.png" width="200" height="150" alt="">
+
<span class="text-content"><span>After months of hard work, here we show you what we've managed to do and why it is really important</span></span>
+
</a>
+
</li>
+
</ul>
+
 
    
 
    
 
</section>
 
</section>
 
 
</html>
 
</html>
 +
 +
{{:Team:Valencia_UPV/Templates:footerUPV2}}
 
{{:Team:Valencia_UPV/Templates:footerUPV}}
 
{{:Team:Valencia_UPV/Templates:footerUPV}}

Latest revision as of 02:05, 20 November 2015

Valencia UPV iGEM 2015

Jamboree Results!




In the 2015 Giant Jamboree we had a great time, learned an incredible amount of SynBio, and won a GOLD MEDAL! Other teams were deeply attracted by our SynBiocraft Minecraft mod, the light of our bioreactor model with magic lamp shape, and judges had a very positive valoration of our presentation and our biological decoder, the star of our project. Don't hesitate on checking our webpage. Enjoy your travel through the Valencia UPV iGEM project.

AladDNA


Conventional bioproduction methods require huge and specialized infrastructures for each new product, difficulting the fulfilment of the manufacturing needs in remote locations. What if we could just send information that could unfold on site? AladDNA is an innovative genetic design aimed to encode the manufacturing instructions for several bioproducts as genetic information. It is also capable to process this information on demand as single output products in response to the user´s wishes. Just like a genie in a lamp!

This system uses DNA to store information inside a plant seed, acting as a miniaturized and flexible biofactory capable of producing different bioproducts such as interferon alpha or anti-choleric vaccines. Equipped with an optogenetically controlled decoder, AladDNA can activate the production of different high-added value products upon the reception of external signals based on combinations of light stimuli. AladDNA allows bioproduction in any condition avoiding prohibitive costs due to infrastructures.

No matter where you are or what you need, just ask your wish!

Because AladDNA has no frontiers!