Difference between revisions of "Team:NUDT CHINA"

 
(246 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html>
+
{{NUDT_CHINA}}
 +
<html lang="en">
 
<head>
 
<head>
−
<meta name="keywords" content="" />
+
    <meta charset="utf-8">
−
<meta name="description" content="" />
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
    <title>Team:NUDT_CHINA</title>
−
<title>Team:NUDT_CHINA</title>
+
<script type="text/javascript" >
−
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet" type="text/css" />
+
window.onload=function(){
−
</head>
+
var oContent = $('content');
−
<!--for the wrapper-->
+
var oLoading = $('loading');
−
<head>
+
var oList = $('Qidilist');
−
<style type="text/css">
+
var aLiList = getByClass( oList , 'liList' );
−
<!--
+
var oMenu = $('lay-menu');
−
body {
+
  var oNextBtn=$('next-button');
−
margin: 0;
+
var aLiMenu = oMenu.getElementsByTagName('li');
−
padding: 0;
+
var iNow = 0;
−
background: #0048B3 url(images/img01.jpg) repeat;
+
var prevIndex = 0;
−
font-family: Tahoma, Geneva, sans-serif;
+
var iContentHeight = 0;
−
font-size: 13px;
+
var btn1 = $('btn1');
−
color: #626262;
+
var btn2 = $('btn2');
−
}
+
var btn3 = $('btn3');
 +
var btn4 = $('btn4');
 +
contentAuto();
 +
mouseWheel();
 +
bindNav();
 +
add1();
 +
add2();
 +
window.onresize = fnResize; 
 +
function add1() {
 +
oNextBtn.onclick=function () {
 +
showLoading();
 +
};
 +
}
 +
function add2() {
 +
btn1.onclick=function () {
 +
toMove(1);
 +
iNow=1;
 +
}
 +
btn2.onclick=function () {
 +
toMove(2);
 +
iNow=2;
 +
}
 +
btn3.onclick=function () {
 +
toMove(3);
 +
iNow=3;
 +
}
 +
btn4.onclick=function () {
 +
toMove(0);
 +
iNow=0;
 +
}
 +
}
 +
function mouseWheel(){
 +
var bBtn = true;
 +
var timer = null;
 +
if(oContent.addEventListener){
 +
oContent.addEventListener('DOMMouseScroll',function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
},false);
 +
}
 +
oContent.onmousewheel = function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
};
 +
 +
function toChange(ev){
 +
if(ev.detail){
 +
bBtn = ev.detail > 0 ? true : false;
 +
}
 +
else{
 +
bBtn = ev.wheelDelta < 0 ? true : false;
 +
}
 +
 +
if( iNow == aLiList.length-1){if(bBtn!=0){return;};}
 +
if( iNow == 0 ){if(bBtn==0){return;};}
 +
 +
prevIndex = iNow;
 +
if(bBtn){  //↓
 +
if(iNow != aLiList.length-1){
 +
iNow++;
 +
}
 +
toMove(iNow);
 +
}
 +
else{   //↑
 +
if(iNow != 0){
 +
iNow--;
 +
}
 +
toMove(iNow);
 +
}
 +
 +
if(ev.preventDefault){
 +
ev.preventDefault();
 +
}
 +
else{
 +
return false;
 +
}
 +
}
 +
 +
}
 +
function showLoading(){
 +
var oSpan = oLoading.getElementsByTagName('span')[0];
 +
var aDiv = oLoading.getElementsByTagName('div');
 +
oSpan.style.width = '100%';
 +
oSpan.addEventListener('webkitTransitionend',spanChange,false);
 +
oSpan.addEventListener('transitionend',spanChange,false);
 +
function spanChange(){
 +
if(oSpan.style.width == '100%'){
 +
oSpan.style.display = 'none';
 +
aDiv[0].style.height = 0;
 +
aDiv[1].style.height = 0;
 +
}
 +
}
 +
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
 +
aDiv[0].addEventListener('transitionend',divChange,false);
 +
 +
function divChange(){
 +
oLoading.parentNode.removeChild(oLoading);
 +
}
 +
 +
}
  
