Team:SYSU-Software/home.css

From 2013.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 143: Line 143:
background-color: #e0f4f2;
background-color: #e0f4f2;
-
padding: 20px 0 0 0;
+
padding: 30px 0 0 0;
}
}
.footer {
.footer {
Line 155: Line 155:
background: #e0f4f2;
background: #e0f4f2;
width: 100%;
width: 100%;
-
padding: 1px 0 10px 0;
+
position: relative;
}
}
#footer-introduction h2 {
#footer-introduction h2 {
Line 162: Line 162:
}
}
#footer-introduction p {
#footer-introduction p {
-
 
text-align: justify;
text-align: justify;
font-size: 18px;
font-size: 18px;
-
width: 60%;
+
width: 980px;
margin: auto;
margin: auto;
 +
display: inline-block;
 +
padding: 30px 0 50px 0;
 +
position: relative;
 +
}
 +
#footer-introduction p a {
 +
color: #36a993;
 +
}
 +
#footer-introduction p b font {
 +
color: #ff3f03;
 +
}
 +
#footer-introduction img {
 +
/* width: 95%; */
 +
}
 +
#footer-introduction-content {
 +
width: 100%;
 +
background: url(https://static.igem.org/mediawiki/2013/7/7c/Cast_body_text_background.png) #e0f4f2;
 +
background-size: 100% 100%;
 +
margin: auto;
 +
vertical-align: middle;
 +
}
 +
#footer-introduction-content p font {
 +
color: #ff0000;
 +
}
 +
#footer-introduction-content .p {
 +
position: relative;
 +
width: 980px;
 +
margin: auto;
 +
}
 +
#s-cloud {
 +
position: absolute;
 +
right: 200px;
 +
bottom: -100px;
 +
z-index: 2;
}
}
#footer-address {
#footer-address {
Line 264: Line 296:
background-color: #ffffff;
background-color: #ffffff;
position: relative;
position: relative;
 +
zoom: 0.8;
}
}
Line 347: Line 380:
#banner-middle {
#banner-middle {
width: 20%;
width: 20%;
 +
}
 +
#banner-middle b {
 +
display: block;
 +
color: #34495e;
 +
font-size: 24px;
}
}
#banner-left {
#banner-left {
width: 25%;
width: 25%;
text-align: left;
text-align: left;
 +
}
 +
#banner-left span {
 +
font-weight: bold;
 +
color: #36a993;
}
}
#banner-right {
#banner-right {
width: 25%;
width: 25%;
 +
text-align: right;
}
}
#banner-right .btn img{
#banner-right .btn img{
Line 361: Line 404:
margin-top: 8px;
margin-top: 8px;
}
}
 +
 +
#banner-right a {
 +
position: relative;
 +
}
 +
#banner-right a span {
 +
position: absolute;
 +
left: 72px;
 +
top: -6px;
 +
font-size: 28px;
 +
font-weight: bold;
 +
color: #34495e;
 +
}
 +
#home-banner .banner-tips {
#home-banner .banner-tips {
display: inline-block;
display: inline-block;
Line 380: Line 436:
height: 100px;
height: 100px;
}
}
 +
#bodyContent a[href ^="https://"], .link-https {
 +
background: url();
 +
padding-right: 0px;
 +
}
 +
 +
 +
 +
#download-cloud.moving {
 +
animation: mymoving 1s linear;
 +
animation-iteration-count: infinite;
 +
-webkit-animation: mymoving 1s linear;
 +
-webkit-animation-iteration-count: infinite;
 +
-moz-animation: mymoving 1s linear;
 +
-moz-animation-iteration-count: infinite;
 +
-o-animation: mymoving 1s linear;
 +
-o-animation-iteration-count: infinite;
 +
}
 +
 +
@keyframes mymoving {
 +
0% {transform:translate(0px, 0px);}
 +
25% {transform:translate(0px, -3px);}
 +
75% {transform:translate(0px, 3px);}
 +
100% {transform:translate(0px, 0px);}
 +
}
 +
 +
@-webkit-keyframes mymoving {
 +
0% {-webkit-transform:translate(0px, 0px);}
 +
25% {-webkit-transform:translate(0px, -3px);}
 +
75% {-webkit-transform:translate(0px, 3px);}
 +
100% {-webkit-transform:translate(0px, 0px);}
 +
}
 +
 +
@-moz-keyframes mymoving {
 +
0% {-moz-transform:translate(0px, 0px);}
 +
25% {-moz-transform:translate(0px, -3px);}
 +
75% {-moz-transform:translate(0px, 3px);}
 +
100% {-moz-transform:translate(0px, 0px);}
 +
}
 +
 +
@-o-keyframes mymoving {
 +
0% {-o-transform:translate(0px, 0px);}
 +
25% {-o-transform:translate(0px, -3px);}
 +
75% {-o-transform:translate(0px, 3px);}
 +
100% {-o-transform:translate(0px, 0px);}
 +
}
 +
/* robot end */
/* robot end */
Line 391: Line 493:
     background-color: #dff5f2;
     background-color: #dff5f2;
   }
   }
-
   #bottom-image{
+
   #sysu-footer img{
     width: 100%;
     width: 100%;
   }
   }

