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

Line 1: Line 1:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
    <!-- CSS
+
<!-- CSS
 
     <link rel="stylesheet" type="text/css" href="./css/sidemenu.css">
 
     <link rel="stylesheet" type="text/css" href="./css/sidemenu.css">
 
     <link rel="stylesheet" type="text/css" href="./css/teamcontent.css" >
 
     <link rel="stylesheet" type="text/css" href="./css/teamcontent.css" >
Line 9: Line 11:
 
</head>
 
</head>
 
<style type="text/css">
 
<style type="text/css">
.unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
.unselect {
.ir { font: 0/0 a; text-shadow: none; color: transparent;}
+
-moz-user-select: none;
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
+
-webkit-user-select: none;
.clearfix { display: inline-block;}
+
-ms-user-select: none;
html[xmlns] .clearfix { display: block;}
+
-o-user-select: none;
* html .clearfix { height: 1%;}
+
user-select: none;
.middleHack { zoom: 1;}
+
}
.ib { display: -moz-inline-stack !important; display: inline-block !important; vertical-align: top;}
+
.ir {
.ibIe { display: inline !important; zoom: 1;}
+
font: 0/0 a;
.lt-ie8 .ib { display: inline !important; zoom: 1;}
+
text-shadow: none;
.bgCover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
+
color: transparent;
.clear { clear: both; display: block;}
+
}
.translate3d { -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);}
+
.clearfix:after {
.translate { -webkit-transform: translate(0,0); -moz-transform: translate3d(0,0); -ms-transform: translate3d(0,0); -o-transform: translate3d(0,0); transform: translate3d(0,0);}
+
content: ".";
.noflick { -webkit-backface-visibility: hidden;}
+
display: block;
a img { border: none;}
+
clear: both;
 
+
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
.clearfix {
 +
display: inline-block;
 +
}
 +
html[xmlns] .clearfix {
 +
display: block;
 +
}
 +
* html .clearfix {
 +
height: 1%;
 +
}
 +
.middleHack {
 +
zoom: 1;
 +
}
 +
.ib {
 +
display: -moz-inline-stack !important;
 +
display: inline-block !important;
 +
vertical-align: top;
 +
}
 +
.ibIe {
 +
display: inline !important;
 +
zoom: 1;
 +
}
 +
.lt-ie8 .ib {
 +
display: inline !important;
 +
zoom: 1;
 +
}
 +
.bgCover {
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
.clear {
 +
clear: both;
 +
display: block;
 +
}
 +
.translate3d {
 +
-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);
 +
}
 +
.translate {
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate3d(0, 0);
 +
-ms-transform: translate3d(0, 0);
 +
-o-transform: translate3d(0, 0);
 +
transform: translate3d(0, 0);
 +
}
 +
.noflick {
 +
-webkit-backface-visibility: hidden;
 +
}
 +
a img {
 +
border: none;
 +
}
 
body {
 
body {
 
background: #2d2c41;
 
background: #2d2c41;
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
}
 
}
 
 
 
 
 
 
/* ----------------------------
 
/* ----------------------------
 
             menu
 
             menu
Line 41: Line 96:
 
list-style-type: none !important;
 
list-style-type: none !important;
 
}
 
}
 
+
li {
li {list-style-type:none !important;
+
list-style-type: none !important;
 
}
 
}
 
+
.accordion {
.accordion {
+
width: 100%;
width: 100%;
+
max-width: 360px;
max-width: 360px;
+
background: #303030;
background: #303030;
+
-webkit-border-radius: 4px;
-webkit-border-radius: 4px;
+
-moz-border-radius: 4px;
-moz-border-radius: 4px;
+
border-radius: 4px;
border-radius: 4px;
+
 
list-style-type: none !important;
 
list-style-type: none !important;
 
+
}
}
+
.accordion li {
+
.accordion li {
+
 
list-style-type: none !important;
 
list-style-type: none !important;
list-style:none;
+
list-style: none;
}
+
}
 
+
 
.accordion .link {
 
.accordion .link {
 
cursor: pointer;
 
cursor: pointer;
Line 70: Line 121:
 
border-bottom: 1px solid #CCC;
 
border-bottom: 1px solid #CCC;
 
position: relative;
 
position: relative;
 
 
}
 
}
 
 
.accordion li:last-child .link {
 
.accordion li:last-child .link {
 
border-bottom: 0;
 
border-bottom: 0;
 
}
 
}
 
 
 
 
.accordion li.open .link {
 
.accordion li.open .link {
 
color: #FFE153;
 
color: #FFE153;
 
}
 
}
 
+
.submenu {
 
+
display: none;
.submenu {
+
background: #444359;
display: none;
+
font-size: 5px;
background: #444359;
+
font-size: 5px;
+
 
list-style-type: none !important;
 
list-style-type: none !important;
 
+
}
}
+
.submenu li {
 
+
border-bottom: 1px solid #4b4a5e;
.submenu li {
+
border-bottom: 1px solid #4b4a5e;
+
 
list-style-type: none !important;
 
list-style-type: none !important;
list-style:none;
+
list-style: none;
+
}
}
+
.submenu a {
 
+
display: block;
.submenu a {
+
text-decoration: none;
display: block;
+
color: #d9d9d9;
text-decoration: none;
+
}
color: #d9d9d9;
+
.submenu a:hover {
}
+
background: #b63b4d;
 
+
color: #FFF;
.submenu a:hover {
+
}
background: #b63b4d;
+
color: #FFF;
+
}
+
 
#menuHome {
 
#menuHome {
  color: #FFF;
+
color: #FFF;
  font-size: 17px;
+
font-size: 17px;
  margin-right: 60px;
+
margin-right: 60px;
 
}
 
}
#menuHome:hover{  
+
#menuHome:hover {
  color: #FFE153;
+
color: #FFE153;
 
}
 
}
 
 
 
/*.overflow {  overflow: hidden;}*/
 
/*.overflow {  overflow: hidden;}*/
.bgwidth { width: 100%;}
+
.bgwidth {
.bgheight {  height: 100%;}
+
width: 100%;
aside {  width: 260px;  background: url("") no-repeat top left #141311;  position: absolute;  top: 0;  left: 0;  bottom: 0;  z-index: 1;  -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);}
+
aside #mobileMenuButton {  position: absolute;  top: 12px;  left: 212px;  z-index: 10000;  display: none;  padding: 6px;  background: url("../num/4.png") repeat top left transparent;}
+
aside #mobileMenuButton span {  width: 25px;  height: 4px;  display: block;  background: #FFFFFF;  -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.6);  -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.6);  box-shadow: 0px 0px 6px rgba(0,0,0,0.6);  margin-top: 3px;  -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 #mobileMenuButton span:first-child {  margin-top: 0;}
+
aside #logo {  text-indent: -6000px;  margin: 80px 32px 50px 32px;  display: block;}
+
aside #logo img {  display: block;  width: 100%; }
+
aside .separator {  background: url("../num/separator.jpg") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -23px -296px;  width: 143px;  height: 3px;  text-indent: -6000px;  text-align: left;  margin: 25px auto;}
+
aside nav {  font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma ;padding: 0 40px;}
+
aside nav a {  color: #ddd7d7;  line-height: 40px;  text-align: center;  text-decoration: none;  font-size: 23px;  display: block;  letter-spacing: 2px;}
+
aside .contact {  font-family:'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;  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 .social {  text-align: center;}
+
aside .bottom .social 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;}
+
 
+
* {  margin: 0;  padding: 0;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
+
.no-touch * {  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
+
div,h1,h2,h3,h4,span,p,img,a {  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
+
a {  color: #FFFFFF;  text-decoration: underline;}
+
.fa {  text-shadow: rgba(0,0,0,0.01) 0 0 1px;  -webkit-text-stroke: 0.10px;}
+
img {  -moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  user-select: none;  -webkit-user-drag: none;  user-drag: none;}
+
html,body {  min-height: 100%;  width: 100%;  height: 100%;  background: #000000 ; color: #ffffff;  overflow: hidden;  font-family: 'din-condensed-web';  font-size: 14px;  font-weight: 400;}
+
 
+
 
+
#realcontent {  position: absolute;  left: 260px;  top: 0;  right: 0;  height: 500px;  overflow-y: scroll;  -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);
+
z-index: 9999;
+
float:right;}
+
.owl-wrapper-outer,.owl-wrapper,.owl-item {  height: 100%;}
+
.fullBg {  position: absolute;  top: 0;  left: 0;  display: none;}
+
.fullBg.display {  display: block;}
+
.layoutHide {  position: absolute;  top: 0;  left: 0;  bottom: 0;  width: 0%;  background: #000000;  z-index: 40;  -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);  -webkit-backface-visibility: hidden;  background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;}
+
.goBack {  position: absolute;  top: 3%;  left: 3%;  z-index: 3;  display: inline-block;  line-height: 23px;  padding-top: 1px;  border: 2px solid #FFFFFF;  padding-left: 20px;  padding-right: 10px;  font-size: 14px;  text-transform: uppercase;  text-decoration: none;}
+
.goBack span {  position: absolute;  background: url("../num/15.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -193px -294px;  width: 9px;  height: 7px;  text-indent: -6000px;  text-align: left;  left: 7px;  top: 50%;  margin-top: -4px;}
+
.video {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 1;  background: #000000;}
+
.video .close {  position: absolute;  top: 45px;  right: 45px;  right: 125px;  background: url("../num/15.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -702px -247px;  width: 26px;  height: 26px;  text-indent: -6000px;  text-align: left;  cursor: pointer;}
+
.touch .video .close {  top: 20px;  right: 20px;}
+
 
+
@media screen and (max-height: 780px) {  html body aside #logo {    margin-top: 50px;    margin-bottom: 30px;  }
+
  html body aside nav a {    line-height: 35px;    font-size: 18px;  }
+
  html body aside .separator {    margin: 20px auto;  }
+
  html body aside .contact {    font-size: 18px;  }
+
 
}
 
}
@media screen and (max-height: 680px) { html body aside #logo {    margin-top: 20px;    margin-bottom: 20px;  }
+
.bgheight {
  html body aside nav a {    line-height: 31px;    font-size: 18px;  }
+
height: 100%;
  html body aside .separator {    margin: 10px auto; }
+
 
}
 
}
@media screen and (max-width: 1050px) { html aside {   width: 200px; }
+
aside {
  html aside #logo {   margin-left: 20px;   margin-right: 20px; }
+
width: 260px;
  html #realcontent {   left: 200px; }
+
background: url("") no-repeat top left #141311;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
z-index: 1;
 +
-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);
 +
}
 +
aside #mobileMenuButton {
 +
position: absolute;
 +
top: 12px;
 +
left: 212px;
 +
z-index: 10000;
 +
display: none;
 +
padding: 6px;
 +
background: url("../num/4.png") repeat top left transparent;
 +
}
 +
aside #mobileMenuButton span {
 +
width: 25px;
 +
height: 4px;
 +
display: block;
 +
background: #FFFFFF;
 +
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
 +
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
 +
box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
 +
margin-top: 3px;
 +
-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 #mobileMenuButton span:first-child {
 +
margin-top: 0;
 +
}
 +
aside #logo {
 +
text-indent: -6000px;
 +
margin: 80px 32px 50px 32px;
 +
display: block;
 +
}
 +
aside #logo img {
 +
display: block;
 +
width: 100%;
 +
}
 +
aside .separator {
 +
background: url("../num/separator.jpg") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -23px -296px;
 +
width: 143px;
 +
height: 3px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin: 25px auto;
 +
}
 +
aside nav {
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
padding: 0 40px;
 +
}
 +
aside nav a {
 +
color: #ddd7d7;
 +
line-height: 40px;
 +
text-align: center;
 +
text-decoration: none;
 +
font-size: 23px;
 +
display: block;
 +
letter-spacing: 2px;
 +
}
 +
aside .contact {
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
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 .social {
 +
text-align: center;
 +
}
 +
aside .bottom .social 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;
 +
}
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
.no-touch * {
 +
-webkit-touch-callout: none;
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
}
 +
div, h1, h2, h3, h4, span, p, img, a {
 +
-webkit-touch-callout: none;
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
}
 +
a {
 +
color: #FFFFFF;
 +
text-decoration: underline;
 +
}
 +
.fa {
 +
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
 +
-webkit-text-stroke: 0.10px;
 +
}
 +
img {
 +
-moz-user-select: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
-webkit-user-drag: none;
 +
user-drag: none;
 +
}
 +
html, body {
 +
min-height: 100%;
 +
width: 100%;
 +
height: 100%;
 +
background: #000000;
 +
color: #ffffff;
 +
overflow: hidden;
 +
font-family: 'din-condensed-web';
 +
font-size: 14px;
 +
font-weight: 400;
 +
}
 +
#realcontent {
 +
position: absolute;
 +
left: 260px;
 +
top: 0;
 +
right: 0;
 +
height: 500px;
 +
overflow-y: scroll;
 +
-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);
 +
z-index: 9999;
 +
float: right;
 +
}
 +
.owl-wrapper-outer, .owl-wrapper, .owl-item {
 +
height: 100%;
 +
}
 +
.fullBg {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 +
}
 +
.fullBg.display {
 +
display: block;
 +
}
 +
.layoutHide {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 0%;
 +
background: #000000;
 +
z-index: 40;
 +
-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);
 +
-webkit-backface-visibility: hidden;
 +
background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
 +
}
 +
.goBack {
 +
position: absolute;
 +
top: 3%;
 +
left: 3%;
 +
z-index: 3;
 +
display: inline-block;
 +
line-height: 23px;
 +
padding-top: 1px;
 +
border: 2px solid #FFFFFF;
 +
padding-left: 20px;
 +
padding-right: 10px;
 +
font-size: 14px;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
}
 +
.goBack span {
 +
position: absolute;
 +
background: url("../num/15.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -193px -294px;
 +
width: 9px;
 +
height: 7px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
left: 7px;
 +
top: 50%;
 +
margin-top: -4px;
 +
}
 +
.video {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 +
z-index: 1;
 +
background: #000000;
 +
}
 +
.video .close {
 +
position: absolute;
 +
top: 45px;
 +
right: 45px;
 +
right: 125px;
 +
background: url("../num/15.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -702px -247px;
 +
width: 26px;
 +
height: 26px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
cursor: pointer;
 +
}
 +
.touch .video .close {
 +
top: 20px;
 +
right: 20px;
 +
}
 +
@media screen and (max-height: 780px) {
 +
html body aside #logo {
 +
margin-top: 50px;
 +
margin-bottom: 30px;
 +
}
 +
html body aside nav a {
 +
line-height: 35px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 20px auto;
 +
}
 +
html body aside .contact {
 +
font-size: 18px;
 +
}
 +
}
 +
@media screen and (max-height: 680px) {
 +
html body aside #logo {
 +
margin-top: 20px;
 +
margin-bottom: 20px;
 +
}
 +
html body aside nav a {
 +
line-height: 31px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 10px auto;
 +
}
 +
}
 +
@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: 700px) {
 +
html #awwwards {
 +
display: none;
 +
}
 +
html aside {
 +
left: -200px;
 +
}
 +
html aside #mobileMenuButton {
 +
display: block;
 +
}
 +
html #realcontent {
 +
left: 0;
 +
right: auto;
 +
width: 100%;
 
}
 
}
@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%;  }
 
 
}
 
}
 
 
 
