Difference between revisions of "Team:NUDT CHINA"

m
Line 1: Line 1:
−
{{Team:NUDT_CHINA/CSS}}
+
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 +
<!--Javascript-->
 +
<!--jQuery-->
 +
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 +
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
 +
<!--MENU-->
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$('#menu li a').hover( 
 +
function() {$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');},
 +
function() {$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast');}
 +
);
 +
});
 +
</script>
 +
<!--NAVIGATION-->
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$('#navigation li a').hover( 
 +
function() {$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');}, 
 +
function() {$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast');}
 +
);
 +
});
 +
$(function(){
 +
$("a").click(function(){
 +
$("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000);}
 +
);
 +
});
 +
</script>
 +
<!--iGEM_LOGO-->
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$("#iGEM_LOGO").mouseover(
 +
function(){$(this).animate({'width': '140px', 'height': '140px'},"fast");
 +
});
 +
$("#iGEM_LOGO").mouseout(
 +
function(){$(this).animate({'width': '137px', 'height': '137px'},"fast");
 +
});
 +
});
 +
  </script>
 +
<!--css-->
 +
<!--RESET-->
 +
<style type="text/css">
 +
.clearStyle {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
 +
body {
 +
background-color: #f3f3f3;
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/Team_NUDT_CHINA_Soft_wallpaper.png);
 +
background-position: 0px 0px;
 +
height: 100%;
 +
width: auto;
 +
}
 +
</style>
 +
<!-- MAINCONTAINER-->
 +
<style type="text/css">
 +
#mainContainer { 
 +
width: auto;
 +
overflow:hidden;
 +
float:center;
 +
margin-left:20px;
 +
margin-right:20px;
 +
margin-bottom: 10px;
 +
}
 +
</style>
 +
<!--BANNER CONTAINER-->
 +
<style type="text/css">
 +
#bannerContainer {
 +
margin-left:180px;
 +
margin-right:180px;
 +
width: auto;
 +
}
 +
</style>
 +
<!--MENU-->
 +
<style type="text/css">
 +
#menu
 +
{
 +
    position: fixed;
 +
    top: 30px;
 +
left: 0px;
 +
}
 +
#menu img
 +
{
 +
margin-left: 30px;
 +
margin-bottom: 0px
 +
}
 +
#menu ul
 +
{
 +
list-style-type:none;
 +
padding: 0;
 +
border: 0;
 +
 
 +
}
 +
#menu li
 +
{
 +
list-style-type:none;
 +
position: relative;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
font-size: 15px;
 +
}
 +
#menu a
 +
{
 +
position: relative;
 +
display: inline-block;
 +
margin: 4px 0px 0px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
color: #888887;
 +
border-radius: 0 .4em .4em 0;
 +
outline: none;
 +
cursor: pointer;
 +
}
 +
#menu a.b
 +
{
 +
position: relative;
 +
display: inline-block;
 +
margin: 1px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
outline: none;
 +
cursor: pointer;
 +
background-color: #888887;
 +
color: #ffffff;
 +
border-radius: 0 1em 1em 0;
 +
font-size: 13px;
 +
}
 +
#menu a:hover
 +
{
 +
background-color: #ffffff;
 +
color:#d82545;
 +
}
 +
#menu a.b:hover
 +
{
 +
background-color: #888887;
 +
color:#f9d24b;
 +
}
 +
#menu span
 +
{
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
}
 +
</style>
 +
<!--NAVIGATION-->
 +
<style type="text/css">
 +
#navigation
 +
{
 +
    position: fixed;
 +
    top: 170px;
 +
right: 0px;
 +
text-align: right;
 +
}
 +
#navigation img
 +
{
 +
margin-right: 30px;
 +
margin-top: 0px;
 +
margin-bottom: 30px;
 +
}
 +
#navigation ul
 +
{
 +
list-style-type:none;
 +
border: 0;
 +
}
 +
#navigation li
 +
{
 +
list-style-type:none;
 +
position: relative;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
font-size: 15px;
 +
}
 +
