Difference between revisions of "Team:CCU Taiwan"

Line 4: Line 4:
 
<head>
 
<head>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript?
 
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript?
Line 104: Line 105:
 
<body>
 
<body>
  
−
    <div id="fullPage">
+
<ul id="menu">
−
        <section class="section" id="section1">
+
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First slide</a></li>
−
            <video id="homelogo" loop muted data-autoplay>
+
    <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
−
              <source src="https://static.igem.org/mediawiki/2018/7/76/T--CCU_Taiwan--CCU_Taiwan_logo.mp4" type="video/mp4">
+
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
−
              <source src="https://static.igem.org/mediawiki/2018/7/7e/T--CCU_Taiwan--CCU_Taiwan_logo.webm" type="video/webm">
+
</ul>
−
            </video>
+
−
            <center><a href="#section2" class="scroll-down"><img src="https://static.igem.org/mediawiki/2018/3/3b/T--CCU_Taiwan--down_button.png" width="60" hieght="60"></a></center>
+
−
        </section>
+
−
        <section class="section" id="section2">
+
−
                <p class="first">CCU Taiwan Team</p>
+
−
                <p class="second">Project Description</p>
+
−
                <p class="description"> &emsp; 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.
+
−
                <br>
+
−
                <br>
+
  
−
                    &emsp; 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.
+
<div id="fullpage">
−
                <br>
+
    <div class="section " id="section0">
−
                <br>
+
        <h1>Section 1</h1>
−
 
+
    </div>
−
                    &emsp; 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.
+
    <div class="section active" id="section1">
−
                 <br>
+
        <div class="slide" id="slide1">
−
                 <br>
+
            <div class="intro">
−
 
+
                <h1>Slide 2.1</h1>
−
                     &emsp; 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.
+
            </div>
 +
        </div>
 +
        <div class="slide active" id="slide2">
 +
            <div class="intro">
 +
                 <h1>Slide 2.2</h1>
 +
                 <p>
 +
                     We are using the class `active` on this section and in this particular horizontal slide. This way it will appear on the viewport on page load, instead of the 1st section 1st slide.
 
                 </p>
 
                 </p>
−
         </section>
+
                <p>You can apply the same logic to horizontal slides</p>
 +
            </div>
 +
        </div>
 +
        <div class="slide" id="slide3">
 +
            <h1>Slide 2.3</h1>
 +
         </div>
  
−
        <section class="section" id="section3">
 
−
            <video id="partvideo" loop muted data-autoplay>
 
−
              <source src="https://static.igem.org/mediawiki/2018/9/92/T--CCU_Taiwan--ccupartsvideo.mp4" type="video/mp4">
 
−
              <source src="https://static.igem.org/mediawiki/2018/3/3e/T--CCU_Taiwan--ccupartsvideo.webm" type="video/webm">
 
−
            </video>
 
−
        </section>
 
 
     </div>
 
     </div>
 +
    <div class="section" id="section2">
 +
        <div class="intro">
 +
            <h1>Section 3</h1>
 +
        </div>
 +
    </div>
 +
</div>
 +
 +
<script type="text/javascript" src="https://2018.igem.org/Team:CCU_Taiwan/fullpagejs1"></script>
 +
<script type="text/javascript">
 +
    var myFullpage = new fullpage('#fullpage', {
 +
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
 +
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
 +
        menu: '#menu',
 +
        lazyLoad: true
 +
    });
 +
</script>
 +
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 08:04, 7 August 2018

Section 1

Slide 2.1

Slide 2.2

We are using the class `active` on this section and in this particular horizontal slide. This way it will appear on the viewport on page load, instead of the 1st section 1st slide.

You can apply the same logic to horizontal slides

Slide 2.3

Section 3