Team:NTU Taiwan/test.html

From 2013.igem.org

(Difference between revisions)
(Replaced content with "File:NTU_TAIWAN_Beaker.png")
 
(4 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
[[File:NTU_TAIWAN_Beaker.png]]
-
<html style="overflow: hidden;">
+
-
    <head>
+
-
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
-
        <title>iGem2013 NTU-Taiwan</title>
+
-
 
+
-
        <link href="./stylesheets/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/bootstrap-responsive.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/bootstrap-lightbox.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/style.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/m-styles.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/font-awesome.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/dp_calendar.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
        <link href="./stylesheets/font.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
       
+
-
        <script>
+
-
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+
-
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+
-
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+
-
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
-
 
+
-
            ga('create', 'UA-42671084-1', 'herokuapp.com');
+
-
            ga('send', 'pageview');
+
-
        </script>
+
-
 
+
-
        <style type="text/css">
+
-
            #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
-
                display:none;
+
-
            }
+
-
            #top-section {
+
-
                border: none;
+
-
                height: 0px;
+
-
            }
+
-
            #content {
+
-
                border: none;
+
-
            }
+
-
            #menubar > ul > li:last-child {
+
-
                display: none;
+
-
            }
+
-
            .left-menu:hover {
+
-
                background-color: transparent;}
+
-
            #menubar li a {
+
-
                background-color: transparent;}
+
-
            #menubar:hover {
+
-
                color: white;}
+
-
            #menubar li a {
+
-
                color: transparent;}
+
-
            #menubar:hover li a {
+
-
                color: white;}
+
-
        </style>
+
-
    </head>
+
-
 
+
-
    <body data-spy="scroll" data-target=".navbar" data-offset="64" onload="$.stellar();" style="">
+
-
        <div id="preloader" style="display: none;">
+
-
            <div id="status" style="display: none;">&nbsp;</div>
+
-
        </div>
+
-
    <!--start navigation-->
+
-
        <div class="navbar navbar-fixed-top" id="navigation">
+
-
            <div class="navbar-inner">
+
-
                <div class="container">
+
-
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
-
                        <span class="icon-bar"></span>
+
-
                        <span class="icon-bar"></span>
+
-
                        <span class="icon-bar"></span>
+
-
                    </a>
+
-
                    <a href="#intro" class="brand">
+
-
                        <img src="./img/logo-dark.png" alt=""></a>
+
-
                    <div class="nav-collapse collapse">
+
-
                        <ul class="nav pull-right">
+
-
                            <li class="active"><a href="#intro"><i class="icon-home"> Home </i></a> </li>
+
-
                            <li><a href="#basic-top">Intro</a></li>
+
-
                            <li><a href="#igem-top">IGEM</a></li> 
+
-
                           
+
-
                            <li><a href="#works-top">Works</a></li>
+
-
 
+
-
                            <!-- <li class="dropdown-submenu">
+
-
                                <a tabindex="-1" href="#works-top">Works</a>
+
-
                                <ul class="dropdown-menu">
+
-
                                    <li><a href="#basic-top">Intro</a></li>
+
-
                                    <li><a href="#igem-top">IGEM</a></li>
+
-
                                    <li><a href="#works-top">Works</a></li>
+
-
                                </ul>
+
-
                            </li> -->
+
-
                           
+
-
                            <li><a href="#gallery-top">Gallery</a></li>
+
-
                            <li><a href="#team-top">Team</a></li>
+
-
                            <li><a href="#calendar-top">Calendar</a></li>
+
-
                            <li><a href="#contact-top">Contact</a></li>
+
-
                        </ul>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </div>
+
-
 
+
-
        <section id="intro">
+
-
            <div id='intro-background'></div>
+
-
            <div class="container">
+
-
                <div class="row">
+
-
                    <div class="span8 offset2 margin25">
+
-
                        <div id="carousel_fade_intro" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner">
+
-
                                <div class="inactive item active">
+
-
                                    <h2><b>iGem 2013-NTU Taiwan</b></h2>
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <h2>Working with Thermo-Generated Bacteria</h2>
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <h2>and apps with knowledge of iGem.</h2>
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <h2>Let's go!!</h2>
+
-
                                </div>
+
-
                            </div>
+
-
                        </div>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
            <div class="fadeInUp delay animated hidden-phone" id="more">
