|
|
| (21 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Template:Team:CHINA_CD_UESTC/menu}}
| |
| − | <!DOCTYPE html>
| |
| − | <!-- 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">
| |
| | | | |
| − | <!-- CSS
| |
| − | <link rel="stylesheet" type="text/css" href="./css/home.css">
| |
| − | -->
| |
| − | <style type="text/css">
| |
| − |
| |
| − |
| |
| − | 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 {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | }
| |
| − | #realcontent #homeIndex .contentInner {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | }
| |
| − | #realcontent #homeIndex a {
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | #realcontent #homeIndex a img.fullBg {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | display: none;
| |
| − | }
| |
| − | #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;
| |
| − | }
| |
| − | #realcontent #homeIndex a .title {
| |
| − | 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("https://static.igem.org/mediawiki/2015/c/cc/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("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
| |
| − | display: block;
| |
| − | zoom: 1;
| |
| − | background-position: 0px 0px;
| |
| − | width: 260px;
| |
| − | height: 250px;
| |
| − | 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: 50%;
| |
| − | height: 20%;
| |
| − | display: block;
| |
| − | margin: 0 auto;
| |
| − | max-height: 80%;
| |
| − | }
| |
| − | #realcontent #homeIndex .beer:hover .overlay {
| |
| − | opacity: 0;
| |
| − | filter: alpha(opacity=0);
| |
| − | }
| |
| − | #realcontent #homeIndex .results {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 44%;
| |
| − | right: 0;
| |
| − | height: 50%;
| |
| − | background: url("https://static.igem.org/mediawiki/2015/5/5f/CD_UESTC_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 .results .title {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
| |
| − | display: block;
| |
| − | zoom: 1;
| |
| − | background-position: -260px -4px;
| |
| − | width: 300px;
| |
| − | height: 140px;
| |
| − | text-indent: -6000px;
| |
| − | text-align: left;
| |
| − | margin-left: -145px;
| |
| − | margin-top: -70px;
| |
| − | }
| |
| − | #realcontent #homeIndex .Modeling {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 44%;
| |
| − | right: 28%;
| |
| − | bottom: 0;
| |
| − | background: url("https://static.igem.org/mediawiki/2015/1/1a/CD_UESTC_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 .Modeling .title {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
| |
| − | display: block;
| |
| − | zoom: 1;
| |
| − | background-position: -578px -4px;
| |
| − | width: 274px;
| |
| − | height: 170px;
| |
| − | text-indent: -6000px;
| |
| − | text-align: left;
| |
| − | margin-top: -78px;
| |
| − | margin-left: -137px;
| |
| − | }
| |
| − | #realcontent #homeIndex .Team {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 72%;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | background: url("https://static.igem.org/mediawiki/2015/a/af/CD_UESTC_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 .Team .title {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
| |
| − | display: block;
| |
| − | zoom: 1;
| |
| − | background-position: -892px 0px;
| |
| − | width: 250px;
| |
| − | height: 170px;
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | #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 #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 #realcontent {
| |
| − | left: 0;
| |
| − | right: auto;
| |
| − | width: 100%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − | <body id="homeIndexBody">
| |
| − |
| |
| − | <div id="realcontent">
| |
| − | <div id="homeIndex">
| |
| − | <div class="contentInner">
| |
| − | <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/SystemDesign" class="beer middleParent">
| |
| − | <div class="layoutHide"></div>
| |
| − | <span class="overlay"></span>
| |
| − | <span class="middle">
| |
| − | <h1 class="title">Project</h1>
| |
| − | <span class="swipe" id="swipeProject">
| |
| − | <span class="swipe-wrap">
| |
| − | <div>
| |
| − | <img alt="Backside Montfort" src="https://static.igem.org/mediawiki/2015/8/83/CHINA_CD_UESTC_homeswape01.png" />
| |
| − | </div>
| |
| − | <div>
| |
| − | <img alt="La Bruson" src="https://static.igem.org/mediawiki/2015/1/1c/CD_UESTC_backside-montfort-wide-setup.png" />
| |
| − | </div>
| |
| − | <div>
| |
| − | <img alt="Les Faverges" src="https://static.igem.org/mediawiki/2015/9/90/CHINA_CD_UESTC_homeswape02.png" />
| |
| − | </div>
| |
| − |
| |
| − | </span>
| |
| − | </span>
| |
| − | </span>
| |
| − | </a>
| |
| − |
| |
| − | <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results" class="results">
| |
| − | <div class="layoutHide"></div>
| |
| − | <img class="fullBg" onmouseover="resultsGalleryNext()"/>
| |
| − | <span class="overlay"></span>
| |
| − | <h2 class="title">Let's discover our results White Frontier Brewery</h2>
| |
| − | <div class="gallery">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/0/0d/CD_UESTC_Resto-ambiance-bw.jpg" class="fullBg display active" />
| |
| − | <img src="https://static.igem.org/mediawiki/2015/5/5f/CD_UESTC_White-frontier-bear2.jpg" class="fullBg display " />
| |
| − | <img src="https://static.igem.org/mediawiki/2015/e/e4/CD_UESTC_White-frontier-faverge-bw.jpg" class="fullBg display " />
| |
| − | <img src="https://static.igem.org/mediawiki/2015/f/fe/CD_UESTC_White-frontier-beers-bw.jpg" class="fullBg display " />
| |
| − | </div>
| |
| − | </a>
| |
| − | <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling" class="Modeling">
| |
| − | <div class="layoutHide"></div>
| |
| − | <img class="fullBg" />
| |
| − | <span class="overlay"></span>
| |
| − | <h2 class="title">Modeling</h2>
| |
| − | </a>
| |
| − | <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members" class="Team" >
| |
| − | <div class="layoutHide"></div>
| |
| − | <img class="fullBg" />
| |
| − | <span class="overlay"></span>
| |
| − | <h2 class="title">Team</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>
| |
| − |
| |
| − | <script type="text/javascript">//<![CDATA[
| |
| − | var controllerName="home";
| |
| − | var actionName="index";
| |
| − | var base="";
| |
| − | var baseLang="/en";
| |
| − | var lang="en";
| |
| − | data=[];//]]>
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − | //resultsIntercal change
| |
| − | var resultsInterval;
| |
| − | function resultsGalleryNext() {
| |
| − | var $active = $('#realcontent #homeIndex a.results .gallery img.active');
| |
| − | if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.results .gallery img:last');
| |
| − | var $next = $active.next().length ? $active.next() : $('#realcontent #homeIndex a.results .gallery img:first');
| |
| − | $active.addClass('lastActive');
| |
| − | $next.css({opacity: 0.0})
| |
| − | .addClass('active')
| |
| − | .animate({opacity: 1.0}, 700, function() {
| |
| − | $active.removeClass('active lastActive');
| |
| − | });
| |
| − | }
| |
| − | $('.no-touch #realcontent #homeIndex a.results').hover(function(){
| |
| − | var $gallery = $(this).find('.gallery');
| |
| − | $gallery.stop().animate({
| |
| − | scale:1,
| |
| − | opacity:1
| |
| − | },500, 'easeOutCubic');
| |
| − | resultsInterval = window.setInterval(resultsGalleryNext, 1000);
| |
| − | }, function(){
| |
| − | window.clearInterval(resultsInterval);
| |
| − | var $gallery = $(this).find('.gallery');
| |
| − | $gallery.stop().animate({
| |
| − | scale:1.5,
| |
| − | opacity:0
| |
| − | },500, 'easeOutCubic', function(){
| |
| − | window.clearInterval(resultsInterval);
| |
| − | });
| |
| − | });
| |
| − |
| |
| − |
| |
| − |
| |
| − | // swipe beer
| |
| − | var swipeProject = new Swipe(document.getElementById('swipeProject'), {
| |
| − | speed: 400,
| |
| − | auto: false,
| |
| − |
| |
| − | continuous: true,
| |
| − | disableScroll: false,
| |
| − | stopPropagation: false,
| |
| − | callback: function(index, elem) {},
| |
| − | transitionEnd: function(index, elem) {}
| |
| − | });
| |
| − |
| |
| − | var timeout;
| |
| − | function again()
| |
| − | {
| |
| − | window.clearTimeout(timeout);
| |
| − | timeout = window.setTimeout(function(){
| |
| − | swipeProject.next();
| |
| − | again();
| |
| − | }, 1400);
| |
| − | }
| |
| − | $('.no-touch #realcontent #homeIndex a.beer').hover(function(){
| |
| − | swipeProject.next();
| |
| − | again();
| |
| − | }, function(){
| |
| − | window.clearTimeout(timeout);
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |