Team:SYSU-Software/home.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
    *{
+
*{
-
      padding:0px;
+
padding:0px;
-
      margin: 0px;
+
margin: 0px;
-
    }
+
}
-
    body {
+
body {
-
      height: 100%;
+
height: 100%;
-
      width: 100%;
+
width: 100%;
-
      background-color: #CCC;
+
background-color: #CCC;
-
      font-family: 'Arial';
+
font-family: 'Arial';
-
    }
+
}
-
    /*header images */
+
/*header images */
-
    #team-header{
+
#team-header{
-
      margin: 0 auto;
+
margin: 0 auto;
-
      z-index: 100;
+
z-index: 100;
-
      height: 200px;
+
height: 200px;
-
      width: 980px;
+
width: 980px;
-
      background-color: white;
+
background-color: white;
-
      font-family: 'Arial';
+
font-family: 'Arial';
-
    }
+
}
 +
#team-header-logo{
 +
position: relative;
 +
left: 20px;
 +
top:30px;
 +
}
 +
#team-header-text{
 +
position: relative;
 +
left: 130px;
 +
top: -67px;
 +
}
-
    #team-header-text{
+
#boss-header-image{
-
      position: relative;
+
position: relative;
-
      left: 130px;
+
left: 285px;
-
      top: -67px;
+
top: -85px;
-
    }
+
}
-
    #boss-header-image{
+
/*navigation*/
-
      position: relative;
+
#navigation{
-
      left: 285px;
+
float: right;
-
      top: -85px;
+
height: 40px;
-
    }
+
-
    /*navigation*/
+
z-index: 100;
-
    #navigation1{
+
-
      float: right;
+
-
      height: 40px;
+
-
      z-index: 100;
+
position: relative;
 +
top: -37px;
 +
}
-
      position: relative;
+
.navbar {
-
      top: -37px;
+
margin-bottom: 0px;
-
    }
+
overflow: visible;
 +
}
-
    .navbar {
+
.nav{
-
    margin-bottom: 0px;
+
display: inline;
-
    overflow: visible;
+
-
    }
+
-
    .nav{
+
height: 40px;
-
      display: inline;
+
background-color:#A8DBD2;    
 +
}
-
      height: 40px;
+
.navbar-inverse .nav > li > a{
-
      background-color:#A8DBD2;   
+
font-size: 14px;
-
    }
+
border: none;
-
       
+
height: 40px;
-
    .navbar-inverse .nav > li > a{
+
padding:0px 20px;
-
      font-size: 14px;
+
-
      border: none;
+
-
      height: 40px;
+
-
      padding:0px 20px;
+
-
      line-height: 40px;
+
line-height: 40px;
-
    }
+
}
-
    #nav-li{
+
#nav-li{
-
      height: 40px;
+
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{
+
.navbar-inverse .nav > li.active > a{
-
      width:100px;
+
background-color: #FFE14B;
-
      background-color:#A8DBD2;  
+
height: 40px;
-
    }  
+
}
-
    #sub-link3{
+
.navbar-inverse .nav > li.active > a{
-
      width:135px;
+
background-color: #FFE14B;  
-
      background-color:#A8DBD2;  
+
}
 +
/*sub navs*/
 +
#sub-link1{
 +
width:90px;
 +
background-color:#A8DBD2;  
 +
}   
 +
.navbar .nav > li > ul:before {
 +
border-width: 0px;
 +
}
-
    }   
+
#sub-link2{
-
    #sub-link4{
+
width:100px;
-
      background-color:#A8DBD2;  
+
background-color:#A8DBD2;  
-
      width:70px;
+
}   
-
    }   
+
#sub-link3{
 +
width:135px;
 +
background-color:#A8DBD2;
 +
}   
 +
#sub-link4{
 +
background-color:#A8DBD2;
 +
width:70px;
 +
}   
-
    /*home content*/
 
-
    #home-container{
 
