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

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/home.css">
 
     <link rel="stylesheet" type="text/css" href="./css/home.css">
 
-->
 
-->
  
−
<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;
−
.overflow { overflow: hidden;}
+
visibility: hidden;
−
.bgwidth { width: 100%;}
+
line-height: 0;
−
.bgheight { height: 100%;}
+
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;
 +
}
 +
.overflow {
 +
overflow: hidden;
 +
}
 +
.bgwidth {
 +
width: 100%;
 +
}
 +
.bgheight {
 +
height: 100%;
 +
}
 
aside {
 
aside {
 
width: 260px;
 
width: 260px;
−
height:100%;
+
height: 100%;
−
background-color:#000;
+
background-color: #000;
 
position: absolute;
 
position: absolute;
 
top: 0;
 
top: 0;
Line 46: Line 113:
 
-o-transform: translate3d(0, 0, 0);
 
-o-transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
−
text-decoration:none;
+
text-decoration: none;
−
 
+
 
}
 
}
−
 
 
aside #logo {
 
aside #logo {
 
text-indent: -6000px;
 
text-indent: -6000px;
Line 57: Line 122:
 
aside #logo img {
 
aside #logo img {
 
display: block;
 
display: block;
−
text-decoration:none;
+
text-decoration: none;
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 73: Line 138:
 
aside nav {
 
aside nav {
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
−
padding:0 0 0 0 px;
+
padding: 0 0 0 0 px;
 
}
 
}
 
aside nav a {
 
aside nav a {
Line 84: Line 149:
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 
}
 
}
−
 
+
aside nav a .text {
−
aside nav a .text { font-size: 16px;font-family: "Open Sans"; display: inline-block; position: relative; line-height: normal;}
+
font-size: 16px;
−
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;}
+
font-family: "Open Sans";
−
aside nav a.selected .text span { left: 0%; right: 2%; opacity: 1; filter: alpha(opacity=100);}
+
display: inline-block;
−
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;}
+
position: relative;
−
aside .bottom { position: absolute; bottom: 7px; left: 0; right: 0;}
+
line-height: normal;
−
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;}
+
aside nav a .text span {
−
.no-touch aside nav a:hover { color: #FFFFFF;}
+
background: url("../num/15.png") no-repeat top left transparent;
−
.no-touch aside nav a.selected:hover { color: #ddd7d7;}
+
display: block;
−
body.opened aside { left: 0px;}
+
zoom: 1;
−
body.opened aside #mobileMenuButton span { opacity: 0; filter: alpha(opacity=0);}
+
background-position: -23px -296px;
−
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);}
+
width: auto;
−
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);}
+
height: 3px;
−
body.opened #realcontent { left: 100px; opacity: 0.2 !important; pointer-events: none;}
+
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 .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;
 +
}
 
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;
 
}
 
}
−
 
 
ul {
 
ul {
 
list-style-type: none;
 
list-style-type: none;
 
}
 
}
−
 
−
 
−
 
 
/* ----------------------------
 
/* ----------------------------
 
             menu
 
             menu
Line 128: Line 277:
 
border-radius: 4px;
 
border-radius: 4px;
 
list-style-type: none !important;
 
list-style-type: none !important;
−
margin-left:40px;
+
margin-left: 40px;
 
}
 
}
 
.accordion li {
 
.accordion li {
Line 180: Line 329:
 
/*menu css over*/
 
/*menu css over*/
  
