Difference between revisions of "Team:ASIJ Tokyo"

 
(46 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
 
<html>
 
<html>
  
Line 4: Line 5:
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
</head>
 
</head>
<style>
+
<body>
li a, .dropbtn {
+
    display: inline-block;
+
    color: white;
+
    text-align: center;
+
    padding: 14px 16px;
+
    text-decoration: none;
+
}
+
  
li a:hover, .dropdown:hover .dropbtn {
 
    background-color: red;
 
}
 
 
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);
 
}
 
 
.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;
 
}
 
</style>
 
<body>
 
 
<nav class="navbar navbar-inverse">
 
<nav class="navbar navbar-inverse">
 
   <div class="container-fluid">
 
   <div class="container-fluid">
Line 57: Line 21:
 
       <ul class="nav navbar-nav">
 
       <ul class="nav navbar-nav">
 
         <li class="active"><a href="https://2016.igem.org/Team:ASIJ_Tokyo">Home</a></li>
 
         <li class="active"><a href="https://2016.igem.org/Team:ASIJ_Tokyo">Home</a></li>
        <li><a href="https://2016.igem.org/ASIJProjectDescription">Our Project<span class="caret"></span></a></li>
 
 
         <li class="dropdown">
 
         <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="">Project<span class="caret"></span></a>
    <div class="dropdown-content">
+
          <ul class="dropdown-menu">
      <a href="https://2016.igem.org/ASIJProjectDescription">Link 1</a>
+
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Description">Project Description + Abstract</a></li>
      <a href="https://2016.igem.org/ASIJResults">Link 2</a>
+
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Experiments">Experiments</a></li>
      <a href="#">Link 3</a>
+
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Results">Results</a></li>
    </div>
+
            <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Notebook">Notebook</a></li>
        <li><a href="https://2016.igem.org/ASIJBIO">Team</a></li>
+
          </ul>
        <li><a href="https://2016.igem.org/ASIJPROTOCOL">Experiments</a></li>
+
        </li>
        <li><a href="https://2016.igem.org/ASIJJournal">Notebook</a></li>
+
       
        <li><a href="https://2016.igem.org/ASIJParts">Parts</a></li>
+
         <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Team">Team</a></li>
         <li><a href="https://2016.igem.org/ASIJSafety">Safety</a></li>
+
         <li><a href="https://2016.igem.org/Team:ASIJ_Tokyo/Safety">Safety</a></li>
         <li><a href="https://2016.igem.org/ASIJHP">Human Practices</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/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>
 
       </ul>
 +
 
     </div>
 
     </div>
 +
  </div>
 
</nav>
 
</nav>
 
</body>
 
</body>
 
 
 
 
<style type="text/css">
 
<style type="text/css">
  
Line 108: Line 72:
 
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 
html {
 
html {
   font-family:sans-serif;
+
   font-family: sans-serif;
 
   -webkit-text-size-adjust: 100%;
 
   -webkit-text-size-adjust: 100%;
 
       -ms-text-size-adjust: 100%;
 
       -ms-text-size-adjust: 100%;
Line 1,017: Line 981:
 
a:hover,
 
a:hover,
 
a:focus {
 
a:focus {
 
 
   color: #2a6496;
 
   color: #2a6496;
 
   text-decoration: underline;
 
   text-decoration: underline;
Line 1,456: Line 1,419:
 
   padding: 2px 4px;
 
   padding: 2px 4px;
 
   font-size: 90%;
 
   font-size: 90%;
   color: #gdf;
+
   color: #fff;
 
   background-color: #333;
 
   background-color: #333;
 
   border-radius: 3px;
 
   border-radius: 3px;
Line 2,472: Line 2,435:
 
}
 
}
 
.form-control:focus {
 
.form-control:focus {
   border-color: #7ee975;
+
   border-color: #66afe9;
 
   outline: 0;
 
   outline: 0;
 
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
 
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
Line 6,488: Line 6,451:
 
}
 
}
 
.fa-inverse {
 
.fa-inverse {
   color: #74ff74;
+
   color: #ffffff;
 
}
 
}
 
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
Line 7,896: Line 7,859:
 
}
 
}
 
/*======================================
 
/*======================================
    HOME SECTION STYLES
+
   Project Description SECTION STYLES
   =======================================*/
+
#home-sec {
+
    background-color:#134f90;
+
    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
+
 
   =======================================*/
 
   =======================================*/
  
Line 7,958: Line 7,867:
 
}
 
}
 