/*float realcontent*/
 
/*float realcontent*/
#content{
+
#content {
width:100%;
+
width: 100%;
height:100%;
+
height: 100%;
}
+
#homeIndexBody {
+
display:block;
+
width:100% !important;
+
height:100% !important;
+
list-style-type:none !important;
+
 
}
 
}
#realcontent{
+
 
float:left;
+
#realcontent {
height:100%;
+
float: left;
 +
height: 100%;
 
}
 
}
 
.firstHeading {
 
.firstHeading {
display:none;
+
display: none;
}
+
}
#top{
+
#top {
display:none;
+
display: none;
}
+
}
+
</style>
    </style>
+
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
    <aside>
+
<aside>
 
+
  <h1 id="logo"> <img alt="White Frontier Brewery" src="./pic/whitefrontier.png"> </h1>
        <h1 id="logo">
+
  <div class="separator"></div>
      <img alt="White Frontier Brewery" src="./pic/whitefrontier.png">
+
  <nav >  
        </h1>
+
    <!-- Contenedor -->
        <div class="separator"></div>
+
        <nav >
+
 
+
<!-- Contenedor -->
+
 
     <ul id="accordion" class="accordion">
 
     <ul id="accordion" class="accordion">
        <li>
+
      <li>
            <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
+
        <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
        </li>