−
#realcontent #homeIndex { position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;}
+
#realcontent #homeIndex {
−
#realcontent #homeIndex .contentInner {  position: absolute; top: 0;  left: 0;  right: 0;  bottom: 0;}
+
position: absolute;
−
#realcontent #homeIndex a {  overflow: hidden;}
+
top: 0;
−
#realcontent #homeIndex a img.fullBg {  display: block;  position: absolute;  top: 0; left: 0;  display: none;}
+
left: 0;
−
#realcontent #homeIndex a .overlay {  display: block;  position: absolute;  top: 0;  left: 0; right: 0;  bottom: 0;  background: #262626;  opacity: 0.5;  filter: alpha(opacity=50);  -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;  z-index: 1;}
+
right: 0;
−
#realcontent #homeIndex a .title {  position: absolute;  top: 50%;  left: 50%;  z-index: 10;  -webkit-backface-visibility: hidden;}
+
bottom: 0;
−
#realcontent #homeIndex a video {  position: absolute;  left: 0;  right: 0; opacity: 0;  filter: alpha(opacity=0);}
+
−
#realcontent #homeIndex a .gallery {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0; opacity: 0;  filter: alpha(opacity=0);}
+
−
#realcontent #homeIndex a .gallery img {  display: block;  position: absolute;  top: 0;  left: 0;  z-index: 2;}
+
−
#realcontent #homeIndex a .gallery img.active {  z-index: 4;}
+
−
#realcontent #homeIndex a .gallery img.lastActive {  z-index: 3;}
+
−
#realcontent #homeIndex .beer {  position: absolute;  top: 0;  left: 0;  bottom: 0;  width: 44%;  background: url("../pic/bg_beer.jpg")  repeat center center #f2f2f2;}
+
−
#realcontent #homeIndex .beer .overlay {  opacity: 0.2;  filter: alpha(opacity=20);}
+
−
#realcontent #homeIndex .beer span {  display: block;}
+
−
#realcontent #homeIndex .beer .middle {  width: 100%;  display: inline-block;  vertical-align: middle;  line-height: normal;}
+
−
#realcontent #homeIndex .beer .title {  background: url("../pic/sprite.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: 0px 0px;  width: 221px;  height: 225px;  text-indent: -6000px;  text-align: left;  position: relative;  top: auto;  left: auto;  margin: 0 auto;  margin-bottom: 50px;}
+
−
#realcontent #homeIndex .beer .swipe {  overflow: hidden;  visibility: hidden;  position: relative;}
+
−
#realcontent #homeIndex .beer .swipe .swipe-wrap {  overflow: hidden;  position: relative;}
+
−
#realcontent #homeIndex .beer .swipe .swipe-wrap div {  float: left;  width: 100%;  position: relative;}
+
−
#realcontent #homeIndex .beer .swipe .swipe-wrap div img { width: 20%; height: 20%; display: block;  margin: 0 auto;  max-height: 80%;}
+
−
#realcontent #homeIndex .beer:hover .overlay {  opacity: 0;  filter: alpha(opacity=0);}
+
−
#realcontent #homeIndex .experience {  position: absolute;  top: 0;  left: 44%;  right: 0;  height: 50%;  background: url("../pic/bg_experience.jpg") no-repeat center center #f2f2f2;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
+
−
#realcontent #homeIndex .experience .title {  background: url("../pic/sprite.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -260px -4px;  width: 289px;  height: 140px;  text-indent: -6000px;  text-align: left;  margin-left: -145px;  margin-top: -70px;}
+
−
#realcontent #homeIndex .ambassador {  position: absolute;  top: 50%;  left: 44%;  right: 28%;  bottom: 0;  background: url("../pic/bg_ambassador.jpg") no-repeat center center #f2f2f2;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
+
−
#realcontent #homeIndex .ambassador .title {  background: url("../pic/sprite.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -578px -4px;  width: 274px;  height: 157px;  text-indent: -6000px;  text-align: left;  margin-top: -78px;  margin-left: -137px;}
+
−
#realcontent #homeIndex .social {  position: absolute;  top: 50%;  left: 72%;  right: 0;  bottom: 0;  background: url("../pic/bg_social.jpg") no-repeat center center #f2f2f2;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
+
−
#realcontent #homeIndex .social .title {  background: url("../pic/sprite.png") no-repeat top left transparent;  display: block;  zoom: 1;  background-position: -892px 0px;  width: 250px;  height: 144px;  text-indent: -6000px;  text-align: left;  margin-top: -72px;  margin-left: -125px;}
+
−
.no-touch #realcontent #homeIndex a:hover .overlay {  opacity: 0;  filter: alpha(opacity=0);}
+
−
.touch #realcontent #homeIndex a.beer .overlay {  opacity: 0;  filter: alpha(opacity=0);  display: 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: 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);}
+
−
.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;}
+
−
 
+
−
@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; }
+
#realcontent #homeIndex .contentInner {
−
  html body aside nav a {    line-height: 31px;   font-size: 18px; }
+
position: absolute;
−
  html body aside .separator {    margin: 10px auto; }
+
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 
}
 
}
−
@media screen and (max-width: 1050px) {  html aside {    width: 200px;  }
+
#realcontent #homeIndex a {
−
  html aside #logo {   margin-left: 20px;    margin-right: 20px;  }
+
overflow: hidden;
−
  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);  }
+
#realcontent #homeIndex a img.fullBg {
−
  html #realcontent #homeIndex .beer .title {    margin-bottom: 20px;  }
+
display: block;
−
  html #realcontent #homeIndex .beer {    background-size: 150%; }
