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

Line 1: Line 1:
 +
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
{{Template:Team:CHINA_CD_UESTC/menu/style}}
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
Line 11: Line 14:
 
</head>
 
</head>
 
<style type="text/css">
 
<style type="text/css">
.unselect {
 
-moz-user-select: all;
 
-webkit-user-select: all;
 
-ms-user-select: all;
 
-o-user-select: all;
 
user-select: all;
 
}
 
.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;
 
}
 
body {
 
background: #2d2c41;
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
}
 
/* ----------------------------
 
            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: 7px 7px 7px 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;
 
}
 
/*.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;
 
  
}
+
#RightContent {
 
+
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;
+
}
+
 
+
* {
+
margin: 0;
+
padding: 0;
+
-webkit-font-smoothing: antialiased;
+
-moz-osx-font-smoothing: grayscale;
+
}
+
.no-touch * {
+
-webkit-touch-callout: all;
+
-webkit-user-select: all;
+
-khtml-user-select: all;
+
-moz-user-select: all;
+
-ms-user-select: all;
+
user-select: all;
+
}
+
div, h1, h2, h3, h4, span, p, img, a {
+
-webkit-touch-callout: all;
+
-webkit-user-select: all;
+
-khtml-user-select: all;
+
-moz-user-select: all;
+
-ms-user-select: all;
+
user-select: all;
+
}
+
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: none;
+
}
+
.fa {
+
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
+
}
+
img {
+
user-select: 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: fixed;
 
position: fixed;
 
left: 260px;
 
left: 260px;
Line 281: Line 21:
 
right: 0;
 
right: 0;
 
height:100%;
 
height:100%;
 +
background:#FFFFFF;
 +
background-image:url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg");
 +
background-size:cover;
 +
background-attachment:fixed;
 
overflow-y: scroll;
 
overflow-y: scroll;
 
transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
z-index: 99;
+
z-index: 0;
 
}
 
}
.owl-wrapper-outer, .owl-wrapper, .owl-item {
+
#RightContentText {
height: 100%;
+
}
+
.fullBg {
+
 
position: absolute;
 
position: absolute;
top: 0;
+
float: left;
left: 0;
+
left:0;
display: none;
+
right:0;
}
+
top:260px;
.fullBg.display {
+
background:#FFFFFF;
display: block;
+
color: #000000;
}
+
transition: all 200ms ease-out;
.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);
 
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
+
z-index: 10;
background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
+
 
}
 
}
  
.touch .video .close {
 
top: 20px;
 
right: 20px;
 
}
 
@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) {
 
html aside {
 
width: 200px;
 
}
 
html aside #logo {
 
margin-left: 20px;
 
margin-right: 20px;
 
}
 
html #realcontent {
 
left: 200px;
 
}
 
}
 
@media screen and (max-width: 700px) {
 
html aside {
 
left: -200px;
 
 
}
 
html aside #mobileMenuButton {
 
display: block;
 
}
 
html #realcontent {
 
left: 0;
 
right: auto;
 
width: 100%;
 
    height:100%;
 
}
 
}
 
/*float realcontent*/
 
#content {
 
width:auto;
 
height: 2000px;
 
 
}
 
 
.firstHeading {
 
display: none;
 
}
 
#top {
 
display: none;
 
}
 
h1 {
 
text-decoration:none;
 
font-size:100%;}
 
 
</style>
 
</style>
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
<aside>
 
  <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="./home.html">HOME</a></div>
 
      </li>
 
      <li>
 
        <div class="link">PROJECT</div>
 
        <ul class="submenu">
 
          <li><a href="#">Problem</a></li>
 
          <li><a href="#">Design</a></li>
 
          <li><a href="#">Parts</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">RESULTS</div>
 
        <ul class="submenu">
 
          <li><a href="#">Results</a></li>
 
          <li><a href="#">Future</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">MODELING</div>
 
        <ul class="submenu">
 
          <li><a href="#">Modeling</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">TEAM</div>
 
        <ul class="submenu">
 
          <li><a href="./teamMembers.html">Members</a></li>
 
          <li><a href="#">Instructors</a></li>
 
          <li><a href="#">Attributions</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">HUMAN PRACTICES</div>
 
        <ul class="submenu">
 
          <li><a href="#">Google</a></li>
 
          <li><a href="#">Bing</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">NOTEBOOK</div>
 
        <ul class="submenu">
 
          <li><a href="#">Journal</a></li>
 
          <li><a href="#">Safety</a></li>
 
          <li><a href="#">Protocol</a></li>
 
        </ul>
 
      </li>
 
    </ul>
 
  </nav>
 
  <div class="separator"></div>
 
</aside>
 
<div id="realcontent">
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  
  <br>
+
<div id="RightContent">
 +
<div id="RightContentText">
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 03:00, 21 May 2015


<!DOCTYPE html>

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试