#navigation a
 +
{
 +
position: relative;
 +
display: inline-block;
 +
margin: 4px 0px 0px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
color: #888887;
 +
border-radius: .4em 0em 0em .4em;
 +
outline: none;
 +
cursor: pointer;
 +
}
 +
#navigation a.b
 +
{
 +
position: relative;
 +
display: inline-block;
 +
margin: 1px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
outline: none;
 +
cursor: pointer;
 +
background-color: #888887;
 +
color: #ffffff;
 +
border-radius: 1em 0em 0em 1em;
 +
font-size: 13px;
 +
}
 +
#navigation a.t
 +
{
 +
position: relative;
 +
display: inline-block;
 +
margin: 1px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
outline: none;
 +
cursor: pointer;
 +
background-color: #d82545;
 +
color: #ffffff;
 +
border-radius: 1em 0em 0em 1em;
 +
font-size: 20px;
 +
}
 +
#navigation a:hover
 +
{
 +
background-color: #ffffff;
 +
color:#d82545;
 +
}
 +
#navigation a.b:hover
 +
{
 +
background-color: #888887;
 +
color:#f9d24b;
 +
}
 +
#navigation a.t:hover
 +
{
 +
background-color: #6b1877;
 +
color:#ffffff;
 +
}
 +
#navigation span
 +
{
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
}
 +
</style>
 +
<!--IGEM LOGO-->
 +
<style type="text/css">
 +
#logoContainer {
 +
position: fixed;
 +
top: 30px;
 +
right: 30px;
 +
}
 +
</style>
 +
<!--NUDT_Container-->
 +
<style type="text/css">
 +
#NUDT_Container
 +
{
 +
clear: both;
 +
width: auto;
 +
margin: 30px 180px;
 +
padding: 30px 0px;
 +
font-family: 'verdana',sans-serif;
 +
background: #fff;
 +
box-shadow: 0 3px 8px rgba(0,0,0,.1);
 +
position: relative;
 +
}
 +
#NUDT_Container ul
 +
{
 +
list-style-position:inside;
 +
padding: 10px 50px;
 +
border: 0;
 +
 
 +
}
 +
#NUDT_Container li
 +
{
 +
padding: 0;
 +
border: 0;
 +
}
 +
 
 +
#NUDT_Container p{
 +
text-decoration: none;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
color: #888887;
 +
position: relative;
 +
padding: 10px 50px;
 +
font-size: 16px;
 +
}
 +
#NUDT_Container a {
 +
position: relative;
 +
    text-decoration:none;
 +
    color:#d82545;
 +
}
 +
 
 +
#NUDT_Container a:hover
 +
{
 +
text-decoration:underline;
 +
}
 +
#NUDT_Container h1, h2, h3, h4, h5{
 +
color: #444;
 +
margin: 20px 0px;
 +
padding:4px 8px;
 +
letter-spacing: -1px;
 +
text-transform: uppercase;
 +
position: relative;
 +
}
 +
#NUDT_Container h1 {
 +
font:bold 28px/12px 'verdana',sans-serif;
 +
border-left: 10px solid #444;
 +
}
 +
#NUDT_Container h2 {
 +
font:bold 24px/10px 'verdana',sans-serif;
 +
border-left: 20px solid #444;
 +
}
 +
#NUDT_Container h3 {
 +
font:bold 22px/8px 'verdana',sans-serif;
 +
border-left: 30px solid #444;
 +
}
 +
#NUDT_Container h4 {
 +
font:bold 22px/6px 'verdana',sans-serif;
 +
border-left: 35px solid #444;
 +
}
 +
#NUDT_Container h5 {
 +
font:bold 20px/4px 'verdana',sans-serif;
 +
border-left: 40px solid #444;
 +
}
 +
/*CASE*/
 +
#NUDT_Container ca {
 +
position: relative;
 +
display: inline-block;
 +
margin: 10px 100px;
 +
    padding: 10px 20px;
 +
    text-decoration: none;
 +
