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

 
Line 14: Line 14:
  
  
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 {
 
body.opened #realcontent {
 
left: 100px;
 
left: 100px;
Line 368: Line 269:
  
 
@media screen and (max-width: 1050px) {
 
@media screen and (max-width: 1050px) {
html aside {
+
 
width: 200px;
+
}
+
html aside #logo {
+
margin-left: 20px;
+
margin-right: 20px;
+
}
+
 
html #realcontent {
 
html #realcontent {
 
left: 200px;
 
left: 200px;
Line 419: Line 314:
 
}
 
}
 
  @media screen and (max-width: 700px) {
 
  @media screen and (max-width: 700px) {
html #awwwards {
+
 
display: none;
+
}
+
html aside {
+
left: -200px;
+
}
+
html aside #mobileMenuButton {
+
display: block;
+
}
+
 
html #realcontent {
 
html #realcontent {
 
left: 0;
 
left: 0;

Latest revision as of 03:19, 21 May 2015

<!DOCTYPE html>