+
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 
}
 
}
−
@media screen and (max-width: 900px) {  html #realcontent #homeIndex .experience {   height: 40%; }
+
#realcontent #homeIndex a .overlay {
−
  html #realcontent #homeIndex .ambassador {    top: 40%;   right: 0;   bottom: auto;   height: 30%; }
+
display: block;
−
  html #realcontent #homeIndex .social {    left: 44%;   top: 70%; }
+
position: absolute;
 +
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 +
background: #262626;
 +
opacity: 0.5;
 +
filter: alpha(opacity=50);
 +
-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;
 +
z-index: 1;
 
}
 
}
−
 
+
#realcontent #homeIndex a .title {
−
@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);  }
+
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
z-index: 10;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
#realcontent #homeIndex a video {
 +
position: absolute;
 +
left: 0;
 +
right: 0;
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
}
 +
#realcontent #homeIndex a .gallery {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
}
 +
#realcontent #homeIndex a .gallery img {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: 2;
 +
}
 +
#realcontent #homeIndex a .gallery img.active {
 +
z-index: 4;
 +
}
 +
#realcontent #homeIndex a .gallery img.lastActive {
 +
z-index: 3;
 +
}
 +
#realcontent #homeIndex .beer {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 44%;
 +
background: url("../pic/bg_beer.jpg") repeat center center #f2f2f2;
 +
}
 +
#realcontent #homeIndex .beer .overlay {
 +
opacity: 0.2;
 +
filter: alpha(opacity=20);
 +
}
 +
#realcontent #homeIndex .beer span {
 +
display: block;
 +
}
 +
#realcontent #homeIndex .beer .middle {
 +
width: 100%;
 +
display: inline-block;
 +
vertical-align: middle;
 +
line-height: normal;
 +
}
 +
#realcontent #homeIndex .beer .title {
 +
background: url("../pic/sprite.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: 0px 0px;
 +
width: 221px;
 +
height: 225px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
position: relative;
 +
top: auto;
 +
left: auto;
 +
margin: 0 auto;
 +
margin-bottom: 50px;
 +
}
 +
#realcontent #homeIndex .beer .swipe {
 +
overflow: hidden;
 +
visibility: hidden;
 +
position: relative;
 +
}
 +
#realcontent #homeIndex .beer .swipe .swipe-wrap {
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
#realcontent #homeIndex .beer .swipe .swipe-wrap div {
 +
float: left;
 +
width: 100%;
 +
position: relative;
 +
}
 +
#realcontent #homeIndex .beer .swipe .swipe-wrap div img {
 +
width: 20%;
 +
height: 20%;
 +
display: block;
 +
margin: 0 auto;
 +
max-height: 80%;
 +
}
 +
#realcontent #homeIndex .beer:hover .overlay {
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
}
 +
#realcontent #homeIndex .experience {
 +
position: fixed;
 +
top: 0;
 +
left: 44%;
 +
right: 0;
 +
height: 50%;
 +
background: url("../pic/bg_experience.jpg") no-repeat center center #f2f2f2;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
#realcontent #homeIndex .experience .title {
 +
background: url("../pic/sprite.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -260px -4px;
 +
width: 289px;
 +
height: 140px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin-left: -145px;
 +
margin-top: -70px;
 +
}
 +
#realcontent #homeIndex .ambassador {
 +
position: absolute;
 +
top: 50%;
 +
left: 44%;
 +
right: 28%;
 +
bottom: 0;
 +
background: url("../pic/bg_ambassador.jpg") no-repeat center center #f2f2f2;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
#realcontent #homeIndex .ambassador .title {
 +
background: url("../pic/sprite.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -578px -4px;
 +
width: 274px;
 +
height: 157px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin-top: -78px;
 +
margin-left: -137px;
 +
}
 +
#realcontent #homeIndex .social {
 +
position: absolute;
 +
top: 50%;
 +
left: 72%;
 +
right: 0;
 +
bottom: 0;
 +
background: url("../pic/bg_social.jpg") no-repeat center center #f2f2f2;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
#realcontent #homeIndex .social .title {
 +
background: url("../pic/sprite.png") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -892px 0px;
 +
width: 250px;
 +
height: 144px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin-top: -72px;
 +
margin-left: -125px;
 +
}
 +
.no-touch #realcontent #homeIndex a:hover .overlay {
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
}
 +
.touch #realcontent #homeIndex a.beer .overlay {
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 +
display: 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: 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);
 +
}
 +
.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;
 +
}
 +
@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: 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 .experience {
 +
height: 40%;
 +
}
 +
html #realcontent #homeIndex .ambassador {
 +
top: 40%;
 +
right: 0;
 +
bottom: auto;
 +
height: 30%;
 +
}
 +
html #realcontent #homeIndex .social {
 +
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%;
 
}
 
}
−
 
−
 
−
@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:auto;
+
width: auto;
 
