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

Line 7: Line 7:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; background: cornsilk; padding: 0px 5%; padding-bottom: 100px; font-size: 2rem; text-align: justify;}
+
.Content{ width: 100%; background: cornsilk; padding: 50px 0; padding-bottom: 100px; font-size: 2rem; text-align: justify;}
−
.Safety{ width: 60%; margin: auto; margin-bottom: 60px; font-size: 2.2rem; text-align: center;}
+
.Safety,.Laboratory,.Environment{ width: 1400px; margin: auto; margin-bottom: 60px; font-size: 2.2rem;}
−
.Safety p:nth-of-type(2){ font-family: zwadobef; text-align: justify;}
+
.Safety p{ margin: 40px 0;}
−
.Content .Safety .title{ font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
+
.Content .content{ margin: 10px 0; width: 100%;}
−
.Content .Title{ font-size: 3rem; font-weight: 600; border-bottom: 1px solid #333333; padding-bottom: 10px;}
+
.Content p{ margin-top: 20px;}
−
.Content .Subtitle{ font-size: 2.2rem; font-weight: 600; margin-top: 50px; margin-left: 50px;}
+
.Content .img{ width: 1000px; margin: auto;}
−
.Content .content{ margin-top: 10px; width: 100%; height: 25vw;}
+
.Content img{ border-radius: 10px; float: left; box-shadow:2px 2px 3px #aaaaaa;}
−
.Content .content p{ margin: 10px 0; font-family: "arial narrow";}
+
.Content .title{ font-size: 6rem; font-weight: 600; color: #394c53; letter-spacing: 2px; text-align: center; margin-bottom: 50px;}
−
.Content .content .left{ width: 50%; float: left; padding: 10px 50px; min-width: 370px;}
+
.Content .Title{ font-size: 2.8rem; font-weight: 600; margin-top: 40px;}
−
.Content .content .right{ width: 40%; float: right;}
+
.Content .Subtitle{ margin-top: 30px; margin-bottom: 20px;}
−
.Content img{ width: 25vw; float: left; border-radius: 10px; min-width: 256px;}
+
.Content .Subtitle span{ border-bottom: 1px solid #666; padding-bottom: 5px;}
−
.Content .Laboratory,.Content .Environment{ width: 80%; margin: auto;}
+
−
.Content .Laboratory .Daily .right,.Content .Environment .right{ padding: 25px 0;}
+
−
.Content .Laboratory .Training{ min-height: 515px;}
+
−
.Content .Laboratory .project{ height: 20vw; min-height: 205px;}
+
−
.Content .Laboratory .Daily{ height: 30vw; min-height: 565px;}
+
−
.Content .Laboratory .Daily img{ width: 20vw; margin: 10px;}
+
−
.Content .Laboratory .Daily img:nth-of-type(2){ margin-left: 20%;}
+
−
.Content .Environment{ height: 20vw; min-height: 430px;}
+
−
.References{ width: 60%; margin: 100px auto; font-size: 3rem; color: saddlebrown;}
+
  
 +
.Content .left{ float: left;}
 +
.Content .right{ float: right;}
 +
.Laboratory .left{ width: 60%;}
 +
.Laboratory .right{ width: 35%;}
 +
.Laboratory img{ height: inherit; margin: 0 10px; box-shadow:2px 2px 3px #aaaaaa;}
 +
.Laboratory .top{ height: 480px;}
 +
.Laboratory .img{ height: 350px;}
 +
.Laboratory .bottom{ height: 370px; margin-top: 60px;}
 +
.Laboratory .img:nth-last-of-type(1){ height: 320px !important;}
  
 +
.Environment{ height: 450px;}
 +
.Environment .left{ width: 40%;}
 +
.Environment .right{ width: 55%;}
 +
.Environment img{ width: 100%;}
  
 
/*--1920--*/
 
/*--1920--*/
Line 34: Line 38:
 
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
.topic p{ font-size: 5.5rem;}
 
.topic p{ font-size: 5.5rem;}
−
.Content .content{ height: 30vw;}
+
−
.Content .Laboratory .Daily{ height: 35vw;}
+
−
.Content .Environment{ height: 25vw;}
+
 
}
 
}
−
 
 
/*--1600--*/
 
/*--1600--*/
 
@media only screen and (max-width: 1600px) {
 
@media only screen and (max-width: 1600px) {
−
.Content .content{ height: 35vw;}
+
.Safety,.Laboratory,.Environment{ width: 1200px;}
−
.Content .Laboratory .Daily{ height: 45vw;}
+
.Laboratory .top{ height: 550px;}
−
.Content .Environment{ height: 35vw;}
+
.Environment .right{ margin: 50px 0;}
 +
 
}
 
}
  
Line 52: Line 54:
 
.header .nav .mainnav span{ margin-bottom: 21.5px;}
 
.header .nav .mainnav span{ margin-bottom: 21.5px;}
 
.topic p{ font-size: 5rem;}
 
.topic p{ font-size: 5rem;}
−
.Content .content{ height: 40vw;}
+
.Safety,.Laboratory,.Environment{ width: 1000px;}
−
.Content .Laboratory .Daily{ height: 45vw;}
+
.Laboratory .top{ height: 500px;}
−
.Content .Environment{ height: 35vw;}
+
.Laboratory .bottom{ height: 330px;}
 
}
 
}
  
Line 67: Line 69:
 
.header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 22px;}
 
.header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 22px;}
 