+
-
                <a href="#basic-top" class="m-btn a-btn red big icn-only"><i class="icon-sort-down icon-3x pull-left"></i></a>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
 
+
-
    <!--start basic header-->
+
-
        <section id="basic-top">
+
-
    <!--start basic-desktop header-->
+
-
            <section id="basic-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">Intro</h1>
+
-
                <p class="header">Our goal</p>
+
-
            </section>
+
-
    <!--start basic-mobile header-->
+
-
            <section id="basic-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">IGEM</h1>
+
-
                <p class="header">Our goal</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start basic-->
+
-
        <section id="basic">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span12">
+
-
                        <ul class="thumbnails">
+
-
                            <li class="span">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-user-md icon-emphasize"></i>
+
-
                                    <h4>Abstract</h4>
+
-
                                    <span>What we are doing</span>
+
-
                                    <p>In Taiwan, fish farmers lose a large amount of fish because temperature falls dramatically when cold current comes in winter. Ofcourse, fish farmers try to prevent fish from death dying; however, the current methods do not work well moreover, they cause damage to the environment.
+
-
                                    In 2013 iGEM competition, NTU-Taiwan team tries to make a bio-heating device. We transform the UCP (uncoupling protein) or AOX (alternative oxidase) gene into yeast and E.coli. UCP and AOX are thermogenins which can produce heat by interacting with the electron transport chain. By designing the gene circuit, we want to well control the power of the bio-heating device. In addition, we want to simulate the pound environment in reality by computer and the test results after using our device in low temperature.</p>
+
-
                                </div>
+
-
                            </li>
+
-
                            <li class="span">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-compass icon-emphasize"></i>
+
-
                                    <h4>Motivation and Specific Aim</h4>
+
-
                                    <p>There are 4 farming fishing among top 15 fishing output in Taiwan. The output value is second only to deep sea fishing. Unfortunately, in winter, we see news about large amount of fish died due to low temperature. In winter, cold current which comes from the Mongolia dramatically decreases the temperature and causes fish to die. As you know that fish is cold-blood animal, they can’t get with the rapid temperature change.
+
-
                                    For example, milkfish (Chanos chanos) dies for two major reasons. The first one is dramatical temperature decrease. The second one is vibrios infection. If the temperature stays low in about 10 degree, the mucosa on the fish body will peel off and cause milkfish to die for vibrios infection. Fish farmers currently pump the groundwater to warm up the pound but it will damage the stratum. On the other hand, they build up wind shields and dig deeper pounds to resist the cold wind, but it can only increase about 2-3 degree. In addition, some engineers try to heat up the water by electricity, however, fish farmers can’t afford the expenses, The method is not realistic. Fish farmers are in passive position because no one knows whether the fish can survive in this time or not. It just likes a gambling, they can only fish the fish before the coming of cold current.
+
-
                                    Besides Taiwan, Japanese fish farmers also have this problem. The farming fishers in Japan heat up the water by hot water from nuclear power plant. Lack of this heating source brought huge loss in Japanese farming fish business. In May, 2012, they lost 47% output of white trevally and 35% output of shellfish in Fukui Prefecture.
+
-
                                    To sum up, we want to solve this problem by using a brand new method called synthetic biology. We want to make a device to slow down the decreasing of temperature and keep water in a specific temperature. It will be helpful in lessening the death of fish. Our goal is to make a device which can heat up the water in low temperature.</p>
+
-
                                </div>
+
-
                            </li>
+
-
                            <li class="span12">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-bell icon-emphasize"></i>
+
-
                                    <h4>Recent Event</h4>
+
-
                                    <p> <ul class="icons-ul">
+
-
                                        <li> <i class="icon-li icon-ok" style="position: static"> </i> 2013/7/8 Conference With Purdue iGEM team </li>
+
-
                                        <li> <i class="icon-li icon-ok" style="position: static"> </i> 2013/7/10 Conference with Berkeley iGEM </li>
+
-
                                        <li> <i class="icon-li icon-ok" style="position: static"> </i> 2013/7/14 conference with UT-Tokyo iGEM </li>
+
-
                                    </ul> </p>
+
-
                                </div>
+
-
                            </li>
+
-
                        </ul>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
    <!--start igem header-->
+
-
        <section id="igem-top">
+
-
    <!--start igem-desktop header-->
+
-
            <section id="igem-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">IGEM</h1>
+
-
                <p class="header">International Biology competition</p>
