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

Line 1: Line 1:
 +
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
Line 10: Line 12:
  
 
     <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;
+
}
+
.ir {
+
font: 0/0 a;
+
text-shadow: none;
+
color: transparent;
+
}
+
.clearfix:after {
+
content: ".";
+
display: block;
+
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;
+
}
+
.overflow {
+
overflow: hidden;
+
}
+
.bgwidth {
+
width: 100%;
+
}
+
.bgheight {
+
height: 100%;
+
}
+
aside {
+
width: 260px;
+
height: 100%;
+
background-color: #000;
+
position: absolute;
+
top: 0;
+
left: 0;
+
bottom: 0;
+
z-index: 11111111;
+
-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);
+
text-decoration: none;
+
}
+
aside #logo {
+
text-indent: -6000px;
+
margin: 0px 32px 0px 32px;
+
display: block;
+
}
+
aside #logo img {
+
display: block;
+
text-decoration: none;
+
width: 100%;
+
}
+
aside .separator {
+
background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_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 0 0 0 px;
+
}
+
aside nav a {
+
color: #ddd7d7;
+
line-height: 40px;
+
text-align: center;
+
text-decoration: none;
+
font-size: 23px;
+
display: block;
+
letter-spacing: 2px;
+
}
+
aside nav a .text {
+
font-size: 16px;
+
font-family: "Open Sans";
+
display: inline-block;
+
position: relative;
+
line-height: normal;
+
}
+
aside nav a .text span {
+
background: url("../num/15.png") no-repeat top left transparent;
+
display: block;
+
zoom: 1;
+
background-position: -23px -296px;
+
width: auto;
+
height: 3px;
+
text-indent: -6000px;
+
text-align: left;
+
position: absolute;
+
bottom: -2px;
+
left: 50%;
+
right: 50%;
+
opacity: 0;
+
filter: alpha(opacity=0);
+
-webkit-transition: all 200ms ease-out;
+
-moz-transition: all 200ms ease-out;
+
-ms-transition: all 200ms ease-out;
+
-o-transition: all 200ms ease-out;
+
transition: all 200ms ease-out;
+
}
+
aside nav a.selected .text span {
+
left: 0%;
+
right: 2%;
+
opacity: 1;
+
filter: alpha(opacity=100);
+
}
+
aside .contact {
+
font-family: 'freight-big-pro';
+
font-size: 24px;
+
font-weight: 400;
+
font-style: italic;
+
text-align: center;
+
display: block;
+
margin: 0 40px;
+
text-decoration: none;
+
color: #ffffff;
+
}
+
aside .bottom {
+
position: absolute;
+
bottom: 7px;
+
left: 0;
+
right: 0;
+
}
+
aside .bottom .Team {
+
text-align: center;
+
}
+
aside .bottom .Team a {
+
display: inline-block;
+
border: 2px solid #ffffff;
+
margin: 0 1px;
+
margin-bottom: 3px;
+
position: relative;
+
width: 24px;
+
height: 25px;
+
-webkit-transition: all 200ms ease-out;
+
-moz-transition: all 200ms ease-out;
+
-ms-transition: all 200ms ease-out;
+
-o-transition: all 200ms ease-out;
+
transition: all 200ms ease-out;
+
}
+
.no-touch aside nav a:hover {
+
color: #FFFFFF;
+
}
+
.no-touch aside nav a.selected:hover {
+
color: #ddd7d7;
+
}
+
body.opened aside {
+
left: 0px;
+
}
+
body.opened aside #mobileMenuButton span {
+
opacity: 0;
+
filter: alpha(opacity=0);
+
}
+
body.opened aside #mobileMenuButton span:first-child {
+
opacity: 1;
+
filter: alpha(opacity=100);
+
-webkit-transform: translate(0px, 7px) rotate(45deg);
+
-moz-transform: translate(0px, 7px) rotate(45deg);
+
-ms-transform: translate(0px, 7px) rotate(45deg);
+
-o-transform: translate(0px, 7px) rotate(45deg);
+
transform: translate(0px, 7px) rotate(45deg);
+
}
+
body.opened aside #mobileMenuButton span:last-child {
+
opacity: 1;
+
filter: alpha(opacity=100);
+
-webkit-transform: translate(0px, -7px) rotate(-45deg);
+
-moz-transform: translate(0px, -7px) rotate(-45deg);
+
-ms-transform: translate(0px, -7px) rotate(-45deg);
+
-o-transform: translate(0px, -7px) rotate(-45deg);
+
transform: translate(0px, -7px) rotate(-45deg);
+
}
+
 
body.opened #realcontent {
 
body.opened #realcontent {
 
left: 100px;
 
left: 100px;
Line 260: Line 26:
 
list-style-type: none;
 