−
h1, h2, h3 {
+
function bindNav(){
−
margin: 0;
+
for(var i=0;i<aLiMenu.length;i++){
−
padding: 0;
+
aLiMenu[i].index = i;
−
text-transform: lowercase;
+
aLiMenu[i].onclick = function(){
−
font-family: 'Oswald', sans-serif;
+
prevIndex = iNow;
−
font-weight: 300;
+
iNow = this.index;
−
color: #7D7764;
+
toMove( this.index );
−
}
+
};
−
 
+
}
−
h1 {
+
}
−
font-size: 2em;
+
function toMove(index){
−
}
+
oList.style.top = - index * iContentHeight + 'px';
−
 
+
for(var i=0;i<aLiMenu.length;i++){
−
h2 {
+
aLiMenu[i].className = '';
−
font-size: 2.8em;
+
}
−
}
+
aLiMenu[index].className = 'active';
−
 
+
}
−
h3 {
+
−
font-size: 1.6em;
+
function contentAuto(){
−
}
+
iContentHeight = viewHeight() ;
−
 
+
oContent.style.height = iContentHeight + 'px';
−
p, ul, ol {
+
for(var i=0;i<aLiList.length;i++){
−
margin-top: 0;
+
aLiList[i].style.height = iContentHeight + 'px';
−
line-height: 180%;
+
}
−
}
+
oList.style.top = - iNow * iContentHeight + 'px';
−
 
+
}
−
ul, ol {
+
−
}
+
function fnResize(){
−
 
+
contentAuto();
−
a {
+
}
−
text-decoration: none;
+
−
color: #731F1F;
+
function $(id){
−
}
+
return document.getElementById(id);
−
 
+
}
−
a:hover {
+
−
}
+
−
 
+
−
#wrapper {
+
−
overflow: hidden;
+
−
background: #FFFFFF url(images/img02.jpg) repeat-x left top;
+
−
}
+
−
 
+
−
.container {
+
−
width: 1200px;
+
−
margin: 0px auto;
+
−
}
+
−
 
+
−
/* Header */
+
−
 
+
−
#header-wrapper {
+
−
overflow: hidden;
+
−
height: 600px;
+
−
}
+
−
 
+
−
#header {
+
−
width: 1200px;
+
−
height: 620px;
+
−
margin: 0 auto;
+
−
background: url(images/img04.jpg) no-repeat right top;
+
−
}
+
−
 
+
−
/* Logo */
+
−
 
+
−
#logo {
+
−
overflow: hidden;
+
−
font-family: 'Oswald', sans-serif;
+
−
}
+
−
 
+
−
#logo h1, #logo p {
+
−
text-shadow: 1px 1px 0px #5E8CC3;
+
−
text-transform: uppercase;
+
−
}
+
−
 
+
−
#logo h1 {
+
−
padding: 200px 0px 0px 0px;
+
−
letter-spacing: -1px;
+
−
font-size: 100px;
+
−
}
+
−
 
+
−
#logo p {
+
−
margin-top: -20px;
+
−
padding: 0px 0px 0px 5px;
+
 
 
−
font-size: 20px;
+
function viewWidth(){
−
font-weight: 300;
+
return window.innerWidth || document.documentElement.clientWidth;
−
color: #B8D1EE;
+
}
 +
 +
function viewHeight(){
 +
return window.innerHeight || document.documentElement.clientHeight;
 +
}
 +
 +
function getByClass(oParent,sClass){
 +
var aElem = oParent.getElementsByTagName('*');
 +
var arr = [];
 +
for(var i=0;i<aElem.length;i++){
 +
if( aElem[i].className == sClass ){
 +
arr.push( aElem[i] );
 +
}
 +
}
 +
return arr;
 +
}
 
}
 
}
−
 
+
</script>
−
#logo p a {
+
<style type="text/css">
−
color: #696969;
+
.button-next{   font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
    position: absolute;
 +
    min-width: 180px;
 +
    min-height: 40px;
 +
  height: 7%;
 +
  width: 13%;
 +
  bottom: 1%;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 2px;
 +
  color: #222;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);font-size: large;
 
}
 
}
−
 