+
-
            </section>
+
-
    <!--start igem-mobile header-->
+
-
            <section id="igem-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">IGEM</h1>
+
-
                <p class="header">International Biology competition</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start igem-->
+
-
        <section id="igem">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span12">
+
-
                        <ul class="thumbnails">
+
-
                            <li class="span">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-asterisk icon-emphasize"></i>
+
-
                                    <h4>Introduction</h4>
+
-
                                    <span>synthetic biology competition</span>
+
-
                                    <p>The International Genetically Engineered Machine (iGEM) competition is a worldwide synthetic biology competition that was initially aimed at undergraduate university students, but has since expanded to include divisions for high school students and entrepreneurs.
+
-
 
+
-
                                    Student teams are given a kit of biological parts at the beginning of the summer from the Registry of Standard Biological Parts. Working at their own schools over the summer, they use these parts and new parts of their own design to build biological systems and operate them in living cells. Randy Rettberg, an engineer who has worked for technology companies including Apple, Sun and BBN, is the director of the iGEM competition.</p>
+
-
                                </div>
+
-
                            </li>
+
-
                            <li class="span">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-comment icon-emphasize"></i>
+
-
                                    <h4>Competition details</h4>
+
-
                                    <p>Student teams are given a kit of biological parts at the beginning of the summer from the Registry of Standard Biological Parts. Working at their own schools over the summer, they use these parts and new parts of their own design to build biological systems and operate them in living cells. Randy Rettberg, an engineer who has worked for technology companies including Apple, Sun and BBN,[1] is the director of the iGEM competition.</p>
+
-
                                </div>
+
-
                            </li>
+
-
                            <li class="span">
+
-
                                <div class="thumbnail">
+
-
                                    <i class="icon-location-arrow icon-emphasize"></i>
+
-
                                    <h4>Growth and recent years</h4>
+
-
                                    <p>iGEM developed out of student projects conducted during MIT's Independent Activities Periods in 2003 and 2004.[3][4] Later in 2004, a competition with five teams from various schools was held. In 2005, teams from outside the United States took part for the first time.[5] Since then iGEM has continued to grow, with 130 teams entering in 2010.[6]
+
-
 
+
-
                                    Because of this increasing size, in 2011 the competition was split into three regions: Europe, the Americas, and Asia (though teams from Africa and Australia also entered via "Europe" and "Asia" respectively).[7] Regional jamborees will occur during October; and some subset of teams attending those events will be selected to advance to the World Championship at MIT in November.[8]
+
-
 
+
-
                                    In January 2012 the iGEM Foundation was spun out of MIT as an independent non-profit organization located in Cambridge, Massachusetts, USA. The iGEM Foundation supports scientific research and education through operating the iGEM competition.
+
-
 
+
-
                                    For the 2012 competition iGEM expanded into having not only the Collegiate division, but also competitions for entrepreneurs and high school students.</p>
+
-
                                </div>
+
-
                            </li>
+
-
                        </ul>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
    <!--start works header-->
+
-
        <section id="works-top">
+
-
    <!--start works-desktop header-->
+
-
            <section id="works-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">Works</h1>
+
-
                <p class="header">How awesome it is?</p>
+
-
            </section>
+
-
    <!--start works-mobile header-->
+
-
            <section id="works-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">Works</h1>
+
-
                <p class="header">How awesome it is?</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start works-->
+
-
        <section id="works">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span12">
+
-
                        <div id="carousel_fade" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner" >
+
-
                                <div class="active item lightboxImg" img="./img/Poster/Picture1.png" img-style='height: 280px'>  </div>
+
-
                                <div class="inactive item lightboxImg" img="./img/Poster/Picture2.png" img-style='height: 280px'> </div>
+
-
                                <div class="inactive item lightboxImg" img="./img/Poster/Picture3.png" img-style='height: 280px'> </div>
+
-
                            </div>
+
-
                            <button class="carousel-control left m-btn icn-only" href="#carousel_fade" data-slide="prev"><i class="icon-chevron-left"></i></button>
+
-
                            <button class="carousel-control right m-btn icn-only" href="#carousel_fade" data-slide="next"><i class="icon-chevron-right"></i></button>
+
-
                        </div>
+
-
                    </div>
+
-
                    <div class="span12">
+
-
                        <h1>Article Review & Discussion</h1>
