Team:Buenos Aires/Pruebas

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
<!DOCTYPE html>
-
<head>
+
<html lang="en">
 +
    <head>
 +
        <title>Animated Content Menu with jQuery</title>
 +
<meta charset=utf-8>
 +
        <meta name="description" content="Animated Content Menu with jQuery" />
 +
        <meta name="keywords" content="jquery, animation, menu, navigation, template, slide out, effect, background image"/>
 +
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
 +
        <link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
 +
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
 +
 
<style type ='text/css'>
<style type ='text/css'>
Line 29: Line 39:
 +
#contenedor{
 +
height: 800px;
 +
color:#FFF;
 +
}
-
/* General Demo Style */
+
li{
-
body{
+
color:#FFF;
-
    background:#e6eecc url("https://static.igem.org/mediawiki/igem.org/2/29/Beige_paper.png") repeat top left;
+
-
color: #333;
+
-
font-family: 'Terminal Dosis', Arial, sans-serif;
+
-
font-size: 13px;
+
-
}
+
-
.container{
+
-
position:relative;
+
-
height:500px;
+
-
}
+
-
a{
+
-
color: #fff;
+
-
text-decoration: none;
+
-
}
+
-
.clr{
+
-
clear: both;
+
-
}
+
-
.content{
+
-
position:relative;
+
}
}
 +
h1{
h1{
-
margin:0px;
+
color:#FFF;
-
padding:20px;
+
border:none;
-
font-size:32px;
+
-
color:#000;
+
-
    text-shadow:1px 1px 1px rgba(255,255,255,0.9);
+
-
text-align:center;
+
-
font-weight:400;
+
-
}
+
-
h1 span{
+
-
    display:block;
+
-
font-size:14px;
+
-
color:#666;
+
-
    font-style:italic;
+
-
    font-family:Georgia, serif;
+
-
padding-top:5px;
+
-
}
+
-
/* Header Style */
+
-
.header{
+
-
font-family:'Arial Narrow', Arial, sans-serif;
+
-
line-height: 24px;
+
-
font-size: 11px;
+
-
background: #000;
+
-
opacity: 0.9;
+
-
text-transform: uppercase;
+
-
z-index: 9999;
+
-
position: relative;
+
-
-moz-box-shadow: 1px 0px 2px #000;
+
-
-webkit-box-shadow: 1px 0px 2px #000;
+
-
box-shadow: 1px 0px 2px #000;
+
-
}
+
-
.header a{
+
-
padding: 0px 10px;
+
-
letter-spacing: 1px;
+
-
color: #ddd;
+
-
display: block;
+
-
float: left;
+
-
}
+
-
.header a:hover{
+
-
color: #fff;
+
-
}
+
-
.header span.right{
+
-
float: right;
+
-
}
+
-
.header span.right a{
+
-
float: none;
+
-
display: inline;
+
}
}
 +
</style>
-
.ca-menu{
 
-
    padding:0;
 
-
    margin:20px auto;
 
-
    width: 1020px;
 
-
}
 
-
.ca-menu li{
 
-
    width: 230px;
 
-
    height: 230px;
 
-
    border: 10px solid #f6f6f6;
 
-
    overflow: hidden;
 
-
    position: relative;
 
-
    float:left;
 
-
    margin-right: 4px;
 
-
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 
-
    -webkit-border-radius: 125px;
 
-
    -moz-border-radius: 125px;
 
-
    border-radius: 125px;
 
-
    -webkit-transition: all 400ms linear;
 
-
    -moz-transition: all 400ms linear;
 
-
    -o-transition: all 400ms linear;
 
-
    -ms-transition: all 400ms linear;
 
-
    transition: all 400ms linear;
 
-
}
 
-
.ca-menu li:last-child{
 
-
    margin-right: 0px;
 
-
}
 
-
.ca-menu li a{
 
-
    text-align: left;
 
-
    width: 100%;
 
-
    height: 100%;
 
-
    display: block;
 
-
    color: #333;
 
-
    position: relative;
 
-
}
 
-
.ca-icon{
 
-
    font-family: 'WebSymbolsRegular', cursive;
 
-
    font-size: 40px;
 
-
    color: #f6f6f6;;
 
-
    line-height: 60px;
 
-
    position: absolute;
 
-
    width: 100%;
 
-
    height: 60px;
 
-
    left: 0px;
 
-
    top: 30px;
 
-
    text-align: center;
 
-
    -webkit-transition: all 400ms linear;
 
-
    -moz-transition: all 400ms linear;
 
-
    -o-transition: all 400ms linear;
 
-
    -ms-transition: all 400ms linear;
 
-
    transition: all 400ms linear;
 
-
}
 
