Team:UNIK Copenhagen/template
From 2013.igem.org
(Difference between revisions)
SigneKarlsen (Talk | contribs) |
|||
(134 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
*{ | *{ | ||
Line 22: | Line 23: | ||
padding: 0px; | padding: 0px; | ||
} | } | ||
+ | |||
body{ | body{ | ||
- | background: | + | background-color: #cccccc; |
- | + | background-image: url("https://static.igem.org/mediawiki/2013/b/ba/UNIK_Copenhagen_bg.png"); | |
- | + | ||
- | + | ||
- | + | ||
width: 100%; | width: 100%; | ||
margin: 0 auto; | margin: 0 auto; | ||
position: relative; | position: relative; | ||
+ | background-attachment: fixed; | ||
} | } | ||
#top-section { | #top-section { | ||
Line 36: | Line 36: | ||
} | } | ||
#menubar *{ | #menubar *{ | ||
- | color: | + | 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%; | ||
} | } | ||
- | # | + | #menubar.right-menu ul{ |
- | + | padding: 5px 6px 3px 3px; | |
- | + | ||
} | } | ||
#footer-box{ | #footer-box{ | ||
- | z-index: | + | background-color: rgba(50, 50, 50, 0.5); |
- | + | z-index: 100; | |
- | + | height: 65px; | |
- | width: | + | position: absolute; |
+ | width: 100%; | ||
text-align: center; | text-align: center; | ||
- | bottom: | + | bottom: 20px; |
border: none; | border: none; | ||
- | |||
} | } | ||
#footer, #footer ul{ | #footer, #footer ul{ | ||
- | + | font-size: 12px; | |
- | + | } | |
+ | #footer{ | ||
+ | width: 900px; | ||
+ | margin: 0px auto | ||
+ | } | ||
+ | #footer a{ | ||
+ | color: white; | ||
} | } | ||
- | |||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
- | /* | + | /* Wrapper CSS */ |
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#wrapper{ | #wrapper{ | ||
- | width: | + | 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; | ||
+ | } | ||
+ | /*-------------------------------------------------------*/ | ||
+ | /* Navigation Bar CSS */ | ||
+ | /*-------------------------------------------------------*/ | ||
+ | #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 86: | Line 111: | ||
list-style: none; | list-style: none; | ||
float: left; | float: left; | ||
- | + | top: -1px; | |
- | top: | + | padding: 8px 0px 0px 0px; |
- | padding: 0px; | + | |
margin: 0px; | margin: 0px; | ||
z-index: 95; | z-index: 95; | ||
} | } | ||
#nav ul{ | #nav ul{ | ||
- | |||
padding: 0px; | padding: 0px; | ||
margin: 0px; | margin: 0px; | ||
Line 102: | Line 125: | ||
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{ | ||
text-align: center; | text-align: center; | ||
- | font-family: | + | font-family: Helvetica; |
- | font- | + | font-size: 14px; |
text-decoration: none; | text-decoration: none; | ||
- | |||
display: block; | display: block; | ||
- | color: | + | height: 30px; |
- | padding: 0px | + | color: #333333; |
+ | padding: 0px 10px 0px 10px; | ||
margin: 0px; | margin: 0px; | ||
- | |||
z-index: 95; | z-index: 95; | ||
} | } | ||
#nav ul li ul a{ | #nav ul li ul a{ | ||
text-align: left; | text-align: left; | ||
- | width: | + | width:165px; |
- | padding-left: | + | padding-left: 12px; |
- | + | ||
z-index: 95; | z-index: 95; | ||
} | } | ||
Line 129: | Line 158: | ||
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{ | ||
- | |||
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{ | ||
- | |||
- | |||
z-index: 95; | z-index: 95; | ||
} | } | ||
#nav ul li:hover ul li a:hover{ | #nav ul li:hover ul li a:hover{ | ||
- | color: # | + | color: #990000; |
z-index: 95; | z-index: 95; | ||
} | } | ||
+ | /*-------------------------------------------------------*/ | ||
+ | /* Social Media (hide facebook-count) */ | ||
+ | /*-------------------------------------------------------*/ | ||
+ | #social_media{ | ||
+ | position: absolute; | ||
+ | top: 150px; | ||
+ | right: 30px; | ||
+ | text-align: right; | ||
+ | } | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
/* Fonts */ | /* Fonts */ | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
h1{ | h1{ | ||
- | font-family: Helvetica; | + | font-family: Helvetica Neue; |
- | font-size: | + | font-size: 24px; |
} | } | ||
- | p{ | + | h2{ |
- | font-family: Baskerville; | + | font-family: Helvetica Neue; |
- | font-size: 16px; | + | font-size: 20px; |
- | line-height: 25px; | + | } |
+ | h3{ | ||
+ | font-family: Helvetica Neue; | ||
+ | font-size: 18px; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | h4{ | ||
+ | font-family: Helvetica Neue; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | p,ol,ul{ | ||
+ | font-family: Baskerville; | ||
+ | font-size: 16px; | ||
+ | line-height: 25px; | ||
} | } | ||
Line 166: | Line 221: | ||
margin: auto; | margin: auto; | ||
z-index:0; | z-index:0; | ||
- | top: | + | top: 0px; |
display:block; | display:block; | ||
position: relative; | position: relative; | ||
- | padding: 20px | + | padding: 20px 20px 60px 20px; |
- | + | ||
} | } | ||
#article{ | #article{ | ||
Line 185: | Line 239: | ||
display: block; | display: block; | ||
margin: 10px; | margin: 10px; | ||
- | font- | + | font-size:14px; |
- | font- | + | font-family: Baskerville; |
+ | line-height: 18px; | ||
padding-left: 15px; | padding-left: 15px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
Line 195: | Line 250: | ||
} | } | ||
.references{ | .references{ | ||
+ | font-family: Baskerville; | ||
margin-top: 40px; | margin-top: 40px; | ||
border-top: 1px solid gray; | border-top: 1px solid gray; | ||
Line 211: | Line 267: | ||
/* Logos in navigation bar */ | /* Logos in navigation bar */ | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
+ | #two_logos{ | ||
+ | height: 140px; | ||
+ | } | ||
#our_logo{ | #our_logo{ | ||
- | + | display: inline-block; | |
- | + | position: relative; | |
- | + | float: left; | |
- | + | margin: 30px 0px 0px 15px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#iGEM_logo{ | #iGEM_logo{ | ||
- | position: | + | display: inline-block; |
- | margin: | + | 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; | ||
+ | } | ||
</style> | </style> | ||
+ | |||
+ | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | ||
+ | |||
+ | <div id="fb-root"></div> | ||
+ | <script>(function(d, s, id) { | ||
+ | var js, fjs = d.getElementsByTagName(s)[0]; | ||
+ | if (d.getElementById(id)) return; | ||
+ | js = d.createElement(s); js.id = id; | ||
+ | js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; | ||
+ | fjs.parentNode.insertBefore(js, fjs); | ||
+ | }(document, 'script', 'facebook-jssdk'));</script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
- | |||
<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><a href="https://2013.igem.org/Team:UNIK_Copenhagen">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/Project">Overview</a></li> | ||
- | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/ | + | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/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 250: | Line 367: | ||
<li><a href="#">Team</a> | <li><a href="#">Team</a> | ||
<ul> | <ul> | ||
- | <li><a href="https://igem.org/Team.cgi? | + | <li><a href="https://igem.org/Team.cgi?id=1094">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> | ||
+ | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Danish_collaboration">The Danish Collaboration</a></li> | ||
</ul></li> | </ul></li> | ||
<li><a href="#">Safety and Ethics</a><ul> | <li><a href="#">Safety and Ethics</a><ul> | ||
- | |||
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Safety">Safety</a></li> | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Safety">Safety</a></li> | ||
- | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/ | + | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/OpenSource">Ethics</a></li> |
</ul></li> | </ul></li> | ||
<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/ | + | <li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovieBricks">Bricks of Knowledge</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/Press">Press</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> | ||
- | |||
</ul> | </ul> | ||
+ | <div id="social_media"> | ||
+ | <a href="https://twitter.com/iGEMCopenhagen" class="twitter-follow-button" data-show-screen-name="false" data-show-count="false" data-lang="en">Follow @twitterapi</a> | ||
+ | |||
+ | <a href="https://twitter.com/iGEMCopenhagen" class="twitter-share-button" data-count="none" data-lang="en">Tweet</a> | ||
+ | |||
+ | <div class="fb-like" data-href="https://www.facebook.com/pages/IGEM-Copenhagen-2013/1393917120824679?fref=ts" data-width="The pixel width of the plugin" data-height="25" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div> | ||
</div> | </div> | ||
+ | |||
</div> | </div> | ||
- | |||
- |
Latest revision as of 14:28, 4 October 2013