Difference between revisions of "Team:NUDT CHINA/Safety"

Line 1: Line 1:
−
<html xmlns="http://www.w3.org/1999/xhtml">
+
{{NUDT_CHINA}}
 +
<html lang="en">
 
<head>
 
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
    <meta charset="utf-8">
−
<title></title>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<meta name="keywords" content="" />
+
    <link rel="stylesheet" href="basic.css">
−
<meta name="description" content="" />
+
    <style type="text/css">
−
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
+
p {font-variant: stacked-fractions;
−
 
+
font-size: large;}
−
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
+
.pure-g p{font-variant: stacked-fractions;
 +
font-size: large;}
 +
.main-title{padding-top:50%; padding-bottom:50%;width:100%;}
 +
.main{width:90%;}
 +
.main-title::before {
 +
content: '';
 +
width: 20vw;
 +
height: 20vw;
 +
min-width: 3.5em;
 +
min-height: 3.5em;
 +
background: url(https://static.igem.org/mediawiki/2017/f/fe/T-NUDT_CHINA-BigTitle.svg) no-repeat center center;
 +
background-size: cover;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
border-radius: 50%;
 +
z-index: 3;
 +
-webkit-transform: translate3d(-50%,-50%,0);
 +
transform: translate3d(-50%,-50%,0);}
 +
.large-header {
 +
background-image: url('https://static.igem.org/mediawiki/2017/d/d9/T-NUDT_CHINA-bigheader-Safety.jpg');}
  
 +
    </style>
 
</head>
 
</head>
−
<head>
+
 
−
<style type="text/css">
+
  <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 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/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/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>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</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  class="pure-menu-heading" 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">Sliver 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 and 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>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 +
              <ul class="pure-menu-children" id="award_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
            </ul>
 +
            </li>
 +
               
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="main">
 +
        <div id="large-header" class="large-header">
 +
                    <canvas id="demo-canvas"></canvas>
 +
                    <h1 class="main-title">Safety</span></h1>
 +
                </div>
 +
       
  
−
html, body
+
        <div class="content" style="width: 74%">
−
{
+
       
−
height: 100%;
+
</div>
−
}
+
</div></div>
  
−
body
+
<script type="text/javascript">
−
{
+
function send(num) {
−
margin: 0px;
+
  var openClass = 'is-open';
−
padding: 0px;
+
var add1=document.getElementById(num);
−
background: #2C383B;
+
var add2=document.getElementById('Lay'+num);
−
font-family: 'Source Sans Pro', sans-serif;
+
addClass(add1,openClass);
−
font-size: 11pt;
+
addClass(add2,openClass);
−
font-weight: 300;
+
function hasClass(element,csName){
−
color: #6c6c6c
+
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));  
−
}
+
　　　　};
−
 
+
function addClass(element,csName){
−
h1, h2, h3
+
　　　　　　　if(!hasClass(element,csName)){
−
{
+
−
margin: 0;
+
　　　　　　　　　element.className+=' '+csName;
−
padding: 0;
+
−
font-weight: 600;
+
　　　　　　}
−
color: #454445;
+
};}
−
}
+
function show(num) {
−
 
+
var openClass = 'is-open';
−
p, ol, ul
+
var remove1=document.getElementById(num);
−
{
+
var remove2=document.getElementById('Lay'+num);
−
margin-top: 0;
+
deleteClass(remove1,openClass);
−
}
+
deleteClass(remove2,openClass);
−
 
+
function hasClass(element,csName){
−
ol, ul
+
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));  
−
{
+
　　　　};
−
padding: 0;
+
　 function deleteClass(element,csName){  
−
list-style: none;
+
if (hasClass(element,csName)) {
−
}
+
        var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)");
−
 
+
        element.className = element.className.replace(reg, " ");
−
p
+
    }
−
{
+
};
−
line-height: 180%;
+
−
}
+
−
 
+
−
strong
+
−
{
+
−
}
+
−
 
