Team:USP-UNESP-Brazil/Templates/Header

From 2012.igem.org

(Difference between revisions)
 
(263 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
 
-
<link href="http://fonts.googleapis.com/css?family=Quicksand|Oxygen|Vollkorn:400italic,400,700|Righteous" rel="stylesheet" type="text/css"/>
+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Anonymous+Pro:400,400italic,700|Vollkorn' rel='stylesheet' type='text/css'>
-
<style type="text/css">
+
<link rel="stylesheet" href="https://2012.igem.org/Team:USP-UNESP-Brazil/stylesheet?action=raw&ctype=text/css" type="text/css"/>
-
h1{
+
-
    font-family: 'Righteous', cursive;
+
-
    font-weight:400;
+
-
    font-size: 42px;
+
-
    }
+
-
h2{
+
-
    font-family: 'Oxygen', sans-serif;
+
-
    font-weight:400;
+
-
    font-size: 22px;
+
-
    }
+
-
h3{
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
-
    font-family: 'Quicksand', sans-serif;
+
-
    font-weight:400;
+
-
    }
+
-
body{
+
<div id="innercontent">
-
    font-family: 'Vollkorn', sans-serif;
+
-
    font-weight:normal;
+
-
    font-size: 16px;
+
-
    background-color:#252525;
+
-
    }
+
-
div.imgr{
+
<!-- Top menu -->
-
    margin: 2px;
+
-
    broder: 1px solid #696969
+
-
    width: auto;
+
-
    height: auto;
+
-
    float: right;
+
-
    text-align: center;
+
-
    }
+
-
div.imgl{
+
<div id="head">
-
    margin: 2px;
+
-
    broder: 1px solid #696969
+
-
    width: auto;
+
-
    height: auto;
+
-
    float: left;
+
-
    text-align: center;
+
-
    }
+
-
div.img img{
+
    <a href="https://2012.igem.org/Team:USP-UNESP-Brazil">
-
     display: inline;
+
        <img class="images" src="https://static.igem.org/mediawiki/2012/e/e8/IntroImage.png" alt="Introduction"/>
-
     margin: 3px;
+
        <div class="titles titledark">Introduction</div>
-
     margin: 1px;
+
    </a>
-
     }
+
    <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Project">
 +
        <img class="images" src="https://static.igem.org/mediawiki/2012/f/f5/POImage.png" alt="Project Overview"/>
 +
        <div class="titles titlelight">Project Overview</div>
 +
    </a>
 +
     <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Introduction">
 +
        <img class="images" src="https://static.igem.org/mediawiki/2012/2/2a/PPPImage.png" alt="Plasmid Plug&Play"/>
 +
        <div class="titles titledark">Plasmid</br>Plug&Play</div>
 +
     </a>
 +
    <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Introduction">
 +
        <img class="images" src="https://static.igem.org/mediawiki/2012/1/1c/MANImage.png" alt="Memory Associative Network"/>
 +
        <div class="titles titlelight">Associative Memory Network</div>
 +
     </a>
 +
    <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Introduction">
 +
        <img class="images" src="https://static.igem.org/mediawiki/2012/3/36/ExtraImage.png" alt="Extras"/>
 +
        <div class="titles titledark">Extras</div>
 +
     </a>
-
div.desc{
+
     <img id="logousp" src="https://static.igem.org/mediawiki/2012/6/66/LogoUSPandUNESP.png" alt="USP and Unesp Brazil Logo"/>
-
     text-align: center;
+
     <div class="logocaixa"></div>
-
     font-weight: normal;
+
-
    width: 120px;
+
-
    margin: 2px;
+
-
    }
+
-
/* WIKI HACKS - START */
+
    <div id="topmenu">
 +
        <div id="menuIntro" class="menuicon">
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil">Home</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Team">Team</a>
 +
<!--            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Introduction/Tour">Tour</a>  -->
 +
        </div>             
 +
        <div id="menuOver"class="menuicon">
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Project">Hacking Systems</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/ProjectOverview/HumanPratices">Human Pratices</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Notebook">Lab Diary</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Safety">Safety</a>
 +
        </div>
 +
        <div class="menuicon">
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Introduction">Introduction</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Background">Background</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Experiments">Experiments</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Modeling">Modeling</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Results">Results</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Parts">Parts</a>
 +
        </div>
 +
        <div class="menuicon">
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Introduction">Introduction</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Background">Background</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Experiments">Experiments</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Modeling">Modeling</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Results">Results</a>
 +
<!--            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Parts">Parts</a> -->
 +
        </div>
 +
        <div class="menuicon">
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/SynbioBrasil">SynbioBrasil</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/USP_and_Unesp">USP and Unesp</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Attributions">Attributions</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Sponsors">Sponsors</a>
 +
            <a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Photos">Photos</a>           
 +
        </div>
 +
    </div>
-
#contentSub, #search-controls, .firstHeading, #catlinks, #p-logo {
+
     <img id="hackology" src="https://static.igem.org/mediawiki/2012/b/b5/Hackology.png" alt="Hackology"/>
-
     display:none;
+
-
    }
