Team:UNIK Copenhagen/template
From 2013.igem.org
(Difference between revisions)
SigneKarlsen (Talk | contribs) m |
SigneKarlsen (Talk | contribs) |
||
(34 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
*{ | *{ | ||
Line 24: | Line 25: | ||
body{ | body{ | ||
- | background-color: #cccccc; | + | background-color: #cccccc; |
- | background-image: url("https://static.igem.org/mediawiki/2013/b/ba/UNIK_Copenhagen_bg.png"); | + | 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; | + | background-attachment: fixed; |
} | } | ||
#top-section { | #top-section { | ||
Line 39: | Line 40: | ||
margin: 0px; | margin: 0px; | ||
padding: 5px; | padding: 5px; | ||
- | width: 100%; | + | width: 100%; |
} | } | ||
#menubar.left-menu ul{ | #menubar.left-menu ul{ | ||
- | margin-left: -5px; | + | margin-left: -5px; |
- | padding: 5px 3px 3px 5px; | + | padding: 5px 3px 3px 5px; |
- | background: white; | + | background: white; |
- | border-bottom-left-radius: 5px; | + | border-bottom-left-radius: 5px; |
- | border-bottom-right-radius: 5px; | + | border-bottom-right-radius: 5px; |
- | box-shadow: 0px 0px 5px #888888; | + | box-shadow: 0px 0px 5px #888888; |
- | -webkit-box-shadow: 0px 0px 5px #888888; | + | -webkit-box-shadow: 0px 0px 5px #888888; |
- | -moz-box-shadow: 0px 0px 5px #888888; | + | -moz-box-shadow: 0px 0px 5px #888888; |
} | } | ||
#menubar.left-menu{ | #menubar.left-menu{ | ||
Line 55: | Line 56: | ||
} | } | ||
#menubar.right-menu ul{ | #menubar.right-menu ul{ | ||
- | padding: 5px 6px 3px 3px; | + | padding: 5px 6px 3px 3px; |
} | } | ||
#footer-box{ | #footer-box{ | ||
Line 70: | Line 71: | ||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
- | #footer{width: 900px; margin: 0px auto} | + | #footer{ |
- | #footer a{color: white;} | + | width: 900px; |
+ | margin: 0px auto | ||
+ | } | ||
+ | #footer a{ | ||
+ | color: white; | ||
+ | } | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
- | /* | + | /* Wrapper CSS */ |
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
#wrapper{ | #wrapper{ | ||
- | display: block; | + | display: block; |
- | position: relative; | + | position: relative; |
width:964px; | width:964px; | ||
- | min-height: 1000px; | + | min-height: 1000px; |
margin: 45px auto -5px auto; | margin: 45px auto -5px auto; | ||
- | padding: 0px 10px 60px 10px; | + | padding: 0px 10px 60px 10px; |
z-index: 95; | z-index: 95; | ||
- | background: white; | + | background: white; |
- | top:-10px; | + | top:-10px; |
- | border-radius: 5px; | + | border-radius: 5px; |
- | box-shadow: 0px 0px 5px #888888; | + | box-shadow: 0px 0px 5px #888888; |
-webkit-box-shadow: 0px 0px 5px #888888; | -webkit-box-shadow: 0px 0px 5px #888888; | ||
-moz-box-shadow: 0px 0px 5px #888888; | -moz-box-shadow: 0px 0px 5px #888888; | ||
} | } | ||
+ | /*-------------------------------------------------------*/ | ||
+ | /* Navigation Bar CSS */ | ||
+ | /*-------------------------------------------------------*/ | ||
#nav{ | #nav{ | ||
- | display: block; | + | display: block; |
- | width: 940px; | + | width: 940px; |
- | height: 38px; | + | height: 38px; |
- | margin: 0 auto; | + | margin: 0 auto; |
- | border-bottom: 1px solid #cccccc; | + | border-bottom: 1px solid #cccccc; |
- | border-top: 1px solid #cccccc; | + | border-top: 1px solid #cccccc; |
} | } | ||
#nav li{ | #nav li{ | ||
Line 116: | Line 125: | ||
visibility: hidden; | visibility: hidden; | ||
z-index: 95; | z-index: 95; | ||
- | margin:1px 0px 0px 0px; | + | margin:1px 0px 0px 0px; |
- | background: white; | + | background: white; |
- | box-shadow: 0px 0px 2px #888888; | + | box-shadow: 0px 0px 2px #888888; |
- | -webkit-box-shadow: 0px 0px 2px #888888; | + | -webkit-box-shadow: 0px 0px 2px #888888; |
- | -moz-box-shadow: 0px 0px 2px #888888; | + | -moz-box-shadow: 0px 0px 2px #888888; |
} | } | ||
#nav ul ul li{ | #nav ul ul li{ | ||
- | border: none; | + | border: none; |
} | } | ||
#nav ul li a{ | #nav ul li a{ | ||
Line 131: | Line 140: | ||
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
- | height: 30px; | + | height: 30px; |
color: #333333; | color: #333333; | ||
- | padding: 0px | + | padding: 0px 10px 0px 10px; |
margin: 0px; | margin: 0px; | ||
z-index: 95; | z-index: 95; | ||
Line 151: | Line 160: | ||
} | } | ||
#nav li:hover{ | #nav li:hover{ | ||
- | border-bottom: 1px solid #990000; | + | border-bottom: 1px solid #990000; |
- | border-top: 1px solid #990000; | + | border-top: 1px solid #990000; |
} | } | ||
#nav li:hover a{ | #nav li:hover a{ | ||
Line 158: | Line 167: | ||
} | } | ||
#nav li li:hover{ | #nav li li:hover{ | ||
- | border: none; | + | border: none; |
} | } | ||
#nav ul li:hover ul li a{ | #nav ul li:hover ul li a{ | ||
Line 168: | Line 177: | ||
} | } | ||
+ | /*-------------------------------------------------------*/ | ||
+ | /* Social Media (hide facebook-count) */ | ||
+ | /*-------------------------------------------------------*/ | ||
+ | #social_media{ | ||
+ | position: absolute; | ||
+ | top: 150px; | ||
+ | right: 30px; | ||
+ | text-align: right; | ||
+ | } | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
/* Fonts */ | /* Fonts */ | ||
Line 222: | Line 240: | ||
margin: 10px; | margin: 10px; | ||
font-size:14px; | font-size:14px; | ||
- | font-family: | + | font-family: Baskerville; |
- | line-height: | + | line-height: 18px; |
padding-left: 15px; | padding-left: 15px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
Line 250: | Line 268: | ||
/*-------------------------------------------------------*/ | /*-------------------------------------------------------*/ | ||
#two_logos{ | #two_logos{ | ||
- | height: 140px; | + | height: 140px; |
} | } | ||
#our_logo{ | #our_logo{ | ||
- | display: inline-block; | + | display: inline-block; |
- | position: relative; | + | position: relative; |
- | float: left; | + | float: left; |
margin: 30px 0px 0px 15px; | margin: 30px 0px 0px 15px; | ||
} | } | ||
#iGEM_logo{ | #iGEM_logo{ | ||
- | display: inline-block; | + | display: inline-block; |
- | float: right; | + | float: right; |
position:relative; | position:relative; | ||
margin: 15px 15px 0px 0px; | margin: 15px 15px 0px 0px; | ||
- | top: 0px; | + | top: 0px; |
} | } | ||
#iGEM{ | #iGEM{ | ||
Line 284: | Line 302: | ||
-webkit-transition-duration: 1s; | -webkit-transition-duration: 1s; | ||
- | + | -moz-transition-duration: 1s; | |
- | + | -o-transition-duration: 1s; | |
- | + | transition-duration: 1s; | |
-webkit-transform: rotate(0deg); | -webkit-transform: rotate(0deg); | ||
Line 293: | Line 311: | ||
-ms-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{ | #no_wheel:hover + #wheel{ | ||
- | -webkit-transform: rotate(360deg); | + | -webkit-transform: rotate(360deg); |
- | -moz-transform: rotate(360deg); | + | -moz-transform: rotate(360deg); |
- | -o-transform: rotate(360deg); | + | -o-transform: rotate(360deg); |
- | -ms-transform: rotate(360deg); | + | -ms-transform: rotate(360deg); |
z-index: -1; | z-index: -1; | ||
} | } | ||
+ | </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> | ||
Line 340: | Line 369: | ||
<li><a href="https://igem.org/Team.cgi?id=1094">Official Team Profile</a></li> | <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/OpenSource"> | + | <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> | ||
Line 350: | Line 380: | ||
</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> |
Latest revision as of 14:28, 4 October 2013