Team:SYSU-China/css/main.css

From 2014.igem.org

(Difference between revisions)
(Created page with "@charset "utf-8"; - →CSS Document: html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, label, form, hr, menu, nav { vertical-align: baseline; padding: 0; margin: 0; ...")
Line 28: Line 28:
#section0{
#section0{
-
background-image:url(https://static.igem.org/mediawiki/2014/e/e5/Sysuchina_bg1.png);
+
background-image:url(../images/sysuchina_bg1.png);
}
}
#section1{
#section1{
-
background-image:url(https://static.igem.org/mediawiki/2014/5/54/Sysuchina_bg2.png);
+
background-image:url(../images/bg2/sysuchina_bg2.png);
background-repeat:repeat-x;
background-repeat:repeat-x;
}
}
 +
 +
#section1 h1{
 +
position: absolute;
 +
top: 75%;
 +
left: 8%;
 +
z-index: 100;
 +
}
 +
 +
 +
#section1 p{
 +
position: absolute;
 +
top: 85%;
 +
left: 8%;
 +
z-index: 100;
 +
}
 +
 +
 +
#section2{
#section2{
-
background-image:url(https://static.igem.org/mediawiki/2014/5/56/Sysuchina_bg3.png);
+
background-image:url(../images/bg3/sysuchina_bg3.png);
}
}
.worker{
.worker{
-
position:relative;
+
position:absolute;
-
top:100px;
+
bottom: 373px;
-
left:30px;
+
left: 50%;
 +
margin: 0 0 0 -620px;
}
}
.worker img {
.worker img {
-
margin: 20px;
 
-
width: 20%;
 
}
}
-
.line {
+
.pipeline {
-
position: relative;
+
z-index: 100;
-
margin-left: 20px;
+
left: 50%;
-
top: 60px;
+
position: absolute;
 +
margin: 0 0 0 -650px;
 +
bottom: 0px;
}
}
-
.line img {
+
.pipeline img {
float: left;
float: left;
}
}
-
.line .wheel {
+
.pipeline .wheel {
-
position: relative;
+
z-index: 1000;
z-index: 1000;
-
bottom: 10px;
+
width: 50px;
-
margin-left: -15px;
+
position: absolute;
-
margin-right: -15px;
+
bottom: 52px;
}
}
-
.line .segment {
+
.pipeline .line {
 +
position: absolute;
 +
width: 1300px;
 +
height: 35px;
 +
margin-left: 2.5%;
 +
bottom: 58px;
 +
z-index: 100;
 +
}
 +
 +
.bg2 {
 +
padding-left: 15%;
 +
height: 70%;
}
}
 +
.bg2 .button {
 +
position: absolute;
 +
left: 50%;
 +
bottom: 482px;
 +
margin: 0 0 0 -37px;
 +
width: 126px;
 +
}
 +
.button:hover {
 +
position: absolute;
 +
left: 50%;
 +
bottom: 482.5px;
 +
width: 130px;
 +
margin: 0 0 0 -39px;
 +
z-index: 100;
 +
cursor: pointer;
 +
}
 +
 +
 +
.bg2 img {
 +
}
 +
 +
.boardFont {
 +
position: absolute;
 +
z-index: 1001;
 +
top: 50px;
 +
left: 510px;
 +
}
Line 93: Line 149:
#section0 h1{
#section0 h1{
position:absolute;
position:absolute;
-
top:60px;
+
top: 8%;
-
right:50px;
+
right: 10%;
-
}
+
}
#section0 p{
#section0 p{
position:absolute;
position:absolute;
-
top:160px;
+
top: 22%;
-
right:50px;
+
right: 10%;
-
}
+
}
#section2 .intro {
#section2 .intro {
Line 110: Line 166:
#section2 .ch-grid{
#section2 .ch-grid{
-
     position:absolut;
+
     position: absolute;
-
top:0%;
+
    bottom: 44%;
 +
}
 +
#section2 .ch-grid li {
 +
position: absolute;
 +
left: 50%;
 +
}
 +
 
 +
#section2 .ch-grid li:nth-child(1) {
 +
margin: 0 0 0 -515px;
 +
}
 +
 
 +
#section2 .ch-grid li:nth-child(2) {
 +
margin: 0 0 0 -300px;
 +
}
 +
 
 +
#section2 .ch-grid li:nth-child(3) {
 +
margin: 0 0 0 -85px;
 +
}
 +
 
 +
#section2 .ch-grid li:nth-child(4) {
 +
margin: 0 0 0 130px;
 +
}
 +
 
 +
