"
Team:SYSU-Software/home.css
From 2013.igem.org
- {
padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; }
/*home content*/
- home-container{
width: 100%; 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*/
- home-team-footer{
width: 100%; margin:0 auto;
position: relative; bottom: 0px; overflow: hidden;
background-color: #e0f4f2; } .footer { text-align: center; width: 980px; color: #9a9899; }
- footer-introduction {
margin: 30px auto 60px auto; color: #626262; }
- footer-introduction h2 {
color: #3B746C; font-size: 36px; }
- footer-introduction p {
text-align: justify; font-size: 18px; width: 80%; margin: auto; }
- footer-address {
font-size: 14px; /* margin: 150px auto 16px auto; */ margin: auto; }
- footer-address h2 {
color: #ffb629; font-size: 16px; }
- 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*/
- 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;
}
/* robot */
- home-robot {
width: 980px; height: 720px; margin: auto; /* background-image: url(../img/bg.png); */ background-color: #ffffff; position: relative; }
.component { position: absolute; }
.component img:hover { opacity: 0.8; }
- component-ecoli {
left: 52px; top: 23px; }
- component-ecoli img {
width: 180px; height: 130px; }
- component-regulation-network {
left: 365px; top: 23px; }
- component-regulation-network img {
width: 130px; height: 130px; }
- component-1 {
left: 213px; top: 240px; }
- component-1 img {
}
- component-4 {
left: 450px; top: 150px; }
- component-4 img {
width: 200px; height: 158px; }
- component-2 {
left: 620px; top: 170px; }
- component-3-0 {
left: 150px; top: 360px; }
- component-3-1 {
left: 630px; top: 360px; }
- component-5 {
left: 600px; top: 500px; }
- component-5 img {
width: 180px; }
- component-6 {
left: 330px; top: 530px; }
- component-6 img {
width: 150px; }
- component-7 {
left: 30px; top: 520px; }
- component-7 img {
width: 200px; }
- home-banner {
background-color: #e0f4f2; text-align: center; width: 100%; }
- banner-middle {
width: 20%; }
- banner-left {
width: 25%; text-align: left; }
- banner-right {
width: 25%; }
- banner-right .btn img{
padding-right: 6px; }
- banner-right div {
margin-top: 8px; }
- home-banner .banner-tips {
display: inline-block; vertical-align: middle; padding: 5px; }
- banner-left .h {
display: inline-block; margin: 0; }
- banner-left h1 {
color: #34495e;
border: 0;
}
- banner-left h3 {
color: #ffb830; }
- home-middle img {
height: 100px; } /* robot end */
/*footer*/
#sysu-footer{
width: 100%;
margin:0 auto;
position: relative;
bottom: 0px;
overflow: hidden;
background-color: #dff5f2;
}
#bottom-image{
width: 100%;
}