+
.button-next:hover {
−
#logo a {
+
  background: transparent;
−
border: none;
+
  color: #fff;
−
background: none;
+
−
text-decoration: none;
+
−
color: #FFFFFF;
+
 
}
 
}
 +
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0);margin:0 auto;position: relative;}
 +
.content{width:100%;}
 +
li{ list-style:none;}
 +
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 +
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
 +
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
 +
#lay-menu li.active{ background:black; cursor:default;}
  
−
/* Menu */
+
.myheader img{width:100%; margin: 0;position: absolute;  top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
−
 
+
.myheader h1{width:100%; margin: 0;position: absolute;  top: 40%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:78px; font-family:"Comic Sans MS",cursive;border-bottom: none;padding-bottom:40px;line-height:normal;}
−
#menu-wrapper {
+
.myheader h3{width:100%; margin: 0;position: absolute;  top: 60%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:30px;border-bottom: none;font-weight:initial;font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;line-height:normal;}
−
overflow: hidden;
+
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
−
height: 80px;
+
#loading div:nth-of-type(1){ top:0;}
 +
#loading div:nth-of-type(2){ bottom:0;}
 +
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 +
body {
 +
    color: #777;
 
}
 
}
−
 
+
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
−
#menu {
+
.big-bg{position:absolute; top:0;left:0;height:100%;width:100%; z-index:9;}
−
overflow: hidden;
+
@media (min-width: 92em) {
−
height: 80px;
+
  .myheader {
−
background: url(images/img03.jpg) repeat-x left top;
+
        width: 85%;}
 
}
 
}
−
 
+
@media (max-width: 92em) {
−
#menu ul {
+
  .myheader {
−
margin: 0;
+
        width: 85%;}
−
padding: 0px 0px 0px 0px;
+
−
list-style: none;
+
−
line-height: normal;
+
−
font-family: 'Oswald', sans-serif;
+
 
}
 
}
−
 
+
@media (max-width: 45em) {
−
#menu li {
+
  .myheader {
−
display: inline-block;
+
        width: 100%;}
−
border-right: 1px solid #64DAFE;
+
 
}
 
}
  
−
#menu a {
+
.next-button {z-index:10;position:absolute;font-weight: bold;
−
display: block;
+
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
−
height: 80px;
+
  top: 40%;
−
margin: 0px;
+
  left: 50%;font-size:29px;font-weight:10px;
−
padding: 0px 30px;
+
  z-index: 10;
−
line-height: 80px;
+
  padding: 1em 2.5em;
−
text-decoration: none;
+
  background: #fff;
−
text-transform: lowercase;
+
  border: 1px solid #fff;
−
text-transform: uppercase;
+
  border-radius: 4px;
−
font-size: 20px;
+
  color: #222;
−
font-weight: 300;
+
  font-size: large;
−
color: #FFFFFF;
+
  text-align: center;
−
border: none;
+
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);}
 +
.next-button:hover {
 +
  background: transparent;
 +
  color: #fff;
 
}
 
}
 +
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
 +
</style>
  
−
#menu a:hover, #menu .current_page_item a {
+
</head>
−
background: url(images/img06.png) repeat-x left top;
+
<img class="under-bg" src="https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg" alt="">
−
text-decoration: none;
+
<div id="loading">
−
color: #FFFFFF;
+
    <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div>
−
}
+
        <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg">
 +
            <a class="next-button" id="next-button">Get Started!</a>
 +
        </div>
 +
        <span></span>
 +
    </div>
 +
 
 +
  <div id="layout">
 +
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
        <div id="menu">
 +
        <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a  class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="content" class="content">
 +
    <ul id="lay-menu">
 +
        <li class="active"></li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
        </ul>
 +
    <ul id="Qidilist">
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><h1>MiRNA &nbsp;&nbsp;Locker</h1><h3>A Modularized DNA Assembly As miRNA Inhibitors</h3><button id="btn1" class="button-next">How it works?</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png" no-repeat; ><button id="btn2" class="button-next">Next</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png" no-repeat; ><button id="btn3" class="button-next">Next</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ><button id="btn4" class="button-next">Back</button></div>
 +
            </li>
 +
   
 +
        </ul>
 +
        </div>
 +
       
 +
</div>
 +
<script type="text/javascript">
 +
