Team:UNIK Copenhagen/template

From 2013.igem.org

(Difference between revisions)
(Changing the design completely!!!)
Line 24: Line 24:
body{
body{
-
background: white url(https://static.igem.org/mediawiki/2013/3/39/UNIK_Copenhagen_background.jpg) no-repeat fixed 50% 50%;
+
background-color: #cccccc;
-
-webkit-background-size: cover;
+
background-image: url("https://static.igem.org/mediawiki/2013/b/ba/UNIK_Copenhagen_bg.png");
-
-moz-background-size: cover;
+
-
-o-background-size: cover;
+
-
background-size: cover;
+
width: 100%;
width: 100%;
margin: 0 auto;
margin: 0 auto;
position: relative;
position: relative;
 +
background-attachment: fixed;
}
}
#top-section {
#top-section {
Line 37: Line 35:
}
}
#menubar *{
#menubar *{
-
color: transparent;
+
color: #666666;
background: transparent;
background: transparent;
margin: 0px;
margin: 0px;
padding: 5px;
padding: 5px;
 +
width: 100%;
 +
}
 +
#menubar.left-menu ul{
 +
margin-left: -5px;
 +
padding: 5px 3px 3px 5px;
 +
background: white;
 +
border-bottom-left-radius: 5px;
 +
border-bottom-right-radius: 5px;
 +
box-shadow: 0px 0px 5px #888888;
 +
-webkit-box-shadow: 0px 0px 5px #888888;
 +
-moz-box-shadow: 0px 0px 5px #888888;
}
}
#menubar.left-menu{
#menubar.left-menu{
width: 100%;
width: 100%;
}
}
-
#top-section:hover #menubar *{
+
#menubar.right-menu ul{
-
color: white;
+
padding: 5px 6px 3px 3px;
-
background: #336666;
+
}
}
#footer-box{
#footer-box{
-
background-color: white;
+
background-color: rgba(50, 50, 50, 0.5);
-
z-index: 90;
+
z-index: 100;
-
height: 28px;
+
height: 65px;
-
position: fixed;
+
position: absolute;
-
width: 99%;
+
width: 100%;
text-align: center;
text-align: center;
-
bottom: 0px;
+
bottom: 20px;
border: none;
border: none;
-
border-top: 1px solid #003333;
 
}
}
#footer, #footer ul{
#footer, #footer ul{
-
font-size: 10px;
+
font-size: 12px;
-
display: inline;
+
}
}
-
 
+
#footer{width: 900px; margin: 0px auto}
 +
#footer a{color: white;}
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/*                Navigation Bar CSS                    */
/*                Navigation Bar CSS                    */
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
-
#full_width{
 
-
position: relative;
 
-
background: #003333;
 
-
height: 30px;
 
-
top: 30px;
 
-
left: 0px;
 
-
right: 0px;
 
-
padding: 0px;
 
-
margin: 0px;
 
-
z-index:-5;
 
-
}
 
#wrapper{
#wrapper{
-
width:1200px;
+
display: block;
-
margin: auto;
+
position: relative;
 +
width:964px;
 +
min-height: 1000px;
 +
margin: 45px auto -5px auto;
 +
padding: 0px 10px 60px 10px;
z-index: 95;
z-index: 95;
 +
background: white;
 +
top:-10px;
 +
border-radius: 5px;
 +
box-shadow: 0px 0px 5px #888888;
 +
-webkit-box-shadow: 0px 0px 5px #888888;
 +
-moz-box-shadow: 0px 0px 5px #888888;
 +
}
 +
#nav{
 +
display: block;
 +
width: 940px;
 +
height: 38px;
 +
margin: 0 auto;
 +
border-bottom: 1px solid #cccccc;
 +
border-top: 1px solid #cccccc;
}
}
#nav li{
#nav li{
Line 88: Line 102:
list-style: none;
list-style: none;
float: left;
float: left;
-
background: #003333;
+
top: -1px;
-
top: 0px;
+
padding: 8px 0px 0px 0px;
-
padding: 0px;
+
margin: 0px;
margin: 0px;
z-index: 95;
z-index: 95;
}
}
#nav ul{
#nav ul{
-
line-height: 30px;
 