+
-
                        <h4>UCP in unicellular eukaryotes</h4>
+
-
                        <p>When activated, UCP enhances cellular lipid metabolism in mitochondria. However in plants or unicellular eukaryotes, lipid metabolism is working mainly in glyoxysomes and peroxisomes; activation of UCP does not seem to accelerate lipid metabolism. In previous study, a higher activity of UCP of a non-fermentative yeast Yarrowia lipolytica was reached in stationary phase during which lipid droplets inside the cell is degraded and predominantly released as fatty acids.</p>
+
-
                        <p>Even so, the main function of UCP in unicellular eukaryotes is not regarded to be heat production because their living environment generally consists of water which causes heat to dissipate very fast and makes them unable to maintain a temperature different from the environment.</p>
+
-
                    </div>
+
-
                </div>
+
-
 
+
-
                <div class="divider"></div>
+
-
                <div class="row divide">
+
-
                    <div class='span12'>
+
-
                        <h1>Our Plans</h1>
+
-
                        <p>Concerning the experimental procedure, we will start from testing the functionality of heterologously expressed UCP1 in yeasts by monitoring the temperature of culture medium. Besides analyzing the amount of UCP, cellular localization assay is also a method to identify the reason of transformants to be non-thermogenic. Next, since culture condition may affect the efficiency of heat production, this influence may be observed from finding the optimal growth temperature and then changing the culture temperature of transformants. Third, after functional expression of UCP and growth condition optimization, we will then proceed to large scale fermentation testing and precise measurement of the heating power, which provides us the parameters to simulate the situation of warming fish ponds against cold wave. Fourth, to give our yeast strain a better heat-buffering capacity, we seek to engineered a yeast strain producing UCP under certain temperature range. This part can be attained by introducing an cold shock promoter. However, biobricks submitted from previous iGEM teams are designed for prokaryotes like E. coli; besides, the range of thermo-sensitivity of those bricks might be so wide that not suitable for our purpose. So, we are planning to clone a cold shock promoter  known in S. cerevisiae, test its range of thermo-sensitivity and enhance its thermo-sensitivity by means of introducing a regulatory circuit. Eventually, we hope to construct a gene cassette with range of thermo-sensitivity between 10~20℃ or even gene cassettes with different ranges of thermo-sensitivity.</p>
+
-
                        <p>After the assessment of heating power of yeast transformants, our next goal is to improve the heating ability of microbes furthermore. As it is proposed in previous studies that the uncoupling activity of UCP1 may be restricted by the efficiency of mitochondrial ETC, we will try to look into the possibility of increasing the uncoupling activity by stimulating the activity of ETC. While in previous studies, stimulating the activity of ETC with FCCP is not feasible, we are searching for ways to stimulate the activity of ETC on transcriptional or translational steps. It is possible to identify the regulation points of ETC activity by means of computational simulation. Eventually, experimental measurement of the heating power of transformants with altered ETC activity will be necessary to verify this idea.<br/>Ultimately, we are looking forward to developing an energy-saving efficient microbial thermogenic device.</p>
+
-
                    </div>
+
-
                </div>
+
-
 
+
-
                <div class="divider"></div>
+
-
                <div class="row divide">
+
-
                    <div class='span12'>
+
-
                        <h1> Our Materials </h1>
+
-
                    </div>
+
-
                    <div class="span12">
+
-
                        <div id="carousel_fade2" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner" >
+
-
                                <div class="active item lightboxImg" img="./img/Poster/Picture4.png" img-style='height: 280px'> 
+
-
                                    <h4> Saccharomyces cerevisiae (budding yeast) </h4>
+
-
                                </div>
+
-
                                <div class="inactive item lightboxImg" img="./img/Poster/Picture5.png" img-style='height: 280px'>
+
-
                                    <h4> Rhodotorula graminis (lipid production phenotype)</h4>
+
-
                                </div>
+
-
                                <div class="inactive item lightboxImg" img="./img/Poster/Picture6.png" img-style='height: 280px'>
+
-
                                    <h4> Mrakia frigida (low optimal growth temperature ) </h4>
+
-
                                </div>
+
-
                            </div>
+
-
                            <button class="carousel-control left m-btn icn-only" href="#carousel_fade2" data-slide="prev"><i class="icon-chevron-left"></i></button>
