Team:SYSU-Software/home.css

From 2013.igem.org

(Difference between revisions)
Line 9: Line 9:
       font-family: 'Arial';
       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*/
 +
    #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;
 +
    }
 +
    #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;
 +
    }   
 +
Line 25: Line 121:
     #myCarousel{
     #myCarousel{
       height: 430px;
       height: 430px;
-
       width: 900px;
+
       width: 780px;
       margin: 0 auto;
       margin: 0 auto;
Line 31: Line 127:
     #slides-image img{
     #slides-image img{
       height: 430px;
       height: 430px;
-
       width: 683px;
+
       width: 780px;
       margin:0 auto;
       margin:0 auto;
Line 40: Line 136:
     #home-content{
     #home-content{
       width: 980px;
       width: 980px;
 +
      height: 100%;
       background-color: white;
       background-color: white;
     }
     }
     #home-note{
     #home-note{
-
       position: relative;
+
       padding-top: 80px;
-
      top: 100px;
+
       margin-left: 24px;
-
       left: 115px;
+
     }
     }
     #note{
     #note{
       display: inline-table;
       display: inline-table;
     }
     }
-
     #notepad{
+
     #pin{
-
      display: block;
+
       margin-left: 10px;
-
      height: 146px;
+
-
      width: 121px;
+
-
 
+
-
       margin-right: 20px;
+
-
      background-color: #def1ee;
+
-
 
+
       position: relative;
       position: relative;
-
      top: -50px;
 
     }
     }
     #note-header{
     #note-header{
-
      position: relative;
 
-
      top: -30px;
 
-
      left: -2px;
 
-
 
       font-family: 'Arial';
       font-family: 'Arial';
       font-size: 20px;
       font-size: 20px;
       font-weight: bolder;
       font-weight: bolder;
     }
     }
-
     #pin{
+
     #note-pin{
 +
      margin-left: 146px;
 +
 
       position: relative;
       position: relative;
-
       top: -30px;
+
       top: -200px;
-
       left: 3px;
+
       display: block;
 +
      width: 20px;
 +
      z-index: 100;
     }
     }
-
     #note-pin{
+
     #notepad{
       position: relative;
       position: relative;
-
       top: -34px;
+
       height: 190px;
-
       left: 105px;
+
       width: 157px;
       display: block;
       display: block;
-
       z-index: 100;
+
       margin-right: 20px;
 +
      background-color: #def1ee;
 +
 
 +
      margin-top: 2px;
     }
     }
 +
   
 +
 
 +
 +
    #home-introduction{
 +
      padding-top: 30px;
 +
      padding-bottom: 100px;
 +
    }
     #introduction-text{
     #introduction-text{
-
      position: relative;
 
     }
     }
     #introduction-header{
     #introduction-header{
-
       position: relative;
+
       display: block;
-
      top: 90px;
+
       margin-left: 55px;
-
       left: 125px;
+
       font-family: 'Arial';  
       font-family: 'Arial';  
Line 104: Line 201:
       top: 40px;
       top: 40px;
     }
     }
 +
     #introduction-content{
     #introduction-content{
       font-family: 'Arial';
       font-family: 'Arial';
       font-weight: bold;
       font-weight: bold;
-
       position: relative;
+
       display: block;
-
       top: 120px;
+
       margin-top: 40px;
-
       left: 145px;
+
       margin-left: 100px;
       display: block;
       display: block;
Line 116: Line 214:
     }
     }
     #feiji{
     #feiji{
-
       position: relative;
+
       display: block;
-
       top: 30px;
+
       margin-top: 60px;
-
       left: 40px;
+
       margin-left: 26px;
     }
     }
     #introduction-vedio{
     #introduction-vedio{
 +
      display: block;
 +
      margin-top: -350px;
 +
      margin-left: 404px;
 +
    }
 +
    #introduction-vedio img{
 +
      width: 525px;
 +
      height: 360px;
 +
    }
 +
 +
 +
 +
    /*footer*/
 +
    #team-footer{
 +
      width: 980px;
 +
      margin:0 auto;
 +
       position: relative;
       position: relative;
-
       top: -120px;
+
       bottom: 0px;
-
       left: 435px;
+
       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{
     a:focus{
       outline-color:#544444;  
       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;
 +
}

Revision as of 13:08, 23 September 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*/
   #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;
   }
   #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;
   }    




   /*home content*/
   #home-container{
     width: 980px;
     margin: 0 auto; 
   }
   /*slides part*/
   #home-slides{
     height: 430px;

     background-color: #A8DBD2;
   }
   #myCarousel{
     height: 430px;
     width: 780px;

     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{
     padding-top: 80px;
     margin-left: 24px;
   }
   #note{
     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;
     top: -200px;
     display: block;
     width: 20px;
     z-index: 100;
   }
   #notepad{
     position: relative;
     height: 190px;
     width: 157px;
     display: block;

     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;
     margin-top: 40px;
     margin-left: 100px;

     display: block;
     width: 300px;
   }
   #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;
   }



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


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

 position: absolute;
 top: 40%;
 right: -75px;
 margin-top: -15px;

}

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