Difference between revisions of "Team:SSTi-SZGD/css/Description"
YuhangYang (Talk | contribs) |
YuhangYang (Talk | contribs) |
||
| Line 7: | Line 7: | ||
/*Content*/ | /*Content*/ | ||
| − | .Content{ background: | + | .Content{ background: white; 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 .title{ padding: 20px 0 45px 35px; color: white; font-size: 3.75rem; line-height: 75px;} |
.Content .left{ float: left;} | .Content .left{ float: left;} | ||
.Content .right{ float: right;} | .Content .right{ float: right;} | ||
| Line 14: | Line 14: | ||
.Content img{ width: inherit;} | .Content img{ width: inherit;} | ||
| − | .Need{ width: 1360px; margin: auto; height: | + | .Need{ width: 1360px; margin: auto; height: 770px;} |
.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;} | .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;} | ||
| − | .Need | + | .Need p:nth-last-of-type(1){ line-height: 37.5px; margin-top: 30px;} |
| − | .Need | + | .Need img{ margin-top: 55px;} |
.Will{ width: 1360px; margin: auto; height: 520px;} | .Will{ width: 1360px; margin: auto; height: 520px;} | ||
| − | .Will .title{ | + | .Will .title{ background: url(https://static.igem.org/mediawiki/2017/b/b3/SSTi-SZGD_Description_Will_DialogBox.png) no-repeat left center; background-size: contain; width: 548px; padding-top: 57px; padding-bottom: 47px;} |
| − | .Will .left{ width: | + | .Will .left{ width: 730px; margin-top: 15px; margin-left: 15px; margin-right: 20px;} |
| − | .Will .right{ width: | + | .Will .right{ width: 580px; margin-right: 10px;} |
.Do{ width: 1360px; margin: auto; height: 1110px;} | .Do{ width: 1360px; margin: auto; height: 1110px;} | ||
| Line 43: | Line 43: | ||
.Content .title{ font-size: 2.6rem; padding: 20px 0 40px 35px;} | .Content .title{ font-size: 2.6rem; padding: 20px 0 40px 35px;} | ||
.Content .left p,.Content .right p{ line-height: 26.5px;} | .Content .left p,.Content .right p{ line-height: 26.5px;} | ||
| − | .Need{ width: 1000px; height: | + | .Need{ width: 1000px; height: 625px;} |
.Need .title{ width: 677px;} | .Need .title{ width: 677px;} | ||
| − | .Need | + | .Need p:nth-last-of-type(1){ margin-top: 0;} |
| − | .Need | + | .Need img{ margin-top: 30px;} |
| − | .Will{ width: 1000px; height: | + | .Will{ width: 1000px; height: 450px;} |
| − | .Will .title{ width: | + | .Will .title{ width: 390px; padding-top: 57px; padding-bottom: 47px;} |
| − | .Will .left{ width: 525px;} | + | .Will .left{ width: 525px; margin-top: 0;} |
.Will .right{ width: 430px; margin-top: 0px;} | .Will .right{ width: 430px; margin-top: 0px;} | ||
| − | .Do{ width: 1000px; height: | + | .Do{ width: 1000px; height: 805px;} |
.Do .title{ width: 585px; padding: 35px 0 35px 35px;} | .Do .title{ width: 585px; padding: 35px 0 35px 35px;} | ||
| − | .Do .left{ width: 455px; margin-top: | + | .Do .left{ width: 455px; margin-top: 0px;} |
| − | .Do .right{ width: 430px; margin-top: | + | .Do .right{ width: 430px; margin-top: 0px;} |
.Do .Headline{ font-size: 2rem; padding: 10px 20px} | .Do .Headline{ font-size: 2rem; padding: 10px 20px} | ||
.Do .left .Headline{ width: 169px;} | .Do .left .Headline{ width: 169px;} | ||
Revision as of 15:07, 25 October 2017
body{ min-width: 1024px; min-height: 489px; position: relative;}
.SSTi-SZGD{ background: url(
) 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: white; width: 100%; padding: 80px 0; text-align: justify; font-size: 2rem;} .Content .title{ padding: 20px 0 45px 35px; color: white; font-size: 3.75rem; line-height: 75px;} .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: 770px;}
.Need .title{ background: url(
) no-repeat left center; background-size: contain; width: 949px;}
.Need p:nth-last-of-type(1){ line-height: 37.5px; margin-top: 30px;}
.Need img{ margin-top: 55px;}
.Will{ width: 1360px; margin: auto; height: 520px;}
.Will .title{ background: url(
) no-repeat left center; background-size: contain; width: 548px; padding-top: 57px; padding-bottom: 47px;}
.Will .left{ width: 730px; margin-top: 15px; margin-left: 15px; margin-right: 20px;}
.Will .right{ width: 580px; margin-right: 10px;}
.Do{ width: 1360px; margin: auto; height: 1110px;}
.Do .title{ float: left; background: url(
) 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(
) 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(
) 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: 625px;} .Need .title{ width: 677px;} .Need p:nth-last-of-type(1){ margin-top: 0;} .Need img{ margin-top: 30px;} .Will{ width: 1000px; height: 450px;} .Will .title{ width: 390px; padding-top: 57px; padding-bottom: 47px;} .Will .left{ width: 525px; margin-top: 0;} .Will .right{ width: 430px; margin-top: 0px;} .Do{ width: 1000px; height: 805px;} .Do .title{ width: 585px; padding: 35px 0 35px 35px;} .Do .left{ width: 455px; margin-top: 0px;} .Do .right{ width: 430px; margin-top: 0px;} .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 .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;} }
