Team:UPO-Sevilla/test
From 2011.igem.org
(45 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <style type="text/css"> | ||
+ | /* | ||
+ | AnythingSlider v1.7+ Default (base) theme | ||
+ | By Chris Coyier: http://css-tricks.com | ||
+ | with major improvements by Doug Neiner: http://pixelgraphics.us/ | ||
+ | based on work by Remy Sharp: http://jqueryfordesigners.com/ | ||
+ | */ | ||
- | + | /***************************** | |
+ | SET DEFAULT DIMENSIONS HERE | ||
+ | *****************************/ | ||
+ | /* change the ID to match your slider */ | ||
+ | #slider { | ||
+ | width: 700px; | ||
+ | height: 390px; | ||
+ | list-style: none; | ||
+ | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | /* Opera width restriction */ | ||
+ | .anythingBase { max-width: 32766px; } | ||
- | + | /***************** | |
- | + | SET COLORS HERE | |
- | + | *****************/ | |
- | + | /**** Default state (no keyboard focus) ****/ | |
+ | /* slider window - top & bottom borders, default state */ | ||
+ | div.anythingSlider .anythingWindow { | ||
+ | border-top: 3px solid #777; | ||
+ | border-bottom: 3px solid #777; | ||
+ | } | ||
+ | /* Navigation buttons, default state */ | ||
+ | div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a { | ||
+ | background: #777; | ||
+ | color: #000; | ||
+ | } | ||
+ | /* start-stop button, stopped, default state */ | ||
+ | div.anythingSlider .start-stop { | ||
+ | background-color: #040; | ||
+ | color: #fff; | ||
+ | } | ||
+ | /* start-stop button, playing, default state */ | ||
+ | div.anythingSlider .start-stop.playing { | ||
+ | background-color: #800; | ||
+ | } | ||
+ | /* start-stop button, default hovered text color (when visible) */ | ||
+ | div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { | ||
+ | color: #ddd; | ||
+ | } | ||
- | + | /**** Active State (slider has keyboard focus) ****/ | |
- | + | /* slider window - top & bottom borders, active state */ | |
- | + | div.anythingSlider.activeSlider .anythingWindow { | |
- | + | border-color: #7C9127; | |
- | + | } | |
- | + | /* Navigation buttons, active state */ | |
- | + | div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a { | |
- | + | background-color: #7C9127; | |
- | + | } | |
- | + | /* start-stop button, stopped, active state */ | |
- | + | div.anythingSlider .start-stop { | |
- | + | background-color: #080; | |
+ | color: #fff; | ||
+ | } | ||
+ | /* start-stop button, playing, active state */ | ||
+ | div.anythingSlider .start-stop.playing { | ||
+ | background-color: #d00; | ||
+ | } | ||
+ | /* start-stop button, active slider hovered text color (when visible) */ | ||
+ | div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { | ||
+ | color: #fff; | ||
+ | } | ||
- | + | /*********************** | |
- | + | COMMON SLIDER STYLING | |
- | + | ***********************/ | |
- | + | /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */ | |
- | + | div.anythingSlider { | |
- | + | display: block; | |
- | + | margin: 0 auto; | |
- | + | overflow: visible !important; /* needed for Opera and Safari */ | |
- | + | position: relative; | |
- | + | padding: 0 45px 28px 45px; | |
+ | } | ||
+ | /* anythingSlider viewport window */ | ||
+ | div.anythingSlider .anythingWindow { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | /* anythingSlider base (original element) */ | ||
+ | .anythingBase { | ||
+ | background: transparent; | ||
+ | list-style: none; | ||
+ | position: absolute; | ||
+ | overflow: visible !important; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | /* all panels inside the slider */ | ||
+ | .anythingBase .panel { | ||
+ | background: transparent; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .anythingBase .panel.vertical { | ||
+ | float: none; | ||
+ | } | ||
- | + | /* Navigation Arrows */ | |
- | + | div.anythingSlider .arrow { | |
+ | top: 50%; | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | } | ||
+ | div.anythingSlider .arrow a { | ||
+ | display: block; | ||
+ | height: 140px; | ||
+ | margin: -70px 0 0 0; /* half height of image */ | ||
+ | width: 45px; | ||
+ | text-align: center; | ||
+ | outline: 0; | ||
+ | background: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png) no-repeat; | ||
+ | } | ||
+ | /* hide text, target the span so IE7 doesn't text-indent the link */ | ||
+ | div.anythingSlider .arrow a span { display: block; text-indent: -9999px; } | ||
+ | /* back arrow */ | ||
+ | div.anythingSlider .back { left: 0; } | ||
+ | div.anythingSlider .back a { background-position: left top; } | ||
+ | div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; } | ||
+ | div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ | ||
+ | /* forward arrow */ | ||
+ | div.anythingSlider .forward { right: 0; } | ||
+ | div.anythingSlider .forward a { background-position: right top; } | ||
+ | div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; } | ||
+ | div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ | ||
- | + | /* Navigation Links */ | |
- | + | div.anythingSlider .anythingControls { outline: 0; display: none; } | |
- | + | div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; } | |
- | + | div.anythingSlider .anythingControls ul li { display: inline; } | |
+ | div.anythingSlider .anythingControls ul a { | ||
+ | font: 11px/18px Georgia, Serif; | ||
+ | display: inline-block; | ||
+ | text-decoration: none; | ||
+ | padding: 2px 8px; | ||
+ | height: 18px; | ||
+ | margin: 0 5px 0 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png); | ||
+ | background-position: center -288px ; | ||
+ | background-repeat: repeat-x; | ||
+ | text-align: center; | ||
+ | outline: 0; | ||
+ | border-radius: 0 0 5px 5px; | ||
+ | -moz-border-radius: 0 0 5px 5px; | ||
+ | -webkit-border-radius: 0 0 5px 5px; | ||
+ | } | ||
+ | div.anythingSlider .anythingControls ul a:hover { | ||
+ | background-image: none; | ||
+ | } | ||
+ | /* Navigation size window */ | ||
+ | div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; } | ||
- | + | /* slider autoplay right-to-left, reverse order of nav links to look better */ | |
- | + | div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ | |
+ | div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ | ||
+ | div.anythingSlider.rtl .anythingWindow { | ||
+ | direction: ltr; | ||
+ | unicode-bidi: bidi-override; | ||
+ | } | ||
+ | /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ | ||
- | + | /* Autoplay Start/Stop button */ | |
- | + | div.anythingSlider .start-stop { | |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/0/06/UPOSevillaDefault.png); | |
+ | background-position: center -288px; | ||
+ | background-repeat: repeat-x; | ||
+ | padding: 2px 5px; | ||
+ | width: 40px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | float: right; | ||
+ | z-index: 100; | ||
+ | outline: 0; | ||
+ | border-radius: 0 0 5px 5px; | ||
+ | -moz-border-radius: 0 0 5px 5px; | ||
+ | -webkit-border-radius: 0 0 5px 5px; | ||
+ | } | ||
+ | /* hide cell shading on hover - makes the button appear to come forward */ | ||
+ | div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; } | ||
- | + | /* probably not necessary, but added just in case */ | |
- | + | div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { | |
+ | transition-duration: 0; | ||
+ | -o-transition-duration: 0; | ||
+ | -moz-transition-duration: 0; | ||
+ | -webkit-transition-duration: 0; | ||
+ | } | ||
- | + | /* | |
- | + | AnythingSlider v1.5.10 Minimalist Round Theme | |
+ | By Rob Garrison | ||
+ | */ | ||
- | + | /****** SET COLORS HERE *******/ | |
- | + | /* Default State */ | |
- | + | div.anythingSlider-minimalist-round .anythingWindow { | |
+ | border-top: 3px solid #333; | ||
+ | border-bottom: 3px solid #333; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .anythingControls ul a { | ||
+ | border: 1px solid #000; | ||
+ | background: #333; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .anythingControls ul a:hover, div.anythingSlider-minimalist-round .anythingControls ul a.cur { | ||
+ | background: #777; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .start-stop { | ||
+ | border: 1px solid #000; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .start-stop.playing { | ||
+ | background-color: #300; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover { | ||
+ | color: #ddd; | ||
+ | } | ||
- | + | /* Active State */ | |
- | + | div.anythingSlider-minimalist-round.activeSlider .anythingWindow { | |
+ | border-color: #164054; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a { | ||
+ | background-color: #164054; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a.cur { | ||
+ | background: #fff; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round.activeSlider .start-stop.playing { | ||
+ | background-color: #f00; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover { | ||
+ | color: #fff; | ||
+ | } | ||
- | + | /* Navigation Arrows */ | |
- | + | div.anythingSlider-minimalist-round .arrow { | |
- | + | top: 50%; | |
+ | position: absolute; | ||
+ | display: block; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .arrow a { | ||
+ | display: block; | ||
+ | height: 40px; | ||
+ | margin-top: -20px; /* half height of image */ | ||
+ | width: 30px; | ||
+ | text-align: center; | ||
+ | outline: 0; | ||
+ | background: url(https://static.igem.org/mediawiki/2011/a/a9/UPOSevillaArrows-minimalist.png) no-repeat; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .forward { right: 0; } | ||
+ | div.anythingSlider-minimalist-round .back { left: 0; } | ||
+ | div.anythingSlider-minimalist-round .forward a { background-position: right bottom; } | ||
+ | div.anythingSlider-minimalist-round .back a { background-position: left bottom; } | ||
+ | div.anythingSlider-minimalist-round .forward a:hover, div.anythingSlider-minimalist-round .forward a.hover { background-position: right top; } | ||
+ | div.anythingSlider-minimalist-round .back a:hover, div.anythingSlider-minimalist-round .back a.hover { background-position: left top; } | ||
- | + | /* Navigation Links */ | |
- | + | div.anythingSlider-minimalist-round .anythingControls { | |
- | + | float: right; | |
- | + | position: absolute; | |
- | + | bottom: 0; | |
+ | right: 15%; | ||
+ | z-index: 100; | ||
+ | opacity: 0.90; | ||
+ | filter: alpha(opacity=90); | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .anythingControls ul { | ||
+ | margin: 0; | ||
+ | z-index: 100; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .anythingControls ul li { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | } | ||
+ | div.anythingSlider-minimalist-round .anythingControls ul a { | ||
+ | display: block; | ||
+ | height: 10px; | ||
+ | width: 10px; | ||
+ | margin: 3px; | ||
+ | padding: 0; | ||
+ | outline: 0; | ||
+ | border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
+ | } | ||
- | + | /* Navigation size window arrows */ | |
- | + | div.anythingSlider-minimalist-round .anythingControls li.next a span, div.anythingSlider-minimalist-round .anythingControls li.prev a span { | |
- | + | text-indent: 1px; | |
- | + | margin-top: 3px; | |
- | + | } | |
- | + | div.anythingSlider-minimalist-round .anythingControls li.prev a, div.anythingSlider-minimalist-round .anythingControls li.next a { | |
- | + | color: #ddd; | |
- | + | } | |
- | + | div.anythingSlider-minimalist-round .anythingControls li.next a:hover, div.anythingSlider-minimalist-round .anythingControls li.prev a:hover { | |
- | + | color: #000; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* slider autoplay right-to-left, reverse order of nav links to look better */ | |
- | + | div.anythingSlider-minimalist-round.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ | |
- | + | div.anythingSlider-minimalist-round.rtl .anythingControls ul { float: left; } /* move nav link group to left */ | |
- | + | /* div.anythingSlider-minimalist-round.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ | |
- | + | /* Autoplay Start/Stop button */ | |
- | + | div.anythingSlider-minimalist-round .start-stop { | |
- | + | margin: 3px; | |
+ | padding: 0; | ||
+ | display: inline-block; | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | position: relative; | ||
+ | bottom: 2px; | ||
+ | left: 0; | ||
+ | z-index: 100; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | float: right; | ||
+ | border-radius: 7px; | ||
+ | -moz-border-radius: 7px; | ||
+ | -webkit-border-radius: 7px; | ||
+ | } | ||
- | + | /* Extra - replace defaults */ | |
- | + | div.anythingSlider-minimalist-round { | |
- | + | padding: 6px 30px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ | |
- | + | div.anythingSlider-minimalist-round .arrow a span, div.anythingSlider-minimalist-round .anythingControls ul a span, div.anythingSlider-minimalist-round .start-stop span { | |
- | + | display: block; | |
+ | line-height: 1px; /* needed for IE7 */ | ||
+ | text-indent: -9999px; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #slider { width: 1000px; height: 500px; } | |
- | </ | + | |
- | + | </style> | |
- | + | ||
- | + | <script src="https://2011.igem.org/Team:UPO-Sevilla/js/anythingSlider.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | |
- | + | ||
- | + | <script> | |
- | + | // DOM Ready | |
- | < | + | $(function(){ |
- | <li><a href=" | + | $('#slider').anythingSlider({ |
- | + | theme : 'minimalist-round', | |
- | <li><a href=" | + | easing : 'easeInOutBack', |
- | <li><a href=" | + | autoPlay : true, |
- | + | // resumeDelay : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). | |
- | <li><a href=" | + | onSlideComplete : function(slider){ |
+ | // alert('Welcome to Slide #' + slider.currentPage); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <div id="principal"> | ||
+ | |||
+ | <div class="center"> | ||
+ | <ul id="slider"> | ||
+ | <li><a href="/Team:UPO-Sevilla/Project/Basic_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/5/51/UPOSevillaBasicFlipFlopPrincipal.png" alt=""></a></li> | ||
+ | |||
+ | <li><a href="/Team:UPO-Sevilla/Project/Improving_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/0/0f/UPOSevillaImprovingFlipFlopPrincipal.png" alt=""></a></li> | ||
+ | |||
+ | <li><a href="/Team:UPO-Sevilla/Project/Epigenetic_Flip_Flop/Overview"><img src="https://static.igem.org/mediawiki/2011/0/00/UPOSevillaEpigeneticFlipFlopPrincipal.png" alt=""></a></li> | ||
+ | |||
+ | <li><a href="/Team:UPO-Sevilla/Foundational_Advances/MiniTn7/Overview"><img src="https://static.igem.org/mediawiki/2011/1/1f/UPOSevillaMiniTn7Principal.png" alt=""></a></li> | ||
+ | |||
+ | <li><a href="/Team:UPO-Sevilla/Foundational_Advances/BioBrick_Creator"><img src="https://static.igem.org/mediawiki/2011/2/27/UPOSevillaBiobrickPrincipal.png" alt=""></a></li> | ||
+ | |||
+ | <li><a href="/Team:UPO-Sevilla/Human_Practice"><img src="https://static.igem.org/mediawiki/2011/c/c5/UPOSevillaHumanPracticePrincipal.png" alt=""></a></li> | ||
</ul> | </ul> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | </div> | |
+ | |||
+ | <p> | ||
+ | For its second year, <strong>the UPO-Sevilla team</strong> participates on the international Synthetic Biology competition iGEM. <strong>Synthetic biology</strong> is a new and exciting discipline of science that puts together computing, engineering and molecular biology with the goal of designing and constructing biological machines: living organisms with the ability to perform new and useful tasks. The iGEM contest is an initiative that hosts undergraduate student teams from all over the world to develop new biological designs, work on them over the summer and present them in the <strong>iGEM Jamborees</strong>. | ||
+ | </p> | ||
+ | <p> | ||
+ | UPO-Sevilla was <strong>the pioneer Andalusian team</strong> to participate in the iGEM competition last year. The UPO-Sevilla team has grown from six students and two supervisors in 2010 to ten students and seven supervisors in 2011. This year's team hosts a mixture of computer science, engineering, biotechnology, genetics, physiology and microbiology students and professors. This multidisciplinary team is working hard on the <strong>Flashbacter</strong> project, aimed to develop biological machines able to store information, much like a computer's memory does. Find more details on this in <a href="/Team:UPO-Sevilla/Project" title="Project">the Project section</a>. | ||
+ | </p> | ||
+ | <p> | ||
+ | In addition to research, the UPO-Sevilla team has undertaken during this year an active <strong>diffusion program</strong> to promote awareness of Synthetic biology, especially among younger students in Andalucía including seminars, workshops, and the first blog in spanish devoted to Synthetic biology, <a href="http://tornillosygenes.com" target="_blank" title="Tornillos y Genes">Tornillos y genes.</a><!-- Learn more about this in the Human practices/diffusion section.--> | ||
+ | </p> | ||
+ | |||
+ | |||
+ | </div> | ||
</html> | </html> | ||
- | {{:Team:UPO-Sevilla/ | + | {{:Team:UPO-Sevilla/footTemplate2}} |
Latest revision as of 23:13, 20 September 2011
For its second year, the UPO-Sevilla team participates on the international Synthetic Biology competition iGEM. Synthetic biology is a new and exciting discipline of science that puts together computing, engineering and molecular biology with the goal of designing and constructing biological machines: living organisms with the ability to perform new and useful tasks. The iGEM contest is an initiative that hosts undergraduate student teams from all over the world to develop new biological designs, work on them over the summer and present them in the iGEM Jamborees.
UPO-Sevilla was the pioneer Andalusian team to participate in the iGEM competition last year. The UPO-Sevilla team has grown from six students and two supervisors in 2010 to ten students and seven supervisors in 2011. This year's team hosts a mixture of computer science, engineering, biotechnology, genetics, physiology and microbiology students and professors. This multidisciplinary team is working hard on the Flashbacter project, aimed to develop biological machines able to store information, much like a computer's memory does. Find more details on this in the Project section.
In addition to research, the UPO-Sevilla team has undertaken during this year an active diffusion program to promote awareness of Synthetic biology, especially among younger students in Andalucía including seminars, workshops, and the first blog in spanish devoted to Synthetic biology, Tornillos y genes.