+
      </li>
        <li>
+
      <li>
            <div class="link">PROJECT</div>
+
        <div class="link">PROJECT</div>
            <ul class="submenu">
+
        <ul class="submenu">
                <li><a href="#">Problem</a></li>
+
          <li><a href="#">Problem</a></li>
                <li><a href="#">Design</a></li>
+
          <li><a href="#">Design</a></li>
                <li><a href="#">Parts</a></li>
+
          <li><a href="#">Parts</a></li>
 
+
        </ul>
            </ul>
+
      </li>
        </li>
+
      <li>
        <li><div class="link">RESULTS</div>
+
        <div class="link">RESULTS</div>
            <ul class="submenu">
+
        <ul class="submenu">
                <li><a href="#">Results</a></li>
+
          <li><a href="#">Results</a></li>
                <li><a href="#">Future</a></li>
+
          <li><a href="#">Future</a></li>
 
+
        </ul>
            </ul>
+
      </li>
        </li>
+
      <li>
 
+
        <div class="link">MODELING</div>
        <li><div class="link">MODELING</div>
+
        <ul class="submenu">
            <ul class="submenu">
+
          <li><a href="#">Modeling</a></li>
                <li><a href="#">Modeling</a></li>
+
        </ul>
 
+
      </li>
            </ul>