background-color: #bcbcbc;
 +
color: #000000;
 +
border-radius: 8px 8px;
 +
outline: none;
 +
cursor: pointer;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
font-size: 16px;
 +
}
 +
</style>
 +
  <!--TIME-->
 +
  <style type="text/css">
 +
  *, *:after, *:before {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  }
 +
    img {
 +
      max-width: 100%;
 +
    }
 +
    .cd-container {
 +
      /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 +
      width: 90%;
 +
      max-width: 1170px;
 +
      margin: 0 auto;
 +
  }
 +
    .cd-container::after {
 +
      /* clearfix */
 +
      content: '';
 +
      display: table;
 +
      clear: both;
 +
    }
 +
 
 +
    #cd-timeline {
 +
      position: relative;
 +
      padding: 2em 0;
 +
      margin-top: 2em;
 +
      margin-bottom: 2em;
 +
    }
 +
    #cd-timeline::before {
 +
      /* this is the vertical line */
 +
      content: '';
 +
      position: absolute;
 +
      top: 0;
 +
      left: 18px;
 +
      height: 100%;
 +
      width: 4px;
 +
      background: #888887;
 +
    }
 +
    @media only screen and (min-width: 1170px) {
 +
      #cd-timeline {
 +
        margin-top: 3em;
 +
        margin-bottom: 3em;
 +
      }
 +
      #cd-timeline::before {
 +
        left: 50%;
 +
        margin-left: -2px;
 +
      }
 +
    }
 +
 
 +
    .cd-timeline-block {
 +
      position: relative;
 +
      margin: 2em 0;
 +
    }
 +
    .cd-timeline-block:after {
 +
      content: "";
 +
      display: table;
 +
      clear: both;
 +
    }
 +
    .cd-timeline-block:first-child {
 +
      margin-top: 0;
 +
    }
 +
    .cd-timeline-block:last-child {
 +
      margin-bottom: 0;
 +
    }
 +
    @media only screen and (min-width: 1170px) {
 +
      .cd-timeline-block {
 +
        margin: 4em 0;
 +
      }
 +
      .cd-timeline-block:first-child {
 +
        margin-top: 0;
 +
      }
 +
      .cd-timeline-block:last-child {
 +
        margin-bottom: 0;
 +
      }
 +
    }
 +
 
 +
    .cd-timeline-img {
 +
      position: absolute;
 +
      top: 0;
 +
      left: 0;
 +
      width: 40px;
 +
      height: 40px;
 +
      border-radius: 50%;
 +
      box-shadow: 0 0 0 4px #ded8db, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 +
    }
 +
    .cd-timeline-img img {
 +
      display: block;
 +
      width: 24px;
 +
      height: 24px;
 +
      position: relative;
 +
      left: 50%;
 +
      top: 50%;
 +
      margin-left: -12px;
 +
      margin-top: -12px;
 +
    }
 +
    .cd-timeline-img.cd-picture {
 +
      background: #888887;
 +
    }
 +
    .cd-timeline-img.cd-picture:hover {
 +
      background: #d82545;
 +
    }
 +
    @media only screen and (min-width: 1170px) {
 +
      .cd-timeline-img {
 +
        width: 40px;
 +
        height: 40px;
 +
        left: 50%;
 +
        margin-left: -20px;
 +
        /* Force Hardware Acceleration in WebKit */
 +
        -webkit-transform: translateZ(0);
 +
        -webkit-backface-visibility: hidden;
 +
      }
 +
      .cssanimations .cd-timeline-img.is-hidden {
 +
        visibility: hidden;
 +
      }
 +
      .cssanimations .cd-timeline-img.bounce-in {
 +
        visibility: visible;
 +
        -webkit-animation: cd-bounce-1 0.6s;
 +
        -moz-animation: cd-bounce-1 0.6s;
 +
        animation: cd-bounce-1 0.6s;
 +
      }
 +
    }
 +
 
 +
    .cd-timeline-content {
 +
      position: relative;
 +
      margin-left: 60px;
 +
      background: #e5e6e7;
 +
      border-radius: 0.25em;
 +
      padding: 1em;
 +
      box-shadow: 0 3px 0 #abafb2;
 +
    }
 +
    .cd-timeline-content:after {
 +
      content: "";
 +
      display: table;
 +
      clear: both;
 +
    }
 +
    .cd-date {
 +
    font-family: Athelas;
 +
    }
 +
    .cd-timeline-content h6 {
 +
      color: #ffffff;
 +
    }
 +
    .cd-timeline-content h6:hover {
 +
      color: #d82545;
 +
    }
 +
    .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
      font-size: 13px;
 +
      font-size: 0.8125rem;
 +
    }
 +
    .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
      display: inline-block;
 +
    }
 +
    .cd-timeline-content p {
 +
      margin: 1em 0;
 +
      line-height: 1.6;
 +
    }
 +
    .cd-timeline-content .cd-date {
 +
      float: left;
 +
      padding: .8em 0;
 +
      opacity: .7;
 +
    }
 +
    .cd-timeline-content::before {
 +
      content: '';
 +
      position: absolute;
 +
      top: 16px;
 +
      right: 100%;
 +
      height: 0;
 +
      width: 0;
 +
      border: 7px solid transparent;
 +
      border-right: 7px solid white;
 +
    }
 +
    @media only screen and (min-width: 768px) {
 +
      .cd-timeline-content h6 {
 +
        font-size: 20px;
 +
        font-size: 1.25rem;
 +
      }
 +
      .cd-timeline-content p {
 +
        font-size: 16px;
 +
        font-size: 1rem;
 +
      }
 +
      .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
        font-size: 14px;
 +
        font-size: 0.875rem;
 +
      }
 +
    }
 +
    @media only screen and (min-width: 1170px) {
 +
      .cd-timeline-content {
 +
        margin-left: 0;
 +
        padding: 1.6em;
 +
        width: 45%;
 +
      }
 +
      .cd-timeline-content::before {
 +
        top: 24px;
 +
        left: 100%;
 +
        border-color: transparent;
 +
        border-left-color: white;
 +
      }
 +
      .cd-timeline-content .cd-read-more {
 +
        float: left;
 +
      }
 +
      .cd-timeline-content .cd-date {
 +
        position: absolute;
 +
        width: 100%;
 +
        left: 122%;
 +
        top: 6px;
 +
        font-size: 16px;
 +
        font-size: 1rem;
 +
      }
 +
      .cd-timeline-block:nth-child(even) .cd-timeline-content {
 +
        float: right;
 +
      }
 +
      .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
 +
        top: 24px;
 +
        left: auto;
 +
        right: 100%;
 +
        border-color: transparent;
 +
        border-right-color: white;
 +
      }
 +
      .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 +
        float: right;
 +
      }
 +
      .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 +
        left: auto;
 +
        right: 122%;
 +
        text-align: right;
 +
      }
 +
      .cssanimations .cd-timeline-content.is-hidden {
 +
        visibility: hidden;
 +
      }
 +
      .cssanimations .cd-timeline-content.bounce-in {
 +
        visibility: visible;
 +
        -webkit-animation: cd-bounce-2 0.6s;
 +
        -moz-animation: cd-bounce-2 0.6s;
 +
        animation: cd-bounce-2 0.6s;
 +
      }
 +
    }
 +
 
 +
    @media only screen and (min-width: 1170px) {
 +
      /* inverse bounce effect on even content blocks */
 +
      .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
 +
        -webkit-animation: cd-bounce-2-inverse 0.6s;
 +
        -moz-animation: cd-bounce-2-inverse 0.6s;
 +
        animation: cd-bounce-2-inverse 0.6s;
 +
      }
 +
    }
 +
  </style>
 +
