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

Line 1: Line 1:
−
body{ min-width: 1024px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 489px; position: relative;}
  
−
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/1/1c/SSTi-SZGD_HP_Intergrated_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/8/8a/SSTi-SZGD_HP_Intergrated_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}
−
.SSTi-SZGD .SubNav{ width: 860px; margin: 22% auto;}
+
−
.SSTi-SZGD .SubNav div{ width: 400px; margin: 0 15px; background: rgba(0,0,0,0.431373); float: left; height: 150px; border-radius: 10px; border: 5px dashed #FAEE0D;}
+
−
.SSTi-SZGD .SubNav a{ color: #FAEE0D; text-align: center; display: block; width: inherit; height: inherit; font-size: 4rem; padding: 25px 0;}
+
−
.SSTi-SZGD .SubNav div:nth-of-type(2) a{ padding: 45px 0;}
+
  
 
/*custom header*/
 
/*custom header*/
Line 11: Line 7:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; background: cornsilk; display: block; padding: 10px 0; text-align: justify; font-size: 1.8rem;}
+
.Content{ background: white; width: 100%; padding: 80px 0; text-align: justify; font-size: 1.8rem;}
−
.Content .content{ width: 1320px; margin-top: 10px; margin: auto;}
+
.Content p{ line-height: 37.5px;}
−
.Content .content .Title{ font-size: 3rem; font-weight: 600; border-bottom: 1px solid #333333; padding-bottom: 10px; padding-top: 30px;}
+
.Content .left{ float: left;}
−
.Content .content .SubTitle{ font-size: 2.2rem; font-weight: 600; margin-top: 30px;}
+
.Content .right{ float: right;}
−
.Content .content p{ margin: 10px 0; font-family: "arial narrow"; line-height: 1.5;}
+
.Content img{ width: inherit;}
−
.Content .left{ width: 580px; float: left; margin-top: 50px;}
+
.Content .img{ width: 1360px; margin: 40px auto;}
−
.Content .right{ width: 700px; float: left; margin-top: 20px; margin-left: 40px;}
+
.Content .introduction{ font-size: 2.5rem; width: 1200px; margin: auto;}
−
.Content .right img{ width: 50%; float: left;}
+
.Content .Title{ font-size: 3.75rem; color: white; background: #0d640f; height: 88px; padding: 20.5px 33px;}
−
.Content .right span{ width: 50%; height: 262.5px; float: left;}
+
−
.Content .Private img{ width: 49%; margin-top: 8px;}
+
−
.Content .Private img:nth-of-type(2n-1){ margin-right: 8px;}
+
−
.countryside{ height: 900px;}
+
−
.Private{ height: 600px;}
+
−
.Leveking{ height: 780px;}
+
  
 +
.Village{ border-top: 3px solid #0d640f; width: 1360px; margin: 50px auto;}
 +
.Village .Title{ width: 740px;}
 +
.Firstparagraph{ height: 310px;}
 +
.Firstparagraph .left{ width: 670px; margin: 120px 0 0 25px;}
 +
.Firstparagraph .right{ width: 600px; margin: 70px 50px 0 0;}
 +
.Secondparagraph,.Thirdparagraph{ margin: 40px 0; padding: 0 50px 0 25px;}
 +
.Thirdparagraph{ font-size: 2rem;}
 +
.Thirdparagraph p{ background: url(https://static.igem.org/mediawiki/2017/c/cd/SSTi-SZGD_HP_Intergrated_disc.png) no-repeat 10px center; padding-left: 35px; font-weight: normal;}
 +
.Thirdparagraph p:nth-of-type(1){ background: none; padding: 0; font-weight: 600;}
 +
 +
.balcony{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;}
 +
.balcony .Title{ width: 705px;}
 +
.balcony .left{ width: 655px; margin: 50px 0 0 25px;}
 +
.balcony .right{ width: 595px; margin: 80px 50px 0 0;}
 +
.balcony .Top{ height: 500px; margin-bottom: 40px;}
 +
.balcony .Bottom{ height: 255px; border-top: 2.5px solid #333333;}
 +
.balcony .Bottom .right{ margin-top: -43px;}
 +
 +
.Orchard{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;}
 +
.Orchard .Title{ width: 575px;}
 +
.Orchard .left{ width: 655px; margin: 80px 0 0 25px;}
 +
.Orchard .right{ width: 595px; margin-top: 50px;}
 +
.Orchard .Top{ height: 425px;}
 +
.Orchard .Top img{ position: absolute;}
 +
.Orchard .Bottom{ height: 280px;}
 +
.Orchard .Bottom .left{ margin-top: -25px;}
 +
.Orchard .Bottom .right{ margin: 0 30px 0 0;}
 +
 +
.Leveking{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;}
 +
.Leveking .Title{ width: 685px;}
 +
.Leveking .Top .left{ width: 635px; margin: 70px 0 0 25px;}
 +
.Leveking .Top .right{ width: 485px; margin: 55px 100px 0 0;}
 +
.Leveking .Middle .left{ width: 650px; margin: 55px 0 0 -80px;}
 +
.Leveking .Middle .right{ width: 700px; margin: 0;}
 +
.Leveking .Bottom .left{ width: 135px; margin: 0 0 0 35px;}
 +
.Leveking .Bottom .right{ width: 1150px; margin: 20px 10px 0 0;}
 +
.Leveking .Top{ height: 260px;}
 +
.Leveking .Middle{ height: 515px; margin: 40px 0;}
 +
.Leveking .Bottom{ height: 165px;}
  
  
−
/*--1920--*/
 
−
@media only screen and (max-width: 1920px) {
 
−
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
−
}
 
  
 
/*--1366--*/
 
/*--1366--*/
 
@media only screen and (max-width: 1366px) {
 
@media only screen and (max-width: 1366px) {
−
html{ font-size: 55%;}
+
.Content{ font-size: 1.3rem;}
−
.header .logo span{ margin-top: 16px;}
+
.Content p{ line-height: 26.5px;}
−
.header .nav .mainnav span{ margin-bottom: 21.5px;}
+
.Content .img{ width: 1000px;}
−
.Content .content{ width: 1160px;}
+
.Content .introduction{ font-size: 1.75rem; width: 900px;}
−
.Content .left{ width: 560px;}
+
.Content .Title{ font-size: 2.65rem; height: 64px;}
−
.Content .right{ width: 560px;}
+
−
.Content .right span{ height: 210px;}
+
.Village{width: 1000px; margin: 30px auto;}
−
.countryside{ height: 700px;}
+
.Village .Title{ width: 540px;}
−
.Private{ height: 480px;}
+
.Firstparagraph{ height: 220px;}
−
.Leveking{ height: 650px;}
+
.Firstparagraph .left{ width: 475px; margin: 70px 0 0 20px;}
−
.SSTi-SZGD .SubNav a{ font-size: 4.5rem;}
+
.Firstparagraph .right{ width: 427px; margin: 50px 35px 0 0;}
 +
.Secondparagraph,.Thirdparagraph{ margin: 40px 0; padding: 0 35px 0 20px;}
 +
.Thirdparagraph{ font-size: 1.4rem;}
 +
 +
.balcony{ width: 1000px;}
 +
.balcony .Title{ width: 520px;}
 +
.balcony .left{ width: 495px; margin: 40px 0 0 20px;}
 +
.balcony .right{ width: 425px; margin: 40px 35px 0 0;}
 +
.balcony .Top{ height: 350px; margin-bottom: 30px;}
 +
.balcony .Bottom{ height: 220px; border-top: 2.5px solid #333333;}
 +
.balcony .Bottom .right{ margin-top: -32px;}
 +
 +
.Orchard{ width: 1000px;}
 +
.Orchard .Title{ width: 423px;}
 +
.Orchard .left{ width: 500px; margin: 60px 0 0 20px;}
 +
.Orchard .right{ width: 365px; margin-top: 30px;}
 +
.Orchard .Top{ height: 270px;}
 +
.Orchard .Top img{ position: absolute;}
 +
.Orchard .Bottom{ height: 220px;}
 +
.Orchard .Bottom .left{ margin-top: -25px;}
 +
.Orchard .Bottom .right{ margin: 0 30px 0 0;}
 +
 +
.Leveking{ width: 1000px;}
 +
.Leveking .Title{ width: 500px;}
 +
.Leveking .Top .left{ width: 455px; margin: 50px 0 0 20px;}
 +
.Leveking .Top .right{ width: 340px; margin: 35px 100px 0 0;}
 +
.Leveking .Middle .left{ width: 495px; margin: 35px 0 0 -80px;}
 +
.Leveking .Middle .right{ width: 515px; margin: 0;}
 +
.Leveking .Bottom .left{ width: 95px; margin: 0 0 0 35px;}
 +
.Leveking .Bottom .right{ width: 850px; margin: 20px 10px 0 0;}
 +
.Leveking .Top{ height: 200px;}
 +
.Leveking .Middle{ height: 375px; margin: 40px 0;}
 +
.Leveking .Bottom{ height: 100px;}
 
}
 
}
  
 
/*--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 .left{ width: 460px;}
+
−
.Content .right{ width: 500px;}
+
−
.Content .right span{ height: 187.5px;}
+
−
.Private{ height: 430px;}
+
−
.Private .left{ margin-top: 15px;}
+
 
}
 
}

Revision as of 21:40, 25 October 2017

body{ min-width: 1024px; min-height: 489px; position: relative;}

.SSTi-SZGD{ background: url(SSTi-SZGD_HP_Intergrated_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}

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

/*Content*/ .Content{ background: white; width: 100%; padding: 80px 0; text-align: justify; font-size: 1.8rem;} .Content p{ line-height: 37.5px;} .Content .left{ float: left;} .Content .right{ float: right;} .Content img{ width: inherit;} .Content .img{ width: 1360px; margin: 40px auto;} .Content .introduction{ font-size: 2.5rem; width: 1200px; margin: auto;} .Content .Title{ font-size: 3.75rem; color: white; background: #0d640f; height: 88px; padding: 20.5px 33px;}

.Village{ border-top: 3px solid #0d640f; width: 1360px; margin: 50px auto;} .Village .Title{ width: 740px;} .Firstparagraph{ height: 310px;} .Firstparagraph .left{ width: 670px; margin: 120px 0 0 25px;} .Firstparagraph .right{ width: 600px; margin: 70px 50px 0 0;} .Secondparagraph,.Thirdparagraph{ margin: 40px 0; padding: 0 50px 0 25px;} .Thirdparagraph{ font-size: 2rem;} .Thirdparagraph p{ background: url(SSTi-SZGD_HP_Intergrated_disc.png) no-repeat 10px center; padding-left: 35px; font-weight: normal;} .Thirdparagraph p:nth-of-type(1){ background: none; padding: 0; font-weight: 600;}

.balcony{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;} .balcony .Title{ width: 705px;} .balcony .left{ width: 655px; margin: 50px 0 0 25px;} .balcony .right{ width: 595px; margin: 80px 50px 0 0;} .balcony .Top{ height: 500px; margin-bottom: 40px;} .balcony .Bottom{ height: 255px; border-top: 2.5px solid #333333;} .balcony .Bottom .right{ margin-top: -43px;}

.Orchard{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;} .Orchard .Title{ width: 575px;} .Orchard .left{ width: 655px; margin: 80px 0 0 25px;} .Orchard .right{ width: 595px; margin-top: 50px;} .Orchard .Top{ height: 425px;} .Orchard .Top img{ position: absolute;} .Orchard .Bottom{ height: 280px;} .Orchard .Bottom .left{ margin-top: -25px;} .Orchard .Bottom .right{ margin: 0 30px 0 0;}

.Leveking{ border-top: 3px solid #0d640f; width: 1360px; margin: auto;} .Leveking .Title{ width: 685px;} .Leveking .Top .left{ width: 635px; margin: 70px 0 0 25px;} .Leveking .Top .right{ width: 485px; margin: 55px 100px 0 0;} .Leveking .Middle .left{ width: 650px; margin: 55px 0 0 -80px;} .Leveking .Middle .right{ width: 700px; margin: 0;} .Leveking .Bottom .left{ width: 135px; margin: 0 0 0 35px;} .Leveking .Bottom .right{ width: 1150px; margin: 20px 10px 0 0;} .Leveking .Top{ height: 260px;} .Leveking .Middle{ height: 515px; margin: 40px 0;} .Leveking .Bottom{ height: 165px;}


/*--1366--*/ @media only screen and (max-width: 1366px) { .Content{ font-size: 1.3rem;} .Content p{ line-height: 26.5px;} .Content .img{ width: 1000px;} .Content .introduction{ font-size: 1.75rem; width: 900px;} .Content .Title{ font-size: 2.65rem; height: 64px;}

.Village{width: 1000px; margin: 30px auto;} .Village .Title{ width: 540px;} .Firstparagraph{ height: 220px;} .Firstparagraph .left{ width: 475px; margin: 70px 0 0 20px;} .Firstparagraph .right{ width: 427px; margin: 50px 35px 0 0;} .Secondparagraph,.Thirdparagraph{ margin: 40px 0; padding: 0 35px 0 20px;} .Thirdparagraph{ font-size: 1.4rem;}

.balcony{ width: 1000px;} .balcony .Title{ width: 520px;} .balcony .left{ width: 495px; margin: 40px 0 0 20px;} .balcony .right{ width: 425px; margin: 40px 35px 0 0;} .balcony .Top{ height: 350px; margin-bottom: 30px;} .balcony .Bottom{ height: 220px; border-top: 2.5px solid #333333;} .balcony .Bottom .right{ margin-top: -32px;}

.Orchard{ width: 1000px;} .Orchard .Title{ width: 423px;} .Orchard .left{ width: 500px; margin: 60px 0 0 20px;} .Orchard .right{ width: 365px; margin-top: 30px;} .Orchard .Top{ height: 270px;} .Orchard .Top img{ position: absolute;} .Orchard .Bottom{ height: 220px;} .Orchard .Bottom .left{ margin-top: -25px;} .Orchard .Bottom .right{ margin: 0 30px 0 0;}

.Leveking{ width: 1000px;} .Leveking .Title{ width: 500px;} .Leveking .Top .left{ width: 455px; margin: 50px 0 0 20px;} .Leveking .Top .right{ width: 340px; margin: 35px 100px 0 0;} .Leveking .Middle .left{ width: 495px; margin: 35px 0 0 -80px;} .Leveking .Middle .right{ width: 515px; margin: 0;} .Leveking .Bottom .left{ width: 95px; margin: 0 0 0 35px;} .Leveking .Bottom .right{ width: 850px; margin: 20px 10px 0 0;} .Leveking .Top{ height: 200px;} .Leveking .Middle{ height: 375px; margin: 40px 0;} .Leveking .Bottom{ height: 100px;} }

/*--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;} }