padding: 0px;
padding: 0px;
margin: 0px;
margin: 0px;
Line 104: Line 116:
visibility: hidden;
visibility: hidden;
z-index: 95;
z-index: 95;
 +
margin:1px 0px 0px 0px;
 +
background: white;
 +
box-shadow: 0px 0px 2px #888888;
 +
-webkit-box-shadow: 0px 0px 2px #888888;
 +
-moz-box-shadow: 0px 0px 2px #888888;
 +
}
 +
#nav ul ul li{
 +
border: none;
}
}
#nav ul li a{
#nav ul li a{
Line 109: Line 129:
font-family: Helvetica;
font-family: Helvetica;
font-size: 14px;
font-size: 14px;
-
font-weight: bold;
 
text-decoration: none;
text-decoration: none;
-
height: 30px;
 
display: block;
display: block;
-
color: white;
+
height: 30px;
-
padding: 0px 23px 0px 23px;
+
color: #333333;
 +
padding: 0px 12px 0px 12px;
margin: 0px;
margin: 0px;
-
text-shadow: 1px 1px 3px black;
 
z-index: 95;
z-index: 95;
}
}
Line 122: Line 140:
text-align: left;
text-align: left;
width:165px;
width:165px;
-
padding-left: 10px;
+
padding-left: 12px;
-
border-top: 1px solid white;
+
z-index: 95;
z-index: 95;
}
}
Line 132: Line 149:
visibility: visible;
visibility: visible;
z-index: 95;
z-index: 95;
 +
}
 +
#nav li:hover{
 +
border-bottom: 1px solid #990000;
 +
border-top: 1px solid #990000;
}
}
#nav li:hover a{
#nav li:hover a{
-
color: #99cc99;
 
z-index: 95;
z-index: 95;
 +
}
 +
#nav li li:hover{
 +
border: none;
}
}
#nav ul li:hover ul li a{
#nav ul li:hover ul li a{
-
background: #336666;
 
-
color: white;
 
z-index: 95;
z-index: 95;
}
}
#nav ul li:hover ul li a:hover{
#nav ul li:hover ul li a:hover{
-
color: #99cc99;
+
color: #990000;
z-index: 95;
z-index: 95;
}
}
Line 182: Line 203:
margin: auto;
margin: auto;
z-index:0;
z-index:0;
-
top: 60px;
+
top: 0px;
display:block;
display:block;
position: relative;
position: relative;
-
padding: 20px 0px 20px 0px;
+
padding: 20px 20px 40px 20px;
-
margin-bottom: 80px;
+
background: rgba(255, 255, 255, 0.6);;
background: rgba(255, 255, 255, 0.6);;
}
}
Line 230: Line 250:
/*              Logos in navigation bar                  */
/*              Logos in navigation bar                  */
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
 +
#two_logos{
 +
height: 140px;
 +
}
#our_logo{
#our_logo{
-
margin: -20px 0px 0px -40px;
+
display: inline-block;
-
}
+
position: relative;
-
#our_logo img{
+
float: left;
-
box-shadow: 3px 3px 1px #ccc;
+
margin: 30px 0px 0px 15px;
-
-webkit-box-shadow: 3px 3px 1px #ccc;
+
-
-moz-box-shadow: 3px 3px 1px #ccc
+
}
}
#iGEM_logo{
#iGEM_logo{
-
position:absolute;
+
display: inline-block;
-
margin: -28px 0px 0px 0px;
+
float: right;
 +
position:relative;
 +
margin: 15px 15px 0px 0px;
 +
top: 0px;
}
}
 +
#iGEM{
 +
position: relative;
 +
top: 0;
 +
left: 0;
 +
z-index: 100;
 +
}
 +
#no_wheel{
 +
z-index: 100;
 +
}
 +
#iGEM #wheel{
 +
width: 100px;
 +
height: 100px;
 +
display: block;
 +
position: absolute;
 +