+
-
                            <button class="carousel-control right m-btn icn-only" href="#carousel_fade2" data-slide="next"><i class="icon-chevron-right"></i></button>
+
-
                        </div>
+
-
                    </div>
+
-
                </div>
+
-
 
+
-
                <div class="divider"></div>
+
-
                <div class="row divide">
+
-
                    <div class="span12">
+
-
                        <h1>Large-Scale Simulation Result</h1>
+
-
                        <h4>Assumptions</h4>
+
-
                        <p> <ul class="icons-ul">
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> The biological devices (i.e. the yeast) is well distributed in the water.</li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> We do not consider the convection in the water.</li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> The thermogenic power of rat brown tissue quite equals to large amounts of our yeasts.</li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> The fish pond is surrounded by transmission media with infinite specific heat</li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> The amount of yeast and the thermogenic power do not change with time.</li>
+
-
                        </ul> </p>
+
-
                       
+
-
                        <h4>Initial condition</h4>
+
-
                        <p> <ul class="icons-ul">
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> Pond temperature: 15°C </li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> Environment temperature: 10°C </li>
+
-
                            <li> <i class="icon-li icon-ok" style="position: static"></i> Amount of Yeast: 0.1 fold of the number of yeast when O.D.660 = 1 </li>
+
-
                        </ul> </p>
+
-
 
+
-
                        <h4>Result</h4>
+
-
                        <div id="carousel_fade2" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner" >
+
-
                                <div class='active item lightboxImg divide' img="./img/Poster/Picture8.png" img-style="height: 300px"> </div>
+
-
                                <div class='active item lightboxImg' img="./img/Poster/Picture7.png" img-style="height: 400px"> </div>
+
-
                            </div>
+
-
                        </div>
+
-
                    </div>
+
-
                </div>
+
-
 
+
-
 
+
-
                <div class="divider"></div>
+
-
                <div class="row divide">
+
-
                    <div class="span5">
+
-
                        <h1>Machine Learning</h1>
+
-
                        <h4>Artificial intelligence without knowing How</h4>
+
-
                        <p>Machine learning, a branch of artificial intelligence, is about the construction and study of systems that can learn from data. For example, a machine learning system could be trained on email messages to learn to distinguish between spam and non-spam messages. After learning, it can then be used to classify new email messages into spam and non-spam folders.</p>
+
-
                        <p>Machine learning algorithms can be organized into a taxonomy based on the desired outcome of the algorithm.</p>
+
-
                        <a href="http://en.wikipedia.org/wiki/Machine_learning" class="m-btn red pull-right">View Wiki</a>
+
-
                    </p></div>
+
-
                    <div class="span7">
+
-
                        <div id="carousel_fade_3" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner">
+
-
                                <div class="active item">
+
-
                                    <img src="./img/ML/1.jpg" alt="">
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <img src="./img/ML/2.jpg" alt="">
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <img src="./img/ML/3.jpg" alt="">
+
-
                                </div>
+
-
                            </div>
+
-
                            <button class="carousel-control left m-btn icn-only" href="#carousel_fade_3" data-slide="prev"><i class="icon-chevron-left"></i></button>
+
-
                            <button class="carousel-control right m-btn icn-only" href="#carousel_fade_3" data-slide="next"><i class="icon-chevron-right"></i></button>
+
-
                        </div>
+
-
                    </div>
+
-
                </div>
+
-
                <div class="divider"></div>
+
-
                <div class="row divide">
+
-
                    <div class="span7">
+
-
                        <div id="carousel_fade_4" class="carousel slide carousel-fade">
+
-
                            <div class="carousel-inner">
+
-
                                <div class="active item">
+
-
                                    <img src="./img/HTML/web-design-sthelens.jpg" alt="">
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <img src="./img/HTML/twitter-bootstrap.jpg" alt="">
+
-
                                </div>
+
-
                                <div class="inactive item">
+
-
                                    <img src="./img/HTML/jquery_logo.png" alt="">
+
-
                                </div>
+
-
                            </div>
+
-
                            <button class="carousel-control left m-btn icn-only" href="#carousel_fade_4" data-slide="prev"><i class="icon-chevron-left"></i></button>
+
-
                            <button class="carousel-control right m-btn icn-only" href="#carousel_fade_4" data-slide="next"><i class="icon-chevron-right"></i></button>
+
-
                        </div>
+
-
                    </div>
+
-
                    <div class="span5">
