Difference between revisions of "Team:CGU Taiwan/Description"

Line 1: Line 1:
−
{{CGU_Taiwan/clearwikiset}}
 
−
{{CGU_Taiwan/cgustyle}}
 
−
 
 
<html>
 
<html>
−
<head>
+
  <style>
−
<meta charset="UTF-8">
+
body {
−
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
+
background-color:white;
−
<title>iGem CGU_Taiwan 2017 - Project Description</title>
+
}
−
<link href="cgustyle.css" rel="stylesheet" type="text/css" />
+
 
−
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
+
/* nav css start*/
−
</head>
+
nav{
 +
 
 +
}
 +
 
 +
nav ul {
 +
height: 100px;
 +
    list-style-type: none;
 +
text-align: right;
 +
}
 +
 
 +
nav li {
 +
display:inline-block;
 +
}
 +
 
 +
nav li a{
 +
    display: inline-block;
 +
    color: #809bbb;
 +
    text-decoration: none;
 +
font-size: 18px;
 +
font-family: '微軟正黑體';
 +
padding: 40px 20px;
 +
transition: 0.5s;
 +
}
 +
 
 +
nav li.logo{
 +
display: inline-block;
 +
text-align: left;
 +
position: absolute;
 +
left: 100px;
 +
width: 307px;
 +
height: 100px;
 +
}
 +
 
 +
 
 +
nav li a:hover, .dropdown:hover .dropbtn {
 +
    background-color: #f1f1f1;
 +
}
 +
 
 +
nav li.dropdown {
 +
    display: inline-block;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 
 +
.dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
background-color: #f1f1f1;
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
/* nav css end*/
 +
 
 +
/* background animation start */
 +
.head{
 +
position:fixed;
 +
left:2%;
 +
transform:translateX(500px);
 +
display:block;
 +
text-align:right;
 +
float:right;
 +
height:2000px;
 +
width:1000px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/74/Cguheadsquare.png) -50px -425px no-repeat;
 +
z-index:-1;
 +
transition: 0.5s;
 +
}
 +
 
 +
