Difference between revisions of "Team:CHINA CD UESTC/test"

Line 12: Line 12:
  
 
     <style type="text/css">
 
     <style type="text/css">
 +
 +
 +
aside nav a .text {
 +
font-size: 16px;
 +
font-family: "Open Sans";
 +
display: inline-block;
 +
position: relative;
 +
line-height: normal;
 +
}
 +
aside nav a .text span {
 +
background: url("../num/15.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -23px -296px;
 +
width: auto;
 +
height: 3px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
position: absolute;
 +
bottom: -2px;
 +
left: 50%;
 +
right: 50%;
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
}
 +
aside nav a.selected .text span {
 +
left: 0%;
 +
right: 2%;
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
}
 +
aside .contact {
 +
font-family: 'freight-big-pro';
 +
font-size: 24px;
 +
font-weight: 400;
 +
font-style: italic;
 +
text-align: center;
 +
display: block;
 +
margin: 0 40px;
 +
text-decoration: none;
 +
color: #ffffff;
 +
}
 +
aside .bottom {
 +
position: absolute;
 +
bottom: 7px;
 +
left: 0;
 +
right: 0;
 +
}
 +
aside .bottom .Team {
 +
text-align: center;
 +
}
 +
aside .bottom .Team a {
 +
display: inline-block;
 +
border: 2px solid #ffffff;
 +
margin: 0 1px;
 +
margin-bottom: 3px;
 +
position: relative;
 +
width: 24px;
 +
height: 25px;
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
}
 +
.no-touch aside nav a:hover {
 +
color: #FFFFFF;
 +
}
 +
.no-touch aside nav a.selected:hover {
 +
color: #ddd7d7;
 +
}
 +
body.opened aside {
 +
left: 0px;
 +
}
 +
body.opened aside #mobileMenuButton span {
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
}
 +
body.opened aside #mobileMenuButton span:first-child {
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
-webkit-transform: translate(0px, 7px) rotate(45deg);
 +
-moz-transform: translate(0px, 7px) rotate(45deg);
 +
-ms-transform: translate(0px, 7px) rotate(45deg);
 +
-o-transform: translate(0px, 7px) rotate(45deg);
 +
transform: translate(0px, 7px) rotate(45deg);
 +
}
 +
body.opened aside #mobileMenuButton span:last-child {
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
-webkit-transform: translate(0px, -7px) rotate(-45deg);
 +
-moz-transform: translate(0px, -7px) rotate(-45deg);
 +
-ms-transform: translate(0px, -7px) rotate(-45deg);
 +
-o-transform: translate(0px, -7px) rotate(-45deg);
 +
transform: translate(0px, -7px) rotate(-45deg);
 +
}
 +
body.opened #realcontent {
 +
left: 100px;
 +
opacity: 0.2 !important;
 +
pointer-events: none;
 +
}
 +
body {
 +
background: #2d2c41;
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
}
 +
ul {
 +
list-style-type: none;
 +
}
 +
  
 
#realcontent #homeIndex {
 
#realcontent #homeIndex {
Line 231: Line 345:
 
filter: alpha(opacity=0);
 
filter: alpha(opacity=0);
 
display: none;
 
display: none;
 +
}
 +
 +
#realcontent {
 +
position: fixed;
 +
left: 260px;
 +
top: 0;
 +
right: 0;
 +
height: 100%;
 +
overflow: hidden;
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
}
 +
 +
 +
@media screen and (max-width: 1050px) {
 +
html aside {
 +
width: 200px;
 +
}
 +
html aside #logo {
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
}
 +
html #realcontent {
 +
left: 200px;
 +
}
 +
}
 +
@media screen and (max-width: 1200px) {
 +
html #realcontent #homeIndex a .title {
 +
-webkit-transform: scale(0.7);
 +
-moz-transform: scale(0.7);
 +
-ms-transform: scale(0.7);
 +
-o-transform: scale(0.7);
 +
transform: scale(0.7);
 +
}
 +
html #realcontent #homeIndex .beer .title {
 +
margin-bottom: 20px;
 +
}
 +
html #realcontent #homeIndex .beer {
 +
background-size: 150%;
 +
}
 +
}
 +
@media screen and (max-width: 900px) {
 +
html #realcontent #homeIndex .results {
 +
height: 40%;
 +
}
 +
html #realcontent #homeIndex .Modeling {
 +
top: 40%;
 +
right: 0;
 +
bottom: auto;
 +
height: 30%;
 +
}
 +
html #realcontent #homeIndex .Team {
 +
left: 44%;
 +
top: 70%;
 +
}
 +
}
 +
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
 +
html .beerDetails .middle {
 +
-webkit-transform: translate(0, 0) scale(0.9);
 +
-moz-transform: translate(0, 0) scale(0.9);
 +
-ms-transform: translate(0, 0) scale(0.9);
 +
-o-transform: translate(0, 0) scale(0.9);
 +
transform: translate(0, 0) scale(0.9);
 +
}
 +
}
 +
@media screen and (max-width: 700px) {
 +
html #awwwards {
 +
display: none;
 +
}
 +
html aside {
 +
left: -200px;
 +
}
 +
html aside #mobileMenuButton {
 +
display: block;
 +
}
 +
html #realcontent {
 +
left: 0;
 +
right: auto;
 +
width: 100%;
 +
}
 
}
 
}
  

Revision as of 03:18, 21 May 2015

<!DOCTYPE html>