Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html><!--Inizio sub-templato Header-->
+
/********/
 +
/*HEADER*/
 +
/********/
-
<!--CSS-->
+
#tn-header-wrap {
-
<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">
+
    display: inline-block;
-
<!--JS-->
+
    width: 100%;
-
<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>
+
    height: 250px;
-
<!--PAGE-->
+
    margin: 0;
-
<div id="tn-header-wrap" style="background-image: url(</html>{{{1}}}<html>);">
+
    padding: 0;
-
     <!--header-->
+
 
-
     <div id="tn-header">
+
    background-color: #2880C5;
-
        <div id="tn-loghi">
+
    border-bottom: 7px solid white;
-
            <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;" />
+
    box-shadow: inset 0 -2px 6px black;
-
            <p class="title">B. fruity</p>
+
 
-
            <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-image: url(http://i44.tinypic.com/690qs8.jpg);
-
        </div>
+
     background-attachment: fixed;
-
        <ul id="tn-menu">
+
    background-position: center center;
-
            <li>
+
     background-size: 100%;
-
                <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>
+
 
-
            <li>
+
#tn-header {
-
                <img src="https://static.igem.org/mediawiki/2013/9/92/Tn-2013-menubg-Orange.png" />
+
    display: static;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento">Home</a>
+
    position: relative;
-
            </li>
+
    top: 0;
-
            <li class="hasSub">
+
 
-
                <img src="https://static.igem.org/mediawiki/2013/9/92/Tn-2013-menubg-Pear.png" />
+
    max-width: 1300px;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/Project">Project</a> 
+
    height: 180px;
-
                <ul>
+
 
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Introduction">Intro</a></li>
+
    margin: 0 auto;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Ethylene">Ethylene</a></li>
+
    padding: 1em;
-
                    <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>
+
/*-----------*/
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Products">Products</a></li>
+
/*HEADER MENU*/
-
                    <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>
+
 
-
                </ul>
+
#tn-header #tn-menu {
-
            </li>
+
    position: absolute;
-
            <li>
+
    top: 170px;
-
                <img src="https://static.igem.org/mediawiki/2013/e/e8/Tn-2013-menubg-Banana.png" />
+
    left: 0;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/Project/Datapage">Datapage</a>
+
 
-
            </li>
+
    width: 100%;
-
            <li class="hasSub">
+
 
-
                <img src="https://static.igem.org/mediawiki/2013/6/69/Tn-2013-menubg-Melon.png" />
+
    margin: 0;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/Products">Products</a>
+
    padding: 0;
-
                <ul>
+
 
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Vending Machine">Vending Machine</a></li>
+
    list-style: none;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Project/Home Edition">Home Edition</a></li>
+
    text-align: center;
-
                </ul>
+
}
-
            </li>
+
 
-
            <li>
+
#tn-header #tn-menu > li {
-
                <img src="https://static.igem.org/mediawiki/2013/3/3b/Tn-2013-menubg-Strawberry.png" />
+
    position: relative;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/Extra/Judging">Judging</a>
+
    display: inline-block;
-
            </li>
+
 
-
            <li class="hasSub">
+
    height: 100px;
-
                <img src="https://static.igem.org/mediawiki/2013/2/27/Tn-2013-menubg-Kiwi.png" />
+
    width: 100px;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/About_us">About Us</a>
+
 
-
                <ul style="width: 300px!important; top: 40%!important;">
+
    margin: 0.5em;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Team">FruiTeam</a></li>
+
    /*
-
                    <li><a href="https://igem.org/Team.cgi?year=2013&amp;team_name=UNITN-Trento">Official Profile</a></li>
+
    background-position: center center;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Gallery">Gallery</a></li>
+
    background-repeat: no-repeat;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Notebook">Notebook</a></li>
+
    background-size: 75%;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Protocols">Protocols</a></li>
+
    */
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Laboratory/Meetings">Meetings</a></li>
+
    line-height: 100px;
-
                </ul>
+
    /*font-weight: bold;*/
-
            </li>
+
    text-shadow: 0 0 2px black;
-
            <li class="hasSub">
+
    text-align: center;
-
                <img src="https://static.igem.org/mediawiki/2013/5/5a/Tn-2013-menubg-Apple.png" />
+
    vertical-align: middle;
-
                <a href="https://2013.igem.org/Team:UNITN-Trento/Extra">Extra</a>
+
 
-
                <ul style="width: 300px!important; top: 35%!important; left: -150%!important;">
+
    transition: transform 0.4s;
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Attributions">Attributions</a></li>
+
    -webkit-transition: -webkit-transform 0.4s; /* Safari */
-
                    <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>
+
 
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Safety">Safety</a></li>
+
#tn-header #tn-menu > li > img {
-
                    <li><a href="https://2013.igem.org/Team:UNITN-Trento/Sponsor">Sponsor</a></li>
+
    width: 76px;
-
                </ul>
+
    margin: 12px;
-
            </li>
+
}
-
        </ul>
+
 
-
    </div>
+
#tn-header #tn-menu > li > a {
-
</div>
+
    display: block;
 +
 
 +
    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:54, 17 September 2013

/********/ /*HEADER*/ /********/

  1. tn-header-wrap { 
   display: inline-block;

   width: 100%;
   height: 250px;

   margin: 0;
   padding: 0;

   background-color: #2880C5;
   border-bottom: 7px solid white;
   box-shadow: inset 0 -2px 6px black;

   background-image: url(http://i44.tinypic.com/690qs8.jpg);
   background-attachment: fixed;
   background-position: center center;
   background-size: 100%;

}

  1. tn-header { 
   display: static;
   position: relative;
   top: 0;

   max-width: 1300px;
   height: 180px;

   margin: 0 auto;
   padding: 1em;

}

/*-----------*/ /*HEADER MENU*/ /*-----------*/

  1. tn-header #tn-menu { 
   position: absolute;
   top: 170px;
   left: 0;

   width: 100%;

   margin: 0;
   padding: 0;

   list-style: none;
   text-align: center;

}

  1. tn-header #tn-menu > li { 
   position: relative;
   display: inline-block;

   height: 100px;
   width: 100px;

   margin: 0.5em;
   /*
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 75%;
   */
   line-height: 100px;
   /*font-weight: bold;*/
   text-shadow: 0 0 2px black;
   text-align: center;
   vertical-align: middle;

   transition: transform 0.4s;
   -webkit-transition: -webkit-transform 0.4s; /* Safari */

}

  1. tn-header #tn-menu > li > img { 
   width: 76px;
   margin: 12px;

}

  1. tn-header #tn-menu > li > a { 
   display: block;

   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;

}

  1. 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;
   }

}

  1. tn-header #tn-menu > li.active > img { 
   width: 100px;
   margin: 0;

   animation: image 1s;
   -webkit-animation: image 1s; /* Safari and Chrome */

}

  1. 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*/

  1. 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;

}*/

  1. 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;

}

  1. 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;

}

  1. tn-header #tn-menu li ul li:hover a { 
   color: #C4221C;
   text-decoration: underline;

}

/*------------*/ /*HEADER LOGHI*/ /*------------*/

  1. tn-header #tn-loghi { 
   width: 100%;
   height: 180px;

}

  1. 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;

}

  1. 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 */

}

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