Difference between revisions of "Team:SSTi-SZGD/css/Home"
YuhangYang (Talk | contribs) |
YuhangYang (Talk | contribs) |
||
| Line 27: | Line 27: | ||
.description .paragraph.three .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a6/T--SSTi-SZGD--home_bacterial.png/800px-T--SSTi-SZGD--home_bacterial.png);} | .description .paragraph.three .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a6/T--SSTi-SZGD--home_bacterial.png/800px-T--SSTi-SZGD--home_bacterial.png);} | ||
.description .paragraph.four .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a5/T--SSTi-SZGD--home_P168E.png/800px-T--SSTi-SZGD--home_P168E.png);} | .description .paragraph.four .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a5/T--SSTi-SZGD--home_P168E.png/800px-T--SSTi-SZGD--home_P168E.png);} | ||
| − | .description .paragraph.five . | + | .description .paragraph.five .Cimg{ margin: auto; float: none; margin-bottom: 10px;} |
| − | .description .paragraph.five .img | + | .description .paragraph.five .Cimg img{ width: 100%;} |
.description .break{ text-align: center; margin: 30px auto;} | .description .break{ text-align: center; margin: 30px auto;} | ||
.description .break img{ height: 150px; transform: rotate(90deg);} | .description .break img{ height: 150px; transform: rotate(90deg);} | ||
Revision as of 18:21, 15 October 2018
.slogan{ padding: 0;}
.slogan .slogan_mask:before{
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(
) no-repeat center center;
background-size: 50%;
}
.slogan .slogan_mask{ background: rgba(255,255,255,0.4); width: 100%; height: inherit; font-size: 1.8rem; text-align: center; font-weight: 600; min-height: 375px; position: relative;}
.slogan .slogan_mask div{ width: 90%; position: absolute; left: 0; right: 0; margin: auto; color: #333;}
.slogan .slogan_mask .Action{ top: 40%; font-size: 5rem; text-shadow: #fff 0px 2px 20px;}
.slogan .slogan_mask .Hyaluronic{ bottom: 18%;}
.slogan .slogan_mask .href_slogan{ position: absolute; bottom: 8%; left: 0; right: 0; margin: auto;}
.slogan .slogan_mask .href_slogan a{ padding: 20px 35px; color: #fff; background: #FF7171; font-size: 1.6rem;}
.slogan .slogan_mask .href_slogan a:hover{ text-decoration: none;}
.description{ background: #fff; padding: 5%;} .description .paragraph{ float: none; display: block; margin: 0 auto;} .description .paragraph .content{ font-size: 3rem; background: #DCF4FB; padding: 15px; border-radius: 10px;} .description .paragraph .img{ background-repeat: no-repeat; background-position: center; background-size: contain; min-height: 250px;} .description .paragraph.one .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/c/cf/T--SSTi-SZGD--home_mask.png/666px-T--SSTi-SZGD--home_mask.png);} .description .paragraph.two .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/b/b7/T--SSTi-SZGD--home_lotion.png/800px-T--SSTi-SZGD--home_lotion.png);} .description .paragraph.three .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a6/T--SSTi-SZGD--home_bacterial.png/800px-T--SSTi-SZGD--home_bacterial.png);} .description .paragraph.four .img{ background-image: url(https://static.igem.org/mediawiki/2018/thumb/a/a5/T--SSTi-SZGD--home_P168E.png/800px-T--SSTi-SZGD--home_P168E.png);} .description .paragraph.five .Cimg{ margin: auto; float: none; margin-bottom: 10px;} .description .paragraph.five .Cimg img{ width: 100%;} .description .break{ text-align: center; margin: 30px auto;} .description .break img{ height: 150px; transform: rotate(90deg);} .description .break.original img{ transform: rotate(0deg);}
;}){kind=link}
;}){kind=link}
;}){kind=link}
;}){kind=link}
.home_nav{ background: #fff; padding: 50px 0; text-align: center;} .home_nav .Content{ float: none; margin: auto;} .home_nav .Content>div{ margin-bottom: 15px;} .home_nav .Content>div a{ display: inline-block; border: 5px solid #00A0E9; border-radius: 15px; padding: 15px;} .home_nav .Content>div:nth-of-type(2n) a{ display: inline-block; border: 5px solid #E4007E;} .home_nav .Content>div a:hover{ box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.38);} .home_nav .Content>div a img{ width: 100%;}
.page_footer{ background: #fff;} .page_footer .Sponsor{ margin: auto; float: none; text-align: center; padding: 3% 0;} .page_footer .Sponsor img{ width: 100%;} .page_footer .page_copyright{ font-size: 1.3rem; color: #999; text-align: center; padding: 10px 0; border-top: 1px solid #aaa;}
@media (max-width: 768px) {
.slogan .slogan_mask:before{
background-size: 100%;
}
.slogan .slogan_mask .Action{ font-size: 4rem;}
.description .paragraph.five .img:nth-of-type(n){ background-position: center;}
}
@media (min-width: 768px) { .slogan .slogan_mask:before{ background-size: 65%; } }
@media (min-width: 992px) { .slogan .slogan_mask:before{ background-size: 50%; } }