top: 14px;
 +
left: 36px;
 +
z-index: -1;
 +
 +
-webkit-transition-duration: 1s;
 +
    -moz-transition-duration: 1s;
 +
    -o-transition-duration: 1s;
 +
    transition-duration: 1s;
 +
 +
-webkit-transform: rotate(0deg);
 +
-moz-transform: rotate(0deg);
 +
-o-transform: rotate(0deg);
 +
-ms-transform: rotate(0deg);
 +
 +
    -webkit-transition-property: -webkit-transform;
 +
    -moz-transition-property: -moz-transform;
 +
    -o-transition-property: -o-transform;
 +
    transition-property: transform;
 +
}
 +
 +
#no_wheel:hover + #wheel{
 +
-webkit-transform: rotate(360deg);
 +
-moz-transform: rotate(360deg);
 +
-o-transform: rotate(360deg);
 +
-ms-transform: rotate(360deg);
 +
z-index: -1;
 +
}
 +
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/*              Navigation Bar HTML                    */
/*              Navigation Bar HTML                    */
Line 249: Line 315:
</head>
</head>
<body>
<body>
-
<div id="full_width"> </div>
 
<div id="wrapper">
<div id="wrapper">
 +
<div id="two_logos">
 +
<div id="iGEM_logo"><a href="https://2013.igem.org">
 +
<div id="iGEM">
 +
<img id="no_wheel" src="https://static.igem.org/mediawiki/2013/d/d9/UNIK_Copenhagen_iGEM_no_wheel.png" width="150">
 +
<div id="wheel"><img src="https://static.igem.org/mediawiki/2013/3/31/UNIK_Copenhagen_iGEM_the_wheel.png" width="100"></div>
 +
</div></a></div>
 +
<div id="our_logo"><a href="https://2013.igem.org/Team:UNIK_Copenhagen"><img src="https://static.igem.org/mediawiki/2013/2/23/UNIK_Copenhagen_our_logo_darker.jpg" width="200"></a></div>
 +
</div>
<div id="nav">
<div id="nav">
<ul>
<ul>
-
<li><div id="our_logo"><a href="https://2013.igem.org/Team:UNIK_Copenhagen"><img src="https://static.igem.org/mediawiki/2013/8/8e/UNIK_Copenhagen_our_logo.png" width="150"></a></div></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Signe/Home">Home</a></li>
-
 
+
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen">Home</a></li>
+
<li><a href="#">Project</a>
<li><a href="#">Project</a>
<ul>
<ul>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">Overview</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Signe/Project">Overview</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/ExperimentalDesign">Experimental Approach</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Signe/ExperimentalApproach">Experimental Approach</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Results">Results</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Results">Results</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project/Applications">Applications</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project/Applications">Applications</a></li>
Line 268: Line 339:
<li><a href="#">Team</a>
<li><a href="#">Team</a>
<ul>
<ul>
-
<li><a href="https://igem.org/Team.cgi?id=1094">Official Team Profile</a></li>
+
<li><a href="https://igem.org/Team.cgi">Official Team Profile</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">Meet the team</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">Meet the team</a></li>
</ul></li>
</ul></li>
Line 278: Line 349:
<li><a href="#">Bricks of Knowledge</a><ul>
<li><a href="#">Bricks of Knowledge</a><ul>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledge">Invitation</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledge">Invitation</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovieBricks">Bricks of Knowledge</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovieBricks">Recieved Movie-Bricks</a></li>
 +
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovie">BoK -the movie</a></li>
</ul></li>
</ul></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain">The CPH Strain</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain">The CPH Strain</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Sponsors">Sponsors</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Sponsors">Sponsors</a></li>
-
<li><div id="iGEM_logo"><a href="https://2013.igem.org"><img src="https://static.igem.org/mediawiki/2013/4/4e/UNIK_Copenhagen_iGEM_logo.png" width="100px"></a></div></li>
 
</ul>
</ul>
</div>
</div>
-
</div>
 
-
</body>
 
-
</html>
 

Revision as of 20:09, 27 August 2013