#section2 .ch-grid li:nth-child(5) {
 +
margin: 0 0 0 345px;
}
}
Line 117: Line 197:
color:#000;
color:#000;
text-align:center;
text-align:center;
-
}
+
}
#sysu{
#sysu{
-
margin-top: 50px;
 
position: absolute;
position: absolute;
-
left:410px;
+
bottom: 130px;
-
+
left: 50%;
 +
margin: 0 0 0 -280px;
}
}
Line 131: Line 211:
* --------------------------------------- */
* --------------------------------------- */
  #footer{
  #footer{
-
height: 45px;
 
display:block;
display:block;
width: 100%;
width: 100%;
Line 137: Line 216:
z-index:9;
z-index:9;
color: #f2f2f2;
color: #f2f2f2;
-
padding: 20px 0 0 90px;
 
bottom:0px;
bottom:0px;
position:absolute;
position:absolute;
font-family:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
-
text-align:left;
+
text-align:center;
-
}
+
}
 +
 
 +
.foo {
 +
height: 100px;
 +
line-height: 25px;
 +
padding: 20px 0 0 0;
 +
}
 +
 
 +
.fooback {
 +
height: 55px;
 +
line-height: 17px;
 +
padding: 10px 0 0 0;
 +
}
#footer h3{
#footer h3{
Line 154: Line 244:
#board {
#board {
-
margin: 20px;
+
position: absolute;
-
width: 20%;
+
width: 220px;
 +
margin-top: 70px;
 +
left: 990px;
}
}
-
.boardFont {
+
.bottom {
-
position: relative;
+
position: absolute;
-
float: right;
+
bottom: 0;
-
margin-top: 80px;
+
margin: 0;
-
right: 155px;
+
width: 100%;
-
color: white;
+
z-index: 5;
-
font-family:Arial, Helvetica, sans-serif;
+
}
}
-
.boardFont p {
+
#bottom1 {
-
margin-top: -20px;
+
height: 75px;
-
margin-left: -55px;
+
background-color: white;
}
}
 +
 +
#bottom2 {
 +
padding-top: 30px;
 +
height: 20%;
 +
background-color: rgb(217, 102, 73);
 +
}
 +
 +
#bottom3 {
 +
padding-top: 30px;
 +
background-color: white;
 +
}
 +
 +
#bottom4 {
 +
padding-top: 30px;
 +
background-color: white;
 +
}
 +
 +
#lefttear {
 +
position: absolute;
 +
width: 1px;
 +
height: auto;
 +
left: 94px;
 +
top: 55px;
 +
}
 +
 +
#righttear {
 +
position: absolute;
 +
width: 1px;
 +
height: auto;
 +
left: 223px;
 +
top: 55px;
 +
}
 +
 +
.fire {
 +
position: absolute;
 +
left: 705px;
 +
width: 45px;
 +
height: 68px;
 +
top: -15px;
 +
z-index: 300;
 +
}
 +
 +
#wheel1 {
 +
margin-left: 345px;
 +
}
 +
#wheel2 {
 +
margin-left: 660px;
 +
}
 +
#wheel3 {
 +
margin-left: 968px;
 +
}
 +
 +
#worker1 {
 +
position: absolute;
 +
left: 50px;
 +
}
 +
 +
#worker2 {
 +
position: absolute;
 +
left: 385px;
 +
}
 +
 +
#worker3 {
 +
position: absolute;
 +
left: 700px;
 +
}
 +
 +
#chaplin {
 +
height: 330px;
 +
position: absolute;
 +
left: 50%;
 +
bottom: 210px;
 +
margin: 0 0 0 -380px;
 +
}
 +
 +
.stroll {
 +
position: absolute;
 +
width: 90px;
 +
left: 50%;
 +
bottom: 0;
 +
margin: 0 0 0 -45px;
 +
}
 +
 +
.stroll:hover {
 +
cursor: pointer;
 +
filter:alpha(opacity=50);
 +
-moz-opacity:0.5;
 +
opacity:0.5;
 +
}
 +
 +
.down1 {
 +
/*visibility: hidden;*/
 +
position: absolute;
 +
width: 60px;
 +
left: 50%;
 +
bottom: 50px;
 +
margin: 0 0 0 -30px;
 +
z-index: 1001;
 +
 +
}
 +
 +
.down2 {
 +
/*visibility: hidden;*/
 +
position: absolute;
 +
width: 60px;
 +
left: 50%;
 +
bottom: -100px;
 +
margin: 0 0 0 -30px;
 +
z-index: -1000;
 +
 +
}
 +
 +
