Team:Freiburg

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Template:Freiburg2013_Template1}}
{{:Template:Freiburg2013_Template1}}
 +
<html>
 +
 +
<!-- Flexslider CSS and JS -->
 +
<style>
 +
 +
/*
 +
* jQuery FlexSlider v2.0
 +
* http://www.woothemes.com/flexslider/
 +
*
 +
* Copyright 2012, Julia Voß
 +
* Free to use under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
*/
 +
 +
/* Browser Resets */
 +
.flex-container a:active,
 +
.flexslider a:active,
 +
.flex-container a:focus,
 +
.flexslider a:focus  {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
 +
/* FlexSlider Necessary Styles
 +
*********************************/
 +
.flexslider {margin: 0; padding: 0;}
 +
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
 +
.flexslider .slides img {width: 50%; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
 +
/* Clearfix for the .slides element */
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
 +
/* No JavaScript Fallback */
 +
/* If you are not using another script, such as Modernizr, make sure you
 +
* include js that eliminates this class on page load */
 +
.no-js .slides > li:first-child {display: block;}
 +
 +
 +
/* FlexSlider Default Theme
 +
*********************************/
 +
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
 +
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
 +
.loading .flex-viewport {max-height: 300px;}
 +
.flexslider .slides {zoom: 1;}
 +
 +
.carousel li {margin-right: 5px}
 +
 +
 +
/* Direction Nav */
 +
 +
.flex-direction-nav {*height: 0;}
 +
.flex-direction-nav a {
 +
width: 35px;
 +
height: 32px;
 +
margin: -20px 0 0;
 +
display: block;
 +
background: url(https://static.igem.org/mediawiki/2013/e/eb/Controls1.png) no-repeat 0 0;
 +
position: absolute;
 +
top: 50%;
 +
cursor: pointer;
 +
text-indent: -9999px;
 +
}
 +
 +
 +
.flex-direction-nav .flex-next {background-position: -35px 0; right: 0px; }
 +
.flex-direction-nav .flex-prev {background-position: 0px 0; left: 0px;}
 +
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
 +
 +
 +
 +
/* Control Nav */
 +
.flex-control-nav {
 +
    width: 100%;
 +
    position: absolute;
 +
    bottom: 30px;
 +
    left: 58px;
 +
    text-align: center;
 +
}
 +
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url() no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
 +
 +
 +
 +
.flexslider {
 +
    width: 950px;
 +
    margin: 0px 0px 10px;
 +
 +
}
 +
 +
div.frontpage-slide {
 +
    height: 300px;
 +
    background-color: white;
 +
}
 +
 +
div.frontpage-slide img{
 +
    height: 300px;
 +
    float: left;
 +
margin:0px;
 +
}
 +
 +
div.slide-right-col {
 +
    color: black;
 +
    float: right;
 +
    width: 400px;
 +
    font-size: 16px;
 +
    margin-top: 18px;
 +
    margin-right: 50px;
 +
    line-height: 1.5em;
 +
text-align:justify;
 +
}
 +
 +
div.slide-heading {
 +
color: black;
 +
    font-size: 18px;
 +
    font-weight: bold;
 +
    margin-bottom: 20px;
 +
}
 +
 +
 +
</style>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<script src="http://2012.igem-bielefeld.de/includes/wiki/flex/js/jquery.flexslider.js"></script>
 +
 +
<!-- Load the flexslider -->
 +
<script type="text/javascript" charset="utf-8">
 +
  $(window).load(function() {
 +
    $('.flexslider').flexslider({
 +
          animation: "slide",  // slide or fade
 +
          controlsContainer: ".flex-container" // the container that holds the flexslider
 +
    });
 +
  });
 +
</script>
 +
 +
 +
 +
<!-- Slider Container and Images -->
 +
<div style="padding:5px; z-index:1;">
 +
 +
        <div class="flexslider">
 +
            <ul class="slides">
 +
                  <li>
 +
                    <div class="frontpage-slide">
 +
                        <img src="https://static.igem.org/mediawiki/2013/d/d2/Project_kachel.png">
 +
                        <div class="slide-right-col">
 +
                            <div class="slide-heading">
 +
                                Our Toolbox
 +
                            </div>
 +
                         
 +
all what you need
 +
                            <p><a href="https://2013.igem.org/Team:Freiburg/Project/1">
 +
                            Click here to read more</a> about our project
 +
                            </p>
 +
 +
                        </div>
 +
                        <div class=clear></div>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <div class="frontpage-slide">
 +
                        <img src="">
 +
                        <div class="slide-right-col">
 +
                            <div class="slide-heading">
 +
                              I do not know
 +
                            </div>
 +
 +
 +
                            <p><a href="https://2013.igem.org/Team:Freiburg/Project/1">
 +
                            Click here to read more </a> about our methods...
 +
                          </p>
 +
                           
 +
                        </div>
 +
                        <div class=clear></div>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <div class="frontpage-slide">
 +
                        <img src="https://static.igem.org/mediawiki/2013/d/d2/Project_kachel.png">
 +
                        <div class="slide-right-col">
 +
                            <div class="slide-heading">
 +
                                The Potential
 +
                            </div>
 +
 +
   
 +
                            <p><a href="http://">
 +
                            Click here to read more</a> </p>                     
 +
 +
                        </div>
 +
                        <div class=clear></div>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <div class="frontpage-slide">
 +
                      <img src="https://static.igem.org/mediawiki/2013/d/d2/Project_kachel.png">
 +
                        <div class="slide-right-col">
 +
                            <div class="slide-heading">
 +
                                Light-Activation
 +
                            </div>
 +
 +
 +
 +
                            <p><a href="https://2013.igem.org/Team:Freiburg/Project/1">
 +
                            Click here to read more</a>
 +
                          </p>
 +
 +
 +
                        </div>
 +
 +
                        <div class=clear></div>
 +
                    </div>
 +
                </li>
 +
 +
               
 +
               
 +
             
 +
            </ul>
 +
        </div>
 +
 +
    </div>
 +
 +
</html>
<html>
<html>

Revision as of 13:27, 28 August 2013