Difference between revisions of "Team:SSTi-SZGD/css/Human Practices"

(final)
Line 1: Line 1:
−
.Banner{ text-align: center; padding: 10% 0;}
+
.Banner{ width: 100%; height: 400px; background: url(https://static.igem.org/mediawiki/2018/thumb/1/14/T--SSTi-SZGD--banner_Integrated_Human_Practices.png/800px-T--SSTi-SZGD--banner_Integrated_Human_Practices.png) no-repeat center center; background-size: 40%; margin: 100px 0 0 0;}
−
.Banner img{ margin: auto; float: none;}
+
.Content{ font-size: 1.6rem;}
−
.Content{ font-size: 1.6rem; margin-bottom: 100px; margin: auto; float: none;}
+
 
.Content .content{ padding: 30px 0px;}
 
.Content .content{ padding: 30px 0px;}
 
.Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0;}
 
.Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0;}
Line 12: Line 11:
 
.Content .img{ color: #ffbfff; font-weight: 600; text-align: center; margin: 15px 0}
 
.Content .img{ color: #ffbfff; font-weight: 600; text-align: center; margin: 15px 0}
 
.Content .Aimg,.Content .Cimg{ float: none; margin: 15px auto;}
 
.Content .Aimg,.Content .Cimg{ float: none; margin: 15px auto;}
−
.Content .Simg{ width: 20%; display: inline-block; position: absolute; top: -30px; left: 30px; padding: 0 15px; background: #fff;}
+
 
 +
.Content .Simg{ width: 130px; height: 50px; display: inline-block; position: absolute; top: -30px; left: 30px; background-color: #fff; background-size: 110px; background-repeat: no-repeat; background-position: center;}
 +
.sponsor_SZPH .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/f/f7/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZPH.jpeg);}
 +
.sponsor_SZHH .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/5/5f/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZHH.jpeg);}
 +
.sponsor_Tusincere .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/e/e3/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_Tusincere.png);}
 +
.sponsor_BONTAC .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/e/e5/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_BONTAC.png);}
 +
.sponsor_SCS .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/d/d1/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SCS.jpeg);}
 +
.sponsor_SZWG .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/6/67/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZWG.jpeg);}
 +
.sponsor_Star .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/6/68/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_Star.png);}
 +
.sponsor_SINOBIOWAY .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/4/43/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SINOBIOWAY.jpeg);}
 
.Content .img img,.Content .Cimg img{ border-radius: 10px; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;}
 
.Content .img img,.Content .Cimg img{ border-radius: 10px; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;}
 
