Difference between revisions of "Team:ASIJ Tokyo"

 
(191 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
 
<html>
 
<html>
 +
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
</head>
 +
<body>
 +
 +
<nav class="navbar navbar-inverse">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav">
 +
        <li class="active"><a href="https://2016.igem.org/Team:ASIJ_Tokyo">Home</a></li>
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="">Project<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Description">Project Description + Abstract</a></li>
 +
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Experiments">Experiments</a></li>
 +
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Results">Results</a></li>
 +
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Notebook">Notebook</a></li>
 +
          </ul>
 +
        </li>
 +
       
 +
        <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Team">Team</a></li>
 +
        <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Safety">Safety</a></li>
 +
        <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Attributions">Attributions</a></li>
 +
        <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Parts">Parts</a></li> 
 +
        <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Human_Practices">Human Practices</a></li> 
 +
 +
      </ul>
 +
 +
    </div>
 +
  </div>
 +
</nav>
 +
</body>
 
<style type="text/css">
 
<style type="text/css">
  
Line 7,816: Line 7,859:
 
}
 
}
 
/*======================================
 
/*======================================
−
    HOME SECTION STYLES
+
   Project Description SECTION STYLES
−
   =======================================*/
+
−
#home-sec {
+
−
    background-color:#29CC71;
+
−
    line-height:30px;
+
−
}
+
−
home-sec .carousel-caption {
+
−
    top: 50px;
+
−
}
+
−
.slide-h1 {
+
−
    font-size:50px;
+
−
    font-weight:900;
+
−
    padding-bottom:10px;
+
−
}
+
−
.slide-h2 {
+
−
    font-size:25px;
+
−
    font-weight:900;
+
−
    padding-bottom:10px;
+
−
}
+
−
/*======================================
+
−
    NAV STYLES
+
−
  =======================================*/
+
−
 
+
−
#nav{
+
−
position: fixed;
+
−
top: 60%;
+
−
right:10px;
+
−
}
+
−
 
+
−
#nav li{
+
−
display: block;
+
−
margin: 10px;
+
−
width: 20px;
+
−
height: 20px;
+
−
overflow: hidden;
+
−
background-color: rgb(0, 0, 0);
+
−
border-radius: 50%;
+
−
border-radius: 50%;
+
−
-webkit-box-shadow: 0px 0px 3px 2px rgb(255, 255, 255);
+
−
-moz-box-shadow: 0px 0px 3px 2px rgb(255, 255, 255);
+
−
-ms-box-shadow: 0px 0px 3px 2px rgb(255, 255, 255);
+
−
box-shadow: 0px 0px 3px 2px rgb(255, 255, 255);
+
−
}
+
−
 
+
−
#nav li:hover{
+
−
background-color:#fff;
+
−
}
+
−
 
+
−
#nav a{
+
−
text-indent: -999em;
+
−
color: transparent;
+
−
}
+
−
 
+
−
/*======================================
+
−
  ABOUT SECTION STYLES
+
 
   =======================================*/
 
   =======================================*/
  
 
#about-sec {
 
#about-sec {
 
     color:#fff;
 
     color:#fff;
−
     background-color:#5aabe0;
+
     background-color:#6ea5e1;
 
}
 
}
 
/*======================================
 
/*======================================
−
   FEATURES SECTION STYLES
+
   JOURNAL SECTION STYLES
 
   =======================================*/
 
   =======================================*/
 
#features-sec {
 
#features-sec {
−
     background-color:#E23E3E;
+
     background-color:#414141;
 
     color:#fff;
 
     color:#fff;
 
}
 
}
Line 7,889: Line 7,878:
 
#team-sec {
 
#team-sec {
 
     color:#fff;
 
     color:#fff;
−
     background-color:#1e7e52;
+
     background-color:#134f90;
 
}
 
}
 
.set-img {
 
.set-img {
Line 7,895: Line 7,884:
 
}
 
}
 
/*======================================
 
/*======================================
−
   CONTACT SECTION STYLES
+
   LAB SECTION STYLES
 
   =======================================*/
 
   =======================================*/
 
