Difference between revisions of "Template:SYSU-Software/CSS/Home"
(22 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | #menuContainer ul li { | ||
+ | box-sizing:content-box; | ||
+ | } | ||
#contentContainer { | #contentContainer { | ||
Line 7: | Line 10: | ||
.firstSection { | .firstSection { | ||
background-color: #F8F8F8; | background-color: #F8F8F8; | ||
− | height: | + | height: 730px; |
padding-top: 30px; | padding-top: 30px; | ||
padding-bottom: 20px; | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .firstSection .part2 h2 { | ||
+ | margin-top: 0; | ||
+ | margin-left: 12% | ||
} | } | ||
Line 41: | Line 49: | ||
float:left; | float:left; | ||
position:relative; | position:relative; | ||
− | + | right: 360px; | |
− | width: | + | bottom:20px; |
+ | width:340px; | ||
margin-top:36px; | margin-top:36px; | ||
− | opacity: | + | opacity:1; |
} | } | ||
Line 53: | Line 62: | ||
padding-top: 20px; | padding-top: 20px; | ||
position:absolute; | position:absolute; | ||
− | |||
margin: auto; | margin: auto; | ||
left: 0; right: 0; | left: 0; right: 0; | ||
Line 62: | Line 70: | ||
float:right; | float:right; | ||
position:relative; | position:relative; | ||
− | width: | + | left:360px; |
+ | bottom:20px; | ||
+ | width:340px; | ||
margin-top:38px; | margin-top:38px; | ||
margin-left: 0px; | margin-left: 0px; | ||
− | opacity: | + | opacity:1; |
} | } | ||
Line 71: | Line 81: | ||
margin-top: 10px; | margin-top: 10px; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
− | color: | + | color:black; |
font-size: 12.5pt; | font-size: 12.5pt; | ||
} | } | ||
Line 163: | Line 173: | ||
.rowSecond .wordContainer { | .rowSecond .wordContainer { | ||
− | width: | + | width: 700px; |
margin: 0 auto; | margin: 0 auto; | ||
height: 64px; | height: 64px; | ||
Line 205: | Line 215: | ||
.rowThird .DesignDescription { | .rowThird .DesignDescription { | ||
position:relative; | position:relative; | ||
− | top: - | + | top: -250px; |
left: 57%; | left: 57%; | ||
− | opacity: | + | opacity: 1; |
} | } | ||
#contentContainer .rowThird .DesignDescription p { | #contentContainer .rowThird .DesignDescription p { | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
− | color: | + | color:black; |
font-size: 12.5pt; | font-size: 12.5pt; | ||
} | } | ||
Line 222: | Line 232: | ||
} | } | ||
− | + | .carousel .carousel-control { | |
background-image: none; | background-image: none; | ||
} | } | ||
− | + | .carousel ol { | |
− | left: | + | /*left: 16%;*/ |
+ | left:50%; | ||
+ | right:0; | ||
+ | margin-left:-50px; | ||
+ | width:100px; | ||
} | } | ||
− | + | .carousel .carousel-indicators li { | |
border-color: #959595; | border-color: #959595; | ||
background-color: white; | background-color: white; | ||
} | } | ||
− | + | .carousel .carousel-indicators .active { | |
background-color: #959595; | background-color: #959595; | ||
} | } | ||
− | + | .carousel .carousel-control.left { | |
+ | width:5%; | ||
background: url('https://static.igem.org/mediawiki/2015/3/30/SYSU-Software_Wiki_Home_Motivation_left.jpeg') center no-repeat; | background: url('https://static.igem.org/mediawiki/2015/3/30/SYSU-Software_Wiki_Home_Motivation_left.jpeg') center no-repeat; | ||
} | } | ||
− | + | .carousel .carousel-control.right { | |
+ | width:5%; | ||
background: url("https://static.igem.org/mediawiki/2015/8/81/SYSU-Software_Wiki_Home_Motivation_right.jpeg") center no-repeat; | background: url("https://static.igem.org/mediawiki/2015/8/81/SYSU-Software_Wiki_Home_Motivation_right.jpeg") center no-repeat; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .humanPractice { | ||
+ | height: 775px; | ||
+ | background-color: #F8F8F8; | ||
+ | } | ||
+ | |||
+ | |||
+ | .cElement { | ||
+ | position:absolute; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .word { | ||
+ | opacity:1; | ||
+ | font-family: Arial; | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | .sysuchina { | ||
+ | left: 10.18%; | ||
+ | width: 12.43%; | ||
+ | height: 4.8%; | ||
+ | bottom: 63.78%; | ||
+ | } | ||
+ | |||
+ | .sysuchina .word { | ||
+ | position: relative; | ||
+ | width: 400px; | ||
+ | bottom: 40px; | ||
+ | right: 70px; | ||
+ | } | ||
+ | |||
+ | .china { | ||
+ | left: 28.59%; | ||
+ | width: 9.6%; | ||
+ | height: 5.29%; | ||
+ | bottom: 76.44%; | ||
+ | } | ||
+ | |||
+ | .china .word { | ||
+ | position: relative; | ||
+ | width: 450px; | ||
+ | bottom: 40px; | ||
+ | right: 70px; | ||
+ | } | ||
+ | |||
+ | .sklbc { | ||
+ | left: 14.76%; | ||
+ | width: 27.97%; | ||
+ | height: 5.29%; | ||
+ | bottom: 29.49%; | ||
+ | } | ||
+ | |||
+ | .sklbc .word { | ||
+ | position: relative; | ||
+ | width: 500px; | ||
+ | top: 50px; | ||
+ | right: 50px; | ||
+ | } | ||
+ | |||
+ | .student { | ||
+ | left: 81.97%; | ||
+ | width: 14.37%; | ||
+ | height: 4.65%; | ||
+ | bottom: 53.53%; | ||
+ | } | ||
+ | |||
+ | .student .word { | ||
+ | position: relative; | ||
+ | bottom: 40px; | ||
+ | } | ||
+ | |||
+ | .youth { | ||
+ | left: 60.6%; | ||
+ | width: 20.98%; | ||
+ | height: 4.17%; | ||
+ | bottom: 17.63%; | ||
+ | } | ||
+ | |||
+ | .youth .word { | ||
+ | position: relative; | ||
+ | top: 50px; | ||
+ | } | ||
+ | |||
+ | .scientific { | ||
+ | left: 29.2%; | ||
+ | width: 17.7%; | ||
+ | height: 18%; | ||
+ | bottom: 67%; | ||
+ | } | ||
+ | |||
+ | .scientific .word { | ||
+ | position:relative; | ||
+ | right:520px; | ||
+ | width:500px; | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | .public { | ||
+ | left: 29.3%; | ||
+ | width: 15.2%; | ||
+ | height: 18%; | ||
+ | bottom: 17%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .part4 { | ||
+ | left: 10.5%; | ||
+ | width: 40%; | ||
+ | height: 18%; | ||
+ | bottom: 81.5%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .public .word{ | ||
+ | position:relative; | ||
+ | right:520px; | ||
+ | width:500px; | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | .project { | ||
+ | left: 68%; | ||
+ | width: 14%; | ||
+ | height: 16%; | ||
+ | bottom: 39%; | ||
+ | } | ||
+ | |||
+ | .project .word { | ||
+ | position:relative; | ||
+ | left:200px; | ||
+ | width:250px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #mainContainer .word p { | ||
+ | line-height: 12px; | ||
+ | font-family: Arial; | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | #mainContainer .trueFirst { | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | |||
+ | #mainContainer .element { | ||
+ | position:absolute; | ||
+ | width: 6.5%; | ||
+ | height: 14%; | ||
+ | } | ||
+ | |||
+ | #mainContainer .element a { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | #mainContainer .link1 { | ||
+ | bottom: 20%; | ||
+ | left: 19%; | ||
+ | } | ||
+ | |||
+ | #mainContainer .link2 { | ||
+ | bottom: 20%; | ||
+ | left: 37.5%; | ||
+ | } | ||
+ | |||
+ | #mainContainer .link3 { | ||
+ | bottom: 20%; | ||
+ | left: 56%; | ||
+ | } | ||
+ | |||
+ | #mainContainer .link4 { | ||
+ | bottom: 20%; | ||
+ | left: 74.5%; | ||
} | } |
Latest revision as of 23:03, 18 September 2015
- menuContainer ul li {
box-sizing:content-box;
}
- contentContainer {
font-family: Arial; font-size: 12pt;
}
.firstSection {
background-color: #F8F8F8; height: 730px; padding-top: 30px; padding-bottom: 20px;
}
.firstSection .part2 h2 {
margin-top: 0; margin-left: 12%
}
.firstSection .BackgroundCore {
height: 200px; margin: 0 auto; overflow: hidden;
}
.firstSection .CorePositioner {
width:1353px; margin:0 auto; text-align: center;
}
.firstSection .BackgroundCore .TruebackGround {
position:absolute; background-image: url(""); background-position: center; background-size: 565px auto; background-repeat: no-repeat; width:605px; height:200px; margin: auto; left: 0; right: 0; z-index: 0;
}
.firstSection .BackgroundCore .leftDescription {
text-align: right; float:left; position:relative; right: 360px; bottom:20px; width:340px; margin-top:36px; opacity:1;
}
.firstSection .BackgroundCore .background {
margin:0 auto; width:536px; height:160px; padding-top: 20px; position:absolute; margin: auto; left: 0; right: 0;
}
.firstSection .BackgroundCore .rightDescription {
text-align: left; float:right; position:relative; left:360px; bottom:20px; width:340px; margin-top:38px; margin-left: 0px; opacity:1;
}
- contentContainer .firstSection .BackgroundCore .Description p {
margin-top: 10px; margin-bottom: 10px; color:black; font-size: 12.5pt;
}
.firstSection .BackgroundCore .BackgroundCoreContainer {
margin:0 auto; width:600px; height: 180px; margin-top: 20px; padding-left: 5px; padding-right: 5px;
}
.firstSection .BackgroundCore .BackgroundPositioner {
margin: 0 auto; width: 576px;
}
.firstSection .BackgroundCore .CoDevelopment {
background-image: url(""); background-position: center; background-size: 160px auto; background-repeat: no-repeat; width:160px; height:160px; float: left; position: relative; z-index: 1;
}
.firstSection .BackgroundCore .coreBank {
background-image: url(""); background-position: center; background-size: 160px auto; background-repeat: no-repeat; width:160px; height:160px; float: left; position: relative; z-index: 1;
}
.firstSection .BackgroundCore .synTitle {
width:216px; float:left;
margin-top: 50px; text-align: center; position:relative; z-index: 1;
}
.firstSection .BackgroundCore .synTitle h1 {
margin: 0; padding: 0; font-weight: lighter; font-family: Arial; font-size: 26pt; margin-left: 5px; margin-right: 5px;
}
.rowSecond {
height: 80px; overflow: hidden; margin-top: 20px
}
.CoDevelopmentTitle {
float:left; text-align: center;
}
.coreBankTitle {
float:left; text-align: center; margin-left: 50px;
}
.CoDevelopmentTitle h1, .coreBankTitle h1 {
font-family: Arial; font-size: 20pt; font-weight: 200; margin-top: 0px; padding-top: 0px; margin-bottom: 0px;
}
.rowSecond .wordContainer {
width: 700px; margin: 0 auto; height: 64px;
}
.rowThird {
height: 244px; margin-top: 30px;
}
.rowThird .DesignContainer {
margin:0 auto; width: 400px; text-align: center;
}
.rowThird .DesignContainer .Design {
background-image: url(""); background-position: center; background-size: 160px auto; background-repeat: no-repeat; width:160px; height:160px; margin:0 auto;
}
.rowThird .DesignContainer .DesignTitle {
margin-top: 30px;
}
.rowThird .DesignContainer .DesignTitle h1{
font-family: Arial; font-size: 20pt; font-weight: 200; margin-top: 0px; padding-top: 0px; margin-bottom: 0px;
}
.rowThird .DesignDescription {
position:relative; top: -250px; left: 57%; opacity: 1;
}
- contentContainer .rowThird .DesignDescription p {
margin-bottom: 10px; color:black; font-size: 12.5pt;
}
.secondSection {
position:relative; z-index: 0;
}
.carousel .carousel-control {
background-image: none;
}
.carousel ol {
/*left: 16%;*/ left:50%; right:0; margin-left:-50px; width:100px;
}
.carousel .carousel-indicators li {
border-color: #959595; background-color: white;
}
.carousel .carousel-indicators .active {
background-color: #959595;
}
.carousel .carousel-control.left {
width:5%; background: url('https://static.igem.org/mediawiki/2015/3/30/SYSU-Software_Wiki_Home_Motivation_left.jpeg') center no-repeat;
}
.carousel .carousel-control.right {
width:5%; background: url("") center no-repeat;
}
.humanPractice {
height: 775px; background-color: #F8F8F8;
}
.cElement {
position:absolute; z-index: 10;
}
.word {
opacity:1; font-family: Arial; color:black;
}
.sysuchina {
left: 10.18%; width: 12.43%; height: 4.8%; bottom: 63.78%;
}
.sysuchina .word {
position: relative; width: 400px; bottom: 40px; right: 70px;
}
.china {
left: 28.59%; width: 9.6%; height: 5.29%; bottom: 76.44%;
}
.china .word {
position: relative; width: 450px; bottom: 40px; right: 70px;
}
.sklbc {
left: 14.76%; width: 27.97%; height: 5.29%; bottom: 29.49%;
}
.sklbc .word {
position: relative; width: 500px; top: 50px; right: 50px;
}
.student {
left: 81.97%; width: 14.37%; height: 4.65%; bottom: 53.53%;
}
.student .word {
position: relative; bottom: 40px;
}
.youth {
left: 60.6%; width: 20.98%; height: 4.17%; bottom: 17.63%;
}
.youth .word {
position: relative; top: 50px;
}
.scientific {
left: 29.2%; width: 17.7%; height: 18%; bottom: 67%;
}
.scientific .word {
position:relative; right:520px; width:500px; text-align: right;
}
.public {
left: 29.3%; width: 15.2%; height: 18%; bottom: 17%;
}
.part4 {
left: 10.5%; width: 40%; height: 18%; bottom: 81.5%;
}
.public .word{
position:relative; right:520px; width:500px; text-align: right;
}
.project {
left: 68%; width: 14%; height: 16%; bottom: 39%;
}
.project .word {
position:relative; left:200px; width:250px; text-align: left;
}
- mainContainer .word p {
line-height: 12px; font-family: Arial; color:black;
}
- mainContainer .trueFirst {
position:relative;
}
- mainContainer .element {
position:absolute; width: 6.5%; height: 14%;
}
- mainContainer .element a {
width:100%; height:100%;
}
- mainContainer .link1 {
bottom: 20%; left: 19%;
}
- mainContainer .link2 {
bottom: 20%; left: 37.5%;
}
- mainContainer .link3 {
bottom: 20%; left: 56%;
}
- mainContainer .link4 {
bottom: 20%; left: 74.5%;
}