Difference between revisions of "Team:HFUT-China/indexcss"

 
Line 1: Line 1:
 
html,
 
html,
−
body,
+
body {
−
section {
+
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
Line 10: Line 9:
 
     text-rendering: optimizeLegibility;
 
     text-rendering: optimizeLegibility;
 
}
 
}
−
 
  
 
.box{
 
.box{
Line 41: Line 39:
 
}
 
}
  
−
div.container{
+
div.container {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
Line 49: Line 47:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
    padding-top: 5%;
 
−
}
 
  
−
section.brief{
 
−
background-color: #101010;
 
 
}
 
}
  
−
 
+
section.brief{
−
@media (min-height: 900px){
+
background-image: url(https://static.igem.org/mediawiki/2015/2/28/First_back.png);
−
section.brief div.big-img {
+
−
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Mac_large.png);
+
−
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(https://static.igem.org/mediawiki/2015/4/46/Biodesigner_large.png);
+
−
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(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
+
−
background-size: 400px 400px;
+
−
width: 400px;
+
−
height:400px;
+
−
}
+
−
}
+
−
 
+
−
@media (min-height: 800px) and (max-height: 900px){
+
−
section.brief div.big-img {
+
−
background-image: url(https://static.igem.org/mediawiki/2015/0/04/Mac_meida.png);
+
−
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(https://static.igem.org/mediawiki/2015/c/c0/Biodesigner_mid.png);
+
−
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(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
+
−
background-size: 400px 400px;
+
−
width: 400px;
+
−
height:400px;
+
−
}
+
−
}
+
−
 
+
−
@media (min-height: 600px) and (max-height: 800px){
+
−
section.brief div.big-img {
+
−
background-image: url(https://static.igem.org/mediawiki/2015/7/79/Mac_half_small.png);
+
−
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(https://static.igem.org/mediawiki/2015/0/06/Biodesigner_half_small.png);
+
−
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(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
+
−
background-size: 300px 300px;
+
−
width: 300px;
+
−
height:300px;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
@media (max-height: 600px){
+
−
section.brief div.big-img {
+
−
background-image: url(https://static.igem.org/mediawiki/2015/b/b2/Mac_small.png);
+
−
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(https://static.igem.org/mediawiki/2015/9/93/Biodesigner_small.png);
+
−
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(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
+
−
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(https://static.igem.org/mediawiki/2015/8/8b/Left-trigger.png);
+
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
−
background-size: 35px 100px;
+
background-position: center center;
−
width: 35px;
+
background-attachment: fixed;
−
height: 100px;
+
background-size: cover;
−
background-color: rgba(0,0,0,0);
+
background-color: #000000;
−
border-width: 0px;
+
 
}
 
}
  
−
section.brief div.right-trigger{
+
section.brief div.b-title{
−
margin-top: 10%;
+
float: right;
−
position: absolute;
+
margin-right: 25%;
−
right: 10%;
+
margin-top: 25%;
−
width: 35px;
+
 
}
 
}
  
−
section.brief div.right-trigger button#right{
+
figure.logo-back{
−
background-image: url(https://static.igem.org/mediawiki/2015/0/0c/Right-trigger.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/b/b4/Logo_DNA.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
−
background-size: 35px 100px;
+
background-size-height:242px 1009px;
−
width: 35px;
+
background-position: 0 center;
−
height: 100px;
+
width:242px;
−
background-color: rgba(0,0,0,0);
+
height: 100%;
−
border-width: 0px;
+
float: left;
 +
margin-left: 20%;
 
}
 
}
  
 
section.brief div.slogn {
 
section.brief div.slogn {
 
     text-align: center;
 
     text-align: center;
−
     width: 70%;
+
     width: 90%;
 
     margin: 15px auto;
 
     margin: 15px auto;
−
     font-size: 2em;
+
     font-size: 2.2em;
 
     font-weight: lighter;
 
     font-weight: lighter;
 
     color:#E6E6E6;
 
     color:#E6E6E6;
Line 221: Line 89:
 
     display: block;
 
     display: block;
 
     font-weight: lighter;
 
     font-weight: lighter;
−
     font-size: 4em;
+
     font-size: 5em;
 
     color:#FFFFFF;
 
     color:#FFFFFF;
 
}
 
}
Line 235: Line 103:
  
 
section.desc{
 
section.desc{
−
background-color: #E6E6E6;
+
−
color:#000000;
+
background-color: #F0EBDF;
 +
/*background-color: #E6E6E6;*/
 +
color:#000;
 
}
 
}
  
Line 267: Line 137:
  
 
section.search {
 
section.search {
−
     background-color: #191919;
+
     background-color: #37384B;
 +
 
 
}
 
}
  
Line 277: Line 148:
 
width:40%;
 
width:40%;
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
}
 +
 +
div.simu-desc{
 +
float:right;
 +
margin-right: 10%;
 +
margin-top:10%;
 +
background-color: rgba(0,0,0,0);
 +
width:40%;
 +
color: #000;
 
}
 
}
  
Line 291: Line 171:
 
font-size: 1.2em;
 
font-size: 1.2em;
 
}
 
}
 +
 +
div.simu-desc div.simu-title{
 +
font-size: 3em;
 +
}
 +
 +
div.simu-desc div.simu-subtitle{
 +
font-size: 2em;
 +
}
 +
 +
div.simu-desc p{
 +
margin-top: 2%;
 +
font-size: 1.2em;
 +
}
 +
  
 
section.recommend {
 
section.recommend {
−
     background-color: #333333;
+
     background-color: #006475;
  
 
}
 
}
  
 
section.simulation{
 
section.simulation{
−
background-color: #000000;
+
background: linear-gradient(180deg, #53eacb, #59cbf7);
 +
color:#000;
 
}
 
}
  

Latest revision as of 07:31, 18 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%;

}

section.brief{ background-image: url(First_back.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color: #000000; }

section.brief div.b-title{ float: right; margin-right: 25%; margin-top: 25%; }

figure.logo-back{ background-image: url(Logo_DNA.png); background-repeat: no-repeat; background-size-height:242px 1009px; background-position: 0 center; width:242px; height: 100%; float: left; margin-left: 20%; }

section.brief div.slogn { 

   text-align: center;
   width: 90%;
   margin: 15px auto;
   font-size: 2.2em;
   font-weight: lighter;
   color:#E6E6E6;

}

section.brief div.title{ text-align: center; 

   display: block;
   font-weight: lighter;
   font-size: 5em;
   color:#FFFFFF;

}

section.brief figure.title-logo{ background-image: url(Logo_white_small.png); background-repeat: no-repeat; background-size: 100px 100px; width: 100px; height:100px; margin: 0 auto; }

section.desc{

background-color: #F0EBDF; /*background-color: #E6E6E6;*/ color:#000; }

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: #37384B;

}

div.func-desc{ float:right; margin-right: 10%; margin-top:10%; background-color: rgba(0,0,0,0); width:40%; color: #FFFFFF; }

div.simu-desc{ float:right; margin-right: 10%; margin-top:10%; background-color: rgba(0,0,0,0); width:40%; color: #000; }

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

div.simu-desc div.simu-title{ font-size: 3em; }

div.simu-desc div.simu-subtitle{ font-size: 2em; }

div.simu-desc p{ margin-top: 2%; font-size: 1.2em; }


section.recommend { 

   background-color: #006475;

}

section.simulation{ background: linear-gradient(180deg, #53eacb, #59cbf7); color:#000; }

div.recommend-anim, div.search-anim, div.simu-anim{ width: 45%; margin-left: 10px; margin-top: 20px; height: 80%; float: left }