Difference between revisions of "Team:HFUT-China/indexcss"
| Line 40: | Line 40: | ||
} | } | ||
| − | div.container | + | div.container{ |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Revision as of 14:24, 16 September 2015
html, body {
margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.box{
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
}
.block-box{
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-o-box-orient:vertical;
}
.inline-box{
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
}
.box-item{
box-flex:0;
-webkit-box-flex:0;
-moz-box-flex:0;
-o-box-flex:0;
}
.onepage-pagination a{ color:#E6E6E6; }
div.container{
width: 100%; height: 100%;
}
section.intro {
width: 100%; height: 100%; padding-top: 5%;
}
section.brief{ background-color: #101010; }
@media (min-height: 900px){
section.brief div.big-img {
background-image: url(
);
background-repeat: no-repeat;
background-size: 908px 530px;
width:908px;
height: 530px;
margin:0 auto;
padding-top: 33px;
}
section.brief div.big-img figure.project{
background-image: url(
);
background-repeat: no-repeat;
background-position: 0 0;
width:690px;
height:431px;
margin-left: 109px;
margin-right: 109px;
}
section.desc div.img-logo figure.logo-white{
background-image: url(
);
background-size: 400px 400px;
width: 400px;
height:400px;
}
}
@media (min-height: 800px) and (max-height: 900px){
section.brief div.big-img {
background-image: url(
);
background-repeat: no-repeat;
background-size: 800px 467px;
width:800px;
height: 467px;
margin:0 auto;
padding-top: 29px;
}
section.brief div.big-img figure.project{
background-image: url(
);
background-position:0px 0px;
background-repeat: no-repeat;
width:607px;
height:379px;
margin-left: 96px;
margin-right: 96px;
}
section.desc div.img-logo figure.logo-white{
background-image: url();
background-size: 400px 400px;
width: 400px;
height:400px;
}
}
@media (min-height: 600px) and (max-height: 800px){
section.brief div.big-img {
background-image: url(
);
background-repeat: no-repeat;
background-size: 600px 350px;
width:600px;
height: 350px;
padding-top: 21px;
margin:0 auto;
}
section.brief div.big-img figure.project{
background-image: url(
);
background-position: 0 0;
background-repeat: no-repeat;
width:455px;
height:284px;
margin-left: 72px;
margin-right: 72px;
}
section.desc div.img-logo figure.logo-white{
background-image: url();
background-size: 300px 300px;
width: 300px;
height:300px;
}
}
@media (max-height: 600px){
section.brief div.big-img {
background-image: url(
);
background-repeat: no-repeat;
background-size: 400px 234px;
width:400px;
height: 234px;
margin:0 auto;
padding-top: 18px;
}
section.brief div.big-img figure.project{
background-image: url(
);
background-position: 0 0;
background-repeat: no-repeat;
width:303px;
height:190px;
margin-left: 48px;
margin-right: 48px;
}
section.desc div.img-logo figure.logo-white{
background-image: url();
background-size: 300px 300px;
width: 300px;
height:300px;
}
}
section.brief div.presentation{ width: 80%; margin:0 auto; }
section.brief div.left-trigger{ margin-top: 10%; position: absolute; left: 10%; width: 35px;
}
section.brief div.left-trigger button#left{
background-image: url(
);
background-repeat: no-repeat;
background-size: 35px 100px;
width: 35px;
height: 100px;
background-color: rgba(0,0,0,0);
border-width: 0px;
}
section.brief div.right-trigger{ margin-top: 10%; position: absolute; right: 10%; width: 35px; }
section.brief div.right-trigger button#right{
background-image: url(
);
background-repeat: no-repeat;
background-size: 35px 100px;
width: 35px;
height: 100px;
background-color: rgba(0,0,0,0);
border-width: 0px;
}
section.brief div.slogn {
text-align: center; width: 70%; margin: 15px auto; font-size: 2em; font-weight: lighter; color:#E6E6E6;
}
section.brief div.title{ text-align: center;
display: block; font-weight: lighter; font-size: 4em; color:#FFFFFF;
}
section.brief figure.title-logo{
background-image: url(
);
background-repeat: no-repeat;
background-size: 100px 100px;
width: 100px;
height:100px;
margin: 0 auto;
}
section.desc{ background-color: #E6E6E6; color:#000000; }
section.desc div.desc{ float: right; width:40%;
margin-top:10%; margin-right: 20%; background-color: rgba(0,0,0,0); }
section.desc div.desc div.desc-title{ font-size: 3em; }
section.desc div.desc p{ margin-top: 5%; font-size:1.2em; }
section.desc div.img-logo{ float:left; width:30%; height:50%; margin-top:10%; margin-left: 10%;
}
section.search {
background-color: #191919;
}
div.func-desc{ float:right; margin-right: 10%; margin-top:10%; background-color: rgba(0,0,0,0); width:40%; color: #FFFFFF; }
div.func-desc div.func-title{ font-size: 3em; }
div.func-desc div.func-subtitle{ font-size: 2em; }
div.func-desc p{ margin-top: 2%; font-size: 1.2em; }
section.recommend {
background-color: #333333;
}
section.simulation{ background-color: #000000; }
div.recommend-anim, div.search-anim, div.simu-anim{ width: 45%; margin-left: 10px; margin-top: 20px; height: 80%; float: left }