-
.ca-main{
 
-
    font-size: 24px;
 
-
    position: absolute;
 
-
    top: 110px;
 
-
    height: 80px;
 
-
    width: 170px;
 
-
    left: 50%;
 
-
    margin-left: -85px;
 
-
    opacity: 0.8;
 
-
    text-align: center;
 
-
    padding-top:20px;
 
-
}
 
-
.ca-sub{
 
-
    text-align:center;
 
-
    color: #000;
 
-
    font-size: 26px;
 
-
    position: absolute;
 
-
    height: 80px;
 
-
    width: 170px;
 
-
    left: 50%;
 
-
    margin-left: -85px;
 
-
    top: 110px;
 
-
    opacity: 0;
 
-
    padding-top:20px;
 
-
   
 
-
    -webkit-transition: all 400ms linear;
 
-
    -moz-transition: all 400ms linear;
 
-
    -o-transition: all 400ms linear;
 
-
    -ms-transition: all 400ms linear;
 
-
    transition: all 400ms linear;
 
-
   
 
-
}
 
-
.ca-menu li:hover{
 
-
    background: #f7f7f7;
 
-
    border-color: #fff;
 
-
    -webkit-transform: rotate(360deg);
 
-
    -moz-transform: rotate(360deg);
 
-
    -o-transform: rotate(360deg);
 
-
    -ms-transform: rotate(360deg);
 
-
    transform: rotate(360deg);
 
-
}
 
-
.ca-menu li:hover .ca-icon{
 
-
    color: #555;
 
-
    font-size: 60px;
 
-
}
 
-
.ca-menu li:hover .ca-main{
 
-
    display: none;
 
-
}
 
-
.ca-menu li:hover .ca-sub{
 
-
    opacity: 0.8;
 
-
}
 
-
 
-
 
-
</style>
 
-
  <title>Creative CSS3 Animation Menus</title>
 
-
        <meta charset="UTF-8" />
 
-
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-
        <meta name="description" content="Creative CSS3 Animation Menus" />
 
-
        <meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
 
-
        <meta name="author" content="Codrops" />
 
-
        <link rel="shortcut icon" href="../favicon.ico">
 
-
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
 
-
        <link rel="stylesheet" type="text/css" href="css/style9.css" />
 
-
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
 
-
</head>
+
    </head>
 +
    <body>
-
<body>
+
<contenedor>
-
  <div class="container">
+
-
            <div class="header">
+
-
            </div>
+
<div id="ac_background" class="ac_background">
-
            <h1>Choose your destiny!<span> </span></h1>
+
<img class="ac_bgimage" src="http://s17.postimg.org/bp7obatz3/background.png" alt="Background"/>
-
            <div class="content">
+
<div class="ac_overlay"></div>
-
                <ul class="ca-menu">
+
<div class="ac_loading"></div>
-
                    <li>
+
</div>
-
                        <a href="#">
+
<div id="ac_content" class="ac_content">
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/f/f1/Tuerca-a.png""></span>
+
<h1><span>Buenos Aires</span>iGem</h1>
-
                            <div class="ca-content">
+
<div class="ac_menu">
-
                                <h2 class="ca-main">Project</h2>
+
<ul>
-
                                <h3 class="ca-sub">The path we've followed</h3>
+
<li>
-
                            </div>
+
<a href="http://s17.postimg.org/bp7obatz3/background.png">Project</a>
-
                        </a>
+
<div class="ac_subitem">
-
                    </li>
+
<span class="ac_close"></span>
-
                    <li>
+
<h2>Project</h2>
-
                        <a href="#">
+
<ul>
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/e/e1/Tuerca-v.png"></span>
+
<li>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</li>
-
                            <div class="ca-content">
+
<li><a class="ps" href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })">Open the page programatically.</a>Pepe</li>
-
                                <h2 class="ca-main">Results</h2>
+
<li>Smoked Salmon Terrine</li>
-
                                <h3 class="ca-sub">What we've obtained</h3>
+
<li>Tuna Ceviche</li>
-
                            </div>
+
<li>Wild Mushroom Flan</li>
-
                        </a>
+
<li>Almond Bruschetta</li>
-
                    </li>
+
<li>Green Chilli Canapee</li>
-
                    <li>
+
<li>Artichoke Rucula Salad</li>
-
                        <a href="#">
