Team:SYSU-Software/team.css
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | *{ | |
+ | padding:0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | body { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
background-color: #CCC; | background-color: #CCC; | ||
- | + | font-family: 'Arial'; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | ||
- | + | /*header images */ | |
#team-header{ | #team-header{ | ||
+ | margin: 0 auto; | ||
+ | z-index: 100; | ||
+ | |||
height: 200px; | height: 200px; | ||
width: 980px; | width: 980px; | ||
background-color: white; | background-color: white; | ||
+ | |||
+ | font-family: 'Arial'; | ||
} | } | ||
#team-header-logo{ | #team-header-logo{ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
position: relative; | position: relative; | ||
- | left: | + | left: 20px; |
top:30px; | top:30px; | ||
} | } | ||
#team-header-text{ | #team-header-text{ | ||
- | position: | + | position: relative; |
- | left: | + | left: 130px; |
- | top: | + | top: -67px; |
+ | } | ||
- | + | #boss-header-image{ | |
- | + | position: relative; | |
- | + | left: 285px; | |
- | + | top: -85px; | |
} | } | ||
- | + | ||
+ | /*navigation*/ | ||
+ | #navigation1{ | ||
+ | float: right; | ||
+ | height: 40px; | ||
+ | |||
+ | z-index: 100; | ||
+ | |||
+ | position: relative; | ||
+ | top: -37px; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | margin-bottom: 0px; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | |||
.nav{ | .nav{ | ||
- | height: | + | display: inline; |
+ | |||
+ | height: 40px; | ||
background-color:#A8DBD2; | background-color:#A8DBD2; | ||
} | } | ||
- | + | ||
.navbar-inverse .nav > li > a{ | .navbar-inverse .nav > li > a{ | ||
- | font-size: | + | font-size: 14px; |
- | + | ||
border: none; | border: none; | ||
+ | height: 40px; | ||
+ | padding:0px 20px; | ||
+ | |||
+ | line-height: 40px; | ||
} | } | ||
#nav-li{ | #nav-li{ | ||
height: 40px; | height: 40px; | ||
} | } | ||
- | + | ||
- | + | .navbar-inverse .nav > li.active > a{ | |
+ | background-color: #FFE14B; | ||
height: 40px; | height: 40px; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.navbar-inverse .nav > li.active > a{ | .navbar-inverse .nav > li.active > a{ | ||
- | background-color: #FFE14B; | + | background-color: #FFE14B; |
- | + | } | |
+ | /*sub navs*/ | ||
+ | #sub-link1{ | ||
+ | width:90px; | ||
+ | background-color:#A8DBD2; | ||
+ | } | ||
+ | .navbar .nav > li > ul:before { | ||
+ | border-width: 0px; | ||
} | } | ||
+ | #sub-link2{ | ||
+ | width:100px; | ||
+ | background-color:#A8DBD2; | ||
+ | } | ||
+ | #sub-link3{ | ||
+ | width:135px; | ||
+ | background-color:#A8DBD2; | ||
+ | |||
+ | } | ||
+ | #sub-link4{ | ||
+ | background-color:#A8DBD2; | ||
+ | width:70px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*team contents*/ | ||
+ | #team-container{ | ||
+ | width: 980px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
#team-content{ | #team-content{ | ||
background-color: #544444; | background-color: #544444; | ||
width: 980px; | width: 980px; | ||
- | |||
} | } | ||
#content-head-text{ | #content-head-text{ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
position: relative; | position: relative; | ||
- | left: | + | left: 130px; |
- | top: - | + | top: 50px; |
+ | } | ||
+ | #fly{ | ||
+ | position: relative; | ||
+ | left: 35px; | ||
+ | top: -40px; | ||
+ | } | ||
+ | #fly img:hover{ | ||
+ | -moz-transform:scale(1.4); | ||
+ | -webkit-transform:scale(1.4); | ||
+ | -o-transform:scale(1.4); | ||
+ | -ms-transform:scale(1.4); | ||
+ | transform:scale(1.4); | ||
} | } | ||
#content-text{ | #content-text{ | ||
- | font-size: | + | font-size: 15px; |
font-weight: bolder; | font-weight: bolder; | ||
color: #A8DBD2; | color: #A8DBD2; | ||
line-height: 25px; | line-height: 25px; | ||
+ | |||
+ | display: block; | ||
+ | width: 370px; | ||
position: relative; | position: relative; | ||
- | top: - | + | top: -90px; |
- | left: | + | left: 515px; |
} | } | ||
- | + | #content-text:first-letter{ | |
font-size: 30px; | font-size: 30px; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
#myModal{ | #myModal{ | ||
+ | position: absolute; | ||
+ | left: 44%; | ||
+ | |||
border-radius: 0px; | border-radius: 0px; | ||
- | width: | + | width: 700px; |
height: 400px; | height: 400px; | ||
} | } | ||
#content-image{ | #content-image{ | ||
position: relative; | position: relative; | ||
- | + | top: -10px; | |
- | + | ||
+ | margin-bottom: 80px; | ||
} | } | ||
.teamer-image-list{ | .teamer-image-list{ | ||
+ | margin:0 auto; | ||
table-layout: auto; | table-layout: auto; | ||
- | width: | + | width: 68%; |
} | } | ||
.teamer-image{ | .teamer-image{ | ||
- | + | display: inline; | |
- | + | margin-left: 10px; | |
- | + | margin-right: 0px; | |
- | margin: | + | margin-bottom: 25px; |
} | } | ||
- | + | .teamer-image:hover{ | |
- | + | -moz-transform:scale(1.2); | |
- | + | -webkit-transform:scale(1.2); | |
- | + | -o-transform:scale(1.2); | |
+ | -ms-transform:scale(1.2); | ||
+ | transform:scale(1.2); | ||
} | } | ||
+ | |||
+ | |||
+ | |||
#instructor-image{ | #instructor-image{ | ||
position: relative; | position: relative; | ||
- | |||
- | |||
} | } | ||
#instructor-image-list{ | #instructor-image-list{ | ||
+ | margin:0 auto; | ||
table-layout: auto; | table-layout: auto; | ||
width: 460px; | width: 460px; | ||
} | } | ||
.teacher-image{ | .teacher-image{ | ||
- | + | margin-bottom: 40px; | |
- | + | } | |
- | + | .teacher-image:hover{ | |
+ | -moz-transform:scale(1.2); | ||
+ | -webkit-transform:scale(1.2); | ||
+ | -o-transform:scale(1.2); | ||
+ | -ms-transform:scale(1.2); | ||
+ | transform:scale(1.2); | ||
+ | } | ||
+ | |||
- | margin: | + | /*footer*/ |
+ | #team-footer{ | ||
+ | width: 980px; | ||
+ | margin:0 auto; | ||
+ | |||
+ | position: relative; | ||
+ | bottom: 0px; | ||
+ | overflow: hidden; | ||
+ | |||
+ | background-color: #ebdfd2; | ||
} | } | ||
- | + | /*instructions*/ | |
+ | #team-sub{ | ||
position: relative; | position: relative; | ||
- | + | ||
- | + | margin-bottom: 30px; | |
} | } | ||
- | # | + | #subscribe{ |
- | position:relative; | + | position: relative; |
- | + | } | |
- | top: | + | #subscribe-header{ |
+ | position: relative; | ||
+ | top: 25px; | ||
+ | left: 145px; | ||
- | - | + | font-weight: bolder; |
- | - | + | font-size: 25px; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #subscribe-content{ | ||
+ | position: relative; | ||
+ | top: 45px; | ||
+ | left: 145px; | ||
+ | |||
+ | font-weight: bold; | ||
+ | line-height: 10px; | ||
+ | } | ||
+ | #link{ | ||
+ | position: relative; | ||
+ | left: 100px; | ||
+ | } | ||
+ | #link-header{ | ||
+ | position: relative; | ||
+ | top: 20px; | ||
+ | left: 180px; | ||
+ | |||
+ | font-weight:bolder; | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | #link-content{ | ||
+ | position: relative; | ||
+ | top: 34px; | ||
+ | left: 180px; | ||
+ | } | ||
+ | |||
+ | #link-content a{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | /*bottom image*/ | ||
+ | #bottom-image{ | ||
+ | position: relative; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
a:focus{ | a:focus{ | ||
outline-color:#544444; | outline-color:#544444; | ||
} | } |
Revision as of 13:34, 25 August 2013
*{ padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; }
/*header images */ #team-header{ margin: 0 auto; z-index: 100;
height: 200px; width: 980px; background-color: white;
font-family: 'Arial'; } #team-header-logo{ position: relative; left: 20px; top:30px; } #team-header-text{ position: relative; left: 130px; top: -67px; }
#boss-header-image{ position: relative; left: 285px; top: -85px; }
/*navigation*/ #navigation1{ float: right; height: 40px;
z-index: 100;
position: relative; top: -37px; }
.navbar { margin-bottom: 0px; overflow: visible; }
.nav{ display: inline;
height: 40px; background-color:#A8DBD2; } .navbar-inverse .nav > li > a{ font-size: 14px; border: none; height: 40px; padding:0px 20px;
line-height: 40px; } #nav-li{ height: 40px; } .navbar-inverse .nav > li.active > a{ background-color: #FFE14B; height: 40px; } .navbar-inverse .nav > li.active > a{ background-color: #FFE14B; } /*sub navs*/ #sub-link1{ width:90px; background-color:#A8DBD2; } .navbar .nav > li > ul:before { border-width: 0px; }
#sub-link2{ width:100px; background-color:#A8DBD2; } #sub-link3{ width:135px; background-color:#A8DBD2;
} #sub-link4{ background-color:#A8DBD2; width:70px; }
/*team contents*/ #team-container{ width: 980px; margin: 0 auto; } #team-content{ background-color: #544444; width: 980px; } #content-head-text{ position: relative; left: 130px; top: 50px; } #fly{ position: relative; left: 35px; top: -40px; } #fly img:hover{ -moz-transform:scale(1.4); -webkit-transform:scale(1.4); -o-transform:scale(1.4); -ms-transform:scale(1.4); transform:scale(1.4); } #content-text{ font-size: 15px; font-weight: bolder; color: #A8DBD2; line-height: 25px;
display: block; width: 370px;
position: relative; top: -90px; left: 515px; } #content-text:first-letter{ font-size: 30px; }
#myModal{ position: absolute; left: 44%;
border-radius: 0px; width: 700px; height: 400px; } #content-image{ position: relative; top: -10px;
margin-bottom: 80px; } .teamer-image-list{ margin:0 auto; table-layout: auto; width: 68%; } .teamer-image{ display: inline; margin-left: 10px; margin-right: 0px; margin-bottom: 25px; } .teamer-image:hover{ -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); }
#instructor-image{ position: relative; } #instructor-image-list{ margin:0 auto; table-layout: auto; width: 460px; } .teacher-image{ margin-bottom: 40px; } .teacher-image:hover{ -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); }
/*footer*/ #team-footer{ width: 980px; margin:0 auto;
position: relative; bottom: 0px; overflow: hidden;
background-color: #ebdfd2; } /*instructions*/ #team-sub{ position: relative;
margin-bottom: 30px; } #subscribe{ position: relative; } #subscribe-header{ position: relative; top: 25px; left: 145px;
font-weight: bolder; font-size: 25px; } #subscribe-content{ position: relative; top: 45px; left: 145px;
font-weight: bold; line-height: 10px; } #link{ position: relative; left: 100px; } #link-header{ position: relative; top: 20px; left: 180px;
font-weight:bolder; font-size: 25px; } #link-content{ position: relative; top: 34px; left: 180px; }
#link-content a{ text-decoration: none; } /*bottom image*/ #bottom-image{ position: relative; bottom: 0px; }
a:focus{ outline-color:#544444; }