<!--Common-->
 +
<div id = "mainContainer">
 +
<div id = "bannerContainer">
 +
<img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style="width: auto"/>
 +
</div>
 +
<div id = "menu">
 +
<img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/>
 +
<li><a id = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li>
 +
 +
<li><a id = "PROJECT" href = "#"><span>PROJECT</span></a></li>
 +
<li><a id = "Description" href = "https://2015.igem.org/Team:NUDT_CHINA/Description" class = "b"><span>Description</span></a></li>
 +
<li><a id = "Experiments" href = "https://2015.igem.org/Team:NUDT_CHINA/Experiments" class = "b"><span>Experiments &amp; Protocols</span></a></li>
 +
<li><a id = "Results" href="https://2015.igem.org/Team:NUDT_CHINA/Results"  class = "b"><span>Results</span></a></li>
 +
<li><a id = "Design" href="https://2015.igem.org/Team:NUDT_CHINA/Design" class = "b"><span>Design</span></a></li>
 +
 +
<li><a id = "PARTS" href = "#"><span>PARTS</span></a></li>
 +
<li><a id = "Team" href = "https://2015.igem.org/Team:NUDT_CHINA/Parts" class = "b"><span>Team Parts</span></a></li>
 +
<li><a id = "Basic" href = "https://2015.igem.org/Team:NUDT_CHINA/Basic_Part" class = "b"><span>Basic Parts</span></a></li>
 +