list-style-type: none;
 
}
 
}
/* ----------------------------
+
 
            menu
+
-----------------------------*/
+
ul {
+
list-style-type: none !important;
+
}
+
li {
+
list-style-type: none !important;
+
}
+
.accordion {
+
width: 100%;
+
max-width: 180px;
+
background: #303030;
+
-webkit-border-radius: 4px;
+
-moz-border-radius: 4px;
+
border-radius: 4px;
+
list-style-type: none !important;
+
margin-left: 40px;
+
}
+
.accordion li {
+
list-style-type: none !important;
+
list-style: none;
+
}
+
.accordion .link {
+
cursor: pointer;
+
display: block;
+
padding: 6px 6px 6px 30px;
+
color: #FFF;
+
font-size: 17px;
+
font-weight: 700;
+
border-bottom: 1px solid #CCC;
+
position: relative;
+
}
+
.accordion li:last-child .link {
+
border-bottom: 0;
+
}
+
.accordion li.open .link {
+
color: #FFE153;
+
}
+
.submenu {
+
display: none;
+
background: #444359;
+
font-size: 5px;
+
list-style-type: none !important;
+
}
+
.submenu li {
+
border-bottom: 1px solid #4b4a5e;
+
list-style-type: none !important;
+
list-style: none;
+
}
+
.submenu a {
+
display: block;
+
text-decoration: none;
+
color: #d9d9d9;
+
}
+
.submenu a:hover {
+
background: #b63b4d;
+
color: #FFF;
+
}
+
#menuHome {
+
color: #FFF;
+
font-size: 17px;
+
margin-right: 60px;
+
}
+
#menuHome:hover {
+
color: #FFE153;
+
}
+
/*menu css over*/
+
  
 
#realcontent #homeIndex {
 
#realcontent #homeIndex {
Line 548: Line 247:
 
display: none;
 
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;
+
}
+
h1, h2, h3, h4, h5, h6 {
+
  color: black;
+
  background: none;
+
  font-weight: normal;
+
  margin: 0;
+
  padding-top: .5em;
+
  padding-bottom: .17em;
+
  border-bottom: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 {
 
#realcontent {
 
position: fixed;
 
position: fixed;
Line 625: Line 267:
 
}
 
}
  
.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: 0px;
+
margin-bottom: 0px;
+
}
+
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: 0px;
+
margin-bottom: 0px;
+
}
+
html body aside nav a {
+
line-height: 31px;
+
font-size: 18px;
+
}
+
html body aside .separator {
+
margin: 10px auto;
+
}
+
}
+
 
@media screen and (max-width: 1050px) {
 
@media screen and (max-width: 1050px) {
html aside {
+
 
width: 200px;
+
}
+
html aside #logo {
+
margin-left: 20px;
+
margin-right: 20px;
+
}
+
 
html #realcontent {
 
html #realcontent {
 
left: 200px;
 
left: 200px;
Line 731: Line 314:
 
}
 
}
 
  @media screen and (max-width: 700px) {
 
  @media screen and (max-width: 700px) {
html #awwwards {
+
 
display: none;
+
}
+
html aside {
+
left: -200px;
+
}
+
html aside #mobileMenuButton {
+
display: block;
+
}
+
 
html #realcontent {
 
html #realcontent {
 
left: 0;
 
left: 0;
Line 746: Line 321:
 
}
 
}
 
}
 
}
/*float realcontent*/
+
 
#content {
+
width: auto;
+
height: 2000px;
+
}
+
.firstHeading {
+
display: none;
+
}
+
#top {
+
display: none;
+
}
+
h1 {
+
text-decoration: none;
+
font-size: 100%;
+
}
+
 
</style>
 
</style>
 
     </head>
 
     </head>
 
     <body id="homeIndexBody">
 
     <body id="homeIndexBody">
<aside>
 
      <div id="mobileMenuButton"> <span></span> <span></span> <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 -->
 
    <ul id="accordion" class="accordion">
 
          <li>
 
        <div class="link"><a id="menuHome" href="https://2015.igem.org/Team:CHINA_CD_UESTC/homeDemo">HOME</a></div>
 
      </li>
 
          <li>
 
        <div class="link">PROJECT</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Background">Background</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/SystemDesign">System Design</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Method">Method</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling">Modeling</a></li>
 
            </ul>
 
      </li>
 
          <li>
 
        <div class="link">RESULTS</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results">Results</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Discussion">Discussion</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Future">Future</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Parts">Parts</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/References">References</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Judging">Judging</a></li>
 
  
            </ul>
 
      </li>
 
          <li>
 
        <div class="link">TEAM</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members">Members</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Instructors">Instructors</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Attributions">Attributions</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Gallery">Gallery</a></li>
 
            </ul>
 
      </li>
 
          <li>
 
        <div class="link">HUMAN PRACTICES</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Overview">Overview</a></li>
 
              <li><a href="#">....</a></li>
 
            </ul>
 
      </li>
 
          <li>
 
        <div class="link">NOTEBOOK</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Journal">Journal</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Safety">Safety</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Protocol">Protocol</a></li>
 
            </ul>
 
      </li>
 
        </ul>
 
  </nav>
 
      <div class="separator"></div>
 
    </aside>
 
 
<div id="realcontent">
 
<div id="realcontent">
 
       <div id="homeIndex">
 
       <div id="homeIndex">
Line 858: Line 361:
 
     </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" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>  
<script type="text/javascript">
 
  //slide menu
 
  $(function() {
 
    var Accordion = function(el, multiple) {
 
        this.el = el || {};
 
        this.multiple = multiple || false;
 
 
        // Variables privadas
 
        var links = this.el.find('.link');
 
        // Evento
 
        links.on('mouseenter', {el: this.el, multiple: this.multiple}, this.dropdown)
 
    }
 
 
 
    Accordion.prototype.dropdown = function(e) {
 
        var $el = e.data.el;
 
            $this = $(this),
 
            $next = $this.next();
 
 
        $next.slideToggle();
 
        $this.parent().toggleClass('open');
 
 
        if (!e.data.multiple) {
 
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
 
        };
 
    } 
 
  
    var accordion = new Accordion($('#accordion'), false);
 
});</script>
 
 
<script type="text/javascript">//<![CDATA[
 
<script type="text/javascript">//<![CDATA[
 
var controllerName="home";
 
var controllerName="home";

Revision as of 03:25, 21 May 2015

<!DOCTYPE html>