Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/********/
+
<html><!--Inizio sub-templato Header-->
-
/*HEADER*/
+
-
/********/
+
-
#tn-header-wrap {
+
<!--CSS-->
-
    display: inline-block;
+
<link rel="stylesheet" href="https://2013.igem.org/wiki/index.php?title=Team:UNITN-Trento/CSS/Subs/Header&amp;action=raw&amp;ctype=text/css" type="text/css">
-
    width: 100%;
+
<!--JS-->
-
    height: 250px;
+
<script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=Team:UNITN-Trento/JS/Subs/Header&amp;action=raw&amp;ctype=text/javascript"></script>
-
    margin: 0;
+
<!--PAGE-->
-
    padding: 0;
+
<div id="tn-header-wrap" style="background-image: url(</html>{{{1}}}<html>);">
-
 
+
     <!--header-->
-
    background-color: #2880C5;
+
     <div id="tn-header">
-
    border-bottom: 7px solid white;
+
        <div id="tn-loghi">
-
    box-shadow: inset 0 -2px 6px black;
+
            <img src="https://static.igem.org/mediawiki/2013/9/91/Tn-20130708-igem-unitn.png" alt="UNITN-Trento 2013" style="position: absolute; top: 0; height: 240px;" />
-
 
+
            <p class="title">B. fruity</p>
-
    background-image: url(http://i44.tinypic.com/690qs8.jpg);
+
            <img src="https://static.igem.org/mediawiki/2013/c/cd/Tn-20130708-igem-main.png" alt="iGEM 2013" style="position: absolute; bottom: 0; right: 0; height: 150px;" />
-
     background-attachment: fixed;
+
        </div>
-
    background-position: center center;
+
        <ul id="tn-menu">
-
     background-size: 100%;
+
            <li>
-
}
+
                <span style="display:inline-block;position: absolute; left: 0; bottom: 0;"><a href="https://twitter.com/iGEMUniTN2013" target="_blank"><img src="https://static.igem.org/mediawiki/2013/2/2c/Tn-2013-social-Orange_twitter.png" style="width: 30px;" /></a><br/><a href="https://www.facebook.com/iGEM13.UniTN" target="_blank"><img src="https://static.igem.org/mediawiki/2013/e/e8/Tn-2013-social-Tomato_facebook.png" style="width: 33px; padding-bottom: 2px;" /></a></span>
-
 
+
            </li>
-
#tn-header {
+
            <li>
-
    display: static;
+
                <img src="https://static.igem.org/mediawiki/2013/9/92/Tn-2013-menubg-Orange.png" />
-
    position: relative;
+
                <a href="https://2013.igem.org/Team:UNITN-Trento">Home</a>
-
    top: 0;
+
            </li>
-
 
+
            <li class="hasSub">
-
    max-width: 1300px;
+
                <img src="https://static.igem.org/mediawiki/2013/9/92/Tn-2013-menubg-Pear.png" />
-
    height: 180px;
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/Project">Project</a> 
-
 
+
                <ul>
-
    margin: 0 auto;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Introduction">Intro</a></li>
-
    padding: 1em;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Ethylene">Ethylene</a></li>
-
}
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Methyl Salicylate">Methyl Salycilate</a></li>
-
 
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Blue light">Blue light</a></li>
-
/*-----------*/
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Fruit ripening">Fruit ripening</a></li>
-
/*HEADER MENU*/
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Products">Products</a></li>
-
/*-----------*/
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Modeling">Modeling</a></li>
-
 
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Parts">Parts</a></li>
-
#tn-header #tn-menu {
+
                </ul>
-
    position: absolute;
+
            </li>
-
    top: 170px;
+
            <li>
-
    left: 0;
+
                <img src="https://static.igem.org/mediawiki/2013/e/e8/Tn-2013-menubg-Banana.png" />
-
 
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/Project/Datapage">Datapage</a>
-
    width: 100%;
+
            </li>
-
 
+
            <li class="hasSub">
-
    margin: 0;
+
                <img src="https://static.igem.org/mediawiki/2013/6/69/Tn-2013-menubg-Melon.png" />
-
    padding: 0;
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/Products">Products</a>
-
 
+
                <ul>
-
    list-style: none;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Vending Machine">Vending Machine</a></li>
-
    text-align: center;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Home Edition">Home Edition</a></li>
-
}
+
                </ul>
-
 