<li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"  class = "b"><span>Composite Parts</span></a></li>
 +
 
 +
 
 +
<li><a id = "NOTEBOOK" href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><span>NOTEBOOK</span></a></li> 
 +
<li><a id = "ATTRIBUTIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Attributions"><span>ATTRIBUTIONS</span></a></li> 
 +
<li><a id = "COLLABORATIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Collaborations"><span>COLLABORATIONS</span></a></li>
 +
<li><a id = "HUMAN" href="https://2015.igem.org/Team:NUDT_CHINA/Practices"><span>HUMAN PRACTICES</span></a></li> 
 +
<li><a id = "SAFETY" href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><span>SAFETY</span></a></li>
 +
<li><a id = "MODELING" href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><span>MODELING</span></a></li> 
 +
<li><a id = "MEASUREMENT" href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><span>MEASUREMENT</span></a></li> 
 +
<li><a id = "ENTREPRENEURSHIP" href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><span>ENTREPRENEURSHIP</span></a></li>
 +
    </div>
 +
    <div id = "logoContainer">
 +
    <a href="https://igem.org/Main_Page"><img  id = "iGEM_LOGO" src="https://static.igem.org/mediawiki/2015/e/ec/TEAM_NUDT_CHINA_iGEM_Logo.png" style="width: 130px; height:135px"/></a>
 +
    </div>
 +
<link href="https://2015.igem.org/Team:NEFU_China/cleariGEM.css?action=raw&ctype=text/css" rel="stylesheet" /> </head>
 +
</html>
 
<html>
 
<html>
 
<body>
 
<body>
 
<!--Main Container-->
 
<!--Main Container-->
 
<div id = "NUDT_Container" class = "clearStyle">
 