-
      width: 980px;
 
-
      margin: 0 auto;
 
-
    }
 
-
    /*slides part*/
 
-
    #home-slides{
 
-
      height: 430px;
 
-
      background-color: #A8DBD2;
+
/*home content*/
-
    }
+
#home-container{
-
    #myCarousel{
+
width: 980px;
-
      height: 430px;
+
margin: 0 auto;  
-
      width: 780px;
+
}
 +
/*slides part*/
 +
#home-slides{
 +
height: 430px;
-
      margin: 0 auto;
+
background-color: #A8DBD2;
-
    }
+
}
-
    #slides-image img{
+
#myCarousel{
-
      height: 430px;
+
height: 430px;
-
      width: 780px;
+
width: 780px;
-
      margin:0 auto;
+
margin: 0 auto;
-
    }
+
}
 +
#slides-image img{
 +
height: 430px;
 +
width: 780px;
 +
margin:0 auto;
 +
}
-
    /*main content part*/
 
-
    #home-content{
 
-
      width: 980px;
 
-
      height: 100%;
 
-
      background-color: white;
 
-
    }
 
-
    #home-note{
+
/*main content part*/
-
      padding-top: 80px;
+
#home-content{
-
      margin-left: 24px;
+
width: 980px;
-
    }
+
height: 100%;
-
    #note{
+
background-color: white;
-
      display: inline-table;
+
}
-
    }
+
-
    #pin{
+
-
      margin-left: 10px;
+
-
      position: relative;
+
-
    }
+
-
    #note-header{
+
-
      font-family: 'Arial';
+
-
      font-size: 20px;
+
-
      font-weight: bolder;
+
-
    }
+
-
    #note-pin{
+
-
      margin-left: 146px;
+
-
      position: relative;
+
#home-note{
-
      top: -200px;
+
padding-top: 80px;
-
      display: block;
+
margin-left: 24px;
-
      width: 20px;
+
}
-
      z-index: 100;
+
#note{
-
    }
+
display: inline-table;
-
    #notepad{
+
}
-
      position: relative;
+
#pin{
-
      height: 190px;
+
margin-left: 10px;
-
      width: 157px;
+
position: relative;
-
      display: block;
+
}
 +
#note-header{
 +
font-family: 'Arial';
 +
font-size: 20px;
 +
font-weight: bolder;
 +
}
 +
#note-pin{
 +
margin-left: 146px;
-
      margin-right: 20px;
+
position: relative;
-
      background-color: #def1ee;
+
top: -200px;
 +
display: block;
 +
width: 20px;
 +
z-index: 100;
 +
}
 +
#notepad{
 +
position: relative;
 +
height: 190px;
 +
width: 157px;
 +
display: block;
-
      margin-top: 2px;
+
margin-right: 20px;
-
    }
+
background-color: #def1ee;
-
   
+
-
 
+
 +
margin-top: 2px;
 +
}
-
    #home-introduction{
 
-
      padding-top: 30px;
 
-
      padding-bottom: 100px;
 
-
    }
 
-
    #introduction-text{
 
-
    }
 
-
    #introduction-header{
 
-
      display: block;
 
-
      margin-left: 55px;
 
-
      font-family: 'Arial';
 
-
      font-size: 22px;
 
-
      font-weight: bold;
 
-
      color:#ffcc33;
 
-
    }
 
-
    #header-header{
 
-
      position: relative;
 
-
      left: -30px;
 
-
      top: 40px;
 
-
    }
 
-
    #introduction-content{
 
-
      font-family: 'Arial';
 
-
      font-weight: bold;
 
-
      display: block;
+
#home-introduction{
-
      margin-top: 40px;
+
padding-top: 30px;
-
      margin-left: 100px;
+
padding-bottom: 100px;
 +
}
 +
#introduction-text{
 +
}
 +
#introduction-header{
 +
display: block;
 +
margin-left: 55px;
-
      display: block;
