Difference between revisions of "Team:CCU Taiwan"

Line 1: Line 1:
−
{{CCU_Taiwan}}
+
.container {
−
<html>
+
position: fixed;
−
 
+
width: 100%;
−
<head>
+
margin-top: 0;
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
background: #000000;
−
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+
height: 55px;
−
    <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript?
+
     padding-top:10px;
−
action=raw&ctype=text/javascript"></script>
+
z-index:3;
−
     <script>
+
}
−
    window.onscroll = function() { myFunction() };
+
nav {
−
 
+
    margin:0;
−
    function myFunction() {
+
padding:0;
−
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+
height: 55px;
−
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
}
−
        var scrolled = (winScroll / height) * 100;
+
nav ul {
−
        document.getElementById("myBar").style.height = scrolled + "%";
+
  margin: 0;
−
    }
+
  list-style: none;
−
 
+
  background:white;
−
    $(document).ready(function() {
+
}
−
        // Add smooth scrolling to all links
+
nav ul li {
−
        $("a").on('click', function(event) {
+
  float:left;
−
 
+
  display: inline-block;
−
            // Make sure this.hash has a value before overriding default behavior
+
  position: relative;
−
            if (this.hash !== "") {
+
  padding-top:10px;
−
                // Prevent default anchor click behavior
+
  margin-bottom:10px;
−
                event.preventDefault();
+
  width: 200px;
−
 
+
  height: 40px;
−
                // Store hash
+
  text-align:center;
−
                var hash = this.hash;
+
  margin-left:1.2vw;
−
 
+
  margin-right:1.2vw;
−
                // Using jQuery's animate() method to add smooth page scroll
+
}
−
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+
nav ul li ul{
−
                $('html, body').animate({
+
position:absolute;
−
                    scrollTop: $(hash).offset().top
+
padding-left:0px;
−
                }, 800, function() {
+
background:black;
−
 
+
}
−
                    // Add hash (#) to URL when done scrolling (default click behavior)
+
nav ul li ul li{
−
                    window.location.hash = hash;
+
margin-left: 0;
−
                });
+
position: relative;
−
            } // End if
+
text-align: center;
−
        });
+
float:none;
−
    });
+
display: none;
−
 
+
top:10px;
−
    $(window).on('scroll', function() {
+
     margin-top: 10px;
−
        if ($(window).scrollTop()) {
+
     margin-bottom:10px;
−
            $('.container').css('background', '#808080');
+
border-radius:1px;
−
            $('nav ul li ul').css('background', '#808080');
+
}
−
            $('nav').css('opacity', '1');
+
nav a {
−
        } else {
+
  color:#FFFFFF;
−
            $('.container').css('background', '#000000');
+
  font-family: monospace;
−
            $('nav ul li ul').css('background', '#000000');
+
  font-size: 23px;
−
            $('nav').css('opacity', '1');
+
  text-decoration: none;
−
        }
+
}
−
    });
+
/*nav a::before {
−
    $(document).ready(function() {
+
  content: '';
−
        $('#fullPage').fullpage({
+
  display: block;
−
            anchors: ['page1', 'page2', 'page3'],
+
  height: 3px;
−
            scrollingSpeed: 800,
+
  background-color: blue;
−
            navigation: true,
+
  position: absolute;
−
        });
+
  top: -7px;
−
     });
+
  width: 0%;
−
     </script>
+
  border-radius: 2px;
−
</head>
+
  transition: all ease-in-out 400ms;
−
                <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
+
}*/
−
            <div class="container">
+
nav ul li:hover {
−
                <ul>
+
background-color:#F5F5F5;
−
                    <li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan">Home</a>
+
transition: 200ms;
−
                        <ul>
+
}
−
                            <li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Team">Team Member</a></li>
+
nav a:hover{
−
                        </ul>
+
color:black;
−
                    </li>
+
}
−
                    <li class="title"><a href="#">Project</a>
+
/*nav a:hover::before {
−
<ul>
+
  width: 100%;
−
    <li><a href="https://2018.igem.org/Team:CCU_Taiwan/Human_Practice/Overview">Overview</a></li>
+
}*/
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Judge">Judge</a></li>
+
nav ul li:hover ul li{
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Collaborations">Collaboration</a></li>
+
display: block;
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Notebook">Notebook</a></li>
+
}
−
</ul>
+
−
</li>
+
−
                    <li class="title"><a href="#">Labortary</a>
+
−
                        <ul>
+
−
    <li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Experiments">Experiment</a></li>
+
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/InterLab">InterLab</a></li>
+
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Protocol">Protocol</a></li>
+
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Timeline">Timeline</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="title"><a href="#">Device</a>
+
−
                        <ul>
+
−
                            <li class="title"><a href="#">Our Plan</a></li>