( function(window,document){
  
−
#menu .current_page_item a {
+
    var layout  = document.getElementById('layout'),
−
}
+
        menu     = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
  
−
/* Page */
+
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
  
−
#page {
+
        for(; i < length; i++) {
−
overflow: hidden;
+
          if (classes[i] === className) {
−
padding: 50px 0px 40px 0px;
+
            classes.splice(i, 1);
−
}
+
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
  
−
/* Content */
+
        element.className = classes.join(' ');
 +
    }
  
−
#content {
+
    function toggleAll(e) {
−
float: left;
+
        var active = 'active';
−
width: 690px;
+
−
margin-right: 24px;
+
−
padding: 0px 0px 0px 0px;
+
−
}
+
  
−
#content h2 {
+
        e.preventDefault();
−
padding: 0px 0px 20px 0px;
+
        toggleClass(layout, active);
−
text-transform: uppercase;
+
        toggleClass(menu, active);
−
font-size: 3em;
+
        toggleClass(menuLink, active);
−
font-weight: 200;
+
    }
−
color: #262626;
+
−
}
+
  
−
/* Sidebar */
+
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
  
−
#sidebar1 {
+
    content.onclick = function(e) {
−
float: left;
+
        if (menu.className.indexOf('active') !== -1) {
−
width: 180px;
+
            toggleAll(e);
−
margin: 0px;
+
        }
−
padding: 0px 0px 0px 0px;
+
    };
−
color: #787878;
+
−
}
+
  
−
#sidebar1 h2 {
+
}(this, this.document));
−
padding: 0px 0px 20px 0px;
+
</script>
−
text-transform: uppercase;
+
−
font-size: 1.5em;
+
−
font-weight: 200;
+
−
color: #262626;
+
−
}
+
  
−
#sidebar2 {
+
<script type="text/javascript" >
−
float: right;
+
    function Show(tagId) {
−
width: 282px;
+
    if (document.getElementById(tagId).style.display=="none") {
−
margin: 0px;
+
    document.getElementById(tagId).style.display="block";
−
padding: 0px 0px 0px 0px;
+
   
−
color: #787878;
+
    }
−
}
+
    else {
−
 
+
    document.getElementById(tagId).style.display="none";
−
#sidebar2 h2 {
+
    }
−
padding: 0px 0px 20px 0px;
+
     }
−
text-transform: uppercase;
+
</script>
−
font-size: 1.5em;
+
−
font-weight: 200;
+
−
color: #262626;
+
−
}
+
−
 
+
−
#sidebar2 a {
+
−
border: none;
+
−
}
+
−
 
+
−
#sidebar2 a:hover {
+
−
text-decoration: underline;
+
−
}
+
−
 
+
−
/* Three Column Footer Content */
+
−
 
+
−
 
+
−
#footer-bg {
+
−
overflow: hidden;
+
−
padding: 50px 0px;
+
−
}
+
−
 
+
−
#footer-content {
+
−
text-shadow: 1px 1px 1px #003E93;
+
−
color: #67C8E3;
+
−
}
+
−
 
+
−
#footer-content h2 {
+
−
margin: 0px;
+
−
padding: 0px 0px 20px 0px;
+
−
letter-spacing: 1px;
+
−
text-transform: uppercase;
+
−
font-size: 20px;
+
−
font-weight: 200;
+
−
color: #FFFFFF;
+
−
}
+
−
 
+
−
#footer-content a {
+
−
color: #56C8E3;
+
−
}
+
−
 
+
−
#footer-content a:hover {
+
−
text-decoration: underline;
+
−
}
+
−
 
+
−
 
+
−
#column1 {
+
−
float: left;
+
−
width: 280px;
+
−
margin-right: 30px;
+
−
}
+
−
 
+
−
#column1 p {
+
−
line-height: 1;
+
−
}
+
−
 
+
−
#column2 {
+
−
float: left;
+
−
width: 280px;
+
−
margin-right: 30px;
+
−
}
+
−
 
+
−
#column3 {
+
−
float: left;
+
−
width: 280px;
+
−
}
+
−
 
+
−
#column4 {
+
−
float: right;
+
−
width: 260px;
+
−
}
+
−
 
+
−
 