Latest revision as of 23:41, 28 October 2013

  • {

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


/*home content*/

  1. home-container{

width: 100%; 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. home-team-footer{

width: 100%; margin:0 auto;

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

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

  1. footer-introduction {

/* margin: 30px auto 60px auto; */ color: #626262; background: #e0f4f2; width: 100%; position: relative; }

  1. footer-introduction h2 {

color: #3B746C; font-size: 36px; }

  1. footer-introduction p {

text-align: justify; font-size: 18px; width: 980px; margin: auto; display: inline-block; padding: 30px 0 50px 0; position: relative; }

  1. footer-introduction p a {

color: #36a993; }

  1. footer-introduction p b font {

color: #ff3f03; }

  1. footer-introduction img {

/* width: 95%; */ }

  1. footer-introduction-content {

width: 100%; background: url(Cast_body_text_background.png) #e0f4f2; background-size: 100% 100%; margin: auto; vertical-align: middle; }

  1. footer-introduction-content p font {

color: #ff0000; }

  1. footer-introduction-content .p {

position: relative; width: 980px; margin: auto; }

  1. s-cloud {

position: absolute; right: 200px; bottom: -100px; z-index: 2; }

  1. footer-address {

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

  1. footer-address h2 {

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

  1. bottom-image {

background-image: url('https://static.igem.org/mediawiki/2013/6/65/Cast_bottom.png'); background-repeat: repeat-x; width: 100%; height: 100px; } /*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: 720px; margin: auto; /* background-image: url(../img/bg.png); */ background-color: #ffffff; position: relative; zoom: 0.8; }

.component { position: absolute; }

.component img:hover { opacity: 0.8; }


  1. component-ecoli {

left: 52px; top: 23px; }

  1. component-ecoli img {

width: 180px; height: 130px; }

  1. component-regulation-network {

left: 365px; top: 23px; }

  1. component-regulation-network img {

width: 130px; height: 130px; }

  1. component-1 {

left: 213px; top: 240px; }

  1. component-1 img {

}

  1. component-4 {

left: 450px; top: 150px; }

  1. component-4 img {

width: 200px; height: 158px; }

  1. component-2 {

left: 620px; top: 170px; }

  1. component-3-0 {

left: 150px; top: 360px; }

  1. component-3-1 {

left: 630px; top: 360px; }

  1. component-5 {

left: 600px; top: 500px; }

  1. component-5 img {

width: 180px; }

  1. component-6 {

left: 330px; top: 530px; }

  1. component-6 img {

width: 150px; }

  1. component-7 {

left: 30px; top: 520px; }

  1. component-7 img {

width: 200px; }

  1. home-banner {

background-color: #e0f4f2; text-align: center; width: 100%; }

  1. banner-middle {

width: 20%; }

  1. banner-middle b {

display: block; color: #34495e; font-size: 24px; }

  1. banner-left {

width: 25%; text-align: left; }

  1. banner-left span {

font-weight: bold; color: #36a993; }

  1. banner-right {

width: 25%; text-align: right; }

  1. banner-right .btn img{

padding-right: 6px; }

  1. banner-right div {

margin-top: 8px; }

  1. banner-right a {

position: relative; }

  1. banner-right a span {

position: absolute; left: 72px; top: -6px; font-size: 28px; font-weight: bold; color: #34495e; }

  1. home-banner .banner-tips {

display: inline-block; vertical-align: middle; padding: 5px; }

  1. banner-left .h {

display: inline-block; margin: 0; }

  1. banner-left h1 {

color: #34495e; 

       border: 0;

}

  1. banner-left h3 {

color: #ffb830; }

  1. home-middle img {

height: 100px; }

  1. bodyContent a[href ^="https://"], .link-https {

background: url(); padding-right: 0px; }


  1. download-cloud.moving {

animation: mymoving 1s linear; animation-iteration-count: infinite; -webkit-animation: mymoving 1s linear; -webkit-animation-iteration-count: infinite; -moz-animation: mymoving 1s linear; -moz-animation-iteration-count: infinite; -o-animation: mymoving 1s linear; -o-animation-iteration-count: infinite; }

@keyframes mymoving { 0% {transform:translate(0px, 0px);} 25% {transform:translate(0px, -3px);} 75% {transform:translate(0px, 3px);} 100% {transform:translate(0px, 0px);} }

@-webkit-keyframes mymoving { 0% {-webkit-transform:translate(0px, 0px);} 25% {-webkit-transform:translate(0px, -3px);} 75% {-webkit-transform:translate(0px, 3px);} 100% {-webkit-transform:translate(0px, 0px);} }

@-moz-keyframes mymoving { 0% {-moz-transform:translate(0px, 0px);} 25% {-moz-transform:translate(0px, -3px);} 75% {-moz-transform:translate(0px, 3px);} 100% {-moz-transform:translate(0px, 0px);} }

@-o-keyframes mymoving { 0% {-o-transform:translate(0px, 0px);} 25% {-o-transform:translate(0px, -3px);} 75% {-o-transform:translate(0px, 3px);} 100% {-o-transform:translate(0px, 0px);} }

/* robot end */

/*footer*/ 

  #sysu-footer{
    width: 100%;
    margin:0 auto;
    position: relative;
    bottom: 0px;
    overflow: hidden;
    background-color: #dff5f2;
  }
  #sysu-footer img{
    width: 100%;
  }
Retrieved from "http://2013.igem.org/Team:SYSU-Software/home.css"