+
font-family: 'Arial';  
-
      width: 300px;
+
font-size: 22px;
-
    }
+
font-weight: bold;
-
    #feiji{
+
color:#ffcc33;
-
      display: block;
+
}
-
      margin-top: 60px;
+
#header-header{
-
      margin-left: 26px;
+
position: relative;
-
    }
+
left: -30px;
-
    #introduction-vedio{
+
top: 40px;
-
      display: block;
+
}
-
      margin-top: -350px;
+
-
      margin-left: 404px;
+
-
    }
+
-
    #introduction-vedio img{
+
-
      width: 525px;
+
-
      height: 360px;
+
-
    }
+
 +
#introduction-content{
 +
font-family: 'Arial';
 +
font-weight: bold;
 +
display: block;
 +
margin-top: 40px;
 +
margin-left: 100px;
-
    /*footer*/
+
display: block;
-
    #team-footer{
+
width: 300px;
-
      width: 980px;
+
}
-
      margin:0 auto;
+
#feiji{
 +
display: block;
 +
margin-top: 60px;
 +
margin-left: 26px;
 +
}
 +
#introduction-vedio{
 +
display: block;
 +
margin-top: -350px;
 +
margin-left: 404px;
 +
}
 +
#introduction-vedio img{
 +
width: 525px;
 +
height: 360px;
 +
}
-
      position: relative;
 
-
      bottom: 0px;
 
-
      overflow: hidden;
 
-
      background-color: #ebdfd2;
 
-
    }
 
-
    /*instructions*/
 
-
    #team-sub{
 
-
      position: relative;
 
-
      margin-bottom: 30px;
+
/*footer*/
-
    }
+
#team-footer{
-
    #subscribe{
+
width: 100%;
-
      position: relative;
+
margin:0 auto;
-
    }
+
-
    #subscribe-header{
+
-
      position: relative;
+
-
      top: 25px;
+
-
      left: 145px;
+
-
      font-weight: bolder;
+
position: relative;
-
      font-size: 25px;
+
bottom: 0px;
-
    }
+
overflow: hidden;
-
    #subscribe-content{
+
-
      position: relative;
+
-
      top: 45px;
+
-
      left: 145px;
+
-
      font-weight: bold;
+
background-color: #e0f4f2;
-
      line-height: 10px;
+
}
-
    }
+
.footer {
-
    #link{
+
text-align: center;
-
      position: relative;
+
width: 980px;
-
      left: 100px;
+
color: #9a9899;
-
    }
+
}
-
    #link-header{
+
#footer-introduction {
-
      position: relative;
+
margin: 30px auto 60px auto;
-
      top: 20px;
+
color: #626262;
-
      left: 180px;
+
}
 +
#footer-introduction h2 {
 +
color: #54aa9e;
 +
font-size: 24px;
 +
}
 +
#footer-introduction span {
 +
text-align: left;
 +
font-size: 16px;
 +
}
 +
#footer-address {
 +
font-size: 14px;
 +
margin: 150px auto 16px auto;
 +
}
 +
#footer-address h2 {
 +
color: #ffb629;
 +
font-size: 16px;
 +
}
 +
#bottom-image {
 +
background-image: url('new/bottom.png');
 +
background-repeat: repeat-x;
 +
}
 +
/*instructions*/
 +
#team-sub{
 +
position: relative;
-
      font-weight:bolder;
+
margin-bottom: 30px;
-
      font-size: 25px;
+
}
-
    }
+
#subscribe{
-
    #link-content{
+
position: relative;
-
      position: relative;
+
}
-
      top: 34px;
+
#subscribe-header{
-
      left: 180px;
+
position: relative;
-
    }
+
top: 25px;
 +
left: 145px;
-
    #link-content a{
+
font-weight: bolder;
-
      text-decoration: none;
+
font-size: 25px;
-
    }
+
}
-
    /*bottom image*/
+
#subscribe-content{
-
    #bottom-image{
