Difference between revisions of "Team:SSTi-SZGD/css/Human Practices"
YuhangYang (Talk | contribs) (Created page with ".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...") |
YuhangYang (Talk | contribs) m |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.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{ 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;} | ||
| − | .Content{ font-size: 1.6rem | + | .Content{ font-size: 1.6rem;} |
.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 11: | 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: | + | |
| + | .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;} | ||
.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(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 .Stitle p:nth-of-type(2){ padding: 15px; color: #333; text-align: justify; font-weight: normal; line-height: 1.42857143} |
.Content img{ width: 100%;} | .Content img{ width: 100%;} | ||
.Content sup{ font-weight: 600;} | .Content sup{ font-weight: 600;} | ||
.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;} | ||
| − | |||
| − | |||
@media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||
| − | .Banner{ background-size: | + | .Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;} |
| − | .Content . | + | } |
| + | |||
| + | @media only screen and (max-width: 567px) { | ||
| + | .Content .Microneedle .Ctitle{ right: 20px;} | ||
| + | .Content .Microneedle .content{ padding: 80px 0 30px 0;} | ||
} | } | ||
| − | @media only screen and (max-width: | + | @media only screen and (max-width: 427px) { |
| − | . | + | .Content .Microneedle .Ctitle{ right: 20px;} |
| + | .Content .Microneedle .content{ padding: 125px 0 30px 0;} | ||
} | } | ||
@media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { | ||
| − | .Content .Stitle{ height: 187.5px; | + | .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; | + | .Content .Stitle{ height: 256.23px;} |
| − | .Content .sponsor_SCS .Stitle{ font-size: 1. | + | .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 | + | .Content .Stitle{ height: 318.75px;} |
} | } | ||
Latest revision as of 01:19, 6 November 2018
.Banner{ width: 100%; height: 400px; background: url(
) 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; line-height: 1.42857143} .Content img{ width: 100%;} .Content sup{ font-weight: 600;} .Content p span{ font-weight: 600;} .Content .Overview{ font-size: 2rem; float: none; margin: auto;}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
@media only screen and (max-width: 767px) { .Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;} }
@media only screen and (max-width: 567px) { .Content .Microneedle .Ctitle{ right: 20px;} .Content .Microneedle .content{ padding: 80px 0 30px 0;} }
@media only screen and (max-width: 427px) { .Content .Microneedle .Ctitle{ right: 20px;} .Content .Microneedle .content{ padding: 125px 0 30px 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;} }