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

 
(2 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: 489px; position: relative;}
  
−
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/d/df/SSTi-SZGD_Collaborations_banner.jpeg) no-repeat center -150px; height: 600px; background-size: cover; padding-top: 15px;}
+
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/a/ae/SSTi-SZGD_Collaborations_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}
  
 
/*custom header*/
 
/*custom header*/
Line 7: 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;font-family: "Arial Regular";font-weight: bold;}
−
.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: 20px;}
+
.Content .img{ width: 1360px; margin: 40px auto;}
−
.Content .right{ width: 700px; float: left; margin-top: 40px; margin-left: 40px;}
+
 
−
.Content .right img{ width: 50%; float: left;}
+
.Handshake{ width: 1360px; margin: auto; height: 470px;}
−
.Content .right span{ width: 50%; height: 262.5px; float: left;}
+
.Handshake .left{ width: 450px; float: left; height: inherit;}
−
.Content .right span:nth-of-type(2),.Content .right span:nth-of-type(3){ height: 233.63px;}
+
.Handshake .middle{ width: 450px; float: left; height: inherit;}
−
.Collaboration{ height: 1300px;}
+
.Handshake .middle img{ width: 400px; margin: 100px auto;}
 +
.Handshake .right{ width: 460px; float: right; height: inherit; padding: 80px 0;}
 +
 
 +
.section{ width: 1360px; margin: auto;}
 +
 
 +
.discussion{ width: 1360px; margin: auto; height: 410px;}
 +
.discussion .left{ width: 775px; margin: 80px 0;}
 +
.discussion .right{ width: 515px;}
 +
 
  
  
 
/*--1920--*/
 
/*--1920--*/
 
@media only screen and (max-width: 1920px) {
 
@media only screen and (max-width: 1920px) {
−
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
+
.Content{ font-size: 1.3rem;}
−
}
+
.Content p{ line-height: 26.5px;}
−
 
+
.Content .img{ width: 1000px;}
−
/*--1366--*/
+
−
@media only screen and (max-width: 1366px) {
+
.Handshake{ width: 1000px; height: 330px;}
−
html{ font-size: 55%;}
+
.Handshake .left{ width: 325px;}
−
.header .logo span{ margin-top: 16px;}
+
.Handshake .middle{ width: 330px;}
−
.header .nav .mainnav span{ margin-bottom: 21.5px;}
+
.Handshake .middle img{ width: 280px; margin: 50px auto;}
−
.Content .content{ width: 1160px;}
+
.Handshake .right{ width: 340px; padding: 30px 0;}
−
.Content .left{ width: 560px;}
+
−
.Content .right{ width: 560px;}
+
.section{ width: 1000px;}
−
.Content .right span{ height: 210px;}
+
−
.Content .right span:nth-of-type(2),.Content .right span:nth-of-type(3){ height: 186.89px;}
+
.discussion{ width: 1000px; height: 295px;}
−
.Collaboration{ height: 1150px;}
+
.discussion .left{ width: 555px; margin: 30px 0;}
 +
.discussion .right{ width: 375px;}
 
}
 
}
  
 
/*--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; margin-top: 70px;}
+
−
.Content .right span{ height: 187.5px;}
+
−
.Content .right span:nth-of-type(2),.Content .right span:nth-of-type(3){ height: 166.88px;}
+
−
.Collaboration{ height: 1100px;}
+
−
.SSTi-SZGD{ background-position: center center;}
+
 
}
 
}

Latest revision as of 10:03, 29 October 2017

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

.SSTi-SZGD{ background: url(SSTi-SZGD_Collaborations_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(4) a{ color: #FAEE0D;}

/*Content*/ .Content{ background: white; width: 100%; padding: 80px 0; text-align: justify; font-size: 1.8rem;font-family: "Arial Regular";font-weight: bold;} .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;}

.Handshake{ width: 1360px; margin: auto; height: 470px;} .Handshake .left{ width: 450px; float: left; height: inherit;} .Handshake .middle{ width: 450px; float: left; height: inherit;} .Handshake .middle img{ width: 400px; margin: 100px auto;} .Handshake .right{ width: 460px; float: right; height: inherit; padding: 80px 0;}

.section{ width: 1360px; margin: auto;}

.discussion{ width: 1360px; margin: auto; height: 410px;} .discussion .left{ width: 775px; margin: 80px 0;} .discussion .right{ width: 515px;}


/*--1920--*/ @media only screen and (max-width: 1920px) { .Content{ font-size: 1.3rem;} .Content p{ line-height: 26.5px;} .Content .img{ width: 1000px;}

.Handshake{ width: 1000px; height: 330px;} .Handshake .left{ width: 325px;} .Handshake .middle{ width: 330px;} .Handshake .middle img{ width: 280px; margin: 50px auto;} .Handshake .right{ width: 340px; padding: 30px 0;}

.section{ width: 1000px;}

.discussion{ width: 1000px; height: 295px;} .discussion .left{ width: 555px; margin: 30px 0;} .discussion .right{ width: 375px;} }

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