+
</ul>
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/2/21/Tuerca-r.png"></span>
+
</div>
-
                            <div class="ca-content">
+
</li>
-
                                <h2 class="ca-main">Human Practices</h2>
+
<li>
-
                                <h3 class="ca-sub">Social and Eco Helping</h3>
+
<a href="http://s17.postimg.org/bp7obatz3/background.png">Results</a>
-
                            </div>
+
<div class="ac_subitem">
-
                        </a>
+
<span class="ac_close"></span>
-
                    </li>
+
<h2>Results</h2>
-
                    <li>
+
<ul>
-
                        <a href="#">
+
<li>Drops of rain could be heard hitting the pane, which made him feel quite sad.</li>
-
                            <span class="ca-icon"><img src="https://static.igem.org/mediawiki/igem.org/d/d0/Tuerca-n.png"></span>
+
<li>>Wild Sea Bass Filet</li>
-
                            <div class="ca-content">
+
<li>Linguini and Clams</li>
-
                                <h2 class="ca-main">Team</h2>
+
<li>Shrimp and Crabmeat Alfredo</li>
-
                                <h3 class="ca-sub">The minds behind!</h3>
+
<li>Broiled Stuffed Flounder </li>
-
                            </div>
+
<li>Mussels Marinara</li>
-
                        </a>
+
<li>Grilled Mooloolaba Giant king prawns</li>
-
                    </li>
+
<li>Lobster Mornay</li>
-
                </ul>
+
<li>Fresh Shrimp Tart</li>
-
            </div><!-- content -->
+
</ul>
-
        </div>
+
</div>
-
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+
</li>
 +
<li>
 +
<a href="http://s17.postimg.org/bp7obatz3/background.png">Team</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Team</h2>
 +
<ul>
 +
<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
 +
<li>Ratatouille</li>
 +
<li>Le Tourin</li>
 +
<li>Wild Salmon Bruschetta</li>
 +
<li>Sweet Mustard Gratin</li>
 +
<li>Homemade Pizza Mediteranica</li>
 +
<li>Spanakopita Speciale</li>
 +
<li>Ricotta Spinach Cannelloni</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://s17.postimg.org/bp7obatz3/background.png">Desserts</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Desserts</h2>
 +
<ul>
 +
<li>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
 +
<li>New England Apple Crisp</li>
 +
<li>Southern Pecan Pie</li>
 +
<li>Brownie Fudge Sundae</li>
 +
<li>Strawberry Mousse Cake</li>
 +
<li>Vanilla Crème brûlée</li>
 +
<li>Lemon Sorbet</li>
 +
<li>Crunchy Almond Cake</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://s17.postimg.org/bp7obatz3/background.png">Wines</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Wines</h2>
 +
<ul>
 +
<li>A small river named Duden flows by their place and supplies it with the necessary regelialia.</li>
 +
<li>CARM Douro Reserva</li>
 +
<li>Fontodi Colli della Toscana Centrale Flaccianello</li>
 +
<li>Alban Syrah Edna Valley Alban Estate Reva</li>
 +
<li>Zaca Mesa Syrah Santa Ynez Valley</li>
 +
<li>Quinta do Vallado Douro Reserva</li>
 +
<li>Viticcio Chianti Classico Riserva</li>
 +
<li>Avignonesi Vino Nobile di Montepulciano</li>
 +
</ul>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="ac_footer">
 +
<a class="ac_left" href="http://tympanus.net/Tutorials/OverlayLikeEffect/"><span>&laquo; Previous Demo:</span> Overlay-like Effect with jQuery</a>
 +
<a href="http://tympanus.net/codrops/2011/03/09/animated-content-menu/">back to the Codrops tutorial</a>
 +
 +
</div>
 +
</div>
 +
<!-- The JavaScript -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>
 +
    <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
 +
    <script>
 +
        /* Default pageslide, moves to the right */
 +
        $(".first").pageslide();
 +
       
 +
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
 +
        $(".second").pageslide({ direction: "left", modal: true });
 +
    </script>
-
</body>
+
<script>
 +
$(document).ready(function(){
 +
  $("li").click(function(){
 +
var liId = $(this).attr('id');
 +
var namePrev = liId + "Text";
 +
var element = document.getElementById(namePrev);
 +
element.style.display="block";
 +
 
 +
  });
 +
});
 +
</script> 
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
var $ac_background = $('#ac_background'),
 +
$ac_bgimage = $ac_background.find('.ac_bgimage'),
 +
$ac_loading = $ac_background.find('.ac_loading'),
 +
 +