+
      <li>
        </li>  
+
        <div class="link">TEAM</div>
 
+
        <ul class="submenu">
        <li>
+
          <li><a href="./teamMembers.html">Members</a></li>
            <div class="link">TEAM</div>
+
          <li><a href="#">Instructors</a></li>
            <ul class="submenu">
+
          <li><a href="#">Attributions</a></li>
                <li><a href="./teamMembers.html">Members</a></li>
+
        </ul>
                <li><a href="#">Instructors</a></li>
+
      </li>
                <li><a href="#">Attributions</a></li>
+
      <li>
 
+
        <div class="link">HUMAN PRACTICES</div>
            </ul>
+
        <ul class="submenu">
        </li>
+
          <li><a href="#">Google</a></li>
 
+
          <li><a href="#">Bing</a></li>
        <li><div class="link">HUMAN PRACTICES</div>
+
        </ul>
            <ul class="submenu">
+
      </li>
                <li><a href="#">Google</a></li>
+
      <li>
                <li><a href="#">Bing</a></li>
+
        <div class="link">NOTEBOOK</div>
 
+
        <ul class="submenu">
            </ul>
+
          <li><a href="#">Journal</a></li>
        </li>
+
          <li><a href="#">Safety</a></li>
        <li><div class="link">NOTEBOOK</div>