height: 2000px;
 
height: 2000px;
−
 
 
}
 
}
−
 
 
.firstHeading {
 
.firstHeading {
 
display: none;
 
display: none;
Line 268: Line 748:
 
}
 
}
 
h1 {
 
h1 {
−
text-decoration:none;
+
text-decoration: none;
−
font-size:100%;}
+
font-size: 100%;
−
 
+
}
−
    </style>
+
</style>
−
 
+
    </head>
−
</head>
+
    <body id="homeIndexBody">
−
<body id="homeIndexBody">
+
<aside>
−
    <aside>
+
      <div id="mobileMenuButton"> <span></span> <span></span> <span></span> </div>
−
        <div id="mobileMenuButton">
+
      <h1 id="logo"> <img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png"> </h1>
−
            <span></span>
+
      <div class="separator"></div>
−
            <span></span>
+
      <nav >  
−
            <span></span>
+
−
        </div>
+
−
                <h1 id="logo">
+
−
            <img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png">
+
−
        </h1>
+
−
        <div class="separator"></div>
+
−
        <nav >
+
 
     <!-- Contenedor -->
 
     <!-- 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><div class="link">RESULTS</div>
+
          <li>
−
            <ul class="submenu">
+
        <div class="link">RESULTS</div>
−
                <li><a href="#">Results</a></li>
+
        <ul class="submenu">
−
                <li><a href="#">Future</a></li>
+
              <li><a href="#">Results</a></li>
−
 
+
              <li><a href="#">Future</a></li>
 
             </ul>
 
             </ul>
−
        </li>
+
      </li>
−
 
+
          <li>
−
        <li><div class="link">MODELING</div>
+
        <div class="link">MODELING</div>
−
            <ul class="submenu">
+
        <ul class="submenu">
−
                <li><a href="#">Modeling</a></li>
+
              <li><a href="#">Modeling</a></li>
−
 
+
 
             </ul>
 
             </ul>
−
        </li>  
+
      </li>
−
 
+
          <li>
−
        <li>
+
        <div class="link">TEAM</div>
−
            <div class="link">TEAM</div>
+
        <ul class="submenu">
−
            <ul class="submenu">
+
              <li><a href="./teamMembers.html">Members</a></li>
−
                <li><a href="./teamMembers.html">Members</a></li>
+
              <li><a href="#">Instructors</a></li>
−
                <li><a href="#">Instructors</a></li>
+
              <li><a href="#">Attributions</a></li>
−
                <li><a href="#">Attributions</a></li>
+
−
 
+
 
             </ul>
 
             </ul>
−
        </li>
+
      </li>
−
 
+
          <li>
−
        <li><div class="link">HUMAN PRACTICES</div>
+
        <div class="link">HUMAN PRACTICES</div>
−
            <ul class="submenu">
+
        <ul class="submenu">
−
                <li><a href="#">Google</a></li>
+
              <li><a href="#">Google</a></li>
−
                <li><a href="#">Bing</a></li>
+
              <li><a href="#">Bing</a></li>
−
 
+
 
             </ul>
 
             </ul>
−
        </li>
+
      </li>
−
        <li><div class="link">NOTEBOOK</div>
+
          <li>
−
            <ul class="submenu">
+
        <div class="link">NOTEBOOK</div>
−
                <li><a href="#">Journal</a></li>
+
        <ul class="submenu">
−
                <li><a href="#">Safety</a></li>
+
              <li><a href="#">Journal</a></li>
−
                <li><a href="#">Protocol</a></li>
+
              <li><a href="#">Safety</a></li>
−
 
+
              <li><a href="#">Protocol</a></li>
 
             </ul>
 
             </ul>
−
        </li>
+
      </li>
−
                                               
+
        </ul>
−
    </ul>
+
  </nav>
−
        </nav>
+
      <div class="separator"></div>
−
        <div class="separator"></div>
+
−
 
+
 
     </aside>
 
     </aside>
−
 
+
<div id="realcontent">
−
 
+
      <div id="homeIndex">
−
    <div id="realcontent">
+
     <div class="contentInner"> <a href="/our-beers" class="beer middleParent">
−
        <div id="homeIndex">
+
      <div class="layoutHide"></div>
−
     <div class="contentInner">
+
      <span class="overlay"></span> <span class="middle">
−
        <a href="/our-beers" class="beer middleParent">
+
      <h1 class="title">Beer</h1>
−
            <div class="layoutHide"></div>
+
      <span class="swipe" id="swipeBeer"> <span class="swipe-wrap">
−
            <span class="overlay"></span>
+
      <div> <img alt="Backside Montfort" src="./pic/backside-montfort-wide-setup.png" /> </div>