#contact-sec {
 
#contact-sec {
 
     color:#fff;
 
     color:#fff;
−
     background-color:#fa9040;
+
     background-color:#656565;
 
}
 
}
 
.cnt-img {
 
.cnt-img {
Line 7,912: Line 7,901:
 
     padding:10px 50px 10px 50px;
 
     padding:10px 50px 10px 50px;
 
     text-align:right;
 
     text-align:right;
−
     background-color:#fa9040;
+
     background-color:#336499;
 
}
 
}
 
/*======================================
 
/*======================================
Line 8,002: Line 7,991:
 
                 <div class="item active ">
 
                 <div class="item active ">
  
−
                     <img src="https://static.igem.org/mediawiki/2016/6/6a/T--ASIJ_Tokyo--asijtokyolabel.jpg" alt="" />
+
                     <img src="https://static.igem.org/mediawiki/2016/d/d3/T--ASIJ_Tokyo--asijlogo.png" alt="" />
−
                    <div class="carousel-caption">
+
 
−
                        <h1 class="slide-h1 wow bounceInDown" data-wow-duration="1s"></h1>
+
−
                        <h2 class="slide-h2 wow bounceInLeft" data-wow-duration="2s" data-wow-delay="1s"></h2>
+
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
                <div class="item">
 
−
                    <img src="" alt="" />
 
−
                    <div class="carousel-caption">
 
−
                        <h1 class="slide-h1 wow bounceInDown" data-wow-duration="2s"></h1>
 
−
                        <h2 class="slide-h2 wow bounceInLeft" data-wow-duration="2s" data-wow-delay="1s"></h2>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="item">
 
−
                    <img src="https://static.igem.org/mediawiki/2016/6/6a/T--ASIJ_Tokyo--asijtokyolabel.jpg" alt="" />
 
−
                    <div class="carousel-caption">
 
−
                        <h1 class="slide-h1 wow bounceInDown" data-wow-duration="2s">HANDCRAFTED </h1>
 
−
                        <h2 class="slide-h2 wow bounceInLeft" data-wow-duration="2s" data-wow-delay="1s">ONLY FOR YOU</h2>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
            <!--INDICATORS-->
 
−
            <ol class="carousel-indicators">
 
−
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
 
−
                <li data-target="#carousel-example" data-slide-to="1"></li>
 
−
                <li data-target="#carousel-example" data-slide-to="2"></li>
 
−
            </ol>
 
  
−
        </div>
 
−
    </div>
 
−
    <!-- HOME SECTION END-->
 
−
    <div id="nav">
 
−
        <ul class="list-unstyled">
 
−
            <li><a data-toggle="tooltip" data-placement="left" title="Home" href="#home-sec">Home</a></li>
 
−
            <li><a data-toggle="tooltip" data-placement="left" title="About" href="#about-sec">About</a></li>
 
−
            <li><a data-toggle="tooltip" data-placement="left" title="Features" href="#features-sec">Features</a></li>
 
−
            <li><a data-toggle="tooltip" data-placement="left" title="Team" href="#team-sec">Team</a></li>
 
−
            <li><a data-toggle="tooltip" data-placement="left" title="Contact" href="#contact-sec">Contact</a></li>
 
−
        </ul>
 
−
    </div>
 
 
     <!-- NAV SECTION END-->
 
     <!-- NAV SECTION END-->
 
     <section id="about-sec">
 
     <section id="about-sec">
Line 8,047: Line 8,001:
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
 
                 <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
−
                     <h1 >Project Description </h1>
+
                     <h1 data-scroll-reveal="enter from the bottom after 0.1s">Project Description </h1>
−
                 
+
                    <p data-scroll-reveal="enter from the bottom after 0.3s">
 
                          
 
                          
−
<p>
+
<h4>
−
We are surrounded by plastic everyday, specifically PET (Polyethylene terephthalate). Considered as the most common type of polyester, PET is a plastic resin often used for packaging consumer products. We can also find it in our water bottles, plastic toys, and even in the fiber of our clothing. PET is a combination of two monomers known as ethylene glycol and purified terephthalic acid that, when combined, form the polymer PET. The problem with PET is that although it is a convenient material for humans to use, it does not easily biodegrade. As PET accumulates in the ecosystems around the world, it poses detrimental effects on habitats worldwide. That is why it is crucial that we find an efficient way to degrade PET.
+
Plastic is a ubiquitous material in modern consumer goods. One of the most common plastics used today is polyethylene terephthalate (PET). Chemically, it is a polymer consisting of ethylene glycol and terephthalic acid subunits. With the increasingly short life cycles of consumer products, PET waste is accumulating around the globe at an uncontrollable rate. Moreover, PET is a plastic that does not biodegrade well, and degradation often has to use industrial processes. Given the rapid accumulation of PET and the difficulties associated with biodegradation by ecosystems, it is paramount to find a more efficient method to degrade PET.  
−
</p>
+
</h4>
−
<p>
+
<head>
−
  <head>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
−
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
−
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
−
  </head>
+
−
        <a href="https://2016.igem.org/ASIJProjectDescription" class="btn btn-info btn-lg">
+
−
          <span class="glyphicon glyphicon-plus-sign"></span> Read More
+
−
        </a>
+
  
−
                    </p>
+
</head>
−
                </div>
+
 
 +
<body>
 +
  <div class="container">
 +
    <p>
 +
              <div class="center">
 +
<a href="https://2016.igem.org/Team:ASIJ_Tokyo/Description" class="btn btn-info btn-lg">
 +
        <span class=""></span> Read More
 +
      </a>
 +
    </p>
 +
  </div>
 +
</body>
  
−
            </div>
 
−
        </div>
 
 
     </section>
 
     </section>
 
     <!-- ABOUT SECTION END-->
 
     <!-- ABOUT SECTION END-->
−
    <section id="features-sec">
 
−
        <div class="container ">
 
−
            <div class="row pad-btm">
 
−
                <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
 
−
                    <h1 data-scroll-reveal="enter from the bottom after 0.1s">FEATURES </h1>
 
−
                    <p data-scroll-reveal="enter from the bottom after 0.3s">
 
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
                  Mauris sagittis felis dolor, id gravida tellus tempor vitae. In efficitur ipsum non faucibus tempus.
 
−
                    </p>
 
−
                </div>
 
  
−
            </div>
 
−
            <div class="row ">
 
−
                <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 text-center" data-scroll-reveal="enter from the bottom after 0.5s">
 
−
                    <i class="fa fa-recycle fa-5x"></i>
 
−
                    <h4 >Responsive Design</h4>
 
−
                    <p>
 
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
                            Lorem ipsum dolor sit amet.
 
−
                    </p>
 
−
                </div>
 
−
                <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 text-center" data-scroll-reveal="enter from the bottom after 0.7s" >
 
−
                    <i class="fa fa-briefcase fa-5x"></i>
 
−
                    <h4>Easy to Customize</h4>
 
−
                    <p>
 
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
                          Lorem ipsum dolor sit amet.
 
−
                    </p>
 
−
                </div>
 
−
                <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 text-center" data-scroll-reveal="enter from the bottom after 0.9s">
 
−
                    <i class="fa fa-history fa-5x"></i>
 
−
                    <h4>Free to Use</h4>
 
−
                    <p>
 
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
                          Lorem ipsum dolor sit amet.
 
−
                    </p>
 
−
                </div>
 
−
 
−
            </div>
 
−
 
−
        </div>
 
−
 
−
    </section>
 
−
    <!-- FEATURE SECTION END-->
 
 
     <section id="team-sec">
 
     <section id="team-sec">
 
         <div class="container">
 
         <div class="container">
 
             <div class="row pad-btm">
 
             <div class="row pad-btm">
 
                 <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
 
                 <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
 +
 
                     <h1 data-scroll-reveal="enter from the bottom after 0.1s">TEAM </h1>
 
                     <h1 data-scroll-reveal="enter from the bottom after 0.1s">TEAM </h1>
−
               
+
    <img src="https://static.igem.org/mediawiki/2016/6/64/T--ASIJ_Tokyo--asijgrouppic.jpg" alt="" />
 +
 
 +
                    <p>
 +
<nl></nl><nl></nl><h4>We are the American School In Japan (ASIJ) iGEM team! We are Japan's first high school iGEM team, and this is our first year in the competition. Our team is composed of 27 individuals, all with a shared interest in the field of synthetic biology. Seven of our members will be traveling to Boston this year to present our project at the Jamboree, along with Ms. Beth Crissy, our teacher advisor, and Dr. Tyler DeWitt, our mentor. We hope our contribution will help combat the issue of artificial waste on our planet, bringing about change and a more optimistic future. If you would like to read more about us, click the tab above titled "Our Team", or check out the link below! </h4><br></br>
 +
                    </p> 
 +
      <div class="center">
 +
      <a href="https://2016.igem.org/Team:ASIJ_Tokyo/Team" class="btn btn-info btn-lg">
 +
        <span class="">Click for Team Bios</span>
 +
      </a>
 +
   
 +
  </div>
 +
</body>
 +
        </div>
 +
                                                 
 +
      </div>         
 
                 </div>
 
                 </div>
  
Line 8,129: Line 8,055:
 
     </section>
 
     </section>
 
     <!-- TEAM SECTION END-->
 
     <!-- TEAM SECTION END-->
−
    <section id="contact-sec">
 
−
        <div class="container">
 
−
            <div class="row pad-btm">
 
−
                <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-12">
 
−
                    <h1>CONTACT </h1>
 
−
               
 
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
                  Mauris sagittis felis dolor, id gravida tellus tempor vitae. In efficitur ipsum non faucibus tempus.
 
−
                    </p>
 
−
                </div>
 
  
−
            </div>
+
   
−
            <div class="row pad-btm">
+
    <!-- CONTACT SECTION END-->
 +
    <div id="footer-sec">
 +
          &nbsp;2014 Yourdomain.com |
 +
            <a href="http://binarytheme.com" style="font-size: 10px; color: #fff" target="_blank">Design by : binarytheme.com</a>
  
−
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12  " data-scroll-reveal="enter from the bottom after 0.5s">
 
−
   
 
−
                </div>
 
−
                <div class="col-lg-2 col-md-2 col-sm-2  col-xs-12 " data-scroll-reveal="enter from the bottom after 0.6s">
 
−
                    <img src="assets/img/1t.jpg" class="img-circle img-responsive cnt-img" />
 
  
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
</head>
 +
<body>
 +
  <div class="container">
  
−
                    <p>
+
  </div>
−
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
</body>  
−
                          Lorem ipsum dolor sit amet.
+
        </div>
−
                    </p>
+
−
                    <div class="form-group">
+
−
                        <input type="text" class="form-control" />
+
−
                        <br />
+
−
                        <a href="#" class="btn btn-primary"></a>
+
−
                    </div>
+
−
                </div>
+
−
 
+
−
            </div>
+
−
           
+
−
                </div>
+
  
 
     </section>
 
     </section>
−
     <!-- CONTACT SECTION END-->
+
     <!-- Journal SECTION END-->
−
    <div id="footer-sec">
+
−
          &nbsp;2014 Yourdomain.com |
+
−
            <a href="http://binarytheme.com" style="font-size: 10px; color: #fff" target="_blank">Design by : binarytheme.com</a>
+
−
 
+
−
    </div>
+
−
    <!-- FOOTER SECTION END-->
+
 
     <!--CORE SCRIPTS-->
 
     <!--CORE SCRIPTS-->
 
     <script src="assets/js/jquery-1.11.1.js"></script>
 
     <script src="assets/js/jquery-1.11.1.js"></script>

Latest revision as of 11:35, 3 November 2016

The BIG TEMPLATE : RESPONSIVE and FREE