.think {
 +
position: absolute;
 +
width: 200px;
 +
left: 260px;
 +
top: -115px;
 +
}
 +
 +
.machine {
 +
position: absolute;
 +
height: 380px;
 +
left: 50%;
 +
bottom: 220px;
 +
margin: 0 0 0 -120px;
 +
}
 +
 +
.batman1 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 -10px;
 +
width: 80px;
 +
bottom: 350px;
 +
}
 +
 +
.batman2 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 200px;
 +
width: 110px;
 +
bottom: 260px;
 +
}
 +
 +
 +
.superman1 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 0px;
 +
width: 60px;
 +
bottom: 350px;
 +
}
 +
 +
 +
.superman2 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 200px;
 +
width: 90px;
 +
bottom: 440px;
 +
}
 +
 +
.in1 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 -200px;
 +
width: 50px;
 +
bottom: 460px;
 +
}
 +
 +
.in2 {
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 -5px;
 +
width: 50px;
 +
bottom: 348px;
 +
}
 +
 +
.down {
 +
position: absolute;
 +
 +
}
 +
/*
 +
 +
in 1
 +
position: absolute;
 +
left = 50%;
 +
margin: 0 0 0 -200px;
 +
width: 50px;
 +
bottom: 460px;
 +
 +
in 2
 +
position: absolute;
 +
left; 50%;
 +
margin: 0 0 0 -5px;
 +
width: 50px;
 +
bottom: 348px;
 +
 +
super 1
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 0px;
 +
width: 60px;
 +
bottom: 350px;
 +
 +
super 2
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 200px;
 +
width: 90px;
 +
bottom: 440px;
 +
 +
bat 1
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 -10px;
 +
width: 80px;
 +
bottom: 350px;
 +
 +
bat 2
 +
position: absolute;
 +
left: 50%;
 +
margin: 0 0 0 200px;
 +
width: 110px;
 +
bottom: 260px;
 +
*/

Revision as of 06:10, 10 October 2014

@charset "utf-8"; /* CSS Document */ html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, label, form, hr, menu, nav { 

 vertical-align: baseline;
 padding: 0;
 margin: 0;
 border: 0; }

body { 

 min-height: 100%; 
 }




/*@section one pictures
---------------------------------------------*/


  1. IGEMlogo img{

height:3em; width:3.4em; position:fixed; left:3em; top:1.5em; }

  1. section0{

background-image:url(../images/sysuchina_bg1.png); }

  1. section1{

background-image:url(../images/bg2/sysuchina_bg2.png); background-repeat:repeat-x; }

  1. section1 h1{

position: absolute; top: 75%; left: 8%; z-index: 100; }


  1. section1 p{

position: absolute; top: 85%; left: 8%; z-index: 100; }



  1. section2{

background-image:url(../images/bg3/sysuchina_bg3.png); }

.worker{ position:absolute; bottom: 373px; left: 50%; margin: 0 0 0 -620px; }

.worker img { }

.pipeline { z-index: 100; left: 50%; position: absolute; margin: 0 0 0 -650px; bottom: 0px; }

.pipeline img { float: left; }

.pipeline .wheel { z-index: 1000; width: 50px; position: absolute; bottom: 52px; }

.pipeline .line { position: absolute; width: 1300px; height: 35px; margin-left: 2.5%; bottom: 58px; z-index: 100; }


.bg2 { padding-left: 15%; height: 70%; }

.bg2 .button { position: absolute; left: 50%; bottom: 482px; margin: 0 0 0 -37px; width: 126px; }

.button:hover { position: absolute; left: 50%; bottom: 482.5px; width: 130px; margin: 0 0 0 -39px; z-index: 100; cursor: pointer; }


.bg2 img { }

.boardFont { position: absolute; z-index: 1001; top: 50px; left: 510px; } 


/*@section one structure
---------------------------------------------*/