+
-
                        <h1>Webpage</h1>
+
-
                        <h4>BootStrap & jQuery</h4>
+
-
                        <p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. We use jquery plugin as calendar, easing tool, nicescroll, stellar...</p>
+
-
                        <p>Bootstrap is Sleek, intuitive, and powerful front-end framework for faster and easier web development. It provides nice default theme and component like carousel to use.</p>
+
-
                        <p>We combine the two main library to build our webpage and the AZALEA APP</p>
+
-
                        <a href="http://twitter.github.io/bootstrap/" class="m-btn red pull-right">Bootstrap</a>
+
-
                        <a href="http://jquery.com/" class="m-btn red pull-right">jQuery</a>
+
-
                    </p></div>
+
-
                   
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
        <section id="hint1"><a href="iGEM_AZALEA" target="_blank">
+
-
            <strong>HEADS UP!</strong> See what in our <strong>AZALEA APP</strong>
+
-
        </a></section>
+
-
    <!--start gallery header-->
+
-
        <section id="gallery-top">
+
-
    <!--start gallery-desktop header-->
+
-
            <section id="gallery-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">Gallery</h1>
+
-
                <p class="header">Pictures So far</p>
+
-
            </section>
+
-
    <!--start gallery-mobile header-->
+
-
            <section id="gallery-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">Gallery</h1>
+
-
                <p class="header">Pictures So far</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start gallery-->
+
-
    <!--start thumbnails section-->
+
-
        <section id="gallery">
+
-
            <div class="container">
+
-
                <div class="row divide" number="14" folder="AZALEA">
+
-
                    <div class="span8 offset2">
+
-
                        <h1>NTU AZALEA FESTIVAL</h1>
+
-
                        <p class="center">We made a little app to illustrate the idea of iGem</p>
+
-
                    </div>
+
-
                </div>
+
-
                <div class='divider'></div>
+
-
                <div class="row divide" number="28" folder="MEETING">
+
-
                    <div class="span8 offset2">
+
-
                        <h1>Lab & Life</h1>
+
-
                        <p class="center">Normal Life Time</p>
+
-
                    </div>
+
-
                </div>
+
-
                <div class='divider'></div>
+
-
                <div class="row divide" number="3" folder="MISC">
+
-
                    <div class="span8 offset2">
+
-
                        <h1>MISC</h1>
+
-
                        <p class="center">Miscellaneous Photos</p>
+
-
                    </div>
+
-
                </div>
+
-
 
+
-
            </div>
+
-
        </section>
+
-
    <!--end thumbnails section-->
+
-
    <!--start lightboxes-->
+
-
        <div id="lightbox">
+
-
        </div>
+
-
    <!--end lightbox section-->
+
-
    <!--start team header-->
+
-
        <section id="team-top">
+
-
    <!--start team-desktop header-->
+
-
            <section id="team-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">Team</h1>
+
-
                <p class="header">The people!</p>
+
-
            </section>
+
-
    <!--start team-mobile header-->
+
-
            <section id="team-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">Team</h1>
+
-
                <p class="header">The people!</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start team-->
+
-
        <section id="team">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span8 offset2">
+
-
                        <h1>We are IGem-Taiwan</h1>
+
-
                        <h4>Nice to meet you all <i class='icon-smile'></i></h4>
+
-
                    </div>
+
-
                    <div class="span12">
+
-
                        <ul class="thumbnails">
+
-
                            <div class="row">
+
-
                                <li class="span6">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/李易遠.jpg" alt="">
+
-
                                        <h4>李易遠</h4>
+
-
                                        <span>Leader</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Biochemical Science & Technology<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/吳泰億.jpg" alt="">
+
-
                                        <h4>吳泰億</h4>
+
-
                                        <span>Wet Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Biochemical Science & Technology<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/李宗諭.jpg" alt="">
+
-
                                        <h4>李宗諭</h4>
+
-
                                        <span>Wet Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Biochemical Science & Technology<br/>
+
-
                                            Senior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/張宏宇.jpg" alt="">
+
-
                                        <h4>張宏宇</h4>
+
-
                                        <span>Wet Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Biochemical Science & Technology<br/>
+
-
                                            Grade: Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/王德緯.jpg" alt="">
+
-
                                        <h4>王德緯</h4>
+
-
                                        <span>Wet Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Medicine <br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                            </div>