+
−
/* Footer */
+
−
 
+
−
#footer {
+
−
height: 100px;
+
−
margin: 0 auto;
+
−
padding: 50px 0px 0px 0px;
+
−
background: url(images/img04.png) no-repeat center top;
+
−
}
+
−
 
+
−
#footer p {
+
−
margin: 0;
+
−
padding-top: 10px;
+
−
line-height: normal;
+
−
text-align: center;
+
−
color: #C59C9C;
+
−
}
+
−
 
+
−
#footer a {
+
−
color: #C59C9C;
+
−
}
+
−
 
+
−
#marketing {
+
−
overflow: hidden;
+
−
margin-bottom: 30px;
+
−
padding: 20px 0px 10px 0px;
+
−
border-top: 1px solid #E3E3E3;
+
−
border-bottom: 1px solid #E3E3E3;
+
−
}
+
−
 
+
−
#marketing .text1 {
+
−
float: left;
+
−
margin: 0px;
+
−
padding: 0px;
+
−
letter-spacing: -2px;
+
−
text-transform: lowercase;
+
−
font-size: 34px;
+
−
color: #345E9B;
+
−
}
+
−
 
+
−
#marketing .text2 {
+
−
float: right;
+
−
}
+
−
 
+
−
#marketing .text2 a {
+
−
display: block;
+
−
width: 252px;
+
−
height: 38px;
+
−
padding: 15px 0px 0px 0px;
+
−
background: url(images/img07.jpg) no-repeat left top;
+
−
letter-spacing: -2px;
+
−
text-align: center;
+
−
text-transform: lowercase;
+
−
font-size: 30px;
+
−
color: #FFFFFF;
+
−
}
+
−
 
+
−
.box1 {
+
−
overflow: hidden;
+
−
height: 300px;
+
−
background: url(images/img04.jpg) no-repeat center bottom;
+
−
}
+
−
 
+
−
.list-style1 {
+
−
margin: 0px;
+
−
padding: 0px;
+
−
list-style: none;
+
−
}
+
−
 
+
−
.list-style1 li {
+
−
padding: 7px 0px 7px 0px;
+
−
border-top: 1px dashed #E7E2DC;
+
−
}
+
−
 
+
−
.list-style1 .first {
+
−
padding-top: 0px;
+
−
border-top: none;
+
−
}
+
−
 
+
−
.list-style2 {
+
−
margin: 0px;
+
−
padding: 0px;
+
−
list-style: none;
+
−
}
+
−
 
+
−
.list-style2 li {
+
−
padding: 5px 0px 5px 0px;
+
−
border-top: 1px solid #EEEEEE;
+
−
}
+
−
 
+
−
.list-style2 a {
+
−
padding-left: 15px;
+
−
background: url(images/img10.png) no-repeat left 50%;
+
−
color: #717171;
+
−
}
+
−
 
+
−
.list-style2 a:hover {
+
−
text-decoration: underline;
+
−
color: #606060;
+
−
}
+
−
 
+
−
.list-style2 .first {
+
−
padding-top: 0px;
+
−
border: none;
+
−
}
+
−
 
+
−
.list-style3 {
+
−
margin: 0px;
+
−
padding: 0px;
+
−
list-style: none;
+
−
}
+
−
 
+
−
.list-style3 li {
+
−
padding: 5px 0px 5px 0px;
+
−
background: url(images/img12.jpg) repeat-x left top;
+
−
}
+
−
 
+
−
.list-style3 a {
+
−
padding-left: 15px;
+
−
background: url(images/img13.jpg) no-repeat left 50%;
+
−
color: #717171;
+
−
}
+
−
 
+
−
.list-style3 a:hover {
+
−
text-decoration: underline;
+
−
color: #606060;
+
−
}
+
−
 
+
−
.list-style3 .first {
+
−
padding-top: 0px;
+
−
background: none;
+
−
border: none;
+
−
}
+
−
 
+
−
 
+
−
/* Three Column Content */
+
−
 
+
−
#four-column {
+
−
overflow: hidden;
+
−
padding: 30px 0px 30px 0px;
+
−
border-top: 1px solid #EEEEEE;
+
−
text-shadow: 1px 1px 0px #FFFFFF;
+
−
color: #626262;
+
−
}
+
−
 
