Difference between revisions of "Team:NUDT CHINA"

m
m
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--Javascript-->
+
<!--Javascript-->
<!--jQuery-->
+
<!--jQuery-->
 
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
         <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>
 
         <script type="text/javascript" src="jquery-1.11.3.js"></script>
<!--MENU-->
+
<!--MENU-->
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 15: Line 15:
 
});
 
});
 
</script>
 
</script>
<!--NAVIGATION-->
+
<!--NAVIGATION-->
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 29: Line 29:
 
});
 
});
 
</script>
 
</script>
<!--iGEM_LOGO-->
+
<!--iGEM_LOGO-->
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 40: Line 40:
 
});
 
});
 
  </script>
 
  </script>
<!--css-->
+
<!--css-->
<!--RESET-->
+
<!--RESET-->
 
<style type="text/css">
 
<style type="text/css">
 
.clearStyle {
 
.clearStyle {
Line 59: Line 59:
 
}
 
}
 
</style>
 
</style>
<!-- MAINCONTAINER-->
+
<!-- myMainContainer-->
 
<style type="text/css">
 
<style type="text/css">
#mainContainer {   
+
#myMainContainer {   
 +
background-color: #f3f3f3;
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/Team_NUDT_CHINA_Soft_wallpaper.png);
 +
background-position: 0px 0px;
 
width: auto;
 
width: auto;
 
overflow:hidden;
 
overflow:hidden;
 
float:center;
 
float:center;
margin-left:20px;
+
margin-left:0px;
margin-right:20px;
+
margin-right:0px;
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
}
 
}
 
</style>
 
</style>
<!--BANNER CONTAINER-->
+
<!--BANNER CONTAINER-->
 
<style type="text/css">
 
<style type="text/css">
 
#bannerContainer {
 
#bannerContainer {
Line 78: Line 81:
 
}
 
}
 
</style>
 
</style>
<!--MENU-->
+
<!--MENU-->
 
<style type="text/css">
 
<style type="text/css">
 
#menu
 
#menu
Line 149: Line 152:
 
}
 
}
 
</style>
 
</style>
<!--NAVIGATION-->
+
<!--NAVIGATION-->
 
<style type="text/css">
 
<style type="text/css">
 
#navigation
 
#navigation
Line 240: Line 243:
 
}
 
}
 
</style>
 
</style>
<!--IGEM LOGO-->
+
<!--IGEM LOGO-->
 
<style type="text/css">
 
<style type="text/css">
 
#logoContainer {
 
#logoContainer {
Line 248: Line 251:
 
}
 
}
 
</style>
 
</style>
<!--NUDT_Container-->
+
<!--NUDT_Container-->
 
<style type="text/css">
 
<style type="text/css">
 
#NUDT_Container
 
#NUDT_Container
Line 255: Line 258:
 
width: auto;
 
width: auto;
 
margin: 30px 180px;
 
margin: 30px 180px;
padding: 30px 0px;
+
padding: 0px 0px 30px 0px;
 
font-family: 'verdana',sans-serif;
 
font-family: 'verdana',sans-serif;
 
background: #fff;
 
background: #fff;
 
box-shadow: 0 3px 8px rgba(0,0,0,.1);
 
box-shadow: 0 3px 8px rgba(0,0,0,.1);
 
position: relative;
 
position: relative;
 +
}
 +
#NUDT_Container table{
 +
position: center;
 +
border: 10px;
 +
}
 +
#NUDT_Container td{
 +
text-align: center;
 
}
 
}
 
#NUDT_Container ul
 
#NUDT_Container ul
Line 297: Line 307:
 
padding:4px 8px;
 
padding:4px 8px;
 
letter-spacing: -1px;
 
letter-spacing: -1px;
text-transform: uppercase;
 
 
position: relative;
 
position: relative;
 
}
 
}
Line 303: Line 312:
 
font:bold 28px/12px 'verdana',sans-serif;
 
font:bold 28px/12px 'verdana',sans-serif;
 
border-left: 10px solid #444;
 
border-left: 10px solid #444;
 +
line-height:28px;
 
}
 
}
 
#NUDT_Container h2 {
 
#NUDT_Container h2 {
font:bold 24px/10px 'verdana',sans-serif;
+
font:bold 20px/6px 'verdana',sans-serif;
border-left: 20px solid #444;
+
border-left: 30px solid #444;
 +
line-height:20px;  
 
}
 
}
 
#NUDT_Container h3 {
 
#NUDT_Container h3 {
font:bold 22px/8px 'verdana',sans-serif;
+
font:bold 16px/4px 'verdana',sans-serif;
border-left: 30px solid #444;
+
padding-left: 50px;
 +
line-height:16px;  
 
}
 
}
#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*/
 
/*CASE*/
 
#NUDT_Container ca {
 
#NUDT_Container ca {
Line 335: Line 339:
 
font-size: 16px;
 
font-size: 16px;
 
}
 
}
</style>
+
#NUDT_Container team {
  <!--TIME-->
+
position: relative;
  <style type="text/css">
+
display: inline-block;
  *, *:after, *:before {
+
width: auto;
  -webkit-box-sizing: border-box;
+
height: auto;
  -moz-box-sizing: border-box;
+
margin: 10px 50px;
  box-sizing: border-box;
+
    padding: 20px 20px;
  }
+
    text-decoration: none;
    img {
+
color: #000000;
      max-width: 100%;
+
border-radius: 8px 8px;
    }