+
-
#top-section{
+
</div>
-
    border: none;
+
-
    padding: 0px;
+
-
    margin: 0 auto;
+
-
    width: 965px;
+
-
    height: 0px;
+
-
    }
+
-
#content{
+
<!-- Image Carrousel -->
-
    border: none;
+
-
    }
+
-
/***** Menu Bar Hack - START *****/
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 +
<script type="text/javascript">
-
#menubar > ul > li:last-child {
+
/* The Infinite Rotator Function is from: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/ Thanks a lot for the help! */
-
    display: none;
+
-
    }
+
-
#menubar{
+
$(window).load(function() { //start after HTML, images have loaded
-
    width: auto;
+
 
-
    font-size: 50%;
+
    var InfiniteRotator =
-
    }
+
    {
 +
        init: function()
 +
        {
 +
            //initial fade-in time (in milliseconds)
 +
            var initialFadeIn = 800;
 +
 
 +
            //interval between items (in milliseconds)
 +
            var itemInterval = 6000;
 +
 
 +
            //cross-fade time (in milliseconds)
 +
            var fadeTime = 2500;
 +
 
 +
            //count number of items
 +
            var numberOfItems = $(".images").length;
 +
 
 +
            //set current item
 +
            var currentItem = 0;
 +
 
 +
            //show first item
 +
            $('.images').eq(currentItem).fadeIn(initialFadeIn);
 +
           $('.titles').eq(currentItem).fadeIn(initialFadeIn);
 +
           $('.menuicon').eq(currentItem).fadeIn(initialFadeIn);
-
#menubar li a, #footer-box li a, #footer li a{
+
            //loop through the items
-
    background-color: transparent;
+
            var infiniteLoop = setInterval(function(){
-
    color: white;
+
                $('.images').eq(currentItem).fadeOut(fadeTime);
-
    }
+
                $('.titles').eq(currentItem).fadeOut(fadeTime);
 +
                $('.menuicon').eq(currentItem).fadeOut(fadeTime);
 +
                if(currentItem == numberOfItems -1){
 +
                    currentItem = 0;
 +
                }else{
 +
                    currentItem++;
 +
                }
 +
                $('.images').eq(currentItem).fadeIn(fadeTime);
 +
                $('.titles').eq(currentItem).fadeIn(fadeTime);
 +
                $('.menuicon').eq(currentItem).fadeIn(fadeTime);
 +
 
 +
            }, itemInterval);
 +
        }
 +
    };
 +
 
 +
    InfiniteRotator.init();
 +
 
 +
});
-
#menubar:hover, #footer-box:hover, #footer:hover{
 
-
    color: blue;
 
-
    }
 
-
#menubar:hover li a, #footer-box:hover li a, #footer:hover li a{
+
</script>
-
    color: gray;
+
-
    }
+
-
#menubar.right-menu{
+
<!-- End of Menu Carrousel -->
-
    display: none;
+
-
    }
+
-
/***** Menu Bar Hack - END *****/
 
-
/***** Footer Box Hack - START *****/
+
<!-- end of Top menu -->
-
#footer-box{
+
<!-- menu -->
 +
    <div class="centering">
 +
        <div class="whitebox">
 +
            <div id="left">
 +
                    <li id=intro><img src="https://static.igem.org/mediawiki/2012/9/97/Littlewheel.png"/><b>Introduction</b></li>
 +
                    <li class=intcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil">&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
 +
                    <li class=intcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Team">&nbsp;&nbsp;&nbsp;&nbsp;Team</a></li>
 +
