Difference between revisions of "Team:SSTi-SZGD/css/Safety"
YuhangYang (Talk | contribs) |
YuhangYang (Talk | contribs) (final) |
||
| Line 1: | Line 1: | ||
| − | .Banner{ | + | .Banner{ width: 100%; height: 500px; background: url(https://static.igem.org/mediawiki/2018/3/3c/T--SSTi-SZGD--banner_Safety.png) no-repeat center center; background-size: 50%; margin: 100px 0 30px 0;} |
| − | + | ||
.Content{ font-size: 1.8rem;} | .Content{ font-size: 1.8rem;} | ||
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} | .Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} | ||
| Line 19: | Line 18: | ||
@media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||
| + | .Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;} | ||
.Content{ width: 100%; padding: 5%; font-size: 1.8rem;} | .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} | ||
.Content .title{ font-size: 2.4rem;} | .Content .title{ font-size: 2.4rem;} | ||
| Line 46: | Line 46: | ||
.Content section.Safety_Training .img img{ width: 50%;} | .Content section.Safety_Training .img img{ width: 50%;} | ||
.Content section.GLS .show{ height: 400px;} | .Content section.GLS .show{ height: 400px;} | ||
| + | .Banner{ height: 400px;} | ||
} | } | ||
Latest revision as of 16:46, 4 November 2018
.Banner{ width: 100%; height: 500px; background: url(
) no-repeat center center; background-size: 50%; margin: 100px 0 30px 0;}
.Content{ font-size: 1.8rem;}
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;}
.Content .subtitle{ text-align: center; font-size: 2.5rem;}
.Content section{ margin: 0 auto 100px auto; float: none;}
.Content section .img{ text-align: center;}
.Content section.Safety_Training .img img{ width: 100%; margin: 5px 0;}
.Content section.GLS{ transition: none;}
.Content section.GLS .content{ margin-top: 20px; padding: 0 100px;}
.Content section.GLS .show{ width: 100%; overflow: hidden; height: 605px; position: relative; cursor: pointer;}
.Content section.GLS ul{ padding: 0 15px; position: absolute;}
.Content section.GLS ul li{ float: left;}
.Content section.GLS ul li .img{ margin-bottom: 10px;}
.Content section.GLS ul li .img img{ width: 60%; margin: 0;}
.Content section.GLS .show span{ display: none; width: 60px; height: 60px; position: absolute; top: 0; bottom: 0; margin: auto;background-repeat: no-repeat; background-size: cover; background-position: center;}
.Content section.GLS .show .prev{ left: 0; background-image: url(https://static.igem.org/mediawiki/2018/a/af/T--SSTi-SZGD--safety_btnLeft.png);}
.Content section.GLS .show .next{ right: 0; background-image: url(https://static.igem.org/mediawiki/2018/1/15/T--SSTi-SZGD--safety_btnRight.png);}
;}){kind=link}
;}){kind=link}
@media only screen and (max-width: 767px) { .Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;} .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} .Content .title{ font-size: 2.4rem;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 100%;} .Content section.GLS .show span{ width: 40px; height: 40px;} }
@media (min-width: 467px) and (max-width: 567px) { .Content section.Safety_Training .img img{ width: 80%;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 75%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 45px; height: 45px;} }
@media (min-width: 567px) and (max-width: 767px) { .Content section.Safety_Training .img img{ width: 60%;} .Content section.GLS .content{ padding: 0 60px;} .Content section.GLS ul li .img img{ width: 60%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 50px; height: 50px;}
}
@media only screen and (min-width: 768px) { .Content section.Safety_Training .img img{ width: 50%;} .Content section.GLS .show{ height: 400px;} .Banner{ height: 400px;} }