+
outline: none;
    .cd-container {
+
cursor: pointer;
      /* 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 */
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
      width: 90%;
+
font-size: 16px;
      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 {
+
</style>
      position: relative;
+
<!--DIA_Container-->
      margin-left: 60px;
+
<style type="text/css">
      background: #e5e6e7;
+
#NUDT_Dia_Container
      border-radius: 0.25em;
+
{
      padding: 1em;
+
width: auto;
      box-shadow: 0 3px 0 #abafb2;
+
margin: 0px 100px;
    }
+
}
    .cd-timeline-content:after {
+
</style>
      content: "";
+
<!--BLANK_Container-->
      display: table;
+
<style type="text/css">
      clear: both;
+
.BLANK_Container
    }
+
{
    .cd-date {
+
width: auto;
    font-family: Athelas;
+
}
    }
+
</style>
    .cd-timeline-content h6 {
+
<!--TEAM-->
      color: #ffffff;
+
<style type="text/css">
    }
+
.team_Container
    .cd-timeline-content h6:hover {
+
{
      color: #d82545;
+
margin: 20px 10px;
    }
+
padding: 20px 10px;
    .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
width: auto;
      font-size: 13px;
+
}
      font-size: 0.8125rem;
+
</style>
    }
+
<!--NUDT_Footer-->
    .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
<style type="text/css">
      display: inline-block;
+
#NUDT_Footer
    }
+
{
    .cd-timeline-content p {
+
clear: both;
      margin: 1em 0;
+
width: auto;
      line-height: 1.6;
+
padding: 30px 0px;
    }
+
font-family: 'verdana',sans-serif;
    .cd-timeline-content .cd-date {
+
position: relative;
      float: left;
+
}
      padding: .8em 0;
+
#NUDT_Footer p{
      opacity: .7;
+
text-decoration: none;
    }
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
    .cd-timeline-content::before {
+
color: #000000;
      content: '';
+
position: relative;
      position: absolute;
+
padding: 10px 50px;
      top: 16px;
+
font-size: 16px;
      right: 100%;
+
}
      height: 0;
+
</style>
      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-->
 
<!--Common-->
<div id = "mainContainer">
+
<div id = "myMainContainer">
<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">
 
<div id = "menu">
 
<img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/>  
 
<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 = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li>
 +
<li><a id = "TEAM" href="https://2015.igem.org/Team:NUDT_CHINA/Team"><span>TEAM</span></a></li>
 
 
 
<li><a id = "PROJECT" href = "#"><span>PROJECT</span></a></li>
 
<li><a id = "PROJECT" href = "#"><span>PROJECT</span></a></li>
Line 601: Line 416:
 
<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 = "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 = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"  class = "b"><span>Composite Parts</span></a></li>
 +
<li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Part_Collection"  class = "b"><span>Part Collection</span></a></li>
  
  
Line 609: Line 425:
 
<li><a id = "SAFETY" href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><span>SAFETY</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 = "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>
 
    <div id = "logoContainer">
 
    <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>
 
    <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>
 
    </div>
<link href="https://2015.igem.org/Team:NEFU_China/cleariGEM.css?action=raw&ctype=text/css" rel="stylesheet" /> </head>
+
<link href="https://2015.igem.org/Team:NEFU_China/cleariGEM?action=raw&ctype=text/css" rel="stylesheet" /> </head>
 
</html>
 
</html>
 
<html>
 
<html>
<body>
 
 
<!--Main Container-->
 
<!--Main Container-->
 
<div id = "NUDT_Container" class = "clearStyle">
 
<div id = "NUDT_Container" class = "clearStyle">
<section id="cd-timeline" class="cd-container">
+
<!--subCommon-->
<!--1-->
+
<div>
<div class="cd-timeline-block">
+
<img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style = "width: 100%; height: auto"/>
<div class="cd-timeline-img cd-picture" id = "pic1">
+
<img src="test.png" alt="Picture">
+
</div>
+
<div class="cd-timeline-content" id = "key1">
+
<h7 style = "color:black">Lorem ipsum dolor sit amet</h7>
+
<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>
+
<span class="cd-date" style="font-size:24px" >2015-01-06</span>
+
<script type="text/javascript">
+
$(document).ready(function(){
+
$("#key1").click(function(){
+
$("#cont1").slideToggle(300);
+
});
+
});
+
$(document).ready(function(){
+
$("#pic1").click(function(){
+
$("#cont1").slideToggle(300);
+
});
+
});
+
</script>
+
</div>
+
 
</div>
 
</div>
<!--2-->
+
<div>
<div class="cd-timeline-block">
+
<img src="https://static.igem.org/mediawiki/parts/f/fb/HOME_NUDT2015.jpg" style = "width: 100%; height: auto"/>
<div class="cd-timeline-img cd-picture" id = "pic2">
+
<img src="test.png" alt="Picture">
+
</div>
+
<div class="cd-timeline-content" id = "key2">
+
<h7 style = "color:black">Lorem ipsum dolor sit amet</h7>
+
<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>
+
<span class="cd-date" style="font-size:24px">2015-01-06</span>
+
<script type="text/javascript">
+
$(document).ready(function(){
+
$("#key2").click(function(){
+
$("#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>
 
</div>
Line 696: Line 445:
 
<div id = "navigation">
 
<div id = "navigation">
 
<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="#myMainContainer" class = "t"><span>TOP/TIP</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>
 +
<div id = "NUDT_Footer">
 +
<center>
 +
<p>Copyright © 2015 NUDT_CHINA | Powered by Nianhao Xie</p>
 +
</center>
 +
</div>
 
</body>
 
</body>
<img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style="display:none" />
 
 
</html>
 
</html>

Latest revision as of 03:42, 19 September 2015