<!--                    <li class=intcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Introduction/Tour">&nbsp;&nbsp;&nbsp;&nbsp;Tour</a></li>  -->
 +
                    <li id=pover><img src="https://static.igem.org/mediawiki/2012/9/97/Littlewheel.png"/><b>Project Overview</b></li>
 +
                    <li class=pocell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Project">&nbsp;&nbsp;&nbsp;&nbsp;Hacking Systems</a></li>
 +
                    <li class=pocell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/ProjectOverview/HumanPratices">&nbsp;&nbsp;&nbsp;&nbsp;Human Pratices</a></li>
 +
                    <li class=pocell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Notebook">&nbsp;&nbsp;&nbsp;&nbsp;Lab Diary</a></li>
 +
                    <li class=pocell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Safety">&nbsp;&nbsp;&nbsp;&nbsp;Safety</a></li>
 +
                    <li id=ppp><img src="https://static.igem.org/mediawiki/2012/9/97/Littlewheel.png"/><b>Plasmid Plug&Play</b></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Introduction">&nbsp;&nbsp;&nbsp;&nbsp;Introduction</a></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Background">&nbsp;&nbsp;&nbsp;&nbsp;Background</a></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Experiments">&nbsp;&nbsp;&nbsp;&nbsp;Experiments</a></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Modeling">&nbsp;&nbsp;&nbsp;&nbsp;Modeling</a></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Plasmid_Plug_n_Play/Results">&nbsp;&nbsp;&nbsp;&nbsp;Results</a></li>
 +
                    <li class=pppcell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Parts">&nbsp;&nbsp;&nbsp;&nbsp;Parts</a></li>
 +
                    <li id=amn><img src="https://static.igem.org/mediawiki/2012/9/97/Littlewheel.png"/><b>Associative Memory<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Network</b></li>
 +
                    <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Introduction">&nbsp;&nbsp;&nbsp;&nbsp;Introduction</a></li>
 +
                    <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Background">&nbsp;&nbsp;&nbsp;&nbsp;Background</a></li>
 +
                    <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Experiments">&nbsp;&nbsp;&nbsp;&nbsp;Experiments</a></li>
 +
                    <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Modeling">&nbsp;&nbsp;&nbsp;&nbsp;Modeling</a></li>
 +
                    <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Associative_Memory/Results">&nbsp;&nbsp;&nbsp;&nbsp;Results</a></li>
 +
                    <!-- <li class=amncell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Parts">&nbsp;&nbsp;&nbsp;&nbsp;Parts</a></li> -->
 +
                    <li id=extra><img src="https://static.igem.org/mediawiki/2012/9/97/Littlewheel.png"/><b>Extras</b></li>
 +
                    <!-- <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Crowdfunding">&nbsp;&nbsp;&nbsp;&nbsp;Crowdfunding</a></li> -->
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/SynbioBrasil">&nbsp;&nbsp;&nbsp;&nbsp;SynbioBrasil</a></li>
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/USP_and_Unesp">&nbsp;&nbsp;&nbsp;&nbsp;USP and Unesp</a></li>
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Attributions">&nbsp;&nbsp;&nbsp;&nbsp;Attributions</a></li>
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Sponsors">&nbsp;&nbsp;&nbsp;&nbsp;Sponsors</a></li>
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Acknowledgements">&nbsp;&nbsp;&nbsp;&nbsp;Acknowledgements</a></li>
 +
                    <li class=excell><a href="https://2012.igem.org/Team:USP-UNESP-Brazil/Extras/Photos">&nbsp;&nbsp;&nbsp;&nbsp;Photos</a></li>
 +
            </div>
-
/* WIKI HACKS - END */
+
<!-- menu animation -->
-
</style>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
        $(".intcell").hide();
 +
        $(".pocell").hide();
 +
        $(".pppcell").hide();
 +
        $(".amncell").hide();
 +
        $(".excell").hide();
 +
        $("#intro").mouseover(function(){
 +
            $(".intcell").slideDown("fast");
 +
            $(".pover,.pppcell,.amncell,.excell").slideUp("fast");
 +
        });
 +
        $("#pover").mouseover(function(){
 +
            $(".pocell").slideDown("fast");
 +
            $(".intcell,.pppcell,.amncell,.excell").slideUp("fast");
 +
        });
 +
        $("#ppp").mouseover(function(){
 +
            $(".pppcell").slideDown("fast");
 +
            $(".intcell,.pocell,.amncell,.excell").slideUp("fast");
 +
        });
 +
        $("#amn").mouseover(function(){
 +
            $(".amncell").slideDown("fast");
 +
            $(".intcell,.pocell,.pppcell,.excell").slideUp("fast");
 +
        });
 +
        $("#extra").mouseover(function(){
 +
            $(".excell").slideDown("fast");
 +
            $(".intcell,.pocell,.pppcell,.amncell").slideUp("fast");
 +
        });
 +
 
 +
        $("#left").mouseleave(function(){
 +
            $(".intcell,.pocell,.pppcell,.amncell,.excell").delay(500).slideUp("fast");
 +
        });
 +
    });
 +
 
 +
</script>
 +
 
 +
<!-- end of animation -->
 +
 
 +
<!-- end of menu -->
 +
 
 +
<!-- content -->
 +
 
 +
            <div id="right">
-
</head>
 
</html>
</html>

Latest revision as of 18:34, 26 September 2012