.section h1{ font-family:Arial, Helvetica, sans-serif; font-size:4em; color:#FFF; }

.section p{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FFF; }

  1. section0 h1{

position:absolute; top: 8%; right: 10%; }

  1. section0 p{

position:absolute; top: 22%; right: 10%; }

  1. section2 .intro {

position:absolute; top:10%; left:17%; }

  1. section2 .ch-grid{ 
   position: absolute;
   bottom: 44%;

}

  1. section2 .ch-grid li {

position: absolute; left: 50%; }

  1. section2 .ch-grid li:nth-child(1) {

margin: 0 0 0 -515px; }

  1. section2 .ch-grid li:nth-child(2) {

margin: 0 0 0 -300px; }

  1. section2 .ch-grid li:nth-child(3) {

margin: 0 0 0 -85px; }

  1. section2 .ch-grid li:nth-child(4) {

margin: 0 0 0 130px; }

  1. section2 .ch-grid li:nth-child(5) {

margin: 0 0 0 345px; }

  1. section2 h1{

color:#000; text-align:center; }


  1. sysu{

position: absolute; bottom: 130px; left: 50%; margin: 0 0 0 -280px; }

/* Fixed footer. * --------------------------------------- */ 

#footer{

display:block; width: 100%; background: #333; z-index:9; color: #f2f2f2; bottom:0px; position:absolute; font-family:Arial, Helvetica, sans-serif; text-align:center; }

.foo { height: 100px; line-height: 25px; padding: 20px 0 0 0; }

.fooback { height: 55px; line-height: 17px; padding: 10px 0 0 0; }

  1. footer h3{

text-transform:uppercase; font-size:14px; }

  1. footer p{

font-size:12px; }

  1. board {

position: absolute; width: 220px; margin-top: 70px; left: 990px; }

.bottom { position: absolute; bottom: 0; margin: 0; width: 100%; z-index: 5; }

  1. bottom1 {

height: 75px; background-color: white; }

  1. bottom2 {

padding-top: 30px; height: 20%; background-color: rgb(217, 102, 73); }

  1. bottom3 {

padding-top: 30px; background-color: white; }

  1. bottom4 {

padding-top: 30px; background-color: white; }

  1. lefttear {

position: absolute; width: 1px; height: auto; left: 94px; top: 55px; }

  1. righttear {

position: absolute; width: 1px; height: auto; left: 223px; top: 55px; }

.fire { position: absolute; left: 705px; width: 45px; height: 68px; top: -15px; z-index: 300; }

  1. wheel1 {

margin-left: 345px; }

  1. wheel2 {

margin-left: 660px; }

  1. wheel3 {

margin-left: 968px; }

  1. worker1 {

position: absolute; left: 50px; }

  1. worker2 {

position: absolute; left: 385px; }

  1. worker3 {

position: absolute; left: 700px; }

  1. chaplin {

height: 330px; position: absolute; left: 50%; bottom: 210px; margin: 0 0 0 -380px; }

.stroll { position: absolute; width: 90px; left: 50%; bottom: 0; margin: 0 0 0 -45px; }

.stroll:hover { cursor: pointer; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }

.down1 { /*visibility: hidden;*/ position: absolute; width: 60px; left: 50%; bottom: 50px; margin: 0 0 0 -30px; z-index: 1001;

}

.down2 { /*visibility: hidden;*/ position: absolute; width: 60px; left: 50%; bottom: -100px; margin: 0 0 0 -30px; z-index: -1000;

}

.think { position: absolute; width: 200px; left: 260px; top: -115px; }

.machine { position: absolute; height: 380px; left: 50%; bottom: 220px; margin: 0 0 0 -120px; }

.batman1 { position: absolute; left: 50%; margin: 0 0 0 -10px; width: 80px; bottom: 350px; }

.batman2 { position: absolute; left: 50%; margin: 0 0 0 200px; width: 110px; bottom: 260px; }


.superman1 { position: absolute; left: 50%; margin: 0 0 0 0px; width: 60px; bottom: 350px; }


.superman2 { position: absolute; left: 50%; margin: 0 0 0 200px; width: 90px; bottom: 440px; }

.in1 { position: absolute; left: 50%; margin: 0 0 0 -200px; width: 50px; bottom: 460px; }

.in2 { position: absolute; left: 50%; margin: 0 0 0 -5px; width: 50px; bottom: 348px; }

.down { position: absolute;

} /*

in 1 position: absolute; left = 50%; margin: 0 0 0 -200px; width: 50px; bottom: 460px;

in 2 position: absolute; left; 50%; margin: 0 0 0 -5px; width: 50px; bottom: 348px;

super 1 position: absolute; left: 50%; margin: 0 0 0 0px; width: 60px; bottom: 350px;

super 2 position: absolute; left: 50%; margin: 0 0 0 200px; width: 90px; bottom: 440px;

bat 1 position: absolute; left: 50%; margin: 0 0 0 -10px; width: 80px; bottom: 350px;

bat 2 position: absolute; left: 50%; margin: 0 0 0 200px; width: 110px; bottom: 260px;

  • /
Retrieved from "http://2014.igem.org/Team:SYSU-China/css/main.css"