−
        <span class="middle">
+
      <div> <img alt="La Bruson" src="./pic/la-bruson-wide-setup.png" /> </div>
−
            <h1 class="title">Beer</h1>
+
      <div> <img alt="Les Faverges" src="./pic/les-faverges-wide-setup.png" /> </div>
−
            <span class="swipe" id="swipeBeer">
+
      <div> <img alt="La Bise" src="./pic/la-bise.png" /> </div>
−
                <span class="swipe-wrap">
+
      </span> </span> </span> </a> <a href="/experience" class="experience">
−
                                            <div>
+
      <div class="layoutHide"></div>
−
                            <img alt="Backside Montfort" src="./pic/backside-montfort-wide-setup.png" />
+
      <img class="fullBg"  onmouseover="experienceGalleryNext()"/> <span class="overlay"></span>
−
                        </div>
+
      <h2 class="title">Let's discover our experience White Frontier Brewery</h2>
−
                                            <div>
+
      <div class="gallery"> <img src="./pic/resto-ambiance-bw.jpg" class="fullBg display active" /> <img src="./pic/white-frontier-bear2.jpg" class="fullBg display " /> <img src="./pic/white-frontier-faverge-bw.jpg" class="fullBg display " /> <img src="./pic/white-frontier-beers-bw.jpg" class="fullBg display " /> </div>
−
                            <img alt="La Bruson" src="./pic/la-bruson-wide-setup.png" />
+
      </a> <a href="/ambassadors/ambassadors-xav-de-le-rue" class="ambassador">
−
                        </div>
+
      <div class="layoutHide"></div>
−
                                            <div>
+
      <img class="fullBg"  /> <span class="overlay"></span>
−
                            <img alt="Les Faverges" src="./pic/les-faverges-wide-setup.png" />
+
      <h2 class="title">Ambassador</h2>
−
                        </div>
+
      </a> <a href="/social" class="social" >
−
                                            <div>
+
      <div class="layoutHide"></div>
−
                            <img alt="La Bise" src="./pic/la-bise.png" />
+
      <img class="fullBg"  /> <span class="overlay"></span>
−
                        </div>
+
      <h2 class="title">Social #WhiteFrontier</h2>
−
                                    </span>
+
      </a> </div>
−
            </span>
+
  </div>
−
        </span>
+
−
        </a>
+
−
        <a href="/experience" class="experience">
+
−
            <div class="layoutHide"></div>
+
−
            <img class="fullBg"  onmouseover="experienceGalleryNext()"/>
+
−
            <span class="overlay"></span>
+
−
            <h2 class="title">Let's discover our experience White Frontier Brewery</h2>
+
−
            <div class="gallery">
+
−
                                    <img src="./pic/resto-ambiance-bw.jpg" class="fullBg display active" />
+
−
                                    <img src="./pic/white-frontier-bear2.jpg" class="fullBg display " />
+
−
                                    <img src="./pic/white-frontier-faverge-bw.jpg" class="fullBg display " />
+
−
                                    <img src="./pic/white-frontier-beers-bw.jpg" class="fullBg display " />
+
−
                            </div>
+
−
        </a>
+
−
        <a href="/ambassadors/ambassadors-xav-de-le-rue" class="ambassador">
+
−
            <div class="layoutHide"></div>
+
−
            <img class="fullBg"  />
+
−
            <span class="overlay"></span>
+
−
            <h2 class="title">Ambassador</h2>
+
−
        </a>
+
−
        <a href="/social" class="social" >
+
−
            <div class="layoutHide"></div>
+
−
            <img class="fullBg"  />
+
−
            <span class="overlay"></span>
+
−
            <h2 class="title">Social #WhiteFrontier</h2>
+
−
        </a>
+
 
     </div>
 
     </div>
−
</div>   
+
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>  
−
</div>
+
<script type="text/javascript">
−
 
+
−
 
+
−
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
+
−
   
+
−
  <script type="text/javascript">
+
 
   //slide menu
 
   //slide menu
 
   $(function() {
 
   $(function() {
Line 433: Line 868:
  
 
     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 442: Line 877:
 
data=[];//]]>
 
data=[];//]]>
 
</script>  
 
</script>  
−
 
+
<script type="text/javascript">
−
 
+
−
<script type="text/javascript">
+
 
  //experienceIntercal change
 
  //experienceIntercal change
 
         var experienceInterval;
 
         var experienceInterval;
Line 507: Line 940:
  
 
     </script>
 
     </script>
−
 
+
</body>
−
</body></html>
+
</html>

Revision as of 15:16, 15 April 2015

<!DOCTYPE html>