Template:Team:USTC-Software/global header

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
    <title>global_header</title>
 +
    <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/css/header_style?action=raw&ctype=text/css" type="text/css" media="screen" title="no title" charset="utf-8">
 +
    <!-- web fonts for the team name and navigation bar -->
 +
    <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
-
#header_wrapper {
 
-
    width: 980px;
 
-
    position: relative;
 
-
    margin: 0px auto;
 
-
    margin-bottom:100px;
 
-
    float: none;
 
-
    list-style:none;
 
-
}
 
-
#header_wrapper a{
+
</head>
-
     display:block;
+
<body>
-
     text-decoration:none;
+
<!-- global header -->
-
    color:white;
+
<div id="header_wrapper">
-
}
+
     <div id="team_logo">
 +
        <a href="https://2012.igem.org/Team:USTC-Software">USTC-Software</a>
 +
     </div>
 +
    <div id="navs">
 +
        <div id="home_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software">Home Page</a>
 +
        </div>
 +
        <div id="project_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software/project.html">Project</a>
 +
            <ul>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/project.html">Overview</a></li>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/software.html">Software</a></li>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/algoritms_and_methods">Methodologies</a></li>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/database.html">Database</a></li>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/clotho.html">Clotho App</a></li>
 +
                <li><a href="https://2012.igem.org/Team:USTC-Software/example.html">Examples</a></li>
 +
            </ul>
 +
        </div>
 +
        <div id="achievements_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software/achievements">Achievements</a>
 +
        </div>
 +
        <div id="team_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software/team.html">Team Info</a>
 +
        </div>
 +
        <div id="notes_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software/notes.html">Dev Notes</a>
 +
        </div>
 +
        <div id="hp_button" class="nav_button">
 +
            <a href="https://2012.igem.org/Team:USTC-Software/hp.html">Human Practice</a>
 +
        </div>
 +
    </div>
 +
    <a id="igem_home" href="https://2012.igem.org" ><img src="https://static.igem.org/mediawiki/2012/e/e8/Team-USTC-Software-IGEM_Logo.jpg" alt="igem" height="80px" /></a>
 +
</div>
-
#team_logo {
+
</body>
-
    height: 74px;
+
</html>
-
    float: left;
+
-
    margin-top: 30px;
+
-
    font-size:64px;
+
-
    font-family: 'Marcellus SC', serif;
+
-
    -webkit-transition: all .5s ease-out;
+
-
    -moz-transition: all .5s ease-out;
+
-
    -o-transition: all .5s ease-out;
+
-
    -ms-transition: all .5s ease-out;
+
-
    transition: all .5s ease-out;
+
-
}
+
-
#team_logo a{
+
-
    text-shadow: 8px 6px 1px black;
+
-
    position:relative;
+
-
    -webkit-transition: color .5s ease-out;
+
-
    -moz-transition: color .5s ease-out;
+
-
    -o-transition: color .5s ease-out;
+
-
    -ms-transition: color .5s ease-out;
+
-
    transition: color .5s ease-out;
+
-
}
+
-
 
+
-
#team_logo a:active{
+
-
    text-shadow: 6px 4px 1px black;
+
-
    left:1px;
+
-
    top:1px;
+
-
}
+
-
 
+
-
#team_logo:hover a{
+
-
    color:#3cb5f9;
+
-
}
+
-
 
+
-
 
+
-
.nav_button + .nav_button{
+
-
    margin-left:12px;
+
-
    }
+
-
    .nav_button a{
+
-
        font-size:22px;
+
-
        font-family: 'Marcellus SC', serif;
+
-
    }
+
-
 
+
-
 
+
-
#header_wrapper a#igem_home{
+
-
    position:absolute;
+
-
    top:0px;
+
-
    right:0px;
+
-
}
+
-
 
+
-
 
+
-
#navs {
+
-
    clear:both;
+
-
    margin-bottom:30px;
+
-
}
+
-
#navs div { margin-right: 5px; float:left;}
+
-
#navs div a{
+
-
    display:block;
+
-
    height:100%;
+
-
    width:100%;
+
-
    text-decoration:none;
+
-
    color:white;
+
-
    text-shadow: 6px 6px 1px black;
+
-
    -webkit-transition: color .5s ease-out;
+
-
    -moz-transition: color .5s ease-out;
+
-
    -o-transition: color .5s ease-out;
+
-
    -ms-transition: color .5s ease-out;
+
-
    transition: color .5s ease-out;
+
-
   
+
-
    }
+
-
    #navs div a:active{
+
-
        left:1px;
+
-
        top:1px;
+
-
        text-shadow: 4px 4px 1px black;
+
-
    }
+
-
    #navs div a:hover{
+
-
        color:#3cb5f9;
+
-
    }
+
-
 
+
-
#navs div ul{
+
-
    display:none;
+
-
}
+
-
 
+
-
#navs div:hover ul{
+
-
    display:block;
+
-
}
+

Revision as of 15:17, 26 October 2012

global_header