Team:Valencia Biocampus/ArtAndMore

From 2014.igem.org

(Difference between revisions)
(→Art & More)
 
(61 intermediate revisions not shown)
Line 5: Line 5:
<html>
<html>
 +
<style>
<style>
-
.pics {
+
.thumbnail{
-
    margin:auto;
+
overflow:hidden;
-
    margin:0px auto;
+
margin:3px;
-
    position:relative;
+
display:inline-block;
-
    height:500px;
+
float:none;
-
    width:800px;
+
-
    list-style: none;
+
-
}
+
-
.pics a {
+
-
    background:#fff;
+
-
    display:inline;
+
-
    float:left;
+
-
    width:auto;
+
-
    padding:10px 10px 30px 10px;
+
-
    text-align:center;
+
-
    text-decoration:none;
+
-
    color:#333;
+
-
    font-size:28x;
+
-
    font-family:'levirebrushedregular', Georgia, 'Droid Serif';
+
-
    font-weight:normal;
+
-
    -webkit-box-shadow:0px 0px 10px rgba(0,0,0,1);
+
-
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,1);
+
-
    box-shadow:0px 0px 10px rgba(0,0,0,1);
+
-
    -webkit-transition:all .30s;
+
-
    -moz-transition:all .30s;
+
-
    -o-transition:all .30s;
+
-
    transition:all .30s;
+
-
    position:absolute;
+
-
}
+
-
.pics img {
+
-
    display:block;
+
-
    padding-bottom:20px;
+
-
    width:200px;
+
-
}
+
-
.pics a:hover {
+
-
    z-index:100;
+
-
}
+
-
.pics a:after {
+
-
    content:attr(title);
+
}
}
 +
.bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;-webkit-transform-origin:left center;-moz-transform-origin:left center;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top}.bb-content,.bb-inner,.bb-outer,.bb-page>div{position:absolute;height:100%;width:100%;top:0;left:0;background:#5a2c33}.bb-outer{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.bb-vertical .bb-content{width:200%}.bb-horizontal .bb-content{height:200%}.bb-page>div{width:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.bb-page>div:not(:only-child){-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.bb-vertical .bb-back{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-horizontal .bb-back{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);transform:rotateX(-180deg)}.bb-outer{width:100%;overflow:hidden;z-index:999}.bb-flipoverlay,.bb-overlay{background-color:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.bb-flipoverlay{background-color:rgba(0,0,0,.2)}.bb-bookblock.bb-vertical>div.bb-page:first-child,.bb-bookblock.bb-vertical>div.bb-page:first-child .bb-back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-vertical .bb-front .bb-content{left:-100%}.bb-horizontal .bb-front .bb-content{top:-100%}.bb-vertical .bb-flip-initial,.bb-vertical .bb-flip-next{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);transform:rotateY(0deg)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.bb-vertical .bb-flip-next-end{-webkit-transform:rotateY(-15deg);-moz-transform:rotateY(-15deg);transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{-webkit-transform:rotateY(-165deg);-moz-transform:rotateY(-165deg);transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{-webkit-transform:rotateX(15deg);-moz-transform:rotateX(15deg);transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{-webkit-transform:rotateX(165deg);-moz-transform:rotateX(165deg);transform:rotateX(165deg)}.bb-item{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background:#5a2c33}.no-js .bb-bookblock,.no-js ul.bb-custom-grid li{width:auto;height:auto}.no-js .bb-item{display:block;position:relative}
 +
.bb-bookblock{width:700px;height:450px}ul.bb-custom-grid{list-style:none;margin:0 auto 30px;padding:0;width:740px;}ul.bb-custom-grid:after,ul.bb-custom-grid:before{content:" ";display:table}ul.bb-custom-grid:after{clear:both}ul.bb-custom-grid li{float:left;width:700px;height:480px;padding:10px 20px 50px;background:url('https://static.igem.org/mediawiki/2014/7/78/VBT_loadingIcon.gif') #5a2c33 no-repeat center center; position:relative;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin-bottom:20px;box-shadow:0 1px 2px rgba(0,0,0,.2)}ul.bb-custom-grid li:nth-child(odd){margin-right:20px}ul.bb-custom-grid li:after,ul.bb-custom-grid li:before{content:'';position:absolute;z-index:-2;bottom:15px;left:10px;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}ul.bb-custom-grid li:after{right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}ul.bb-custom-grid li a{display:block}ul.bb-custom-grid li h3{color:#9a9b92;margin:0;padding:0;text-transform:uppercase;font-weight:700;font-size:14px;line-height:35px;letter-spacing:1px}ul.bb-custom-grid nav{text-align:center;margin-top:12px;padding-bottom:5px}ul.bb-custom-grid nav span{display:inline-block;width:12px;height:12px;border-radius:50%;background:#f0f0f0;margin:3px;cursor:pointer;box-shadow:inset 0 1px 1px rgba(0,0,0,.2),0 2px 1px rgba(255,255,255,.9)}ul.bb-custom-grid nav span.bb-current{background:#6EFF6E}
 +
</style>
-
/* Pictures placement, scaling and rotation */
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Valencia_Biocampus/Templates/js/bookblock&action=raw&ctype=text/javascript"></script>
-
.pics li:nth-child(1n) a {
+
   <div class="container withBackground">
-
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(30deg) scale(0.7,0.7);
+
-
    transform:rotate(30deg) scale(0.7,0.7);
+
-
    top:0%;
+
-
    left:70%;
+
-
}
+
-
.pics li:nth-child(2n) a {
+
-
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
+
-
    transform:rotate(-30deg) scale(0.7,0.7);
+
-
    top:40%;
+
-
    left:80%;
+
-
}
+
-
.pics li:nth-child(3n) a {
+
-
    -webkit-transform:rotate(10deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(10deg) scale(0.7,0.7);
+
-
    transform:rotate(10deg) scale(0.7,0.7);
+
-
    top:55%;
+
-
    left:-10%;
+
-
}
+
-
.pics li:nth-child(4n) a {
+
-
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
+
-
    transform:rotate(-30deg) scale(0.7,0.7);
+
-
    top:0%;
+
-
    left:-10%;
+
-
}
+
-
.pics li:nth-child(5n) a {
+
-
    -webkit-transform:rotate(-20deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(-20deg) scale(0.7,0.7);
+
-
    transform:rotate(-20deg) scale(0.7,0.7);
+
-
    top:65%;
+
-
    left:24%;
+
-
    z-index:3;
+
-
}
+
-
.pics li:nth-child(6n) a {
+
-
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(30deg) scale(0.7,0.7);
+
-
    transform:rotate(30deg) scale(0.7,0.7);
+
-
    top:60%;
+
-
    left:55%;
+
-
}
+
-
.pics li:nth-child(7n) a {
+
-
    -webkit-transform:rotate(10deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(10deg) scale(0.7,0.7);
+
-
    transform:rotate(10deg) scale(0.7,0.7);
+
-
    top:0%;
+
-
    left:25%;
+
-
}
+
-
 
+
-
.pics li:nth-child(8n) a {
+
-
    -webkit-transform:rotate(-10deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(-10deg) scale(0.7,0.7);
+
-
    transform:rotate(-10deg) scale(0.7,0.7);
+
-
    top:25%;
+
-
    left:48%;
+
-
}
+
-
 
+
-
.pics li:nth-child(9n) a {
+
-
    -webkit-transform:rotate(-8deg) scale(0.7,0.7);
+
-
    -moz-transform:rotate(-8deg) scale(0.7,0.7);
+
-
    transform:rotate(-8deg) scale(0.7,0.7);
+
-
    top:32%;
+
-
    left:9%;
+
-
}
+
-
/* Pictures rotation and scaling on hover */
+
-
 
+
-
.pics li:nth-child(n) a:hover {
+
-
    -webkit-transform:rotate(0deg) scale(1,1);
+
-
    -moz-transform:rotate(0deg) scale(1,1);
+
-
    transform:rotate(0deg) scale(1,1);
+
-
}
+
-
</style>
+
-
   <div class="container">
+
</html>
</html>
= Art & More=
= Art & More=
Line 137: Line 33:
         <div class="tab-pane fade in active" id="Video">
         <div class="tab-pane fade in active" id="Video">
             <h2>Video</h2>
             <h2>Video</h2>
-
 
+
<iframe class="col-sm-6" style="height:315px" src="//www.youtube.com/embed/k4f9MXHQ3rs" frameborder="0" allowfullscreen></iframe>
-
<iframe width="560" height="315" class="center-block" src="//www.youtube.com/embed/k4f9MXHQ3rs" frameborder="0" allowfullscreen></iframe>
+
<iframe class="col-sm-6" style="height:315px" src="//www.youtube.com/embed/LvFh5ys_BVE" frameborder="0" allowfullscreen></iframe>
-
 
+
-
            <p>All our videos coming soon</p>
+
         </div>
         </div>
         <div class="tab-pane fade" id="Photo">
         <div class="tab-pane fade" id="Photo">
             <h2>Photo</h2>
             <h2>Photo</h2>
-
             <p>All our pictures coming soon</p>
+
             <div style="text-align:center">
 +
<a href="https://static.igem.org/mediawiki/2014/a/aa/1381961_664044267035783_8751816581880977398_n.jpg" rel="lightbox-pics" title="The Team!" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/a/aa/1381961_664044267035783_8751816581880977398_n.jpg" alt="Photo 19"/></a> 
 +
 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/6/60/Vbt_Art%26More%281%29.jpg" rel="lightbox-pics" title="Paula's collection of brushes" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/6/60/Vbt_Art%26More%281%29.jpg" alt="Photo 1"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/0/0b/Vbt_Art%26More%282%29.jpg" rel="lightbox-pics" title="Standard teddy bears" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/0/0b/Vbt_Art%26More%282%29.jpg" alt="Photo 2"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/a/a4/Vbt_Art%26More%283%29.jpg" rel="lightbox-pics" title="Watercolor Stool" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/a/a4/Vbt_Art%26More%283%29.jpg" alt="Photo 3"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/d/dc/Vbt_Art%26More%284%29.jpg" rel="lightbox-pics" title="Watercolors" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/d/dc/Vbt_Art%26More%284%29.jpg" alt="Photo 4"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/4/40/Vbt_Art%26More%285%29.jpg" rel="lightbox-pics" title="First draft of the child - Paula Bonet Style" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/4/40/Vbt_Art%26More%285%29.jpg" alt="Photo 5"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/9/93/Vbt_Art%26More%286%29.jpg" rel="lightbox-pics" title="Engineering, Wetlab and Art" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/9/93/Vbt_Art%26More%286%29.jpg" alt="Photo 6"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/e/ec/Vbt_Art%26More%287%29.jpg" rel="lightbox-pics" title="Miniature stools on a Petri dish" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/e/ec/Vbt_Art%26More%287%29.jpg" alt="Photo 7"/></a>
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/a/a6/Vbt_Art%26More%288%29.jpg" rel="lightbox-pics" title="Growing stools" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/a/a6/Vbt_Art%26More%288%29.jpg" alt="Photo 8"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/b/b9/Vbt_Art%26More%289%29.jpg" rel="lightbox-pics" title="Untidy" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/b/b9/Vbt_Art%26More%289%29.jpg" alt="Photo 9"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/a/af/Vbt_Art%26More%2810%29.jpg" rel="lightbox-pics" title="3D printer" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/a/af/Vbt_Art%26More%2810%29.jpg" alt="Photo 10"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/4/4a/Vbt_Art%26More%2811%29.jpg" rel="lightbox-pics" title="Printing our stools" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/4/4a/Vbt_Art%26More%2811%29.jpg" alt="Photo 11"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/3/3c/Vbt_Art%26More%2812%29.jpg" rel="lightbox-pics" title="In detail" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/3/3c/Vbt_Art%26More%2812%29.jpg" alt="Photo 12"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/f/f9/Vbt_Art%26More%2813%29.jpg" rel="lightbox-pics" title="Designing the stools" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/f/f9/Vbt_Art%26More%2813%29.jpg" alt="Photo 13"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/2/23/Vbt_Art%26More%2814%29.jpg" rel="lightbox-pics" title="Science, art and music" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/1/1a/Vbt_Art%26More%2815%292.jpg" alt="Photo 14"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/4/49/Vbt_Art%26More%2815%29.jpg" rel="lightbox-pics" title="The legs are almost finished" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/4/49/Vbt_Art%26More%2815%29.jpg" alt="Photo 15"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/d/d3/Vbt_Art%26More%2816%29.jpg" rel="lightbox-pics" title="This is not an alien, it is our tool robot!" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/d/d3/Vbt_Art%26More%2816%29.jpg" alt="Photo 16"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/6/64/Vbt_Art%26More%2817%29.jpg" rel="lightbox-pics" title="Too many cables" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/6/64/Vbt_Art%26More%2817%29.jpg" alt="Photo 17"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/1/1a/Vbt_Art%26More%2818%29.jpg" rel="lightbox-pics" title="Serial injectors" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/1/1a/Vbt_Art%26More%2818%29.jpg" alt="Photo 18"/></a> 
 +
 
 +
<a href="https://static.igem.org/mediawiki/2014/3/33/Vbt_Art%26More%2819%29.jpg" rel="lightbox-pics" title="Servos resting" class="thumbnail col-sm-2">
 +
<img src="https://static.igem.org/mediawiki/2014/3/33/Vbt_Art%26More%2819%29.jpg" alt="Photo 19"/></a> 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
            </div>  
 +
 
-
<ul class="pics">
 
-
<li><a href="#" title="Divya Chugani"><img src="https://dl.dropboxusercontent.com/content_link/jZJgaAZbAOKCjgRmakm1B4rmN6edH9xjlfvZ4REHUeuhk2jPVQpGyTyMM7nZg92c" /></a></li>
 
-
<li><a href="#" title="Pedro Dorado"><img src="https://dl.dropboxusercontent.com/content_link/QGUgAwcEeGLWSwQFXsCKLIpc1BWixoCpGOdZKjITGI80ThUVi5X7zgjTcjTlcxiI" /></a></li>
 
-
<li><a href="#" title="Juan Faus"><img src="https://dl.dropboxusercontent.com/content_link/muoheaUxcRZEKbxGNdbXYZhH6wdLAep3fwCFQ15LnBvMTkj3ywVT68qBPMwBAe7T" /></a></li>
 
-
<li><a href="#" title="Alba Frías"><img src="https://dl.dropboxusercontent.com/content_link/Cn0v3yAZrCmysvSZTW4pSzorLAmBFSdMXUCPBqaLWKMeVLpGRqzYELl6HmLiQ7bc" /></a></li>
 
-
<li><a href="#" title="Marco Fritschi"><img src="https://dl.dropboxusercontent.com/content_link/HhsX4Ect5RpBE0WEyjVHHz9x4T6J2nkT4m0z8xNOhVQljeF9DSpluDKwbpEFQ5UF" /></a></li>
 
-
<li><a href="#" title="Xavi Molero"><img src="https://dl.dropboxusercontent.com/content_link/jZJgaAZbAOKCjgRmakm1B4rmN6edH9xjlfvZ4REHUeuhk2jPVQpGyTyMM7nZg92c" /></a></li>
 
-
<li><a href="#" title="Ernesto Segredo"><img src="https://dl.dropboxusercontent.com/content_link/jZJgaAZbAOKCjgRmakm1B4rmN6edH9xjlfvZ4REHUeuhk2jPVQpGyTyMM7nZg92c" /></a></li>
 
-
<li><a href="#" title="Kristie Tanner"><img src="https://dl.dropboxusercontent.com/content_link/jZJgaAZbAOKCjgRmakm1B4rmN6edH9xjlfvZ4REHUeuhk2jPVQpGyTyMM7nZg92c" /></a></li>
 
-
<li><a href="#" title="Paula Villaescusa"><img src="https://dl.dropboxusercontent.com/content_link/jZJgaAZbAOKCjgRmakm1B4rmN6edH9xjlfvZ4REHUeuhk2jPVQpGyTyMM7nZg92c" /></a></li>
 
-
</ul>
 
         </div>
         </div>
         <div class="tab-pane fade" id="Drawings">
         <div class="tab-pane fade" id="Drawings">
             <h2>Drawings</h2>
             <h2>Drawings</h2>
-
            <p>A compilation of all our drawings</p>
+
<ul class="bb-custom-grid center-block" id="bb-custom-grid">
 +
<li>
 +
<div class="bb-bookblock">
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/7/77/Vbt_drawings1.jpg" alt="image01" /></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/b/b4/Vbt_drawings2.jpg" alt="image02"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/2/27/Vbt_drawings3.jpg" alt="image03"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/4/41/Vbt_drawings4.jpg" alt="image04"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/9/9f/Vbt_drawings5.jpg" alt="image05"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/d/d5/Vbt_drawings6.jpg" alt="image06"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/3/30/Vbt_drawings7.jpg" alt="image07"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/5/55/Vbt_drawings8.jpg" alt="image08"/></div>
 +
<div class="bb-item"><img src="https://static.igem.org/mediawiki/2014/b/b6/Vbt_drawings9.jpg" alt="image09"/></div>
 +
</div>
 +
<nav>
 +
<span class="bb-current"></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
</nav>
 +
</li>
 +
</ul>
 +
 
 +
<script type="text/javascript">
 +
var Page = (function() {
 +
 
 +
var $grid = $( '#bb-custom-grid' );
 +
 
 +
return {
 +
init : function() {
 +
$grid.find( 'div.bb-bookblock' ).each( function( i ) {
 +
 +
var $bookBlock = $( this ),
 +
$nav = $bookBlock.next().children( 'span' ),
 +
bb = $bookBlock.bookblock( {
 +
speed : 600,
 +
shadows : false
 +
} );
 +
 +
// add navigation events
 +
$nav.each( function( i ) {
 +
$( this ).on( 'click touchstart', function( event ) {
 +
var $dot = $( this );
 +
$nav.removeClass( 'bb-current' );
 +
$dot.addClass( 'bb-current' );
 +
$bookBlock.bookblock( 'jump', i + 1 );
 +
return false;
 +
} );
 +
} );
 +
 +
// add swipe events
 +
$bookBlock.children().on( {
 +
'swipeleft' : function( event ) {
 +
$bookBlock.bookblock( 'next' );
 +
return false;
 +
},
 +
'swiperight' : function( event ) {
 +
$bookBlock.bookblock( 'prev' );
 +
return false;
 +
}
-
<div id="bb-bookblock" class="bb-bookblock">
+
} );
-
<div class="bb-item">
+
-
<a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a>
+
} );
-
</div>
+
}
-
<div class="bb-item">
+
};
-
<a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a>
+
-
</div>
+
-
<div class="bb-item">
+
-
<a href="#"><img src="images/demo1/3.jpg" alt="image03"/></a>
+
-
</div>
+
-
<div class="bb-item">
+
-
<a href="#"><img src="images/demo1/4.jpg" alt="image04"/></a>
+
-
</div>
+
-
<div class="bb-item">
+
-
<a href="#"><img src="images/demo1/5.jpg" alt="image05"/></a>
+
-
</div>
+
-
</div>
+
-
<nav>
+
-
<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
+
-
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
+
-
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
+
-
<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
+
-
</nav>
+
 +
})();
 +
$(window).load(function() {
 +
Page.init();
 +
});
 +
 +
</script>
         </div>
         </div>
         <div class="tab-pane fade" id="EpigeneticMusic">
         <div class="tab-pane fade" id="EpigeneticMusic">
Line 194: Line 196:
==Epigenetic Music==
==Epigenetic Music==
<html>
<html>
 +
<iframe width="560" height="315" class="center-block" style="margin-bottom:20px"src="//www.youtube.com/embed/ZyuC0JNW8mw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<p>
<p>
     The term <strong>epigenetic </strong>refers to heritable changes in gene expression, and therefore, in the phenotype of a cell, that don’t imply
     The term <strong>epigenetic </strong>refers to heritable changes in gene expression, and therefore, in the phenotype of a cell, that don’t imply
Line 228: Line 231:
</p>
</p>
<p>
<p>
-
“Without music, life would be a mistake.” - Friedrich Nietzsche, Twilight of the Idols, Or, How to Philosophize With the Hammer  
+
“<em>Without music, life would be a mistake.</em>” - Friedrich Nietzsche, Twilight of the Idols, Or, How to Philosophize With the Hammer  
</p>
</p>
         </div>
         </div>

Latest revision as of 00:48, 18 October 2014

Art & More

Video

Drawings

  • image01
    image02
    image03
    image04
    image05
    image06
    image07
    image08
    image09

Epigenetic Music

The term epigenetic refers to heritable changes in gene expression, and therefore, in the phenotype of a cell, that don’t imply modifications in the DNA sequence. Like many eukaryotic cells, bacteria also use epigenetic DNA modifications to control gene expression (i.e. methylation).

LacZ has been “translated” without modification in to music, but the melody makes little sense. That is why we are going to apply the epigenetic concept to music, by translating to the musical realm the modifications that occur in bacteria in order to regulate gene expression. That way, correct expression of the melody will be achieved by regulating notes the following way:

- Metilation. Represses gene expression, as it represses the expression of a musical note by reducing the original length.

- Hypermetilation. Silences promoters, and therefore, silences a musical note.

Finally, we will use a post-transcriptional control mechanism by sRNA that is used in certain bacteria to activate gene expression. In music, this mechanism can increase the length of a note.

Integral serialism is a musical current that arose mid-twentieth century in Europe and United States. It emerged as a novel type of musical annotation that can be considered a variation of Schönberg’s 12-tone music (an attempt to erase the system of tonality). The 12-tone music annotation system stipulates that a note cannot be used again until all other 11 notes of the chromatic scale are used. Serialism can be applied to the use of fewer than 12 tones, and the result is a musical piece comprising ordered sets. Before starting to compose, everything is set by default, yielding a musical composition far from traditional.

We could consider our musical composition as a variation of integral serialism, as it is also set by default, following a conserved DNA sequence: the LacZ gene. Therefore, we could call this annotation system: genomic serialism.

“Without music, life would be a mistake.” - Friedrich Nietzsche, Twilight of the Idols, Or, How to Philosophize With the Hammer

Retrieved from "http://2014.igem.org/Team:Valencia_Biocampus/ArtAndMore"