+
−
                            <li class="title"><a href="#">Engineering</a></li>
+
−
<li class="title"><a href="https://2018.igem.org/Team:CCU_Taiwan/Model">Model</a></li>
+
−
<li class="title"><a href="#">Result</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="title"><a href="#">Human Practice</a>
+
−
                        <ul>
+
−
                            <li class="title"><a href="#">About Us</a></li>
+
−
<li><a href="#">Education</a></li>
+
−
<li><a href="#">Fund</a></li>
+
−
<li><a href="#">Business Model</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
        </nav>
+
−
<body>
+
−
    <header>
+
−
 
+
−
    </header>
+
−
    <div id="fullPage">
+
−
        <div class="section">
+
−
            <div class="parallax"></div>
+
−
            <!--<center><a href="#page2" class="scroll-down"><img src="https://static.igem.org/mediawiki/2018/4/4f/T--CCU_Taiwan--down.png" width="90" hieght="90"></a></center>-->
+
−
        </div>
+
−
        <div class="section" id="move">
+
−
            <div class="content">
+
−
                <p class="first">2018 CCU_Taiwan Team</p>
+
−
                <p class="second">Project Description</p>
+
−
                <p class="description">We are aiming to create eco-friendly ligneous cups. We hope that the cups we make are waterproof and heat-resistant; furthermore, they can be naturally decomposed. You might think why we waste our whole summer vacation on this little cup which would be thrown soon that people make the drink inside be empty? We will tell you the reason soon.</p>
+
−
                <p class="description">
+
−
                    The most common stores in Taiwan are handmade drink stores. For us, these handmade drinks are part of our lives. These drinks are often packed in disposable paper cups that are coated with petrochemical, such as PP and PE, to make them waterproof. Nonetheless, these substances produce a large amount of paper that is difficult to be recycled, which causes serious pollution to our environment. Thus, we decide to create a cup coated with substitute which can be naturally decomposed in order to solve the problems.
+
−
                </p>
+
−
                <p class="description">
+
−
                    Lignin, which can be found in most of the plants, is a polymer mainly composed of three kinds of monolignol: p-coumaryl alcohol (H), coniferyl alcohol (G), and sinapyl alcohol (S). The ratio of the three monolignols vary from species to species. These three monolignols can go through polymerization by adding two enzymes—peroxidase and laccase. Therefore, we aim to modify the yeast to produce these two enzymes. We use the enzyme to catalyze three monolignol and form high-purity lignin. We will make the most use of its waterproof characteristic to coat on the cups.
+
−
                </p>
+
−
                <p class="description">
+
−
                    The highlights of our project are innovative as well as eco- friendly. We hope we can make the most use of lignin and do our best to protect the environment. With our lignin cups, everyone will be able to enjoy the convenience without polluting the Mother Earth.
+
−
                </p>
+
−
            </div>
+
−
        </div>
+
−
        <div class="section">
+
−
            <img id="logo" src="https://scontent-tpe1-1.xx.fbcdn.net/v/t1.15752-9/s2048x2048/37022190_2047346258643649_966778790229311488_n.jpg?_nc_cat=0&oh=eeb28e4626a3c4f39cb4ef8df924aa9d&oe=5BE670C9">
+
−
        </div>
+
−
    </div>
+
−
</body>
+
−
 
+
−
</html>
+

Revision as of 08:29, 24 July 2018

.container { position: fixed; width: 100%; margin-top: 0; background: #000000; height: 55px; 

   padding-top:10px;

z-index:3; } nav { 

   margin:0;

padding:0; height: 55px; } nav ul { 

 margin: 0;
 list-style: none;
 background:white;

} nav ul li { 

 float:left;
 display: inline-block;
 position: relative;
 padding-top:10px;
 margin-bottom:10px;
 width: 200px;
 height: 40px;
 text-align:center;
 margin-left:1.2vw;
 margin-right:1.2vw;

} nav ul li ul{ position:absolute; padding-left:0px; background:black; } nav ul li ul li{ margin-left: 0; position: relative; text-align: center; float:none; display: none; top:10px; 

   margin-top: 10px;
   margin-bottom:10px;

border-radius:1px; } nav a { 

 color:#FFFFFF;
 font-family: monospace;
 font-size: 23px;
 text-decoration: none;

} /*nav a::before { 

 content: ;
 display: block;
 height: 3px;
 background-color: blue;
 position: absolute;
 top: -7px;
 width: 0%;
 border-radius: 2px;
 transition: all ease-in-out 400ms;

}*/ nav ul li:hover { background-color:#F5F5F5; transition: 200ms; } nav a:hover{ color:black; } /*nav a:hover::before { 

 width: 100%;

}*/ nav ul li:hover ul li{ display: block; }