$ac_content = $('#ac_content'),
 +
$title = $ac_content.find('h1'),
 +
$menu = $ac_content.find('.ac_menu'),
 +
$mainNav = $menu.find('ul:first'),
 +
$menuItems = $mainNav.children('li'),
 +
totalItems = $menuItems.length,
 +
$ItemImages = new Array();
 +
 +
/*
 +
for this menu, we will preload all the images.
 +
let's add all the image sources to an array,
 +
including the bg image
 +
*/
 +
$menuItems.each(function(i) {
 +
$ItemImages.push($(this).children('a:first').attr('href'));
 +
});
 +
$ItemImages.push($ac_bgimage.attr('src'));
 +
 
 +
 +
var Menu = (function(){
 +
var init = function() {
 +
loadPage();
 +
initWindowEvent();
 +
},
 +
loadPage = function() {
 +
/*
 +
1- loads the bg image and all the item images;
 +
2- shows the bg image;
 +
3- shows / slides out the menu;
 +
4- shows the menu items;
 +
5- initializes the menu items events
 +
*/
 +
$ac_loading.show();//show loading status image
 +
$.when(loadImages()).done(function(){
 +
$.when(showBGImage()).done(function(){
 +
//hide the loading status image
 +
$ac_loading.hide();
 +
$.when(slideOutMenu()).done(function(){
 +
$.when(toggleMenuItems('up')).done(function(){
 +
initEventsSubMenu();
 +
});
 +
});
 +
});
 +
});
 +
},
 +
showBGImage = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
//adjusts the dimensions of the image to fit the screen
 +
adjustImageSize($ac_bgimage);
 +
$ac_bgimage.fadeIn(1000, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
slideOutMenu = function() {
 +
/* calculate new width for the menu */
 +
var new_w = $(window).width() - $title.outerWidth(true);
 +
return $.Deferred(
 +
function(dfd) {
 +
//slides out the menu
 +
$menu.stop()
 +
.animate({
 +
width : new_w + 'px'
 +
}, 700, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
/* shows / hides the menu items */
 +
toggleMenuItems = function(dir) {
 +
return $.Deferred(
 +
function(dfd) {
 +
/*
 +
slides in / out the items.
 +
different animation time for each one.
 +
*/
 +
$menuItems.each(function(i) {
 +
var $el_title = $(this).children('a:first'),
 +
marginTop, opacity, easing;
 +
if(dir === 'up'){
 +
marginTop = '0px';
 +
opacity = 1;
 +
easing = 'easeOutBack';
 +
}
 +
else if(dir === 'down'){
 +
marginTop = '60px';
 +
opacity = 0;
 +
easing = 'easeInBack';
 +
}
 +
$el_title.stop()
 +
.animate({
 +
marginTop : marginTop,
 +
opacity : opacity
 +
}, 200 + i * 200 , easing, function(){
 +
if(i === totalItems - 1)
 +
dfd.resolve();
 +
});
 +
});
 +
}
 +
).promise();
 +
},
 +
initEventsSubMenu = function() {
 +
$menuItems.each(function(i) {
 +
var $item = $(this), // the <li>
 +
$el_title = $item.children('a:first'),
 +
el_image = $el_title.attr('href'),
 +
$sub_menu = $item.find('.ac_subitem'),
 +
$ac_close = $sub_menu.find('.ac_close');
 +
 +
/* user clicks one item : appetizers | main course | desserts | wines | specials */
 +
$el_title.bind('click.Menu', function(e) {
 +
$.when(toggleMenuItems('down')).done(function(){
 +
openSubMenu($item, $sub_menu, el_image);
 +
});
 +
return false;
 +
});
 +
/* closes the submenu */
 +
$ac_close.bind('click.Menu', function(e) {
 +
closeSubMenu($sub_menu);
 +
return false;
 +
});
 +
});
 +
},
 +
openSubMenu = function($item, $sub_menu, el_image) {
 +
$sub_menu.stop()
 +
.animate({
 +
height : '400px',
 +
marginTop : '-200px'
 +
}, 400, function() {
 +
//the bg image changes
 +
showItemImage(el_image);
 +
});
 +
},
 +
/* changes the background image */
 +
showItemImage = function(source) {
 +
//if its the current one return
 +
if($ac_bgimage.attr('src') === source)
 +
return false;
 +
 +
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
 +
$itemImage.insertBefore($ac_bgimage);
 +
adjustImageSize($itemImage);
 +
$ac_bgimage.fadeOut(1500, function() {
 +
$(this).remove();
 +
$ac_bgimage = $itemImage;
 +
});
 +
$itemImage.fadeIn(1500);
 +
},
 +
closeSubMenu = function($sub_menu) {
 +
$sub_menu.stop()
 +
.animate({
 +
height : '0px',
 +
marginTop : '0px'
 +
}, 400, function() {
 +
//show items
 +
toggleMenuItems('up');
 +
});
 +
},
 +
/*
 +
on window resize, ajust the bg image dimentions,
 +
and recalculate the menus width
 +
*/
 +
initWindowEvent = function() {
 +
/* on window resize set the width for the menu */
 +
$(window).bind('resize.Menu' , function(e) {
 +
adjustImageSize($ac_bgimage);
 +
/* calculate new width for the menu */
 +
var new_w = $(window).width() - $title.outerWidth(true);
 +
$menu.css('width', new_w + 'px');
 +
});
 +
},
 +
/* makes an image "fullscreen" and centered */
 +
adjustImageSize = function($img) {
 +
var w_w = $(window).width(),
 +
w_h = $(window).height(),
 +
r_w = w_h / w_w,
 +
i_w = $img.width(),
 +
i_h = $img.height(),
 +
r_i = i_h / i_w,
 +
new_w,new_h,
 +
new_left,new_top;
 +
 +
if(r_w > r_i){
 +
new_h = w_h;
 +
new_w = w_h / r_i;
 +
}
 +
else{
 +
new_h = w_w * r_i;
 +
new_w = w_w;
 +
}
 +
 +
$img.css({
 +
width : new_w + 'px',
 +
height : new_h + 'px',
 +
left : (w_w - new_w) / 2 + 'px',
 +
top : (w_h - new_h) / 2 + 'px'
 +
});
 +
},
 +
/* preloads a set of images */
 +
loadImages = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
var total_images = $ItemImages.length,
 +
loaded = 0;
 +
for(var i = 0; i < total_images; ++i){
 +
$('<img/>').load(function() {
 +
++loaded;
 +
if(loaded === total_images)
 +
dfd.resolve();
 +
}).attr('src' , $ItemImages[i]);
 +
}
 +
}
 +
).promise();
 +
};
 +
 +
return {
 +
init : init
 +
};
 +
})();
 +
 +
/*
 +
call the init method of Menu
 +
*/
 +
Menu.init();
 +
});
 +