/*======================================
 
/*======================================
   FEATURES SECTION STYLES
+
   JOURNAL SECTION STYLES
 
   =======================================*/
 
   =======================================*/
 
#features-sec {
 
#features-sec {
Line 7,975: Line 7,884:
 
}
 
}
 
/*======================================
 
/*======================================
   CONTACT SECTION STYLES
+
   LAB SECTION STYLES
 
   =======================================*/
 
   =======================================*/
 
#contact-sec {
 
#contact-sec {
Line 8,082: Line 7,991:
 
                 <div class="item active ">
 
                 <div class="item active ">
  
                     <img src="https://static.igem.org/mediawiki/2016/4/4b/T--ASIJ_Tokyo--TeamLogo.png" alt="" />
+
                     <img src="https://static.igem.org/mediawiki/2016/d/d3/T--ASIJ_Tokyo--asijlogo.png" alt="" />
  
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
    <!--INDICATORS-->
 
  
 
        </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,110: Line 8,005:
 
                          
 
                          
 
<h4>
 
<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.  
 
</h4>
 
</h4>
 
<head>
 
<head>
Line 8,121: Line 8,016:
 
     <p>
 
     <p>
 
               <div class="center">
 
               <div class="center">
<a href="https://2016.igem.org/ASIJProjectDescription" class="btn btn-info btn-lg">
+
<a href="https://2016.igem.org/Team:ASIJ_Tokyo/Description" class="btn btn-info btn-lg">
 
         <span class=""></span> Read More
 
         <span class=""></span> Read More
 
       </a>
 
       </a>
Line 8,130: Line 8,025:
 
     </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">Journal </h1>
 
<center> <img src="https://static.igem.org/mediawiki/2016/0/0d/T--ASIJ_Tokyo--journal.png"  alt=""  height="350" width="350"> </center><br></br>
 
                </div>
 
 
 
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
  
</head>
 
<body>
 
  <div class="container">
 
    <p>
 
 
 
      <div class="center">
 
      <a href="https://2016.igem.org/ASIJJournal" class="btn btn-info btn-lg">
 
        <span class=""></span> Click for Journal
 
      </a>
 
    </p>
 
  </div>
 
</body>
 
        </div>
 
 
    </section>
 
    <!-- FEATURE SECTION END-->
 
 
     <section id="team-sec">
 
     <section id="team-sec">
 
         <div class="container">
 
         <div class="container">
Line 8,171: Line 8,038:
 
                     </p>   
 
                     </p>   
 
       <div class="center">
 
       <div class="center">
       <a href="https://2016.igem.org/ASIJBIO" class="btn btn-info btn-lg">
+
       <a href="https://2016.igem.org/Team:ASIJ_Tokyo/Team" class="btn btn-info btn-lg">
 
         <span class="">Click for Team Bios</span>
 
         <span class="">Click for Team Bios</span>
 
       </a>
 
       </a>
Line 8,188: 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>Lab </h1>
 
               
 
                     
 
                 
 
                </div>
 
  
 
      
 
      
    </section>
 
 
     <!-- CONTACT SECTION END-->
 
     <!-- CONTACT SECTION END-->
 
     <div id="footer-sec">
 
     <div id="footer-sec">
Line 8,205: Line 8,062:
 
             <a href="http://binarytheme.com" style="font-size: 10px; color: #fff" target="_blank">Design by : binarytheme.com</a>
 
             <a href="http://binarytheme.com" style="font-size: 10px; color: #fff" target="_blank">Design by : binarytheme.com</a>
  
    </div>
 
    <!-- FOOTER SECTION END-->
 
  
 +
<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">
 +
 +
  </div>
 +
</body>
 +
        </div>
 +
 +
    </section>
 +
    <!-- Journal SECTION END-->
 +
 +
    <!--CORE SCRIPTS-->
 +
    <script src="assets/js/jquery-1.11.1.js"></script>
 +
    <!--BOOTSTRAP SCRIPTS-->
 +
    <script src="assets/js/bootstrap.js"></script>
 +
    <!--WOW SCRIPTS-->
 +
    <script src="assets/js/wow.js"></script>
 +
    <!--SCROLL SCRIPTS-->
 +
    <script src="assets/js/jquery.smooth-scroll.min.js"></script>
 +
    <!--SCROLL ANIMATION SCRIPTS-->
 +
    <script src="assets/js/scrollReveal.js"></script>
 +
    <!--CUSTOM SCRIPTS-->
 +
    <script src="assets/js/custom.js"></script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 11:35, 3 November 2016

The BIG TEMPLATE : RESPONSIVE and FREE