.Content .Stitle{ border: 5px solid #ffbfff; border-radius: 15px; margin: 15px 0; padding: 0; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;}
 
.Content .Stitle{ border: 5px solid #ffbfff; border-radius: 15px; margin: 15px 0; padding: 0; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;}
Line 21: Line 29:
 
.Content p span{ font-weight: 600;}
 
.Content p span{ font-weight: 600;}
 
.Content .Overview{ font-size: 2rem; float: none; margin: auto;}
 
.Content .Overview{ font-size: 2rem; float: none; margin: auto;}
−
.Content .Microneedle .Stitle{ height: auto; font-size: 2rem;}
 
−
 
  
 
@media only screen and (max-width: 767px) {
 
@media only screen and (max-width: 767px) {
−
.Content .Stitle{ height: 280px; font-size: 2rem;}
+
.Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;}
 
}
 
}
  
 
@media only screen and (min-width: 768px) {
 
@media only screen and (min-width: 768px) {
−
.Content .Stitle{ height: 187.5px; font-size: 1.4rem;}
+
.Banner{ height: 400px;}
−
.Content .sponsor_SCS .Stitle{ font-size: 1.3rem;}
+
.Content .Stitle{ height: 187.5px;}
 +
.Content .Stitle p:nth-of-type(1){ padding: 0; padding-bottom: 5px;}
 +
.Content .Stitle p:nth-of-type(2){ padding: 10px 15px;}
 +
.Microneedle .Stitle{ height: auto;}
 +
.sponsor_SCS .Stitle p:nth-of-type(2){ font-size: 1.3rem;}
 
}
 
}
  
 
@media only screen and (min-width: 992px) {
 
@media only screen and (min-width: 992px) {
−
.Content .Stitle{ height: 256.23px; font-size: 2rem;}
+
.Content .Stitle{ height: 256.23px;}
−
.Content .sponsor_SCS .Stitle{ font-size: 1.8rem;}
+
.Content .Stitle p:nth-of-type(1){ padding: 5px 0;}
 +
.Content .Stitle p:nth-of-type(2){ padding: 15px;}
 +
.sponsor_SCS .Stitle p:nth-of-type(2){ font-size: 1.6rem;}
 
}
 
}
  
 
@media only screen and (min-width: 1200px) {
 
@media only screen and (min-width: 1200px) {
−
.Content .Stitle{ height: 318.75px; font-size: 2.6rem;}
+
.Content .Stitle{ height: 318.75px;}
 
}
 
}

Revision as of 00:53, 6 November 2018

.Banner{ width: 100%; height: 400px; background: url(800px-T--SSTi-SZGD--banner_Integrated_Human_Practices.png) no-repeat center center; background-size: 40%; margin: 100px 0 0 0;} .Content{ font-size: 1.6rem;} .Content .content{ padding: 30px 0px;} .Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0;} .Content .Ctitle{ background: #ffbfff; color: #fff; border-radius: 30px; padding: 5px 40px; font-size: 3rem; font-weight: 600; margin: 10px 0; text-align: center; position: absolute; top: -40px; left: 20px;} .Content .title span{ background: #ffbfff; color: #fff; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center;} .Content .subtitle{ font-size: 2rem; color: #ffbfff; margin-top: 15px;} .Content section{ margin: 100px auto; float: none; position: relative; border: 5px solid #ffbfff; border-radius: 10px;} .Content li{ float: none; display: list-item;} .Content ol li{ list-style: decimal; margin-left: 25px;} .Content .img{ color: #ffbfff; font-weight: 600; text-align: center; margin: 15px 0} .Content .Aimg,.Content .Cimg{ float: none; margin: 15px auto;}

.Content .Simg{ width: 130px; height: 50px; display: inline-block; position: absolute; top: -30px; left: 30px; background-color: #fff; background-size: 110px; background-repeat: no-repeat; background-position: center;} .sponsor_SZPH .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/f/f7/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZPH.jpeg);} .sponsor_SZHH .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/5/5f/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZHH.jpeg);} .sponsor_Tusincere .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/e/e3/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_Tusincere.png);} .sponsor_BONTAC .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/e/e5/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_BONTAC.png);} .sponsor_SCS .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/d/d1/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SCS.jpeg);} .sponsor_SZWG .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/6/67/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SZWG.jpeg);} .sponsor_Star .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/6/68/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_Star.png);} .sponsor_SINOBIOWAY .Simg{ background-image: url(https://static.igem.org/mediawiki/2018/4/43/T--SSTi-SZGD--Integrated_Human_Practices_sponsor_SINOBIOWAY.jpeg);} .Content .img img,.Content .Cimg img{ border-radius: 10px; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;} .Content .Stitle{ border: 5px solid #ffbfff; border-radius: 15px; margin: 15px 0; padding: 0; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0;} .Content .Stitle p:nth-of-type(1){ margin: 0; background: #ffbfff; color: #fff; padding: 5px 0; text-align: center;} .Content .Stitle p:nth-of-type(2){ padding: 15px; color: #333; text-align: justify; font-weight: normal;} .Content img{ width: 100%;} .Content sup{ font-weight: 600;} .Content p span{ font-weight: 600;} .Content .Overview{ font-size: 2rem; float: none; margin: auto;}

@media only screen and (max-width: 767px) { .Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;} }

@media only screen and (min-width: 768px) { .Banner{ height: 400px;} .Content .Stitle{ height: 187.5px;} .Content .Stitle p:nth-of-type(1){ padding: 0; padding-bottom: 5px;} .Content .Stitle p:nth-of-type(2){ padding: 10px 15px;} .Microneedle .Stitle{ height: auto;} .sponsor_SCS .Stitle p:nth-of-type(2){ font-size: 1.3rem;} }

@media only screen and (min-width: 992px) { .Content .Stitle{ height: 256.23px;} .Content .Stitle p:nth-of-type(1){ padding: 5px 0;} .Content .Stitle p:nth-of-type(2){ padding: 15px;} .sponsor_SCS .Stitle p:nth-of-type(2){ font-size: 1.6rem;} }

@media only screen and (min-width: 1200px) { .Content .Stitle{ height: 318.75px;} }