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

Line 1: Line 1:
−
.slogan{ padding: 0;}
+
.page_content{ padding-top: 180px;}
−
.slogan .slogan_mask:before{
+
.name{ font-size: 6rem; text-align: center; margin: auto; float: none;}
−
content: ' ';
+
.ProjectVideo{ float: none; margin: 50px auto;}
−
position: fixed;
+
−
z-index: -1;
+
−
top: 0;
+
−
right: 0;
+
−
bottom: 0;
+
−
left: 0;
+
−
background: url(https://static.igem.org/mediawiki/2018/thumb/0/00/T--SSTi-SZGD--banner_Home.png/800px-T--SSTi-SZGD--banner_Home.png) 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{ background: #fff; padding: 5%;}
 
.description .paragraph{ float: none; display: block; margin: 0 auto;}
 
.description .paragraph{ float: none; display: block; margin: 0 auto;}
−
.description .paragraph .content{ font-size: 3rem; background: #DCF4FB; padding: 15px; border-radius: 10px;}
+
.description .paragraph .content{ font-size: 3rem; padding: 15px; position: relative;}
 +
.description .paragraph .content span{ position: absolute; width: 30px; height: 30px; border: 3px solid #CFAA9E;}
 +
.description .paragraph .content span.before{ border-bottom: none; border-right: none; top: 0; left: 0;}
 +
.description .paragraph .content span.after{ border-top: none; border-left: none; bottom: 0; right: 0;}
 +
.description .two span{ border-color: #F2AA97 !important;}
 +
.description .three span{ border-color: #ED9282 !important;}
 +
.description .four span{ border-color: #DD857F !important;}
 +
.description .five span{ border-color: #C96A65 !important;}
 
.description .paragraph .img{ background-repeat: no-repeat; background-position: center; background-size: contain; min-height: 250px;}
 
.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.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);}
Line 45: Line 36:
 
.page_footer .Sponsor img{ width: 100%;}
 
.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;}
 
.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%;
 
−
}
 
−
}
 

Revision as of 23:58, 17 October 2018

.page_content{ padding-top: 180px;} .name{ font-size: 6rem; text-align: center; margin: auto; float: none;} .ProjectVideo{ float: none; margin: 50px auto;}

.description{ background: #fff; padding: 5%;} .description .paragraph{ float: none; display: block; margin: 0 auto;} .description .paragraph .content{ font-size: 3rem; padding: 15px; position: relative;} .description .paragraph .content span{ position: absolute; width: 30px; height: 30px; border: 3px solid #CFAA9E;} .description .paragraph .content span.before{ border-bottom: none; border-right: none; top: 0; left: 0;} .description .paragraph .content span.after{ border-top: none; border-left: none; bottom: 0; right: 0;} .description .two span{ border-color: #F2AA97 !important;} .description .three span{ border-color: #ED9282 !important;} .description .four span{ border-color: #DD857F !important;} .description .five span{ border-color: #C96A65 !important;} .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);}

.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;}