Difference between revisions of "Team:CHINA CD UESTC/test"
Zhangmanni (Talk | contribs) |
Zhangmanni (Talk | contribs) |
||
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>