<div id = "NUDT_Container" class = "clearStyle">
−
<p id = "pos1"></p>
+
<section id="cd-timeline" class="cd-container">
−
<h1>We are NUDT_CHINA</h1>
+
<!--1-->
−
<p>Nice to meet you :) ~</p>
+
<div class="cd-timeline-block">
−
<ca>Our wiki is under construction, you can click <a href = "https://2015.igem.org/Team:NUDT_CHINA/Description" >Description</a> to get our description.</ca>
+
<div class="cd-timeline-img cd-picture" id = "pic1">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<img src="test.png" alt="Picture">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
</div>
−
<p id = "pos2"></p>
+
<div class="cd-timeline-content" id = "key1">
−
<h2>Title 2.1</h2>
+
<h7 style = "color:black">Lorem ipsum dolor sit amet</h7>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p style = "padding: 10px 5px;" id = "cont1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.</p>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<span class="cd-date" style="font-size:24px" >2015-01-06</span>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<script type="text/javascript">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
$(document).ready(function(){
−
<p id = "pos3"></p>
+
$("#key1").click(function(){
−
<h3>Title 2.2</h3>
+
$("#cont1").slideToggle(300);
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
});
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
});
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
$(document).ready(function(){
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
$("#pic1").click(function(){
−
<p id = "pos4"></p>
+
$("#cont1").slideToggle(300);
−
<h4>Title 3.1 </h4>
+
});
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
});
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
</script>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
</div>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
</div>
−
<p id = "pos5"></p>
+
<!--2-->
−
<h5>Title 4</h5>
+
<div class="cd-timeline-block">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<div class="cd-timeline-img cd-picture" id = "pic2">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<img src="test.png" alt="Picture">
−
<p id = "pos6"></p>
+
</div>
−
<h6>Title 5</h6>
+
<div class="cd-timeline-content" id = "key2">
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h7 style = "color:black">Lorem ipsum dolor sit amet</h7>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p style = "padding: 10px 5px" id = "cont2"><img src="test1.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.</p>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<span class="cd-date" style="font-size:24px">2015-01-06</span>
−
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<script type="text/javascript">
−
<ul> 
+
$(document).ready(function(){
−
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
+
$("#key2").click(function(){
−
</ul>
+
$("#cont2").slideToggle(300);
 +
});
 +
});
 +
$(document).ready(function(){
 +
$("#pic2").click(function(){
 +
$("#cont2").slideToggle(300);
 +
});
 +
});
 +
</script>
 +
</div>
 +
</div>
 +
 
 +
<!--3-->
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-picture" id = "pic3">
 +
<img src="test.png" alt="Picture">
 +
</div>
 +
<div class="cd-timeline-content" id = "key3">
 +
<h7 style = "color:black">Lorem ipsum dolor sit amet</h7>
 +
<p style = "padding: 10px 5px" id = "cont3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.</p>
 +
<span class="cd-date" style="font-size:24px">2015-01-06</span>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$("#key3").click(function(){
 +
$("#cont3").slideToggle(300);
 +
});
 +
});
 +
$(document).ready(function(){
 +
$("#pic3").click(function(){
 +
$("#cont3").slideToggle(300);
 +
});
 +
});
 +
</script>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
<!--Navigation-->
 
<!--Navigation-->
Line 46: Line 698:
 
<img src="https://static.igem.org/mediawiki/2015/5/58/TEAM_NUDT_CHINA_iGEM.png"/>
 
<img src="https://static.igem.org/mediawiki/2015/5/58/TEAM_NUDT_CHINA_iGEM.png"/>
 
<li><a href="#mainContainer" class = "t"><span>TOP</span></a></li>
 
<li><a href="#mainContainer" class = "t"><span>TOP</span></a></li>
−
<li><a href="#pos1"><span>Title 1</span></a></li>
 
−
 
−
<li><a href = "#pos2"><span>Title 2</span></a></li>
 
−
<li><a href = "#pos2" class = "b"><span>Title 2.1</span></a></li>
 
−
<li><a href = "#pos3" class = "b"><span>Title 2.2</span></a></li>
 
−
 
−
<li><a href = "#pos4"><span>Title 3</span></a></li>
 
−
<li><a href = "#pos4" class = "b"><span>Title 3.1</span></a></li>
 
−
 
−
<li><a href = "#pos5"><span>Title 4</span></a></li>
 
−
<li><a href = "#pos6"><span>Title 5</span></a></li>
 
 
<img src="https://static.igem.org/mediawiki/2015/9/93/Team_NUDT_CHINA_Navigate.png"/>
 
<img src="https://static.igem.org/mediawiki/2015/9/93/Team_NUDT_CHINA_Navigate.png"/>
 
    </div>
 
    </div>

Revision as of 07:54, 4 September 2015

<!DOCTYPE html>

Picture
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.

2015-01-06
Picture
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.

2015-01-06
Picture
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque.

2015-01-06