Team:NJU China/Team
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | !DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
- | |||
<head> | <head> | ||
- | |||
- | |||
<meta charset="UTF-8" /> | <meta charset="UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
Line 62: | Line 60: | ||
float:left; | float:left; | ||
white-space: nowrap; | white-space: nowrap; | ||
- | top:- | + | top:-6px; |
width: 490px; | width: 490px; | ||
z-index: 5000; | z-index: 5000; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
- | font-size: | + | font-size: 95%; |
line-height: 1em; | line-height: 1em; | ||
z-index:99; | z-index:99; | ||
Line 75: | Line 73: | ||
text-align: left; | text-align: left; | ||
color:#999999; | color:#999999; | ||
- | + | text-transform: lowercase; | |
} | } | ||
Line 166: | Line 164: | ||
text-align:left; | text-align:left; | ||
} | } | ||
- | + | h1,h2,h3,h4,h5,h6 { | |
+ | font-size:100%; | ||
+ | font-weight:normal; | ||
+ | } | ||
q:before,q:after { | q:before,q:after { | ||
content:''; | content:''; | ||
Line 191: | Line 192: | ||
clear: both; | clear: both; | ||
} | } | ||
- | + | h1{ | |
+ | font-size: 24px; | ||
+ | position:relative; | ||
+ | font-weight: 400; | ||
+ | padding: 30px 5px 10px 5px; | ||
+ | margin: 0px 15px; | ||
+ | color: rgba(153,157,181,0.6); | ||
+ | text-shadow: 0px 1px 1px #fff; | ||
+ | border-bottom: 1px solid rgba(17,17,22,0.1); | ||
+ | } | ||
+ | /* Header Style */ | ||
+ | .header{ | ||
+ | font-family:'Arial Narrow', Arial, sans-serif; | ||
+ | line-height: 24px; | ||
+ | font-size: 11px; | ||
+ | background: #000; | ||
+ | opacity: 0.9; | ||
+ | text-transform: uppercase; | ||
+ | z-index: 9999; | ||
+ | position: relative; | ||
+ | -moz-box-shadow: 1px 0px 2px #000; | ||
+ | -webkit-box-shadow: 1px 0px 2px #000; | ||
+ | box-shadow: 1px 0px 2px #000; | ||
+ | } | ||
+ | .header a{ | ||
+ | padding: 0px 10px; | ||
+ | letter-spacing: 1px; | ||
+ | color: #ddd; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | } | ||
+ | .header a:hover{ | ||
+ | color: #fff; | ||
+ | } | ||
+ | .header span.right{ | ||
+ | float: right; | ||
+ | } | ||
+ | .header span.right a{ | ||
+ | float: none; | ||
+ | display: inline; | ||
+ | } | ||
+ | .demos{ | ||
+ | position:relative; | ||
+ | z-index: 1000; | ||
+ | text-align:center; | ||
+ | float: right; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .demos a{ | ||
+ | display: inline-block; | ||
+ | padding: 4px 6px; | ||
+ | background: #000; | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | font-family: Arial; | ||
+ | font-size: 11px; | ||
+ | -webkit-font-smoothing:antialiased; | ||
+ | box-shadow: 1px 1px 4px rgba(0,0,0,0.2); | ||
+ | -webkit-transition: all 0.2s linear; | ||
+ | -moz-transition: all 0.2s linear; | ||
+ | -o-transition: all 0.2s linear; | ||
+ | -ms-transition: all 0.2s linear; | ||
+ | transition: all 0.2s linear; | ||
+ | } | ||
+ | .demos a:hover{ | ||
+ | color: #fff; | ||
+ | background: #c90047; | ||
+ | } | ||
+ | .demos a.current-demo, | ||
+ | .demos a.current-demo:hover{ | ||
+ | font-weight: bold; | ||
+ | background: #c90047; | ||
+ | color: #fff; | ||
+ | cursor: default; | ||
+ | } | ||
</style> | </style> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | h2.ss-subtitle{ | |
+ | padding: 10px 10px 40px; | ||
+ | font-size: 52px; | ||
+ | text-transform: uppercase; | ||
+ | color: rgba(0,0,0,0.8); | ||
+ | position: relative; | ||
+ | text-shadow: 1px 1px 2px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | h2.ss-subtitle:before{ | ||
+ | width: 4px; | ||
+ | height: 40px; | ||
+ | background: rgba(17,17,22,0.8); | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | right: 75%; | ||
+ | margin-right: -4px; | ||
+ | bottom: -4px; | ||
+ | -moz-border-radius: 2px 2px 0px 0px; | ||
+ | -webkit-border-radius: 2px 2px 0px 0px; | ||
+ | border-radius: 2px 2px 0px 0px; | ||
+ | } | ||
+ | h2.ss-subtitle:after{ | ||
+ | width: 25%; | ||
+ | height: 0px; | ||
+ | border-bottom: 4px dotted rgba(17,17,22,0.8); | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | margin-right: -1px; | ||
+ | bottom: -4px; | ||
+ | } | ||
.ss-links{ | .ss-links{ | ||
position: fixed; | position: fixed; | ||
Line 232: | Line 337: | ||
.ss-container h2{ | .ss-container h2{ | ||
font-size: 40px; | font-size: 40px; | ||
- | + | text-transform: uppercase; | |
color: rgba(78,84,123,0.2); | color: rgba(78,84,123,0.2); | ||
text-shadow: 0px 1px 1px #fff; | text-shadow: 0px 1px 1px #fff; | ||
Line 266: | Line 371: | ||
float: left; | float: left; | ||
padding-right: 2%; | padding-right: 2%; | ||
+ | } | ||
+ | .ss-circle{ | ||
+ | border-radius: 50%; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | text-indent: -9000px; | ||
+ | text-align: left; | ||
+ | -webkit-box-shadow: | ||
+ | 0px 2px 5px rgba(0,0,0,0.7) inset, | ||
+ | 0px 0px 0px 12px rgba(61,64,85,0.3); | ||
+ | -moz-box-shadow: | ||
+ | 0px 2px 5px rgba(0,0,0,0.7) inset, | ||
+ | 0px 0px 0px 12px rgba(61,64,85,0.3); | ||
+ | box-shadow: | ||
+ | 0px 2px 5px rgba(0,0,0,0.7) inset, | ||
+ | 0px 0px 0px 12px rgba(61,64,85,0.3); | ||
+ | background-size: cover; | ||
+ | background-color: #f0f0f0; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | position: static; | ||
+ | } | ||
+ | .ss-small .ss-circle{ | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | .ss-medium .ss-circle{ | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | } | ||
+ | .ss-large .ss-circle{ | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | } | ||
+ | .ss-circle-deco:before{ | ||
+ | width: 29%; | ||
+ | height: 0px; | ||
+ | border-bottom: 5px dotted #ddd; | ||
+ | border-bottom: 5px dotted rgba(17, 17, 22, 0.3); | ||
+ | -webkit-box-shadow: 0px 1px 1px #fff; | ||
+ | -moz-box-shadow: 0px 1px 1px #fff; | ||
+ | box-shadow: 0px 1px 1px #fff; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | content: ''; | ||
+ | margin-top: -3px; | ||
+ | } | ||
+ | .ss-circle-deco:after{ | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | border-top: 10px solid transparent; | ||
+ | border-bottom: 10px solid transparent; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin-top: -10px; | ||
+ | } | ||
+ | .ss-left .ss-circle-deco:before{ | ||
+ | right: 2%; | ||
+ | } | ||
+ | .ss-right .ss-circle-deco:before{ | ||
+ | left: 2%; | ||
+ | } | ||
+ | .ss-left .ss-circle-deco:after{ | ||
+ | right: 0; | ||
+ | border-right: 10px solid rgba(17,17,22,0.8); | ||
+ | } | ||
+ | .ss-right .ss-circle-deco:after{ | ||
+ | left: 0; | ||
+ | border-left: 10px solid rgba(17,17,22,0.8); | ||
+ | } | ||
+ | .ss-left .ss-circle{ | ||
+ | float: right; | ||
+ | margin-right: 30%; | ||
+ | } | ||
+ | .ss-right .ss-circle{ | ||
+ | float: left; | ||
+ | margin-left: 30%; | ||
+ | } | ||
+ | .ss-container h3{ | ||
+ | margin-top: 34px; | ||
+ | padding: 10px 15px; | ||
+ | background: rgba(26, 27, 33, 0.6); | ||
+ | text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8) | ||
} | } | ||
.ss-container .ss-medium h3{ | .ss-container .ss-medium h3{ | ||
Line 279: | Line 468: | ||
border-left: 5px solid rgba(164,166,181,0.8); | border-left: 5px solid rgba(164,166,181,0.8); | ||
} | } | ||
- | + | .ss-container h3 span{ | |
+ | color: rgba(255,255,255,0.8); | ||
+ | font-size: 13px; | ||
+ | display: block; | ||
+ | padding-bottom: 5px; | ||
+ | } | ||
+ | .ss-container h3 a{ | ||
+ | font-size: 28px; | ||
+ | color: rgba(255,255,255,0.9); | ||
+ | display: block; | ||
+ | } | ||
+ | .ss-container h3 a:hover{ | ||
+ | color: rgba(255,255,255,1); | ||
+ | } | ||
+ | .ss-circle-1{ | ||
+ | <P>WEEK</P> | ||
+ | } | ||
+ | .ss-circle-2{ | ||
+ | background-image: url(../images/2.jpg); | ||
+ | } | ||
+ | .ss-circle-3{ | ||
+ | background-image: url(../images/3.jpg); | ||
+ | } | ||
+ | .ss-circle-4{ | ||
+ | background-image: url(../images/4.jpg); | ||
+ | } | ||
+ | .ss-circle-5{ | ||
+ | background-image: url(../images/5.jpg); | ||
+ | } | ||
+ | .ss-circle-6{ | ||
+ | background-image: url(../images/6.jpg); | ||
+ | } | ||
+ | .ss-circle-7{ | ||
+ | background-image: url(../images/7.jpg); | ||
+ | } | ||
+ | .ss-circle-8{ | ||
+ | background-image: url(../images/8.jpg); | ||
+ | } | ||
+ | .ss-circle-9{ | ||
+ | background-image: url(../images/9.jpg); | ||
+ | } | ||
+ | .ss-circle-10{ | ||
+ | background-image: url(../images/10.jpg); | ||
+ | } | ||
+ | .ss-circle-11{ | ||
+ | background-image: url(../images/11.jpg); | ||
+ | } | ||
+ | .ss-circle-12{ | ||
+ | background-image: url(../images/12.jpg); | ||
+ | } | ||
+ | .ss-circle-13{ | ||
+ | background-image: url(../images/13.jpg); | ||
+ | } | ||
+ | .ss-circle-14{ | ||
+ | background-image: url(../images/14.jpg); | ||
+ | } | ||
+ | .ss-circle-15{ | ||
+ | background-image: url(../images/15.jpg); | ||
+ | } | ||
+ | .ss-circle-16{ | ||
+ | background-image: url(../images/16.jpg); | ||
+ | } | ||
+ | .ss-circle-17{ | ||
+ | background-image: url(../images/17.jpg); | ||
+ | } | ||
+ | .ss-circle-18{ | ||
+ | background-image: url(../images/18.jpg); | ||
+ | } | ||
+ | .ss-circle-19{ | ||
+ | background-image: url(../images/19.jpg); | ||
+ | } | ||
+ | .ss-circle-20{ | ||
+ | background-image: url(../images/20.jpg); | ||
+ | } | ||
+ | .ss-circle-21{ | ||
+ | background-image: url(../images/21.jpg); | ||
+ | } | ||
+ | .ss-circle-22{ | ||
+ | background-image: url(../images/22.jpg); | ||
+ | } | ||
+ | .ss-circle-23{ | ||
+ | background-image: url(../images/23.jpg); | ||
+ | } | ||
+ | .ss-circle-24{ | ||
+ | background-image: url(../images/24.jpg); | ||
+ | } | ||
+ | .ss-circle-25{ | ||
+ | background-image: url(../images/25.jpg); | ||
+ | } | ||
+ | .ss-circle-26{ | ||
+ | background-image: url(../images/26.jpg); | ||
+ | } | ||
+ | .ss-circle-27{ | ||
+ | background-image: url(../images/27.jpg); | ||
+ | } | ||
+ | .ss-circle-28{ | ||
+ | background-image: url(../images/28.jpg); | ||
+ | } | ||
+ | .ss-circle-29{ | ||
+ | background-image: url(../images/29.jpg); | ||
+ | } | ||
+ | .ss-circle-30{ | ||
+ | background-image: url(../images/30.jpg); | ||
+ | } | ||
</style> | </style> | ||
<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' /> | <link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' /> |
Revision as of 01:27, 28 September 2013
!DOCTYPE html>