+
            </li>
-
#tn-header #tn-menu > li {
+
            <li>
-
    position: relative;
+
                <img src="https://static.igem.org/mediawiki/2013/3/3b/Tn-2013-menubg-Strawberry.png" />
-
    display: inline-block;
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/Extra/Judging">Judging</a>
-
 
+
            </li>
-
    height: 100px;
+
            <li class="hasSub">
-
    width: 100px;
+
                <img src="https://static.igem.org/mediawiki/2013/2/27/Tn-2013-menubg-Kiwi.png" />
-
 
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/About_us">About Us</a>
-
    margin: 0.5em;
+
                <ul style="width: 300px!important; top: 40%!important;">
-
    /*
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Team">FruiTeam</a></li>
-
    background-position: center center;
+
                    <li><a href="https://igem.org/Team.cgi?year=2013&amp;team_name=UNITN-Trento">Official Profile</a></li>
-
    background-repeat: no-repeat;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Gallery">Gallery</a></li>
-
    background-size: 75%;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Notebook">Notebook</a></li>
-
    */
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Protocols">Protocols</a></li>
-
    line-height: 100px;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Laboratory/Meetings">Meetings</a></li>
-
    /*font-weight: bold;*/
+
                </ul>
-
    text-shadow: 0 0 2px black;
+
            </li>
-
    text-align: center;
+
            <li class="hasSub">
-
    vertical-align: middle;
+
                <img src="https://static.igem.org/mediawiki/2013/5/5a/Tn-2013-menubg-Apple.png" />
-
 
+
                <a href="https://2013.igem.org/Team:UNITN-Trento/Extra">Extra</a>
-
    transition: transform 0.4s;
+
                <ul style="width: 300px!important; top: 35%!important; left: -150%!important;">
-
    -webkit-transition: -webkit-transform 0.4s; /* Safari */
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Attributions">Attributions</a></li>
-
}
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Extra/Fruit Info">Fruit Info</a></li>
-
 
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Human_Practice">Human Practice</a></li>
-
#tn-header #tn-menu > li > img {
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Safety">Safety</a></li>
-
    width: 76px;
+
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Sponsor">Sponsor</a></li>
-
    margin: 12px;
+
                </ul>
-
}
+
            </li>
-
 
+
        </ul>
-
#tn-header #tn-menu > li > a {
+
    </div>
-
    display: block;
+
</div>
-
 
+
-
    position: absolute;
+
-
    top: 2.2em;
+
-
    left: 0;
+
-
 
+
-
    padding: 0.3em 0.5em;
+
-
    /*margin-top: 2.2em;*/
+
-
 
+
-
    width: 3em;
+
-
 
+
-
    border-radius: 0.5em;
+
-
    border: 3px solid white;
+
-
    background: rgba(31,68,87,.9);
+
-
    background-image: url(imgs/box-bottoni.png);
+
-
    color: #ffffff;
+
-
    font-family: 'Mouse Memoirs', sans-serif;
+
-
    font-size: 1.5em;
+
-
    line-height: 1em;
+
-
    text-decoration: none;
+
-
 
+
-
    z-index: 5;
+
-
}
+
-
 
+
-
#tn-header #tn-menu > li.active {
+
-
    transform: rotate(-15deg);
+
-
    -ms-transform: rotate(-15deg); /* IE 9 */
+
-
    -webkit-transform: rotate(-15deg); /* Safari and Chrome */
+
-
 
+
-
    /*background-size: 100%;*/
+
-
}
+
-
 
+
-
@keyframes image {
+
-
    from {
+
-
        width: 76px;
+
-
        margin: 12px;
+
-
    }
+
-
    to {
+
-
        width: 100px;
+
-
        margin: 0;
+
-
    }
+
-
}
+
-
@-webkit-keyframes image /* Safari and Chrome */ {
+
-
    from {
+
-
        width: 76px;
+
-
        margin: 12px;
+
-
    }
+
-
    to {
+
-
        width: 100px;
+
-
        margin: 0;
+
-
    }
+
-
}
+
-
 
+
-
#tn-header #tn-menu > li.active > img {
+
-
    width: 100px;
+
-
    margin: 0;
+
-
 
+
-
    animation: image 1s;
+
-
    -webkit-animation: image 1s; /* Safari and Chrome */
+
-
}
+
-
 
+
-
#tn-header #tn-menu > li.active > a {
+
-
    display: block;