.topic p{ font-size: 4.5rem;}
 
.topic p{ font-size: 4.5rem;}
−
.Content .content{ height: 50vw;}
 
−
.Content .Laboratory .Daily{ height: 55vw;}
 
−
.Content .Environment{ height: 42vw;}
 
 
}
 
}

Revision as of 07:57, 20 October 2017

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

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

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

/*Content*/ .Content{ width: 100%; background: cornsilk; padding: 50px 0; padding-bottom: 100px; font-size: 2rem; text-align: justify;} .Safety,.Laboratory,.Environment{ width: 1400px; margin: auto; margin-bottom: 60px; font-size: 2.2rem;} .Safety p{ margin: 40px 0;} .Content .content{ margin: 10px 0; width: 100%;} .Content p{ margin-top: 20px;} .Content .img{ width: 1000px; margin: auto;} .Content img{ border-radius: 10px; float: left; box-shadow:2px 2px 3px #aaaaaa;} .Content .title{ font-size: 6rem; font-weight: 600; color: #394c53; letter-spacing: 2px; text-align: center; margin-bottom: 50px;} .Content .Title{ font-size: 2.8rem; font-weight: 600; margin-top: 40px;} .Content .Subtitle{ margin-top: 30px; margin-bottom: 20px;} .Content .Subtitle span{ border-bottom: 1px solid #666; padding-bottom: 5px;}

.Content .left{ float: left;} .Content .right{ float: right;} .Laboratory .left{ width: 60%;} .Laboratory .right{ width: 35%;} .Laboratory img{ height: inherit; margin: 0 10px; box-shadow:2px 2px 3px #aaaaaa;} .Laboratory .top{ height: 480px;} .Laboratory .img{ height: 350px;} .Laboratory .bottom{ height: 370px; margin-top: 60px;} .Laboratory .img:nth-last-of-type(1){ height: 320px !important;}

.Environment{ height: 450px;} .Environment .left{ width: 40%;} .Environment .right{ width: 55%;} .Environment img{ width: 100%;}

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

} /*--1600--*/ @media only screen and (max-width: 1600px) { .Safety,.Laboratory,.Environment{ width: 1200px;} .Laboratory .top{ height: 550px;} .Environment .right{ margin: 50px 0;}

}

/*--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;} .topic p{ font-size: 5rem;} .Safety,.Laboratory,.Environment{ width: 1000px;} .Laboratory .top{ height: 500px;} .Laboratory .bottom{ height: 330px;} }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 52%;} .header .nav .Team{ width: 90px;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 115px;} .header .nav .Human_Practices{ width: 135px;} .header .nav .Achievement{ width: 120px;} .header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 22px;} .topic p{ font-size: 4.5rem;} }