.square{
 +
    position:fixed;
 +
    top:20%;
 +
    left:80%;
 +
    display:inline-block;
 +
    float:right;
 +
    height:40vw;
 +
    width:40vw;
 +
    background:url(https://static.igem.org/mediawiki/2017/8/89/Cgusquare_2.png) top left no-repeat;
 +
    background-size:contain;
 +
    z-index:-1;
 +
    transition: 0.5s;
 +
}
 +
 
 +
/* left menu start */
 +
.leftMenuBack{
 +
    position:fixed;
 +
    top:18%;
 +
    display:inline-block;
 +
    float:left;
 +
    width:20vw;
 +
  height:89vw;  background:url(https://static.igem.org/mediawiki/2017/7/70/LeftMenuBack.png) top left no-repeat;
 +
    background-size:contain;
 +
    z-index:-2;
 +
}
 +
 
 +
.leftMenu{
 +
    position:fixed;
 +
    top:18%;
 +
    display:inline-block;
 +
    float:left;
 +
width:10vw;
 +
height:auto;
 +
    /*null back ground*/
 +
    background:url(https://static.igem.org/mediawiki/2017/0/0d/Null.png) top left no-repeat;
 +
    background-size:contain;
 +
    z-index:1;
 +
/* transition: 1s; */
 +
}
 +
 
 +
.leftMenu ul {
 +
display: inline-block;
 +
text-align:center;
 +
margin:0px;
 +
padding:0px;
 +
list-style:none;
 +
font-size:13px;
 +
}
 +
 
 +
.leftMenu li {
 +
float:left;
 +
}
 +
 
 +
.leftMenu li a {
 +
display:block;
 +
text-decoration:none;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat;
 +
float:left;
 +
width:20vw;
 +
height:auto;
 +
text-align:center;
 +
text-indent:-300px;
 +
margin:0px;
 +
}
 +
 
 +
.leftMenu li.left1 a {
 +
width:20vw;
 +
height:11.9vw;
 +
background:url(https://static.igem.org/mediawiki/2017/c/c7/LeftMenuBio.png) top left no-repeat;
 +
    background-size:contain;
 +
}
 +
 
 +
.leftMenu li.left2 a {
 +
width:10vw;
 +
height:auto;
 +
background:url(https://static.igem.org/mediawiki/2017/e/e3/LeftMenuModel.png) top left no-repeat;
 +
    background-size:contain;
 +
}
 +
.leftMenu li.left3 a {
 +
width:10vw;
 +
height:auto;
 +
background:url(https://static.igem.org/mediawiki/2017/2/2f/LeftMenuDevice.png) top left no-repeat;
 +
    background-size:contain;
 +
}
 +
 
 +
.leftMenu li.left4 a {
 +
width:10vw;
 +
height:auto;
 +
background:url(https://static.igem.org/mediawiki/2017/6/68/LeftMenuMarketing.png) top left no-repeat;
 +
    background-size:contain;
 +
}
 +
 
 +
.leftMenu li.left1 a:hover {
 +
    width:20vw;
 +
height:11.9vw;
 +
    background:url(https://static.igem.org/mediawiki/2017/a/ae/LeftMenuBioB.png) left top no-repeat;
 +
    background-size:contain;
 +
}
 +
.leftMenu li.left2 a:hover {
 +
    width:10vw;
 +
height:auto;
 +
    background:url(https://static.igem.org/mediawiki/2017/2/2f/LeftMenuModelB.png) left top no-repeat;
 +
    background-size:contain;
 +
}
 +
.leftMenu li.left2 a:hover {
 +
    width:10vw;
 +
height:auto;
 +
    background:url(https://static.igem.org/mediawiki/2017/4/48/LeftMenuDeviceB.png) left top no-repeat;
 +
    background-size:contain;
 +
}
 +
.leftMenu li.left2 a:hover {
 +
    width:10vw;
 +
height:auto;
 +
    background:url(https://static.igem.org/mediawiki/2017/3/3f/LeftMenuMarketingB.png) left top no-repeat;
 +
    background-size:contain;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* right menu start */
 +
.rightmenuBack{
 +
    position:fixed;
 +
    top:18%;
 +
    display:inline-block;
 +
    float:left;
 +
    width:199.5px;
 +
    height:430px;
 +
    background:url(https://static.igem.org/mediawiki/2017/6/69/Cgurightmenu-back.png) top left no-repeat;
 +
    background-size:contain;
 +
    z-index:-2;
 +
}
 +
 
 +
.rightmenu{
 +
    position:fixed;
 +
    top:18%;
 +
    display:inline-block;
 +
    float:left;
 +
width:199.5px;
 +
height:143.33px;
 +
    background-size:contain;
 +
    z-index:1;
 +
/* transition: 1s; */
 +
}
 +
 
 +
.rightmenu ul {
 +
display: inline-block;
 +
text-align:center;
 +
margin:0px;
 +
padding:0px;
 +
list-style:none;
 +
font-size:13px;
 +
}
 +
 
 +
.rightmenu li {
 +
float:left;
 +
}
 +
 
 +
.rightmenu li a {
 +
display:block;
 +
text-decoration:none;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat;
 +
float:left;
 +
width:199px;
 +
height:143.33px;
 +
text-align:center;
 +
text-indent:-300px;
 +
margin:0px;
 +
}
 +
 
 +
.rightmenu li.right1 a {
 +
width:199px;
 +
height:143.33px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat;
 +
}
 +
 
 +
.rightmenu li.right2 a {
 +
width:199px;
 +
height:143.33px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) 0px -143.33px no-repeat;
 +
}
 +
 
 +
.rightmenu li.right3 a {
 +
width:199px;
 +
height:143.33px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) 0px -286.66px no-repeat;
 +
}
 +
 
 +
.rightmenu li.right1 a:hover {
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px 0px no-repeat;
 +
}
 +
 
 +
.rightmenu li.right2 a:hover {
 +
width:199px;
 +
height:143.33px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px -143.33px no-repeat;
 +
}
 +
 
 +
.rightmenu li.right3 a:hover {
 +
width:199px;
 +
height:143.33px;
 +
background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px -286.66px no-repeat;
 +
}
 +
 
 +
 
 +
/* right menu end */
 +
 
 +
/* background animation end */
  
−
<body bgcolor="White">
+
.description{
 +
margin:auto;
 +
padding-top: 50px;
 +
padding-left: 100px;
 +
padding-right: 100px;
 +
}
  
−
<!-- nav start -->
+
h1{
−
<div class="head"></div>
+
color:orange;
−
<div class="leftMenuBack">
+
text-align:center;
−
</div>
+
}
−
<nav>
+
−
<ul>
+
−
  <a href="https://2017.igem.org/Team:CGU_Taiwan"><li class="logo" style="text-align:left;"><img src="https://static.igem.org/mediawiki/2017/7/7e/CGULOGO0930.png" height="100px" width="307px"/></li></a>
+
−
  <!--<li><a href="index.html">HOME</a></li>
+
−
  | -->
+
−
  <li class="dropdown"><a href="https://2017.igem.org/Team:CGU_Taiwan/Description">PROJECT</a>
+
−
      <div class="dropdown-content">
+
−
      <a href="https://2017.igem.org/Team:CGU_Taiwan/Description">DESCRIPTION</a>
+
−
      <a href="https://2017.igem.org/Team:CGU_Taiwan/Result">RESULTS</a>
+
−
      <a href="#">PROOF</a>
+
−
      <a href="#">PART</a>
+
−
      </div>
+
−
  </li>
+
−
  |
+
−
  <li class="dropdown"><a href="https://2017.igem.org/Team:CGU_Taiwan/Notebook">NOTEBOOK</a>
+
−
      <div class="dropdown-content">
+
−
      <a href="https://2017.igem.org/Team:CGU_Taiwan/Notebook">LAB NOTE</a>
+
−
      <a href="#">PROTOCOLS</a>
+
−
      <a href="#">SATEFY</a>
+
−
      </div>
+
−
  </li>
+
−
  |
+
−
  <li class="dropdown"><a href="">TEAM</a>
+
−
      <div class="dropdown-content">
+
−
      <a href="#">ATTRIBUTION</a>
+
−
      <a href="#">MEMBER</a>
+
−
      <a href="#">SPONSOR</a>
+
−
      <a href="#">COLLBORATION</a>
+
−
      </div>
+
−
  </li>
+
−
  |
+
−
  <li class="dropdown"><a href="">HUMAN PRACTICE</a></li>
+
−
  |
+
−
  <li><a href="">AWARD</a></li>
+
−
 
+
−
</ul>
+
−
</nav>
+
  
−
<script type="text/javascript">
+
.description p{
−
$(window).scroll(function() {
+
margin:auto;
 +
padding-top: 20px;
 +
padding-left: 120px;
 +
padding-right: 120px;
 +
        font-size: 200%;
 +
}
  
−
    //After scrolling 100px from the top...
 
−
    if ( $(window).scrollTop() >= 75 ) {
 
−
$('.head').css('transform-origin', 'right');
 
−
        $('.head').css('transform', 'translateX(500px) rotate(20deg)');
 
−
    //Otherwise remove inline styles and thereby revert to original stying
 
−
    } else {
 
−
        $('.head').css('transform', 'translateX(500px) ');
 
−
    }
 
−
 
−
if ( $(window).scrollTop() >= 0 ) {
 
−
        var d = "deg)";
 
−
        var rot = "rotate(";
 
−
        var rD = Math.floor(($(window).scrollTop())/200) * 90;
 
−
        var rDC = rD.toString();
 
−
        rot = rot.concat(rDC.concat(d));
 
−
        $('.square').css('transform', rot);
 
−
    } else {
 
−
        $('.square').css('transform', 'none');
 
−
    }
 
−
 
−
 
−
})
 
−
;
 
−
</script>
 
−
<!-- nav end -->
 
  
−
<!--background animation start -->
+
/* footer css start*/
 +
footer{
 +
width: 100%;
 +
height: 100px;
 +
text-align: right;
 +
box-sizing: border-box;
 +
}
  
−
<div class="leftMenu">
+
footer ul{
−
<ul>
+
display: block;
−
<li class="left1"><a href=""></a></li>
+
width: 100%;
−
<li class="left2"><a href=""></a></li>
+
height: 100px;
−
<li class="left3"><a href=""></a></li>
+
text-align: right;
−
<li class="left4"><a href=""></a></li>
+
box-sizing: border-box;
−
</ul>
+
}
−
</div>
+
  
−
<div class="square"></div>
+
footer ul li{
−
<!--background animation end -->
+
display:inline-block;
 +
text-decoration: none;
 +
font-size: 15px;
 +
font-family: '微軟正黑體';
 +
}
  
−
<!-- Project Description start -->
+
/* footer css end*/
−
<div class="description" style="text-align:center">
+
−
<h1>Description</h1>
+
−
  <p>Paper is one of the most common natural resources we used in everyday life. The invention of paper allowed human to record knowledge and spread information rapidly. In modern world, the enormous amount of paper usage is decreasing the tree density around the globe. Paper reuse is a strategy of reducing tree cut, but recycling paper isn’t an easy job. Paper are made of different fibers depending on the manufacturing process, and printed with different inks. These reasons increase the difficulty of turning the pulp clean and ready for use. Deinking is the process which separates the ink and paper fiber during the cleanup of reprocessed paper pulp. The deinking process in the industry use chemical reagents like detergent, alkali which would cause water pollution and air pollution. Our plan is to replace the chemical reagents with biological enzymes, turning the waste into an environmentally friendly organic compound. We are going to create a controllable enzyme secrete system which would extend the limit of deinking and be more eco-friendly. </p>
+
−
  <p><img src="https://static.igem.org/mediawiki/2017/b/bf/CguLab1.jpeg" width="244" height="433"><img src="https://static.igem.org/mediawiki/2017/8/81/CguLab2.jpeg" width="244" height="433"></p>
+
−
</div>
+
−
<!-- Project Description end -->
+
  
−
<!-- footer start -->
+
  </style>
−
<footer align="right"> 
+
−
<ul>
+
−
<li><a href="http://www.cgu.edu.tw"><img src="https://static.igem.org/mediawiki/2017/1/13/Cgucopyright0915.png" width="40%"></a></li>
+
−
</ul>   
+
−
</footer>
+
−
<!-- footer end -->
+
−
</body>
+
 
</html>
 
</html>

Revision as of 15:00, 18 October 2017