+
-
 
+
-
    position: absolute;
+
-
    top: 2.2em;
+
-
    left: 0;
+
-
 
+
-
    padding: 0.3em 0.5em;
+
-
    /*margin-top: 2.2em;*/
+
-
    border-radius: 0.5em;
+
-
    border: 3px solid white;
+
-
    box-shadow: 2px 2px 4px #323232;
+
-
    background: #C4221C;
+
-
    font-family: 'Mouse Memoirs', sans-serif;
+
-
    font-size: 1.5em;
+
-
    line-height: 1em;
+
-
    text-decoration: underline;
+
-
}
+
-
 
+
-
/*SUB MENU*/
+
-
 
+
-
#tn-header #tn-menu li ul {
+
-
    display: none;
+
-
    position: absolute;
+
-
    top: 60%;
+
-
    left: -125%;
+
-
 
+
-
    width: 450px;
+
-
    height: 3em;
+
-
 
+
-
    padding: 0;
+
-
    padding-top: 3em;
+
-
    margin: 0;
+
-
    margin-top: 1em;
+
-
 
+
-
    line-height: 1em;
+
-
    list-style: none;
+
-
 
+
-
    transform: rotate(15deg);
+
-
    -ms-transform: rotate(15deg); /* IE 9 */
+
-
    -webkit-transform: rotate(15deg); /* Safari and Chrome */
+
-
   
+
-
    text-align: left;
+
-
}
+
-
 
+
-
@keyframes submenu {
+
-
    0% {
+
-
        opacity: 0;
+
-
    }
+
-
    50% {
+
-
        opacity: 0;
+
-
    }
+
-
    100% {
+
-
        opacity: 1;
+
-
    }
+
-
}
+
-
@-webkit-keyframes submenu /* Safari and Chrome */ {
+
-
    0% {
+
-
        opacity: 0;
+
-
    }
+
-
    50% {
+
-
        opacity: 0;
+
-
    }
+
-
    100% {
+
-
        opacity: 1;
+
-
    }
+
-
}
+
-
 
+
-
/*#tn-header #tn-menu li:hover ul {
+
-
    display: block;
+
-
 
+
-
    animation: submenu .5s;
+
-
    -webkit-animation: submenu .5s;
+
-
}*/
+
-
 
+
-
#tn-header #tn-menu li ul li {
+
-
    display: inline-block;
+
-
    height: 1.4em;
+
-
 
+
-
    margin: 0;
+
-
    padding: 0;
+
-
 
+
-
    font-family: 'Mouse Memoirs', sans-serif;
+
-
    font-size: 1.5em;
+
-
    font-variant: small-caps;
+
-
 
+
-
    line-height: 1em;
+
-
}
+
-
 
+
-
#tn-header #tn-menu li ul li a {
+
-
    display: block;
+
-
    padding-top: 0em;
+
-
    margin: 0 0.5em;
+
-
    color: #1F4457;
+
-
    text-decoration: none;
+
-
    text-shadow: none;
+
-
}
+
-
 
+
-
#tn-header #tn-menu li ul li:hover a {
+
-
    color: #C4221C;
+
-
    text-decoration: underline;
+
-
}
+
-
 
+
-
/*------------*/
+
-
/*HEADER LOGHI*/
+
-
/*------------*/
+
-
 
+
-
#tn-header #tn-loghi {
+
-
    width: 100%;
+
-
    height: 180px;
+
-
}
+
-
 
+
-
#tn-header #tn-loghi .title {
+
-
    margin: 0;
+
-
    margin-top: 0.3em;
+
-
 
+
-
    color: #eee;
+
-
 
+
-
    font-family: 'Marck Script', cursive;
+
-
    font-size: 7em;
+
-
 
+
-
    line-height: 1em;
+
-
    text-align: center;
+
-
    text-shadow: 1px 1px 2px #000;
+
-
}
+
-
 
+
-
#tn-menu li > span a:hover img {
+
-
    transition: transformation 1s;
+
-
    -webkit-transition: transformation 1s; /* Safari */
+
-
 
+
-
    transform:rotate(15deg);
+
-
    -ms-transform:rotate(15deg); /* IE 9 */
+
-
    -webkit-transform:rotate(15deg); /* Safari and Chrome */
+
-
 
+
-
}
+

Revision as of 13:53, 17 September 2013

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Subs/Header"