+
−
#four-column #tbox1 {
+
−
float: left;
+
−
width: 282px;
+
−
margin-right: 24px;
+
−
}
+
−
 
+
−
#four-column #tbox2 {
+
−
float: left;
+
−
width: 282px;
+
−
margin-right: 24px;
+
−
}
+
−
 
+
−
#four-column #tbox3 {
+
−
float: left;
+
−
width: 282px;
+
−
}
+
−
 
+
−
#four-column #tbox4 {
+
−
float: right;
+
−
width: 282px;
+
−
}
+
−
 
+
−
.box-style {
+
−
background: #191919 url(images/img05.jpg) repeat;
+
−
}
+
−
 
+
−
.box-style h2 {
+
−
padding: 10px 0px;
+
−
letter-spacing: -1px;
+
−
text-transform: uppercase;
+
−
font-size: 20px;
+
−
font-weight: 200;
+
−
color: #515151;
+
−
}
+
−
 
+
−
.box-style .image {
+
−
width: 320px;
+
−
}
+
−
 
+
−
.box-style .arrow {
+
−
background: url(images/img06.png) no-repeat right top;
+
−
}
+
−
 
+
−
.box-style .content {
+
−
overflow: hidden;
+
−
padding: 30px;
+
−
}
+
−
 
+
−
 