+
position: relative;
-
      position: relative;
+
top: 45px;
-
      bottom: 0px;
+
left: 145px;
-
    }
+
-
    a:focus{
+
font-weight: bold;
-
      outline-color:#544444;  
+
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;  
 +
}
/*some change*/
/*some change*/
.zhizhen-left {
.zhizhen-left {
-
position: absolute;
+
position: absolute;
-
top: 40%;
+
top: 40%;
-
left: -75px;
+
left: -75px;
-
margin-top: -20px;
+
margin-top: -20px;
}
}
.zhizhen-right{
.zhizhen-right{
-
  position: absolute;
+
position: absolute;
-
  top: 40%;
+
top: 40%;
-
  right: -75px;
+
right: -75px;
-
  margin-top: -15px;
+
margin-top: -15px;
 +
}
 +
 
 +
 
 +
 
 +
/* robot */
 +
#home-robot {
 +
width: 980px;
 +
height: 1200px;
 +
margin: auto;
 +
/* background-image: url(../img/bg.png); */
 +
background-color: #ffffff;
 +
position: relative;
 +
}
 +
 
 +
.component {
 +
position: absolute;
 +
}
 +
 
 +
#component-ecoli {
 +
left: 35px;
 +
top: 125px;
 +
}
 +
#component-ecoli img {
 +
width: 190px;
 +
height: 140px;
 +
}
 +
#component-regulation-network {
 +
left: 350px;
 +
top: 120px;
 +
}
 +
#component-regulation-network img {
 +
width: 160px;
 +
height: 160px;
 +
}
 +
#component-1 {
 +
left: 200px;
 +
top: 410px;
 +
}
 +
 
 +
#component-1 img {
 +
 
 +
}
 +
#component-4 {
 +
left: 436px;
 +
top: 312px;
 +
}
 +
#component-2 {
 +
left: 620px;
 +
top: 310px;
 +
}
 +
#component-3 {
 +
left: 90px;
 +
top: 590px;
 +
}
 +
#component-5 {
 +
left: 610px;
 +
top: 820px;
 +
}
 +
#component-6 {
 +
left: 330px;
 +
top: 880px;
 +
}
 +
#component-7 {
 +
left: 0px;
 +
top: 880px;
 +
}
 +
#home-banner {
 +
background-color: #e0f4f2;
 +
text-align: center;
 +
width: 100%;
}
}
 +
/* robot end */

Revision as of 14:17, 25 September 2013

  • {

padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; }


/*header images */

  1. team-header{

margin: 0 auto; z-index: 100;

height: 200px; width: 980px; background-color: white;

font-family: 'Arial'; }

  1. team-header-logo{

position: relative; left: 20px; top:30px; }

  1. team-header-text{

position: relative; left: 130px; top: -67px; }

  1. boss-header-image{

position: relative; left: 285px; top: -85px; }