+
−
a
+
−
{
+
−
color: #2C383B;
+
−
}
+
−
 
+
−
a:hover
+
−
{
+
−
text-decoration: none;
+
−
}
+
−
 
+
−
.container
+
−
{
+
−
margin: 0px auto;
+
−
width: 1200px;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Image Style                                                                  */
+
−
/*********************************************************************************/
+
−
 
+
−
.image
+
−
{
+
−
display: inline-block;
+
−
}
+
−
 
+
−
.image img
+
−
{
+
−
display: block;
+
−
width: 100%;
+
−
}
+
−
 
+
−
.image-full
+
−
{
+
−
display: block;
+
−
width: 100%;
+
−
margin: 0 0 2em 0;
+
−
}
+
−
 
+
−
.image-left
+
−
{
+
−
float: left;
+
−
margin: 0 2em 2em 0;
+
−
}
+
−
 
+
−
.image-centered
+
−
{
+
−
display: block;
+
−
margin: 0 0 2em 0;
+
−
}
+
−
 
+
−
.image-centered img
+
−
{
+
−
margin: 0 auto;
+
−
width: auto;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* List Styles                                                                  */
+
−
/*********************************************************************************/
+
−
 
+
−
ul.style1
+
−
{
+
−
margin: 0;
+
−
padding: 0em 0em 0em 0em;
+
−
overflow: hidden;
+
−
list-style: none;
+
−
color: #6c6c6c
+
−
}
+
−
 
+
−
ul.style1 li
+
−
{
+
−
overflow: hidden;
+
−
display: block;
+
−
padding: 2.80em 0em;
+
−
border-top: 1px solid #D1CFCE;
+
−
}
+
−
 
+
−
ul.style1 li:first-child
+
−
{
+
−
padding-top: 0;
+
−
border-top: none;
+
−
}
+
−
 
+
−
ul.style1 .image-left
+
−
{
+
−
margin-bottom: 0;
+
−
}
+
−
 
+
−
ul.style1 h3
+
−
{
+
−
padding: 1.2em 0em 1em 0em;
+
−
letter-spacing: 0.10em;
+
−
text-transform: uppercase;
+
−
font-size: 1.2em;
+
−
font-weight: 600;
+
−
color: #454445;
+
−
}
+
−
 
+
−
ul.style1 a
+
−
{
+
−
text-decoration: none;
+
−
color: #525252;
+
−
}
+
−
 
+
−
ul.style1 a:hover
+
−
{
+
−
text-decoration: underline;
+
−
color: #525252;
+
−
}
+
−
 
+
−
ul.style2
+
−
{
+
−
margin: 0;
+
−
padding-top: 1em;
+
−
list-style: none;
+
−
}
+
−
 
+
−
ul.style2 li
+
−
{
+
−
border-top: solid 1px #E5E5E5;
+
−
padding: 0.80em 0 0.80em 0;
+
−
font-family: 0.80em;
+
−
}
+
−
 
+
−
ul.style2 li:before
+
−
{
+
−
display: inline-block;
+
−
padding: 4px;
+
−
background: #DB3256;
+
−
}
+
−
 
+
−
ul.style2 a
+
−
{
+
−
display: inline-block;
+
−
margin-left: 1em;
+
−
}
+
−
 
+
−
ul.style2 li:first-child
+
−
{
+
−
border-top: 0;
+
−
padding-top: 0;
+
−
}
+
−
 
+
−
ul.style2 .icon
+
−
{
+
−
color: #FFF;
+
−
}
+
−
 
+
−
ul.style3
+
−
{
+
−
margin: 0;
+
−
padding-top: 1em;
+
−
list-style: none;
+
−
}
+
−
 
+
−
ul.style3 li
+
−
{
+
−
border-top: solid 1px rgba(255,255,255,.2);
+
−
padding: 1em 0 1em 0;
+
−
font-family: 0.80em;
+
−
}
+
−
 
+
−
ul.style3 li:before
+
−
{
+
−
display: inline-block;
+
−
padding: 4px;
+
−
background: #FFF;
+
−
}
+
−
 
+
−
ul.style3 a
+
−
{
+
−
display: inline-block;
+
−
margin-left: 1em;
+
−
font-size: 1em !important;
+
−
color: #FFF;
+
−
}
+
−
 
+
−
ul.style3 li:first-child
+
−
{
+
−
border-top: 0;
+
−
padding-top: 0;
+
−
}
+
−
 
+
−
ul.style3 .icon
+
−
{
+
−
color: #DB3256;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Social Icon Styles                                                            */
+
−
/*********************************************************************************/
+
−
 
+
−
ul.contact
+
−
{
+
−
margin: 0;
+
−
padding: 2em 0em 0em 0em;
+
−
list-style: none;
+
−
}
+
−
 
+
−
ul.contact li
+
−
{
+
−
display: inline-block;
+
−
padding: 0em 0.30em;
+
−
font-size: 1em;
+
−
}
+
−
 
+
−
ul.contact li span
+
−
{
+
−
display: none;
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
 
+
−
ul.contact li a
+
−
{
+
−
color: #FFF;
+
−
}
+
−
 
+
−
ul.contact li a:before
+
−
{
+
−
display: inline-block;
+
−
background: #3f3f3f;
+
−
width: 40px;
+
−
height: 40px;
+
−
line-height: 40px;
+
−
border-radius: 20px;
+
−
text-align: center;
+
−
color: #FFFFFF;
+
−
}
+
−
 
+
−
ul.contact li a.icon-twitter:before
+
−
{
+
−
background: #2DAAE4;
+
−
}
+
−
 
+
−
ul.contact li a.icon-facebook:before
+
−
{
+
−
background: #39599F;
+
−
}
+
−
 
+
−
ul.contact li a.icon-dribbble:before
+
−
{
+
−
background: #C4376B;
+
−
}
+
−
 
+
−
ul.contact li a.icon-tumblr:before
+
−
{
+
−
background: #31516A;
+
−
}
+
−
 
+
−
ul.contact li a.icon-rss:before
+
−
{
+
−
background: #F2600B;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Button Style                                                                  */
+
−
/*********************************************************************************/
+
−
 
+
−
.button
+
−
{
+
−
display: inline-block;
+
−
padding: 1.3em 3em;
+
−
background: #2C383B;
+
−
-moz-transition: opacity 0.25s ease-in-out;
+
−
-webkit-transition: opacity 0.25s ease-in-out;
+
−
-o-transition: opacity 0.25s ease-in-out;
+
−
-ms-transition: opacity 0.25s ease-in-out;
+
−
transition: opacity 0.25s ease-in-out;
+
−
letter-spacing: 0.20em;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
−
font-weight: 600;
+
−
color: #FFF;
+
−
}
+
−
 
+
−
.button:hover
+
−
{
+
−
}
+
−
 
+
−
.button:active
+
−
{
+
−
}
+
−
 
+
−
.button-big
+
−
{
+
−
padding: 1.6em 4em;
+
−
font-size: 1.4em;
+
−
font-weight: 900;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Heading Titles                                                                */
+
−
/*********************************************************************************/
+
−
 
+
−
.title
+
−
{
+
−
margin-bottom: 3em;
+
−
}
+
−
 
+
−
.title h2
+
−
{
+
−
font-weight: 400;
+
−
font-size: 2.8em;
+
−
color: #323232;
+
−
}
+
−
 
+
−
.title .byline
+
−
{
+
−
letter-spacing: 0.15em;
+
−
text-transform: uppercase;
+
−
font-weight: 400;
+
−
font-size: 1.1em;
+
−
color: #6F6F6F;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Header                                                                        */
+
−
/*********************************************************************************/
+
−
+
−
#header-wrapper
+
−
{
+
−
background: #FFF;
+
−
}
+
−
 
+
−
#header
+
−
{
+
−
position: relative;
+
−
height: 100px;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Logo                                                                          */
+
−
/*********************************************************************************/
+
−
 
+
−
#logo
+
−
{
+
−
position: absolute;
+
−
top: 2em;
+
−
left: 0;
+
−
width: 100%;
+
−
}
+
−
 
+
−
#logo h1
+
−
{
+
−
display: inline-block;
+
−
font-size: 2.5em;
+
−
text-transform: uppercase;
+
−
font-weight: 700;
+
−
color: #2C383B;
+
−
padding-right: 0.50em;
+
−
border-right: 1px solid rgba(0,0,0,.3);
+
−
}
+
−
 
+
−
#logo span
+
−
{
+
−
position: absolute;
+
−
top: 1.4em;
+
−
display: inline-block;
+
−
padding-left: 1.50em;
+
−
letter-spacing: 0.10em;
+
−
text-transform: uppercase;
+
−
font-size: 0.90em;
+
−
}
+
−
 
+
−
#logo a
+
−
{
+
−
text-decoration: none;
+
−
color: #2C383B;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Menu                                                                          */
+
−
/*********************************************************************************/
+
−
 
+
−
#menu
+
−
{
+
−
position: absolute;
+
−
right: 0;
+
−
top: 0em;
+
−
}
+
−
 
+
−
#menu ul
+
−
{
+
−
display: inline-block;
+
−
}
+
−
 
+
−
#menu li
+
−
{
+
−
display: block;
+
−
float: left;
+
−
text-align: center;
+
−
line-height: 71px;
+
−
}
+
−
 
+
−
#menu li a, #menu li span
+
−
{
+
−
display: inline-block;
+
−
margin-left: 1px;
+
−
padding: 1em 1.5em;
+
−
letter-spacing: 0.10em;
+
−
text-decoration: none;
+
−
font-size: 1em;
+
−
text-transform: uppercase;
+
−
outline: 0;
+
−
color: #212121;
+
−
background: #ECECEC;
+
−
}
+
−
 
+
−
#menu li:hover a, #menu li.active a, #menu li.active span
+
−
{
+
−
}
+
−
 
+
−
#menu .current_page_item a
+
−
{
+
−
background: #2C383B;
+
−
color: #FFF;
+
−
}
+
−
 
+
−
#menu .icon
+
−
{
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Banner                                                                        */
+
−
/*********************************************************************************/
+
−
+
−
#banner-wrapper
+
−
{
+
−
overflow: hidden;
+
−
padding: 3em 0em;
+
−
background: #2C383B;
+
−
}
+
−
 
+
−
#banner
+
−
{
+
−
overflow: hidden;
+
−
width: 1000px;
+
−
padding: 0px 100px;
+
−
text-align: center;
+
−
color: rgba(255,255,255,.7);
+
−
}
+
−
 
+
−
#banner a
+
−
{
+
−
color: rgba(255,255,255,.9);
+
−
}
+
−
 
+
−
#banner .box-left
+
−
{
+
−
float: left;
+
−
}
+
−
 
+
−
#banner .box-right
+
−
{
+
−
float: right;
+
−
}
+
−
 
+
−
#banner h2
+
−
{
+
−
margin: 0em;
+
−
padding: 0em;
+
−
font-weight: 400;
+
−
font-size: 3em;
+
−
color: #555555;
+
−
}
+
−
 
+
−
#banner span
+
−
{
+
−
display: block;
+
−
padding-top: 0.20em;
+
−
text-transform: uppercase;
+
−
font-size: 1.2em;
+
−
color: #A2A2A2;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Page                                                                          */
+
−
/*********************************************************************************/
+
−
 
+
−
#wrapper
+
−
{
+
−
background: #FFF;
+
−
}
+
−
 
+
−
#page
+
−
{
+
−
overflow: hidden;
+
−
padding: 6em 0em;
+
−
border-bottom: 2px solid #E3E3E3;
+
−
text-align: center;
+
−
}
+
−
 
+
−
#page .button
+
−
{
+
−
margin-top: 2em;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Content                                                                      */
+
−
/*********************************************************************************/
+
−
 
+
−
#content
+
−
{
+
−
padding: 0em 7em;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Sidebar                                                                      */
+
−
/*********************************************************************************/
+
−
 
+
−
#sidebar
+
−
{
+
−
float: right;
+
−
width: 450px;
+
−
}
+
−
 
+
−
#stwo-col
+
−
{
+
−
margin-top: 2em;
+
−
}
+
−
 
+
−
#stwo-col h2
+
−
{
+
−
display: block;
+
−
padding-bottom: 1.5em;
+
−
letter-spacing: 0.10em;
+
−
text-transform: uppercase;
+
−
font-size: 1.2em;
+
−
font-weight: 600;
+
−
color: #454445;
+
−
}
+
−
 
+
−
#stwo-col .sbox1
+
−
{
+
−
float: left;
+
−
width: 210px;
+
−
}
+
−
 
+
−
#stwo-col .sbox2
+
−
{
+
−
float: right;
+
−
width: 210px;
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Copyright                                                                    */
+
−
/*********************************************************************************/
+
−
 
+
−
#copyright
+
−
{
+
−
overflow: hidden;
+
−
padding: 5em 0em;
+
−
border-top: 1px solid rgba(255,255,255,0.08);
+
−
}
+
−
 
+
−
#copyright p
+
−
{
+
−
letter-spacing: 0.20em;
+
−
text-align: center;
+
−
text-transform: uppercase;
+
−
font-size: 0.80em;
+
−
color: rgba(255,255,255,0.3);
+
−
}
+
−
 
+
−
#copyright a
+
−
{
+
−
text-decoration: none;
+
−
color: rgba(255,255,255,0.6);
+
−
}
+
−
 
+
−
/*********************************************************************************/
+
−
/* Featured                                                                      */
+
−
/*********************************************************************************/
+
−
 
+
−
#featured-wrapper
+
−
{
+
−
overflow: hidden;
+
−
padding: 5em 0em;
+
−
background: #FFF;
+
−
text-align: center;
+
−
}
+
−
 
+
−
#featured
+
−
{
+
−
overflow: hidden;
+
−
}
+
−
 
+
−
#featured .major
+
−
{
+
−
overflow: hidden;
+
−
margin-bottom: 3em;
+
−
padding-bottom: 2em;
+
−
border-bottom: 1px solid #E8E8E8;
+
−
}
+
−
 
+
−
#featured .major h2
+
−
{
+
−
font-size: 3em;
+
−
}
+
−
 
+
−
#featured .major .byline
+
−
{
+
−
font-size: 1.3em;
+
−
}
+
−
 
+
−
#featured .title
+
−
{
+
−
margin-bottom: 1.5em;
+
−
padding-bottom: 1.5em;
+
−
border-bottom: 1px solid #E3E3E3;
+
−
}
+
−
 
+
−
#featured .title h2
+
−
{
+
−
font-size: 1.2em;
+
−
}
+
−
 
+
−
#featured h2
+
−
{
+
−
text-align: center;
+
−
}
+
−
 
+
−
#featured .icon
+
−
{
+
−
position: relative;
+
−
display: inline-block;
+
−
width: 150px;
+
−
height: 150px;
+
−
background: #2C383B;
+
−
margin: 0px auto 20px auto;
+
−
line-height:  150px;
+
−
font-size: 5em;
+
−
text-align: center;
+
−
color: #FFF;
+
−
}
+
−
 
+
−
.column1, .column2,  .column3,  .column4
+
−
{
+
−
width: 282px;
+
−
}
+
−
 
+
−
.column1,  .column2
+
−
{
+
−
float: left;
+
−
margin-right: 24px;
+
−
}
+
−
 
+
−
.column3
+
−
{
+
−
float: left;
+
−
}
+
−
 
+
−
.column4
+
−
{
+
−
float: right;
+
−
}
+
−
 
+
−
 
+
−
#header-featured
+
−
{
+
−
height: 30em;
+
−
background-image: url(images/banner.jpg);
+
−
background-position: center;
+
−
background-size: cover;
+
 
}
 
}
  
 +
</script>
 +
<script type="text/javascript">
 +
( function(window,document){
  
−
#slider-wrapper
+
    var layout  = document.getElementById('layout'),
−
{
+
        menu    = document.getElementById('menu'),
−
padding: 6em 0em;
+
        menuLink = document.getElementById('menuLink'),
−
background: #DB3256;
+
        content  = document.getElementById('main');
−
}
+
  
−
#slider
+
    function toggleClass(element, className) {
−
{
+
        var classes = element.className.split(/\s+/),
−
margin: 0em auto 0em auto;
+
            length = classes.length,
−
width: 1200px;
+
            i = 0;
−
position: relative;
+
−
}
+
  
−
#slider .button
+
        for(; i < length; i++) {
−
{
+
          if (classes[i] === className) {
−
}
+
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
  
−
#slider .button:hover
+
        element.className = classes.join(' ');
−
{
+
    }
−
}
+
  
−
#slider .viewer
+
    function toggleAll(e) {
−
{
+
        var active = 'active';
−
width: 1000px;
+
−
height: 375px;
+
−
margin: 0 auto;
+
−
overflow: hidden;
+
−
}
+
  
−
#slider .viewer .reel
+
        e.preventDefault();
−
{
+
        toggleClass(layout, active);
−
display: none;
+
        toggleClass(menu, active);
−
height: 375px;
+
        toggleClass(menuLink, active);
−
}
+
    }
  
−
#slider .viewer .reel .slide
+
    menuLink.onclick = function (e) {
−
{
+
        toggleAll(e);
−
position: relative;
+
    };
−
width: 1000px;
+
−
height: 375px;
+
−
}
+
  
−
#slider .viewer .reel h2
+
    content.onclick = function(e) {
−
{
+
        if (menu.className.indexOf('active') !== -1) {
−
position: absolute;
+
            toggleAll(e);
−
top: 130px;
+
        }
−
left: 0;
+
    };
−
width: 1200px;
+
−
height: 80px;
+
−
line-height: 80px;
+
−
background: #111111;
+
−
text-align: center;
+
−
opacity: 0.85;
+
−
font-weight: normal;
+
−
color: #ffffff;
+
−
font-size: 2.25em;
+
−
}
+
  
−
#slider .viewer .reel p
+
}(this, this.document));
−
{
+
</script>
−
position: absolute;
+
−
top: 210px;
+
−
left: 0;
+
−
width: 1200px;
+
−
height: 40px;
+
−
line-height: 40px;
+
−
background: #0074C6;
+
−
text-align: center;
+
−
opacity: 0.85;
+
−
font-weight: normal;
+
−
color: #ffffff;
+
−
font-size: 1.1em;
+
−
}
+
  
−
#slider .icon
+
<script type="text/javascript" >
−
{
+
    function Show(tagId) {
−
font-size: 4em;
+
    if (document.getElementById(tagId).style.display=="none") {
−
color: #FFF;
+
    document.getElementById(tagId).style.display="block";
−
}
+
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
<script type="text/javascript" >
 +
(function() {
  
−
#slider .previous-button
+
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
−
{
+
−
position: absolute;
+
−
top: 150px;
+
−
left: 0;
+
−
}
+
  
−
#slider .next-button
+
    // Main
−
{
+
    initHeader();
−
position: absolute;
+
    addListeners();
−
top: 150px;
+
−
right: 0;
+
−
}
+
  
−
#slider .indicator
+
    function initHeader() {
−
{
+
        width = window.innerWidth;
−
margin: 30px auto 0 auto;
+
        height = window.innerHeight;
−
}
+
        target = {x: 0, y: height};
  
−
#slider .indicator ul
+
        largeHeader = document.getElementById('large-header');
−
{
+
        largeHeader.style.height = height+'px';
−
list-style: none;
+
−
padding: 0;
+
−
margin: 0;
+
−
text-align: center;
+
−
}
+
  
−
#slider .indicator ul li
+
        canvas = document.getElementById('demo-canvas');
−
{
+
        canvas.width = width;
−
display: inline-block;
+
        canvas.height = height;
−
width: 12px;
+
        ctx = canvas.getContext('2d');
−
height: 12px;
+
−
text-indent: -9999em;
+
−
background: #c8c8c8;
+
−
margin: 0 2px 0 2px;
+
−
border-radius: 8px;
+
−
border-bottom: solid 1px #ffffff;
+
−
border-top: solid 1px #909090;
+
−
}
+
  
−
#slider .indicator ul li.active
+
        // create particles
−
{
+
        circles = [];
−
background: #505050;
+
        for(var x = 0; x < width*0.5; x++) {
−
border-top: solid 1px #505050;
+
            var c = new Circle();
−
}
+
            circles.push(c);
 +
        }
 +
        animate();
 +
    }
  
−
/*********************************************************************************/
+
    // Event handling
−
/* Footer                                                                        */
+
    function addListeners() {
−
/*********************************************************************************/
+
        window.addEventListener('scroll', scrollCheck);
 +
        window.addEventListener('resize', resize);
 +
    }
  
−
#footer-wrapper
+
    function scrollCheck() {
−
{
+
        if(document.body.scrollTop > height) animateHeader = false;
−
overflow: hidden;
+
        else animateHeader = true;
−
padding: 7em 0em;
+
    }
−
color: rgba(255,255,255,0.5);
+
−
}
+
  
 +
    function resize() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        largeHeader.style.height = height+'px';
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
    }
  
−
#footer .title h2
+
    function animate() {
−
{
+
        if(animateHeader) {
−
font-size: 2em;
+
            ctx.clearRect(0,0,width,height);
−
font-weight: 300;
+
            for(var i in circles) {
−
color: #FFF;
+
                circles[i].draw();
−
}
+
            }
 +
        }
 +
        requestAnimationFrame(animate);
 +
    }
  
−
#footer .title .byline
+
    // Canvas manipulation
−
{
+
    function Circle() {
−
display: block;
+
        var _this = this;
−
padding-top: 1em;
+
−
text-transform: uppercase;
+
−
font-size: 0.80em;
+
−
color: rgba(255,255,255,0.5);
+
−
}
+
  
−
#footer .column1,
+
        // constructor
−
#footer .column2
+
        (function() {
−
{
+
            _this.pos = {};
−
width: 560px;
+
            init();
−
}
+
            console.log(_this);
 +
        })();
  
−
#footer .column1
+
        function init() {
−
{
+
            _this.pos.x = Math.random()*width;
−
float: left;
+
            _this.pos.y = height+Math.random()*100;
−
}
+
            _this.alpha = 0.1+Math.random()*0.3;
 +
            _this.scale = 0.1+Math.random()*0.3;
 +
            _this.velocity = Math.random();
 +
        }
  
−
#footer .column2
+
        this.draw = function() {
−
{
+
            if(_this.alpha <= 0) {
−
float: right;
+
                init();
−
}
+
            }
 +
            _this.pos.y -= _this.velocity;
 +
            _this.alpha -= 0.0005;
 +
            ctx.beginPath();
 +
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
 +
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
 +
            ctx.fill();
 +
        };
 +
    }
  
−
#footer .button
+
})();
−
{
+
</script>
−
margin-top: 2em;
+
−
}
+
−
 
+
−
#extra
+
−
{
+
−
overflow: hidden;
+
−
margin: 5em auto 2em auto;
+
−
padding: 2em 0em 2em 0em;
+
−
background: #ECECEC;
+
−
}
+
−
 
+
−
#extra h2
+
−
{
+
−
margin: 0em;
+
−
padding: 0em;
+
−
font-weight: 400;
+
−
font-size: 2.4em;
+
−
color: #555555;
+
−
}
+
−
 
+
−
#extra span
+
−
{
+
−
display: block;
+
−
padding-top: 0.20em;
+
−
text-transform: uppercase;
+
−
font-size: 1.2em;
+
−
color: #A2A2A2;
+
−
}
+
−
 
+
−
 
+
−
#extra2
+
−
{
+
−
margin-top: 5em;
+
−
}
+
−
 
+
−
#extra2 .button
+
−
{
+
−
margin-top: 2em;
+
−
}
+
−
 
+
−
#extra2 .title h2
+
−
{
+
−
font-size: 2em;
+
−
}
+
−
 
+
−
#extra2 .title .byline
+
−
{
+
−
font-size: 0.80em;
+
−
}
+
−
 
+
−
#extra2 #ebox1,
+
−
#extra2 #ebox2
+
−
{
+
−
width: 560px;
+
−
}
+
−
 
+
−
#extra2  #ebox1
+
−
{
+
−
float: left;
+
−
}
+
−
 
+
−
#extra2 #ebox2
+
−
{
+
−
float: right;
+
−
}
+
−
 
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<div id="header-wrapper">
+
−
<div id="header" class="container">
+
−
<div id="logo">
+
−
<h1><a href="#">Escalier</a></h1>
+
−
<span>By <a href="http://templated.co">TEMPLATED</a></span>
+
−
</div>
+
−
<div id="menu">
+
−
<ul>
+
−
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
+
−
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
+
−
<li><a href="#" accesskey="3" title="">About Us</a></li>
+
−
<li><a href="#" accesskey="4" title="">Careers</a></li>
+
−
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div id="header-featured"> </div>
+
−
<div id="banner-wrapper">
+
−
<div id="banner" class="container">
+
−
<p>This is <strong>Escalier</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>
+
−
<div id="wrapper">
+
−
<div id="featured-wrapper">
+
−
<div id="featured" class="container">
+
−
<div class="column1"> <span class="icon icon-key"></span>
+
−
<div class="title">
+
−
<h2>Maecenas lectus sapien</h2>
+
−
</div>
+
−
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
+
−
</div>
+
−
<div class="column2"> <span class="icon icon-legal"></span>
+
−
<div class="title">
+
−
<h2>Praesent scelerisque</h2>
+
−
</div>
+
−
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
+
−
</div>
+
−
<div class="column3"> <span class="icon icon-unlock"></span>
+
−
<div class="title">
+
−
<h2>Fusce ultrices fringilla</h2>
+
−
</div>
+
−
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
+
−
</div>
+
−
<div class="column4"> <span class="icon icon-wrench"></span>
+
−
<div class="title">
+
−
<h2>Etiam posuere augue</h2>
+
−
</div>
+
−
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
+
−
</div>
+
−
</div>
+
−
<div id="extra" class="container">
+
−
<h2>Maecenas vitae orci vitae tellus feugiat eleifend</h2>
+
−
<span>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh</span> </div>
+
−
+
−
<div id="extra2" class="container">
+
−
<div id="ebox1">
+
−
<div class="title">
+
−
<h2>Fusce ultrices fringilla</h2>
+
−
<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
+
−
</div>
+
−
<p>Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.</p>
+
−
<a href="#" class="button">Etiam posuere</a>
+
−
</div>
+
−
 
+
−
<div id="ebox2">
+
−
<div class="title">
+
−
<h2>Donec dictum metus</h2>
+
−
<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
+
−
</div>
+
−
<p>Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.</p>
+
−
<a href="#" class="button">Etiam posuere</a>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
</div>
+
−
<div id="copyright" class="container">
+
−
<p>&copy; Untitled. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
+
−
</div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:29, 28 October 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