+
-
                            <div class="row">
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/馬蓁華.jpg" alt="">
+
-
                                        <h4>馬蓁華</h4>
+
-
                                        <span>Wet Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Biochemical Science & Technology<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/王柏軒.jpg" alt="">
+
-
                                        <h4>王柏軒</h4>
+
-
                                        <span>Webpage designer</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Computer Science & Info. Eng.<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/李威.jpg" alt="">
+
-
                                        <h4>李威</h4>
+
-
                                        <span>Dry Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Electrical Engineering<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/李啟為.jpg" alt="">
+
-
                                        <h4>李啟為</h4>
+
-
                                        <span>Dry Lab</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Computer Science & Info. Eng.<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                            </div>
+
-
                            <div class="row">
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/王凡.jpg" alt="">
+
-
                                        <h4>王凡</h4>
+
-
                                        <span>App Designer</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University <br/>
+
-
                                            Computer Science & Info. Eng.<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                                <li class="span3">
+
-
                                    <div class="thumbnail">
+
-
                                        <img src="./img/people/林湧達.jpg" alt="">
+
-
                                        <h4>林湧達</h4>
+
-
                                        <span>App Art Designer</span>
+
-
                                        <p class="center">
+
-
                                            National Taiwan University<br/>
+
-
                                            Computer Science & Info. Eng.<br/>
+
-
                                            Junior
+
-
                                        </p>
+
-
                                    </div>
+
-
                                </li>
+
-
                            </div>
+
-
                           
+
-
                        </ul>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
    <!--start calendar header-->   
+
-
        <section id="calendar-top">
+
-
    <!--start calendar-desktop header-->
+
-
            <section id="calendar-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header"><i class="icon-calendar"></i>Calendar</h1>
+
-
                <p class="header">Things so far</p>
+
-
            </section>
+
-
    <!--start calendar-mobile header-->
+
-
            <section id="calendar-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">Calendar</h1>
+
-
                <p class="header">Things so far</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start calendar-->
+
-
        <section id="calendar">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span8 offset2">
+
-
                        <h1>So many things...</h1>
+
-
                    </div>
+
-
                    <div class="span12">
+
-
                        <ul class="thumbnails">
+
-
                            <div id="calendar_content"></div>
+
-
                        </ul>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
    <!--start contact header-->
+
-
        <section id="contact-top">
+
-
    <!--start contact-desktop header-->
+
-
            <section id="contact-top-desktop" class="visible-desktop" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
+
-
                <h1 class="header">Contact</h1>
+
-
                <p class="header">Fill up our inbox, we like that</p>
+
-
            </section>
+
-
    <!--start contact-mobile header-->
+
-
            <section id="contact-top-mobile" class="hidden-desktop">
+
-
                <h1 class="header">Contact</h1>
+
-
                <p class="header">Fill up our inbox, we like that</p>
+
-
            </section>
+
-
        </section>
+
-
    <!--start contact-->
+
-
        <section id="contact">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
                    <div class="span8">
+
-
                        <div class="row">
+
-
                            <form action="mailto:igemntubest@gmail.com" method="post" id="contactForm">
+
-
                                <div class="span4">
+
-
                                    <label>Name:</label>
+
-
                                    <input type="text" name="name" value="" id="name" class="span4">
+
-
                                </div>
+
-
                                <div class="span4">
+
-
                                    <label>Your Email:</label>
+
-
                                    <input type="text" name="email" value="" id="email" class="span4">
+
-
                                </div>
+
-
                                <span class="honeypot">
+
-
                                    <label>Honeypot:</label>
+
-
                                    <input type="text" name="last" value="" id="last">
+
-
                                </span>
+
-
                                <div class="span8">
+
-
                                    <label>Message:</label>
+
-
                                    <textarea rows="6" name="message" class="span8"></textarea>
+
-
                                </div>
+
-
                                <div class="span8">
+
-
                                    <div class="message"><div class="alert"></div></div>
+
-
                                    <input type="submit" value="Send" class="m-btn blue">
+
-
                                </div>
+
-
                            </form>
+
-
                        </div>
+
-
                    </div>
+
-
    <!--start sidebar-->
+
-
                    <div class="span4" id="address">
+
-
                        <p>No.1, Sec. 4, Roosevelt Rd., Da’an Dist.<br/>
+
-
                        Taipei City 106, Taiwan (R.O.C.)</p>