+
          <li><a href="#">Protocol</a></li>
            <ul class="submenu">
+
        </ul>
                <li><a href="#">Journal</a></li>
+
      </li>
                <li><a href="#">Safety</a></li>
+
                <li><a href="#">Protocol</a></li>
+
 
+
            </ul>
+
        </li>
+
                                               
+
 
     </ul>
 
     </ul>
        </nav>
+
  </nav>
        <div class="separator"></div>
+
  <div class="separator"></div>
<!--
+
</aside>
        <div class="bottom">
+
<div id="realcontent">
            <div class="social">
+
  <p >测试!!</p>
                <a href="    " ><img></a>
+
  <br>
                <a href="    " ><img></a>
+
                <a href="    " ><img></a>
+
            </div>
+
        </div>
+
-->
+
    </aside>
+
 
+
 
+
    <div id="realcontent">
+
    <p >测试!!</p><br>
+
 
+
</div>   
+
 
</div>
 
</div>
 
+
</div>
 
+
<script src="./modernizr.js"></script>  
    <script src="./modernizr.js"></script>
+
<script type="text/javascript" src="./saved.js"></script>  
<script type="text/javascript" src="./saved.js"></script>
+
<script src='./jquery.js'></script>  
    <script src='./jquery.js'></script>
+
<script type="text/javascript">
 
+
+
  <script type="text/javascript">
+
 
   //slide menu
 
   //slide menu
 
   $(function() {
 
   $(function() {
Line 327: Line 634:
  
 
var accordion = new Accordion($('#accordion'), false);
 
var accordion = new Accordion($('#accordion'), false);
});</script>
+
});</script>  
 
+
<script type="text/javascript">//<![CDATA[
    <script type="text/javascript">//<![CDATA[
+
 
var controllerName="home";
 
var controllerName="home";
 
var actionName="index";
 
var actionName="index";
Line 337: Line 643:
 
data=[];//]]>
 
data=[];//]]>
 
</script>  
 
</script>  
 
+
<script type="text/javascript">
 
+
<script type="text/javascript">
+
 
  //experienceIntercal change
 
  //experienceIntercal change
 
         var experienceInterval;
 
         var experienceInterval;
Line 401: Line 705:
  
 
     </script>
 
     </script>
 
+
</body>
</body></html>
+
</html>

Revision as of 12:35, 15 April 2015

<!DOCTYPE html>

测试!!