Difference between revisions of "Team:SSTi-SZGD/css/Safety"
YuhangYang (Talk | contribs) m |
YuhangYang (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | .Banner{ width: 100%; height: 500px; background: url(https://static.igem.org/mediawiki/2018/ | + | .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: 60%; margin: 100px 0 80px 0;} |
| − | .Content{ | + | .Content{ font-size: 2rem;} |
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} | .Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} | ||
| − | .Content section{ margin- | + | .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); } | ||
| − | @media only screen and (max-width: | + | @media only screen and (max-width: 767px) { |
.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;} | ||
| + | .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;} | ||
} | } | ||
Revision as of 12:52, 4 October 2018
.Banner{ width: 100%; height: 500px; background: url(
) no-repeat center center; background-size: 60%; margin: 100px 0 80px 0;}
.Content{ font-size: 2rem;}
.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(
); }
.Content section.GLS .show .next{ right: 0; background-image: url(
); }
@media only screen and (max-width: 767px) { .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;} }