/*navigation*/

  1. navigation{

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; }

  1. 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*/

  1. sub-link1{

width:90px; background-color:#A8DBD2; } .navbar .nav > li > ul:before { border-width: 0px; }

  1. sub-link2{

width:100px; background-color:#A8DBD2; }

  1. sub-link3{

width:135px; background-color:#A8DBD2;

}

  1. sub-link4{

background-color:#A8DBD2; width:70px; }



/*home content*/

  1. home-container{

width: 980px; margin: 0 auto; } /*slides part*/

  1. home-slides{

height: 430px;

background-color: #A8DBD2; }

  1. myCarousel{

height: 430px; width: 780px;

margin: 0 auto; }

  1. slides-image img{

height: 430px; width: 780px;

margin:0 auto; }


/*main content part*/

  1. home-content{

width: 980px; height: 100%; background-color: white; }

  1. home-note{

padding-top: 80px; margin-left: 24px; }

  1. note{

display: inline-table; }

  1. pin{

margin-left: 10px; position: relative; }

  1. note-header{

font-family: 'Arial'; font-size: 20px; font-weight: bolder; }

  1. note-pin{

margin-left: 146px;

position: relative; top: -200px; display: block; width: 20px; z-index: 100; }

  1. notepad{

position: relative; height: 190px; width: 157px; display: block;

margin-right: 20px; background-color: #def1ee;

margin-top: 2px; }



  1. home-introduction{

padding-top: 30px; padding-bottom: 100px; }

  1. introduction-text{

}

  1. introduction-header{

display: block; margin-left: 55px;

font-family: 'Arial'; font-size: 22px; font-weight: bold; color:#ffcc33; }

  1. header-header{

position: relative; left: -30px; top: 40px; }

  1. introduction-content{

font-family: 'Arial'; font-weight: bold;

display: block; margin-top: 40px; margin-left: 100px;

display: block; width: 300px; }

  1. feiji{

display: block; margin-top: 60px; margin-left: 26px; }

  1. introduction-vedio{

display: block; margin-top: -350px; margin-left: 404px; }

  1. introduction-vedio img{

width: 525px; height: 360px; }


/*footer*/

  1. team-footer{

width: 100%; margin:0 auto;

position: relative; bottom: 0px; overflow: hidden;

background-color: #e0f4f2; } .footer { text-align: center; width: 980px; color: #9a9899; }

  1. footer-introduction {

margin: 30px auto 60px auto; color: #626262; }

  1. footer-introduction h2 {

color: #54aa9e; font-size: 24px; }

  1. footer-introduction span {

text-align: left; font-size: 16px; }

  1. footer-address {

font-size: 14px; margin: 150px auto 16px auto; }

  1. footer-address h2 {

color: #ffb629; font-size: 16px; }

  1. bottom-image {

background-image: url('new/bottom.png'); background-repeat: repeat-x; } /*instructions*/

  1. team-sub{

position: relative;

margin-bottom: 30px; }

  1. subscribe{

position: relative; }

  1. subscribe-header{

position: relative; top: 25px; left: 145px;

font-weight: bolder; font-size: 25px; }

  1. subscribe-content{

position: relative; top: 45px; left: 145px;

font-weight: bold; line-height: 10px; }

  1. link{

position: relative; left: 100px; }

  1. link-header{

position: relative; top: 20px; left: 180px;

font-weight:bolder; font-size: 25px; }

  1. link-content{

position: relative; top: 34px; left: 180px; }

  1. link-content a{

text-decoration: none; } /*bottom image*/

  1. bottom-image{

position: relative; bottom: 0px; }

a:focus{ outline-color:#544444; }


/*some change*/ .zhizhen-left { position: absolute; top: 40%; left: -75px; margin-top: -20px; } .zhizhen-right{ position: absolute; top: 40%; right: -75px; margin-top: -15px; }


/* robot */

  1. home-robot {

width: 980px; height: 1200px; margin: auto; /* background-image: url(../img/bg.png); */ background-color: #ffffff; position: relative; }

.component { position: absolute; }

  1. component-ecoli {

left: 35px; top: 125px; }

  1. component-ecoli img {

width: 190px; height: 140px; }

  1. component-regulation-network {

left: 350px; top: 120px; }

  1. component-regulation-network img {

width: 160px; height: 160px; }

  1. component-1 {

left: 200px; top: 410px; }

  1. component-1 img {

}

  1. component-4 {

left: 436px; top: 312px; }

  1. component-2 {

left: 620px; top: 310px; }

  1. component-3 {

left: 90px; top: 590px; }

  1. component-5 {

left: 610px; top: 820px; }

  1. component-6 {

left: 330px; top: 880px; }

  1. component-7 {

left: 0px; top: 880px; }

  1. home-banner {

background-color: #e0f4f2; text-align: center; width: 100%; } /* robot end */

Retrieved from "http://2013.igem.org/Team:SYSU-Software/home.css"