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

(Created page with "html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; -webkit-fo...")
 
 
Line 57: Line 57:
 
@media (min-height: 900px){
 
@media (min-height: 900px){
 
section.brief div.big-img {
 
section.brief div.big-img {
−
background-image: url(../img/Mac_large.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Mac_large.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 908px 530px;
 
background-size: 908px 530px;
Line 66: Line 66:
 
}
 
}
 
section.brief div.big-img figure.project{
 
section.brief div.big-img figure.project{
−
background-image: url(../img/biodesigner_large.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Biodesigner_large.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-position: 0 0;
 
background-position: 0 0;
Line 76: Line 76:
 
}
 
}
 
section.desc div.img-logo figure.logo-white{
 
section.desc div.img-logo figure.logo-white{
−
background-image: url(../img/logo_white_mid.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
 
background-size: 400px 400px;
 
background-size: 400px 400px;
 
width: 400px;
 
width: 400px;
Line 85: Line 85:
 
@media (min-height: 800px) and (max-height: 900px){
 
@media (min-height: 800px) and (max-height: 900px){
 
section.brief div.big-img {
 
section.brief div.big-img {
−
background-image: url(../img/Mac_meida.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/0/04/Mac_meida.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 800px 467px;
 
background-size: 800px 467px;
Line 94: Line 94:
 
}
 
}
 
section.brief div.big-img figure.project{
 
section.brief div.big-img figure.project{
−
background-image: url(../img/biodesigner_mid.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/c/c0/Biodesigner_mid.png);
 
background-position:0px 0px;
 
background-position:0px 0px;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 104: Line 104:
 
}
 
}
 
section.desc div.img-logo figure.logo-white{
 
section.desc div.img-logo figure.logo-white{
−
background-image: url(../img/logo_white_mid.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
 
background-size: 400px 400px;
 
background-size: 400px 400px;
 
width: 400px;
 
width: 400px;
Line 113: Line 113:
 
@media (min-height: 600px) and (max-height: 800px){
 
@media (min-height: 600px) and (max-height: 800px){
 
section.brief div.big-img {
 
section.brief div.big-img {
−
background-image: url(../img/Mac_half_small.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/79/Mac_half_small.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 600px 350px;
 
background-size: 600px 350px;
Line 122: Line 122:
 
}
 
}
 
section.brief div.big-img figure.project{
 
section.brief div.big-img figure.project{
−
background-image: url(../img/biodesigner_half_small.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/0/06/Biodesigner_half_small.png);
 
background-position: 0 0;
 
background-position: 0 0;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 131: Line 131:
 
}
 
}
 
section.desc div.img-logo figure.logo-white{
 
section.desc div.img-logo figure.logo-white{
−
background-image: url(../img/logo_white_mid.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
 
background-size: 300px 300px;
 
background-size: 300px 300px;
 
width: 300px;
 
width: 300px;
Line 141: Line 141:
 
@media (max-height: 600px){
 
@media (max-height: 600px){
 
section.brief div.big-img {
 
section.brief div.big-img {
−
background-image: url(../img/Mac_small.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/b/b2/Mac_small.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 400px 234px;
 
background-size: 400px 234px;
Line 150: Line 150:
 
}
 
}
 
section.brief div.big-img figure.project{
 
section.brief div.big-img figure.project{
−
background-image: url(../img/biodesigner_small.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/9/93/Biodesigner_small.png);
 
background-position: 0 0;
 
background-position: 0 0;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 159: Line 159:
 
}
 
}
 
section.desc div.img-logo figure.logo-white{
 
section.desc div.img-logo figure.logo-white{
−
background-image: url(../img/logo_white_mid.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/7d/Logo_white_mid.png);
 
background-size: 300px 300px;
 
background-size: 300px 300px;
 
width: 300px;
 
width: 300px;
Line 180: Line 180:
  
 
section.brief div.left-trigger button#left{
 
section.brief div.left-trigger button#left{
−
background-image: url(../img/left-trigger.png);
+
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-size: 35px 100px;
Line 197: Line 197:
  
 
section.brief div.right-trigger button#right{
 
section.brief div.right-trigger button#right{
−
background-image: url(../img/right-trigger.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/0/0c/Right-trigger.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 35px 100px;
 
background-size: 35px 100px;
Line 224: Line 224:
  
 
section.brief figure.title-logo{
 
section.brief figure.title-logo{
−
background-image: url(../img/logo_white_small.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/e/eb/Logo_white_small.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: 100px 100px;
 
background-size: 100px 100px;

Latest revision as of 12:56, 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-fluid { 

   width: 100%;
   height: 100%;

}

section.intro { 

   width: 100%;
   padding-top: 5%;

}

section.brief{ background-color: #101010; }


@media (min-height: 900px){ section.brief div.big-img { background-image: url(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(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(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(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(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(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(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(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(Logo_white_mid.png); background-size: 300px 300px; width: 300px; height:300px; } }


@media (max-height: 600px){ section.brief div.big-img { background-image: url(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(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(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(Left-trigger.png); 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(Right-trigger.png); 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(Logo_white_small.png); 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 }