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

Line 1: Line 1:
−
.Banner{ width: 100%; height: 500px; background: url(https://static.igem.org/mediawiki/2018/2/23/T--SSTi-SZGD--banner_Collaborations.png) no-repeat center center; background-size: 50%; margin: 100px 0 80px 0;}
+
.Banner{ text-align: center; padding: 10% 0;}
 +
.Banner img{ margin: auto; float: none;}
 
.Content{ font-size: 1.6rem; margin-bottom: 100px;}
 
.Content{ font-size: 1.6rem; margin-bottom: 100px;}
 
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600; color: #fff;}
 
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600; color: #fff;}
Line 26: Line 27:
  
 
@media only screen and (max-width: 767px) {
 
@media only screen and (max-width: 767px) {
−
.Banner{ height: 300px; background-size: 80%; 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;}
−
}
 
−
 
−
@media (min-width: 467px) and (max-width: 567px) {
 
−
 
−
}
 
−
 
−
@media (min-width: 567px) and (max-width: 767px) {
 
−
 
−
}
 
−
 
−
@media only screen and (min-width: 768px) {
 
−
.Banner{ height: 400px;}
 
 
}
 
}

Revision as of 00:48, 18 October 2018

.Banner{ text-align: center; padding: 10% 0;} .Banner img{ margin: auto; float: none;} .Content{ font-size: 1.6rem; margin-bottom: 100px;} .Content .title{ text-align: center; font-size: 3rem; font-weight: 600; color: #fff;} .Content section .title span{ padding: 5px 20px; border-radius: 30px;} .Content section.SZU .title span,.Content section.TJC .title span{ background: #89c9ff;} .Content section.JNC .title span,.Content section.FJC .title span{ background: #ff9bfe;} .Content .subtitle{ text-align: center; font-size: 2.5rem;} .Content section{ margin: 0 auto 100px auto; float: none;} .Content section .Cimg{ float: none; margin: 30px auto;} .Content section .Cimg img{ width: 100%;} .Content section .content{ position: relative; padding: 5%;} .Content section .content .img{ float: none; margin: auto;} .Content section .content .img img{ width: 100%;} .Content section .content span{ position: absolute; width: 50px; height: 50px;} .Content section.SZU .content span.before,.Content section.TJC .content span.before{ top: 0; left: 0; border-top: 10px solid #89c9ff; border-left: 10px solid #89c9ff;} .Content section.SZU .content span.after,.Content section.TJC .content span.after{ bottom: 0; right: 0; border-bottom: 10px solid #89c9ff; border-right: 10px solid #89c9ff;} .Content section.JNC .content span.before,.Content section.FJC .content span.before{ top: 0; right: 0; border-top: 10px solid #ff9bfe; border-right: 10px solid #ff9bfe;} .Content section.JNC .content span.after,.Content section.FJC .content span.after{ bottom: 0; left: 0; border-bottom: 10px solid #ff9bfe; border-left: 10px solid #ff9bfe;}

.Content section.Project_Feedback .title,.Content section.Mentorship .title{ padding: 5px; border-radius: 30px; background: #89c9ff;} .Content section.Project_Feedback .content,.Content section.Mentorship .content{ padding: 30px; border-radius: 15px; background: #fff3f4;} .Content section.Project_Feedback .content img,.Content section.Mentorship .content img{ width: 100%;} .Content section.Mentorship .title{ background: #ff9bfe;}


@media only screen and (max-width: 767px) { .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} .Content .title{ font-size: 2.4rem;} }