+
-
                        <p>Email: igemntubest@gmail.com<br>
+
-
                        <p><abbr title="Mobile">P:</abbr> +886-2-3366-3366</p>
+
-
                    </div>
+
-
                </div>
+
-
            </div>
+
-
        </section>
+
-
 
+
-
    <!--start footer-->
+
-
        <section id="footer">
+
-
            <div class="container">
+
-
                <div class="row divide">
+
-
    <!--logo and copyright-->
+
-
                    <div class="span3">
+
-
                        <a href="https://2013.igem.org/Main_Page" class="brand"><img src="./img/igem_Logo.png" alt=""></a>
+
-
                        <p>2013 © IGem-Taiwan.</p><br>
+
-
                        <p>produced by <br> <a href="mailto:b99902006@ntu.edu.tw" target="_blank">PoHsien Wang</a></p><br>
+
-
                    </div>
+
-
 
+
-
                    <div class="span3 thanks">
+
-
                        <p><h2> Special Thanks </h2></p>
+
-
                        <img src="./img/thanks/BST.png" alt="">
+
-
                        <img src="./img/thanks/CSIE.png" alt="">
+
-
                        <img src="./img/thanks/NTHU.png" alt="">
+
-
                        <img src="./img/thanks/NTU.png" alt="">
+
-
                        <img src="./img/thanks/ntuee.png" alt="">
+
-
 
+
-
                    </div>
+
-
    <!--footer menu-->
+
-
                    <div class="span2 offset1">
+
-
                        <ul>
+
-
                            <li><h5>Menu</h5></li>
+
-
                            <li><a href="#intro">Home</a></li>
+
-
                            <li><a href="#basic_top">Intro</a></li>
+
-
                            <li><a href="#igem-top">IGEM</a></li>
+
-
                            <li><a href="#works-top">Works</a></li>
+
-
                            <li><a href="#gallery-top">Gallery</a></li>
+
-
                            <li><a href="#team-top">Team</a></li>
+
-
                            <li><a href="#calendar-top">Calendar</a></li>
+
-
                        </ul>
+
-
                    </div>
+
-
    <!--link to social networks-->
+
-
                    <div class="span2 offset1">
+
-
                        <ul>
+
-
                            <li><h5>Social</h5></li>
+
-
                            <li><a class="facebook" href="https://www.facebook.com/NationalTaiwanUniversityBSTiGEM" target="_blank">Facebook</a></li>
+
-
                            <li><a class="google" href="https://igem.org/Team.cgi" target="_blank">IGem Website</a></li>
+
-
                        </ul>
+
-
                    </div> 
+
-
                </div> 
+
-
            </div>
+
-
        </section>
+
-
 
+
-
 
+
-
        <script src="./javascript/jquery-latest.js?action=raw"></script>
+
-
        <script src="./javascript/sprintf.min.js?action=raw"></script>
+
-
        <script src="./javascript/bootstrap.min.js?action=raw"></script>
+
-
        <script src="./javascript/custom.js?action=raw"></script>
+
-
        <script>
+
-
            $(window).load(function() {
+
-
                $("#status").fadeOut();
+
-
                $("#preloader").delay(350).fadeOut("slow");
+
-
            })
+
-
        </script>
+
-
        <script src="./javascript/retina.js?action=raw"></script>
+
-
        <script src="./javascript/jquery.easing-1.3.pack.js?action=raw"></script>
+
-
        <script src="./javascript/jquery.nicescroll.min.js?action=raw"></script>
+
-
        <script src="./javascript/jquery.stellar.js?action=raw"></script>
+
-
        <script src="./javascript/jquery.form.js?action=raw"></script>   
+
-
        <script src="./javascript/date.js?action=raw"></script>
+
-
 
+
-
        <script src="./javascript/jquery.ui.datepicker.min.js?action=raw"></script>
+
-
       
+
-
        <script src="./javascript/dp_calendar.js?action=raw"></script>
+
-
        <script src="./javascript/bootstrap-lightbox.min.js?action=raw"></script>
+
-
        <script src="./javascript/jquery.videoBG.js?action=raw"></script>
+
-
        <script src="./javascript/index.js?action=raw"></script>
+
-
       
+
-
</body></html>
+

Latest revision as of 05:06, 26 September 2013

NTU TAIWAN Beaker.png

Retrieved from "http://2013.igem.org/Team:NTU_Taiwan/test.html"