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

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
body{ min-width: 1024px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 465px; position: relative;background:#FFFFFF;}
  
−
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/9/95/SSTi-SZGD_HP_Summary_banner.jpeg) no-repeat center center; min-height: 465px; background-size: cover; padding-top: 15px;}
+
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/4/4f/HP_Summary_banner.jpeg) no-repeat center center; min-height: 465px; background-size: cover; padding-top: 15px;}
−
.SSTi-SZGD .SubNav{ width: 800px; margin: 22% auto;}
+
−
.SSTi-SZGD .SubNav div{ width: 220px; margin: 0 15px; background: rgba(0,0,0,0.431373); float: left; height: 100px; border-radius: 10px; border: 2px dashed #FAEE0D;}
+
−
.SSTi-SZGD .SubNav a{ color: #FAEE0D; text-align: center; display: block; width: inherit; height: inherit; font-size: 3rem; padding: 30px 0;}
+
  
 
/*custom header*/
 
/*custom header*/
Line 10: Line 7:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; height: 800px; background: cornsilk; display: block; padding: 60px 0; text-align: justify; font-size: 1.8rem; font-family: garamond;}
+
.clear{clear: both;}
−
.Content .content{ width: 1320px; margin: auto;}
+
.Content{ width: 1000px; height: 1400px; margin:auto; display: block; font-size: 13px; text-align: justify;font-family: "Arial Regular";font-weight: bold;}
−
.Content .left,.Content .right{ width: 250px; float: left; margin-top: 40px;}
+
.Content .Title{font-size: 29px; color: white;padding: 0 25px;}
−
.Content .left img{ width: 100%; transform: rotate(-10deg);}
+
.Content .left{float:left;}
−
.Content .right img{ width: 100%; transform: rotate(10deg);}
+
.Content .right{float:right;}
−
.Content .middle{ width: 760px; float: left; margin: 0 30px;}
+
.Ques1 p,.Ques2 p{line-height: 28px;padding-left:10px;}
−
.Content .middle p{ margin: 15px auto;}
+
  
 +
.Ques1{height:370px;}
 +
.Ques1 .Title{background:#151515;margin-bottom:20px;height: 60px;line-height: 58px;}
 +
.Ques1 .left .Title{width:478px;}
 +
.Ques1 .right .Title{width: 478px;}
 +
.Ques1 p{width:478px;}
 +
 +
.Ques2 .Title{background: url(https://static.igem.org/mediawiki/2017/4/40/HP_Summary_img7.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;}
 +
.Ques2,.Ques3,.Ques4,.Ques5{padding:20px 0;}
 +
.Ques1 p,.Ques2,p,.Ques3, p,.Ques4, p,.Ques5 p{line-height: 28px;}
 +
.Ques3 .Title{background: url(https://static.igem.org/mediawiki/2017/b/b0/HP_Summary_img8.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;}
 +
.Ques4 .Title{background: url(https://static.igem.org/mediawiki/2017/6/6e/HP_Summary_img9.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;}
 +
.Ques5 .Title{background: url(https://static.igem.org/mediawiki/2017/0/0f/HP_Summary_img10.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;}
  
−
/*--1920--*/
 
−
@media only screen and (max-width: 1920px) {
 
−
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
−
}
 
  
−
/*--1366--*/
 
−
@media only screen and (max-width: 1366px) {
 
−
html{ font-size: 55%;}
 
−
.header .logo span{ margin-top: 16px;}
 
−
.header .nav .mainnav span{ margin-bottom: 21.5px;}
 
−
.Content .content{ width: 1160px;}
 
−
.Content .middle{ width: 600px;}
 
−
.Content .left,.Content .right{ }
 
−
}
 
  
 
/*--1190--*/
 
/*--1190--*/
 
@media only screen and (max-width: 1190px) {
 
@media only screen and (max-width: 1190px) {
−
html{ font-size: 52%;}
+
html{ font-size: 50%;}
−
.header .nav .Team{ width: 90px;}
+
.header .logo span{ margin: 15px 0;}
 
.header .nav .Project{ width: 100px;}
 
.header .nav .Project{ width: 100px;}
−
.header .nav .Application{ width: 115px;}
+
.header .nav .Application{ width: 100px;}
−
.header .nav .Human_Practices{ width: 135px;}
+
.header .nav .Human_Practices{ width: 140px;}
 
.header .nav .Achievement{ width: 120px;}
 
.header .nav .Achievement{ width: 120px;}
−
.header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 22px;}
+
.header .nav .Team{ width: 95px;}
−
.Content .content{ width: 1000px;}
+
.header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;}
−
.Content .middle{ width: 500px;}
+
−
.Content .left,.Content .right{ width: 220px;}
+
−
.Content img{ margin-bottom: 45px;}
+
 
}
 
}

Latest revision as of 09:56, 29 October 2017

body{ min-width: 1024px; min-height: 465px; position: relative;background:#FFFFFF;}

.SSTi-SZGD{ background: url(HP_Summary_banner.jpeg) no-repeat center center; min-height: 465px; background-size: cover; padding-top: 15px;}

/*custom header*/ .header .nav .Human_Practices span,.header .nav .Human_Practices li:nth-of-type(1) a{ color: #FAEE0D;}

/*Content*/ .clear{clear: both;} .Content{ width: 1000px; height: 1400px; margin:auto; display: block; font-size: 13px; text-align: justify;font-family: "Arial Regular";font-weight: bold;} .Content .Title{font-size: 29px; color: white;padding: 0 25px;} .Content .left{float:left;} .Content .right{float:right;} .Ques1 p,.Ques2 p{line-height: 28px;padding-left:10px;}

.Ques1{height:370px;} .Ques1 .Title{background:#151515;margin-bottom:20px;height: 60px;line-height: 58px;} .Ques1 .left .Title{width:478px;} .Ques1 .right .Title{width: 478px;} .Ques1 p{width:478px;}

.Ques2 .Title{background: url(HP_Summary_img7.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;} .Ques2,.Ques3,.Ques4,.Ques5{padding:20px 0;} .Ques1 p,.Ques2,p,.Ques3, p,.Ques4, p,.Ques5 p{line-height: 28px;} .Ques3 .Title{background: url(HP_Summary_img8.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;} .Ques4 .Title{background: url(HP_Summary_img9.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;} .Ques5 .Title{background: url(HP_Summary_img10.png) no-repeat;background-size: contain;height: 90px;line-height: 75px;}


/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 50%;} .header .logo span{ margin: 15px 0;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 100px;} .header .nav .Human_Practices{ width: 140px;} .header .nav .Achievement{ width: 120px;} .header .nav .Team{ width: 95px;} .header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;} }