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;
 +
}
-
</head>
+
#header_wrapper a{
-
<body>
+
     display:block;
-
<!-- global header -->
+
     text-decoration:none;
-
<div id="header_wrapper">
+
    color:white;
-
     <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>
 
-
</body>
+
#team_logo {
-
</html>
+
    height: 74px;
 +
    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:16, 26 October 2012

  1. header_wrapper { 
   width: 980px;
   position: relative;
   margin: 0px auto;
   margin-bottom:100px;
   float: none;
   list-style:none;

}

  1. header_wrapper a{ 
   display:block;
   text-decoration:none;
   color:white;

}


  1. team_logo { 
   height: 74px; 
   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;

}

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

}

  1. team_logo a:active{ 
   text-shadow: 6px 4px 1px black;
   left:1px;
   top:1px;

}

  1. team_logo:hover a{ 
   color:#3cb5f9;

}


.nav_button + .nav_button{ 

   margin-left:12px;
   }
   .nav_button a{
       font-size:22px;
       font-family: 'Marcellus SC', serif;
   }


  1. header_wrapper a#igem_home{ 
   position:absolute;
   top:0px;
   right:0px;

}


  1. navs { 
   clear:both;
   margin-bottom:30px;

}

  1. navs div { margin-right: 5px; float:left;}
  2. 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;
   }
  1. navs div ul{ 
   display:none;

}

  1. navs div:hover ul{ 
   display:block;

}

Retrieved from "http://2012.igem.org/Template:Team:USTC-Software/global_header"