+
−
.divider {
+
−
overflow: hidden;
+
−
height: 50px;
+
−
background: url(images/img04.png) no-repeat center top;
+
−
}
+
−
-->
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<div id="wrapper">
+
−
<div id="menu-wrapper">
+
−
<div id="menu" class="container">
+
−
<ul>
+
−
<li class="current_page_item"><a href="#">Homepage</a></li>
+
−
<li><a href="#">Services</a></li>
+
−
<li><a href="#">Blog</a></li>
+
−
<li><a href="#">Photos</a></li>
+
−
<li><a href="#">About Us</a></li>
+
−
<li><a href="#">Links</a></li>
+
−
<li><a href="#">Contact Us</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<div id="header">
+
−
<div id="logo" class="container">
+
−
<h1><a href="#">Open-Air </a></h1>
+
−
<p>In posuere eleifend odio quisque semper augue.</p>
+
−
</div>
+
−
</div>
+
−
<div id="page" class="container">
+
−
<div id="content">
+
−
<h2><a href="#">Welcome to Open-Air </a></h2>
+
−
<div class="entry">
+
−
<p><img src="images/img11.jpg" width="690" height="200" alt="" /></p>
+
−
<p>This is <strong>Open-Air </strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.     The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
+
−
</div>
+
−
</div>
+
−
<!-- end #content -->
+
−
<div id="sidebar1">
+
−
<div>
+
−
<h2>Maecenas luctus</h2>
+
−
<ul class="list-style2">
+
−
<li class="first"><a href="#">Pellentesque consectetuer </a></li>
+
−
<li><a href="#">Lorem  adipiscing elit.</a></li>
+
−
<li><a href="#">Phasellus pellentesque </a></li>
+
−
<li><a href="#">Cras vitae pellentesque </a></li>
+
−
<li><a href="#">Maecenas  feugiat eleifend.</a></li>
+
−
<li><a href="#">Pellentesque  gravida blandit.</a></li>
+
−
<li><a href="#">Phasellus pellentesque </a></li>
+
−
<li><a href="#">Cras vitae pellentesque </a></li>
+
−
<li><a href="#">Maecenas  feugiat eleifend.</a></li>
+
−
<li><a href="#">Phasellus pellentesque </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<div id="sidebar2">
+
−
<div>
+
−
<h2>Nulla luctus eleifend</h2>
+
−
<ul class="list-style2">
+
−
<li class="first"><a href="#">Pellentesque  elit non  gravida blandit.</a></li>
+
−
<li><a href="#">Lorem ipsum dolor sit amet,  adipiscing elit.</a></li>
+
−
<li><a href="#">Phasellus nec erat    pellentesque congue.</a></li>
+
−
<li><a href="#">Cras vitae metus  pellentesque pharetra.</a></li>
+
−
<li><a href="#">Phasellus  erat sit  nibh pellentesque congue.</a></li>
+
−
<li><a href="#">Maecenas  vitae tellus feugiat eleifend.</a></li>
+
−
<li><a href="#">Lorem ipsum dolor sit amet,  adipiscing elit.</a></li>
+
−
<li><a href="#">Phasellus nec erat    pellentesque congue.</a></li>
+
−
<li><a href="#">Cras vitae metus  pellentesque pharetra.</a></li>
+
−
<li><a href="#">Phasellus  erat sit  nibh pellentesque congue.</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<!-- end #sidebar -->
+
−
</div>
+
−
<!-- end #page -->
+
−
<div id="four-column" class="container">
+
−
<div id="tbox1">
+
−
<div class="box-style">
+
−
<div class="image"></div>
+
−
<div class="arrow"></div>
+
−
<div class="content">
+
−
<h2>Fusce ultrices fringilla</h2>
+
−
<p>Aliquam erat volutpat. Quisque dictum. Integer nisl risus, sagittis convallis elementum congue, nibh. </p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div id="tbox2">
+
−
<div class="box-style">
+
−
<div class="image"></div>
+
−
<div class="arrow"></div>
+
−
<div class="content">
+
−
<h2>Mauris vulputate dolor</h2>
+
−
<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis,  congue, nibh. </p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div id="tbox3">
+
−
<div class="box-style">
+
−
<div class="image"></div>
+
−
<div class="arrow"></div>
+
−
<div class="content">
+
−
<h2>Nulla luctus eleifend </h2>
+
−
<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis  elementum congue, nibh.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div id="tbox4">
+
−
<div class="box-style">
+
−
<div class="image"></div>
+
−
<div class="arrow"></div>
+
−
<div class="content">
+
−
<h2>Nulla luctus eleifend </h2>
+
−
<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis  elementum congue, nibh.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div id="footer-content" class="container">
+
−
<div id="footer-bg">
+
−
<div id="column1">
+
−
<h2>Untitled Inc.</h2>
+
−
<p>&copy; Untitled</p>
+
−
<p>All rights reserved.</p>
+
−
<p>Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. Photos by <a href="http://fotogrph.com/">Fotogrph</a>.</p>
+
−
</div>
+
−
<div id="column2">
+
−
<h2>Rhoncus volutpat</h2>
+
−
<ul class="list-style3">
+
−
<li class="first"><a href="#">Pellentesque consectetuer gravida blandit.</a></li>
+
−
<li><a href="#">Lorem consectetuer adipiscing elit.</a></li>
+
−
<li><a href="#">Phasellus pellentesque conguen lectus</a></li>
+
−
<li><a href="#">Cras vitae pellentesque pharetra.</a></li>
+
−
<li><a href="#">Maecenas vitae vitae feugiat eleifend.</a></li>
+
−
<li><a href="#">Pellentesque consectetuer gravida blandit.</a></li>
+
−
</ul>
+
−
</div>
+
−
<div id="column3">
+
−
<h2>Recommended Links</h2>
+
−
<ul class="list-style3">
+
−
<li class="first"><a href="#">Pellentesque consectetuer gravida blandit.</a></li>
+
−
<li><a href="#">Lorem consectetuer adipiscing elit.</a></li>
+
−
<li><a href="#">Phasellus pellentesque conguen lectus</a></li>
+
−
<li><a href="#">Cras vitae pellentesque pharetra.</a></li>
+
−
<li><a href="#">Maecenas vitae vitae feugiat eleifend.</a></li>
+
−
<li><a href="#">Pellentesque consectetuer gravida blandit.</a></li>
+
−
</ul>
+
−
</div>
+
−
<div id="column4">
+
−
<h2>Social</h2>
+
−
<ul class="list-style3">
+
−
<li class="first"><a href="#">Twitter</a></li>
+
−
<li><a href="#">Facebook</a></li>
+
−
<li><a href="#">Flickr</a></li>
+
−
<li><a href="#">Google +</a></li>
+
−
<li><a href="#">Instagram</a></li>
+
−
<li><a href="#">RSS</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- end #footer -->
+
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:17, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Team:NUDT_CHINA