</script>
 +
    </body>
</html>
</html>

Revision as of 17:13, 21 May 2013

<!DOCTYPE html> Animated Content Menu with jQuery

Background

Buenos AiresiGem

  • Project

    Project

    • A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
    • Open the page programatically.Pepe
    • Smoked Salmon Terrine
    • Tuna Ceviche
    • Wild Mushroom Flan
    • Almond Bruschetta
    • Green Chilli Canapee
    • Artichoke Rucula Salad
  • Results

    Results

    • Drops of rain could be heard hitting the pane, which made him feel quite sad.
    • >Wild Sea Bass Filet
    • Linguini and Clams
    • Shrimp and Crabmeat Alfredo
    • Broiled Stuffed Flounder
    • Mussels Marinara
    • Grilled Mooloolaba Giant king prawns
    • Lobster Mornay
    • Fresh Shrimp Tart
  • Team

    Team

    • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
    • Ratatouille
    • Le Tourin
    • Wild Salmon Bruschetta
    • Sweet Mustard Gratin
    • Homemade Pizza Mediteranica
    • Spanakopita Speciale
    • Ricotta Spinach Cannelloni
  • Desserts

    Desserts

    • It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
    • New England Apple Crisp
    • Southern Pecan Pie
    • Brownie Fudge Sundae
    • Strawberry Mousse Cake
    • Vanilla Crème brûlée
    • Lemon Sorbet
    • Crunchy Almond Cake
  • Wines

    Wines

    • A small river named Duden flows by their place and supplies it with the necessary regelialia.
    • CARM Douro Reserva
    • Fontodi Colli della Toscana Centrale Flaccianello
    • Alban Syrah Edna Valley Alban Estate Reva
    • Zaca Mesa Syrah Santa Ynez Valley
    • Quinta do Vallado Douro Reserva
    • Viticcio Chianti Classico Riserva
    • Avignonesi Vino Nobile di Montepulciano
« Previous Demo: Overlay-like Effect with jQuery back to the Codrops tutorial

Retrieved from "http://2013.igem.org/Team:Buenos_Aires/Pruebas"