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

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/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
+
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/4/48/SSTi-SZGD_Description_Description_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}
  
 
/*custom header*/
 
/*custom header*/
Line 7: Line 7:
  
 
/*Content*/
 
/*Content*/
−
.Content{ background: cornsilk; width: 100%;}
+
.Content{ background: cornsilk; width: 100%; padding: 80px 0; text-align: justify; font-size: 2rem;}
−
.Project_Introduction{ padding: 80px 0; text-align: justify; width: 1100px; margin: auto; font-size: 1.8rem;}
+
.Content .title{ padding: 20px 0 45px 35px; color: white; font-size: 3.75rem;}
−
.Project_Introduction .title{ font-size: 2.8rem; color: black; margin-bottom: 25px; font-weight: bold;}
+
.Content .left{ float: left;}
 +
.Content .right{ float: right;}
 +
.Content .left p,.Content .right p{ line-height: 37.5px;}
 +
.Content img{ width: inherit;}
  
−
.Project_Introduction .top{ margin-bottom: 50px; height: 360px;}
+
.Need{ width: 1360px; margin: auto; height: 620px;}
−
.Project_Introduction .top .img{ height: inherit; width: 48%; float: left; background: url(https://static.igem.org/mediawiki/2017/5/59/SSTi-SZGD_background_Project_Introduction.png) no-repeat center;}
+
.Need .title{ background: url(https://static.igem.org/mediawiki/2017/8/81/SSTi-SZGD_Description_Need_DialogBox.png) no-repeat left center; background-size: contain; width: 949px;}
−
.Project_Introduction .top .content{ width: 48%; float: right;}
+
.Need .left{ width: 730px; margin-top: 35px; margin-left: 10px;}
−
.Project_Introduction .top .content p,.Project_Introduction .bottom .content p{ color: #555; line-height: 1.6;}
+
.Need .right{ width: 580px; margin-top: 50px; margin-right: 25px;}
  
−
.Project_Introduction .bottom{ margin-bottom: 20px; height: 475px;}
+
.Will{ width: 1360px; margin: auto; height: 520px;}
−
.Project_Introduction .bottom .img{ width: 48%; height: inherit; float: right; background: url(https://static.igem.org/mediawiki/2017/0/02/SSTi-SZGD_background_Project_Introduction2.png) no-repeat center;}
+
.Will .title{ float: right; background: url(https://static.igem.org/mediawiki/2017/b/b3/SSTi-SZGD_Description_Will_DialogBox.png) no-repeat left center; background-size: contain; width: 405px;}
−
.Project_Introduction .bottom .content{ width: 48%; float: left;}
+
.Will .left{ width: 580px; margin-top: 55px; margin-left: 15px; margin-right: 20px;}
 +
.Will .right{ width: 730px; margin-top: 15px; margin-right: 10px; line-height: 1.5;}
  
 +
.Do{ width: 1360px; margin: auto; height: 1110px;}
 +
.Do .title{ float: left; background: url(https://static.igem.org/mediawiki/2017/a/a6/SSTi-SZGD_Description_Do_DialogBox.png) no-repeat left center; background-size: contain; width: 817px; padding-top: 53px; padding-bottom: 47px;}
 +
.Do .left{ width: 621px; margin-top: 50px; margin-left: 30px; margin-right: 25px;}
 +
.Do .right{ width: 600px; margin-top: 50px; margin-left: 10px; margin-right: 50px;}
 +
.Do .Headline{ font-size: 2.8rem; background: url(https://static.igem.org/mediawiki/2017/a/a2/SSTi-SZGD_Description_Do_HeadlineDialogBox.png) no-repeat left center; padding: 20px; background-size: contain; margin: auto;}
 +
.Do .left .Headline{ width: 235px;}
 +
.Do .right .Headline{ width: 267px;}
 +
.Do .Headline span{ margin-left: 45px; font-weight: 600; line-height: 43px;}
 +
.Do .left img{ margin-top: 35px;}
 +
.Do .subtitle{ font-size: 2.2rem; background: url(https://static.igem.org/mediawiki/2017/9/98/SSTi-SZGD_Description_Do_disc.png) no-repeat left center; margin-left: 20px; padding-left: 30px; font-weight: 600;}
 +
.Do .subparagraph{ font-size: 1.6rem;}
  
  
−
/*--1920--*/
 
−
@media only screen and (max-width: 1920px) {
 
−
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
−
.topic p{ font-size: 5.5rem;}
 
−
}
 
  
 
/*--1366--*/
 
/*--1366--*/
 
@media only screen and (max-width: 1366px) {
 
@media only screen and (max-width: 1366px) {
−
html{ font-size: 55%;}
+
.Content{ font-size: 1.4rem;}
−
.header .logo span{ margin-top: 16px;}
+
.Content .title{ font-size: 2.6rem; padding: 20px 0 40px 35px;}
−
.header .nav .mainnav span{ margin-bottom: 21.5px;}
+
.Content .left p,.Content .right p{ line-height: 26.5px;}
−
.topic p{ font-size: 5rem;}
+
.Need{ width: 1000px; height: 460px;}
−
.Project_Introduction .top{ height: 300px;}
+
.Need .title{ width: 677px;}
−
.Project_Introduction .bottom{ height: 350px;}
+
.Need .left{ width: 525px;}
 +
.Need .right{ width: 430px; margin-top: 40px;}
 +
.Will{ width: 1000px; height: 415px;}
 +
.Will .title{ width: 290px;}
 +
.Will .left{ width: 525px;}
 +
.Will .right{ width: 430px; margin-top: 0px;}
 +
.Do{ width: 1000px; height: 840px;}
 +
.Do .title{ width: 585px; padding: 35px 0 35px 35px;}
 +
.Do .left{ width: 455px; margin-top: 40px;}
 +
.Do .right{ width: 430px; margin-top: 40px;}
 +
.Do .Headline{ font-size: 2rem; padding: 10px 20px}
 +
.Do .left .Headline{ width: 169px;}
 +
.Do .right .Headline{ width: 191px;}
 +
.Do .Headline span{ margin-left: 30px;}
 +
.Do .left img{ width: 430px; margin-left: 15px;}
 +
.Do .subtitle{ font-size: 1.5rem;}
 +
.Do .subparagraph{ font-size: 1.1rem;}
 
}
 
}
  
 
/*--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 .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;}
−
.topic p{ font-size: 4.5rem;}
+
.header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 21px;}
−
.Project_Introduction{ width: 1000px;}
+
−
.Project_Introduction .top{ height: 276px;}
+
−
.Project_Introduction .bottom{ height: 345px;}
+
 
}
 
}

Revision as of 08:08, 23 October 2017

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

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

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

/*Content*/ .Content{ background: cornsilk; width: 100%; padding: 80px 0; text-align: justify; font-size: 2rem;} .Content .title{ padding: 20px 0 45px 35px; color: white; font-size: 3.75rem;} .Content .left{ float: left;} .Content .right{ float: right;} .Content .left p,.Content .right p{ line-height: 37.5px;} .Content img{ width: inherit;}

.Need{ width: 1360px; margin: auto; height: 620px;} .Need .title{ background: url(SSTi-SZGD_Description_Need_DialogBox.png) no-repeat left center; background-size: contain; width: 949px;} .Need .left{ width: 730px; margin-top: 35px; margin-left: 10px;} .Need .right{ width: 580px; margin-top: 50px; margin-right: 25px;}

.Will{ width: 1360px; margin: auto; height: 520px;} .Will .title{ float: right; background: url(SSTi-SZGD_Description_Will_DialogBox.png) no-repeat left center; background-size: contain; width: 405px;} .Will .left{ width: 580px; margin-top: 55px; margin-left: 15px; margin-right: 20px;} .Will .right{ width: 730px; margin-top: 15px; margin-right: 10px; line-height: 1.5;}

.Do{ width: 1360px; margin: auto; height: 1110px;} .Do .title{ float: left; background: url(SSTi-SZGD_Description_Do_DialogBox.png) no-repeat left center; background-size: contain; width: 817px; padding-top: 53px; padding-bottom: 47px;} .Do .left{ width: 621px; margin-top: 50px; margin-left: 30px; margin-right: 25px;} .Do .right{ width: 600px; margin-top: 50px; margin-left: 10px; margin-right: 50px;} .Do .Headline{ font-size: 2.8rem; background: url(SSTi-SZGD_Description_Do_HeadlineDialogBox.png) no-repeat left center; padding: 20px; background-size: contain; margin: auto;} .Do .left .Headline{ width: 235px;} .Do .right .Headline{ width: 267px;} .Do .Headline span{ margin-left: 45px; font-weight: 600; line-height: 43px;} .Do .left img{ margin-top: 35px;} .Do .subtitle{ font-size: 2.2rem; background: url(SSTi-SZGD_Description_Do_disc.png) no-repeat left center; margin-left: 20px; padding-left: 30px; font-weight: 600;} .Do .subparagraph{ font-size: 1.6rem;}


/*--1366--*/ @media only screen and (max-width: 1366px) { .Content{ font-size: 1.4rem;} .Content .title{ font-size: 2.6rem; padding: 20px 0 40px 35px;} .Content .left p,.Content .right p{ line-height: 26.5px;} .Need{ width: 1000px; height: 460px;} .Need .title{ width: 677px;} .Need .left{ width: 525px;} .Need .right{ width: 430px; margin-top: 40px;} .Will{ width: 1000px; height: 415px;} .Will .title{ width: 290px;} .Will .left{ width: 525px;} .Will .right{ width: 430px; margin-top: 0px;} .Do{ width: 1000px; height: 840px;} .Do .title{ width: 585px; padding: 35px 0 35px 35px;} .Do .left{ width: 455px; margin-top: 40px;} .Do .right{ width: 430px; margin-top: 40px;} .Do .Headline{ font-size: 2rem; padding: 10px 20px} .Do .left .Headline{ width: 169px;} .Do .right .Headline{ width: 191px;} .Do .Headline span{ margin-left: 30px;} .Do .left img{ width: 430px; margin-left: 15px;} .Do .subtitle{ font-size: 1.5rem;} .Do .subparagraph{ font-size: 1.1rem;} }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 50%;} .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: 6.5px; margin-bottom: 21px;} }