Difference between revisions of "Team:Nankai"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
 +
<html lang="en-US">
 
<head>
 
<head>
 +
<meta charset="UTF-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 +
<title>Medigo Blue, free responsive template</title>
 +
    <meta name="keywords" content="">
 +
<meta name="description" content="">
 +
    <meta name="author" content="templatemo">
 +
   
 +
   
 +
<!-- Google Fonts -->
 +
<link href="http://fonts.useso.com/css?family=PT+Serif:400,700,400italic,700itali" rel="stylesheet">
 +
<link href="http://fonts.useso.com/css?family=Raleway:400,900,800,700,500,200,100,600" rel="stylesheet">
 +
 +
<!-- Stylesheets -->
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Nankai/miscCSS?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Nankai/blue-schemeCSS?action=raw&ctype=text/css" />
 +
        <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Nankai/bootstrapCSS?action=raw&ctype=text/css" />
 +
<!-- JavaScripts -->
 +
<script src="https://2015.igem.org/Template:Nankai/jquery-1.10.2.minJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2015.igem.org/Template:Nankai/jquery-migrate-1.2.1.minJS?action=raw&ctype=text/javascript"></script>
 +
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
 
<style type="text/css">
 
<style type="text/css">
−
section {
+
               
−
margin-top:100px;
+
    </style>
−
width:100%;
+
/*------------------------------------------------------
 +
HEADER STYLES
 +
--------------------------------------------------------*/
 +
.site-header {
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  background: white;
 +
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
 +
  -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
 +
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
 +
  z-index: 9999;
 +
  padding: 35px 0;
 +
  overflow: visible;
 +
  transition: padding 0.3s ease-in-out;
 +
  -moz-transition: padding 0.3s ease-in-out;
 +
  -webkit-transition: padding 0.3s ease-in-out;
 +
}
 +
 
 +
.site-header.site-header-shrink {
 +
  padding: 17px 0;
 +
}
 +
 
 +
.main-nav ul li {
 +
  float: left;
 +
  display: block;
 +
  margin-left: 20px;
 +
  position: relative;
 +
}
 +
.main-nav ul li a {
 +
  color: #31373a;
 +
  font-size: 13px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  font-family: "Raleway", sans-serif;
 +
  padding: 5px 15px;
 +
  display: block;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  -ms-border-radius: 3px;
 +
  -o-border-radius: 3px;
 +
  border-radius: 3px;
 +
}
 +
.main-nav ul li a:hover {
 +
  color: #00a8d6;
 +
}
 +
.main-nav ul li a i {
 +
  margin-left: 7px;
 +
}
 +
.main-nav ul li.active a {
 +
  color: #00a8d6;
 +
  background-color: #f1f4f5;
 +
}
 +
.main-nav ul li ul {
 +
  display: none;
 +
  top: 100%;
 +
  left: 0;
 +
  margin-top: 5px;
 +
  position: absolute;
 +
  width: 220px;
 +
  background-color: white;
 +
  border: 2px solid #f1f4f5;
 +
}
 +
.main-nav ul li ul li {
 +
  margin-left: 0;
 +
  width: 100%;
 +
  border-bottom: 1px solid #dce4e6;
 +
}
 +
.main-nav ul li ul li:last-child {
 +
  border-bottom: none;
 +
}
 +
.main-nav ul li ul li a {
 +
  background-color: transparent !important;
 +
  color: #777777 !important;
 +
  text-transform: capitalize;
 +
  font-weight: 600;
 +
}
 +
.main-nav ul li ul li a:hover {
 +
  color: #00a8d6 !important;
 +
}
 +
.main-nav ul li ul li:last-child a {
 +
  border-bottom: none;
 +
}
 +
 
 +
a.menu-toggle-btn {
 +
  float: right;
 +
  margin-right: 20px;
 +
  color: #31373a;
 +
  font-size: 14px;
 +
  display: block;
 +
}
 +
a.menu-toggle-btn i {
 +
  font-size: 18px;
 +
}
 +
 
 +
.main_menu li {
 +
  border-bottom: 1px solid #485156;
 +
  padding: 10px 0;
 +
}
 +
.main_menu li:first-child {
 +
  padding-top: 0;
 +
}
 +
.main_menu li:last-child {
 +
  border-bottom: none;
 +
  padding-bottom: 0;
 +
}
 +
.main_menu li a {
 +
  font-size: 14px;
 +
  font-family: "Raleway", sans-serif;
 +
  color: #bfbfbf;
 +
  font-weight: 500;
 +
}
 +
.main_menu li ul li {
 +
  margin-left: 20px;
 +
}
 +
.main_menu li ul li:first-child {
 +
  border-top: 1px solid #485156;
 +
  padding-top: 8px;
 +
  margin-top: 10px;
 +
}
 +
.main_menu li ul li:before {
 +
  content: '-';
 +
  color: gray;
 +
  margin-right: 10px;
 +
}
 +
 
 +
.responsive_menu {
 +
  padding: 20px;
 +
  background-color: rgba(49, 55, 58, 0.98);
 +
  display: none;
 +
  position: relative;
 +
  z-index: 9999;
 +
}
 +
 
 +
/*------------------------------------------------------
 +
General Styling
 +
--------------------------------------------------------*/
 +
.light-content {
 +
  background-color: white;
 +
  width: 100%;
 +
}
 +
 
 +
.dark-content {
 +
  background-color: #31373a;
 +
  width: 100%;
 +
  padding: 70px 0 80px 0;
 +
}
 +
.dark-content .section-header .section-title {
 +
  color: white;
 +
}
 +
.dark-content .section-header .section-desc {
 +
  color: #939ea4;
 +
}
 +
 
 +
.section-header {
 +
  padding-bottom: 70px;
 +
  text-align: center;
 +
}
 +
.section-header .section-title {
 +
  font-size: 30px;
 +
  font-weight: 600;
 +
}
 +
 
 +
.larger-text {
 +
  font-size: 18px;
 +
  line-height: 36px;
 +
}
 +
 
 +
.light-text {
 +
  color: #aaaaaa;
 +
}
 +
 
 +
.large-button {
 +
  padding: 15px 20px;
 +
  font-size: 12px;
 +
  font-family: "Raleway", sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: 800;
 +
  -webkit-border-radius: 2px;
 +
  -moz-border-radius: 2px;
 +
  -ms-border-radius: 2px;
 +
  -o-border-radius: 2px;
 +
  border-radius: 2px;
 +
}
 +
 
 +
a.large-button.white-color {
 +
  color: #31373a;
 +
  background-color: white;
 +
}
 +
 
 +
.main-button {
 +
  padding: 12px 15px;
 +
  font-size: 12px;
 +
  font-family: "Raleway", sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  -webkit-border-radius: 2px;
 +
  -moz-border-radius: 2px;
 +
  -ms-border-radius: 2px;
 +
  -o-border-radius: 2px;
 +
  border-radius: 2px;
 +
}
 +
 
 +
a.main-button.accent-color {
 +
  background-color: #00a8d6;
 +
  color: white;
 +
}
 +
a.main-button.accent-color:hover {
 +
  background-color: #31373a;
 +
}
 +
 
 +
.icon-button {
 +
  margin-left: 15px;
 +
}
 +
 
 +
.last-item-margin {
 +
  margin-bottom: 100px;
 +
}
 +
 
 +
label {
 +
  font-weight: normal;
 +
  color: #aaaaaa;
 +
}
 +
 
 +
input, textarea {
 +
  border: 0;
 +
  color: #777777;
 +
  padding: 8px 14px;
 +
  background-color: #f1f4f5;
 +
  border: 1px solid #f1f4f5;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  -ms-border-radius: 3px;
 +
  -o-border-radius: 3px;
 +
  border-radius: 3px;
 +
}
 +
 
 +
input:focus,
 +
textarea:focus {
 +
  background-color: white;
 +
  border-color: #dce4e6;
 +
}
 +
 
 +
.mainBtn {
 +
  background-color: #00a8d6;
 +
  padding: 7px 17px;
 +
  color: white;
 +
  display: inline-block;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  -ms-border-radius: 3px;
 +
  -o-border-radius: 3px;
 +
  border-radius: 3px;
 +
  -webkit-transition: background 250ms ease-in;
 +
  -moz-transition: background 250ms ease-in;
 +
  -ms-transition: background 250ms ease-in;
 +
  -o-transition: background 250ms ease-in;
 +
  transition: background 250ms ease-in;
 +
}
 +
.mainBtn:hover {
 +
  background-color: #00b8ea;
 +
}
 +
 
 +
button {
 +
  outline: 0;
 +
  border: 0;
 +
}
 +
 
 +
input.mainBtn:focus,
 +
input.mainBtn {
 +
  background-color: #00a8d6;
 +
  border: 0;
 +
}
 +
 
 +
#homeIntro {
 +
  background-image: url("../images/includes/homeintro.jpg");
 +
}
 +
 
 +
#portfolio {
 +
  background-image: url("../images/includes/portfolio.jpg");
 +
}
 +
 
 +
#portfolioId {
 +
  background-image: url("../images/includes/portfolioId.jpg");
 +
}
 +
 
 +
#blogPosts {
 +
  background-image: url("../images/includes/blogPosts.jpg");
 +
}
 +
 
 +
#blog {
 +
  background-image: url("../images/includes/blog.jpg");
 +
}
 +
 
 +
#blogId {
 +
  background-image: url("../images/includes/blogId.jpg");
 +
  background-attachment: inherit;
 +
}
 +
 
 +
#contact {
 +
  background-image: url("../images/includes/contact.jpg");
 +
}
 +
 
 +
.parallax {
 +
  background-attachment: fixed;
 +
  background-repeat: no-repeat;
 +
  background-position: center center;
 +
  background-size: cover;
 +
  color: #fff;
 +
  overflow: hidden;
 +
}
 +
 
 +
.parallax-overlay {
 +
  background-color: rgba(0, 0, 0, 0.65);
 +
}
 +
 
 +
.pageTitle {
 +
  padding-top: 70px;
 +
  padding-bottom: 70px;
 +
}
 +
 
 +
.page-title {
 +
  color: white;
 +
  margin: 5px 0 0 0;
 +
  font-size: 30px;
 +
  font-weight: 800;
 +
}
 +
 
 +
.page-location {
 +
  background-color: rgba(0, 0, 0, 0.4);
 +
  display: inline-block;
 +
  font-size: 14px;
 +
  padding: 7px 12px;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  -ms-border-radius: 3px;
 +
  -o-border-radius: 3px;
 +
  border-radius: 3px;
 +
}
 +
 
 +
.home-intro-content {
 +
  padding: 11em 0;
 +
  text-align: center;
 +
}
 +
.home-intro-content h2 {
 +
  font-size: 36px;
 +
  font-weight: 800;
 +
  color: white;
 +
}
 +
.home-intro-content p {
 +
  margin: 55px 0;
 +
  font-size: 18px;
 +
  line-height: 32px;
 +
}
 +
.home-intro-content .large-button:hover {
 +
  opacity: 0.8;
 +
}
 +
 
 +
blockquote {
 +
  margin: 30px 0;
 +
  display: block;
 +
  color: #aaaaaa;
 
}
 
}
−
</style>
 
 
</head>
 
</head>
−
<section id="homeIntro" class="parallax first-widget">
+
<body>
 +
<div class="responsive_menu">
 +
        <ul class="main_menu">
 +
            <li><a href="index.html">Home</a></li>
 +
            <li><a href="#">Portfolio</a>
 +
            <ul>
 +
            <li><a href="portfolio.html">Portfolio Grid</a></li>
 +
            <li><a href="project-image.html">Project Image</a></li>
 +
            <li><a href="project-slideshow.html">Project Slideshow</a></li>
 +
            </ul>
 +
            </li>
 +
            <li><a href="#">Blog</a>
 +
<ul>
 +
<li><a href="blog.html">Blog Standard</a></li>
 +
<li><a href="blog-single.html">Blog Single</a></li>
 +
                    <li><a href="#">visit templatemo</a></li>
 +
</ul>
 +
            </li>
 +
            <li><a href="archives.html">Archives</a></li>
 +
            <li><a href="contact.html">Contact</a></li>
 +
        </ul> <!-- /.main_menu -->
 +
    </div> <!-- /.responsive_menu -->
 +
 
 +
<header class="site-header clearfix">
 +
<div class="container">
 +
 
 +
<div class="row">
 +
 
 +
<div class="col-md-12">
 +
 
 +
<div class="pull-left logo">
 +
<a href="index.html">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d6/IGEM_nankai.png" alt="Nankai IGEM">
 +
</a>
 +
</div> <!-- /.logo -->
 +
 
 +
<div class="main-navigation pull-right">
 +
 
 +
<nav class="main-nav visible-md visible-lg">
 +
<ul class="sf-menu">
 +
<li class="active"><a href="index.html">Home</a></li>
 +
            <li><a href="#">Portfolio</a>
 +
            <ul>
 +
            <li><a href="portfolio.html">Portfolio Grid</a></li>
 +
            <li><a href="project-image.html">Project Image</a></li>
 +
            <li><a href="project-slideshow.html">Project Slideshow</a></li>
 +
            </ul>
 +
            </li>
 +
            <li><a href="#">Blog</a>
 +
<ul>
 +
<li><a href="blog.html">Blog Standard</a></li>
 +
<li><a href="blog-single.html">Blog Single</a></li>
 +
                                        <li><a href="#">visit templatemo</a></li>
 +
</ul>
 +
            </li>
 +
 +
                                <li><a href="#">Archives</a>
 +
<ul>
 +
<li><a href="blog.html">Blog Standard</a></li>
 +
<li><a href="blog-single.html">Blog Single</a></li>
 +
                                        <li><a href="#">visit templatemo</a></li>
 +
</ul>
 +
<li><a href="#">Archives</a>
 +
<ul>
 +
<li><a href="blog.html">Blog Standard</a></li>
 +
<li><a href="blog-single.html">Blog Single</a></li>
 +
                                        <li><a href="#">visit templatemo</a></li>
 +
</ul>             <li><a href="contact.html">Contact</a></li>
 +
</ul> <!-- /.sf-menu -->
 +
</nav> <!-- /.main-nav -->
 +
 
 +
<!-- This one in here is responsive menu for tablet and mobiles -->
 +
    <div class="responsive-navigation visible-sm visible-xs">
 +
        <a href="#nogo" class="menu-toggle-btn">
 +
            <i class="fa fa-bars"></i>
 +
        </a>
 +
    </div> <!-- /responsive_navigation -->
 +
 
 +
</div> <!-- /.main-navigation -->
 +
 
 +
</div> <!-- /.col-md-12 -->
 +
 
 +
</div> <!-- /.row -->
 +
 
 +
</div> <!-- /.container -->
 +
</header> <!-- /.site-header -->
 +
 
 +
<section id="homeIntro" class="parallax first-widget">
 
    <div class="parallax-overlay">
 
    <div class="parallax-overlay">
 
    <div class="container home-intro-content">
 
    <div class="container home-intro-content">
 
        <div class="row">
 
        <div class="row">
 
        <div class="col-md-12">
 
        <div class="col-md-12">
−
        <h2>Welcome to Nankai IGEM team!</h2>
+
        <h2>Choose the Optimal Workspace for Your Business</h2>
−
        <p>From collage of life science</p>
+
        <p>We asked six entrepreneurs with drastically different office strategies for their advice on<br> choosing a workspace. </p>
−
                </div> <!-- /.col-md-12 -->
+
        </div> <!-- /.col-md-12 -->
 +
        </div> <!-- /.row -->
 +
    </div> <!-- /.container -->
 +
    </div> <!-- /.parallax-overlay -->
 +
</section> <!-- /#homeIntro -->
 +
 
 +
<section class="cta clearfix">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<h4 class="cta-title"><strong>Want to use Medigo?</strong> Go and download it on templatemo.com</h4>
 +
<a href="#" class="main-button accent-color">Visit templatemo<i class="icon-button fa fa-arrow-right"></i></a>
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
</section> <!-- /.cta -->
 +
<section class="light-content services">
 +
<div class="container">
 +
<div class="row">
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-umbrella fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Easy Theme Colors</h3>
 +
<p>There are 4 color themes (blue, green, red, orange) and this one is blue.</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-mobile-phone fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Change Icons</h3>
 +
<p>Check <a rel="nofollow" href="http://fontawesome.io/icons/" target="_blank">FontAwesome</a> for your suitable icons. Example: &lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-pencil-square-o fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Pixel Perfect Design</h3>
 +
<p>Based on a 12 column grid system, with every pixel snapped.</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
</div>
 +
 
 +
<div class="row">
 +
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-code fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Valid HTML5</h3>
 +
<p>We offer validated html files and well commented code on our themes.</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-eye-slash fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Retina Ready</h3>
 +
<p>Incredibly clean design provides you powerful way to grow your business.</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service-box-wrap">
 +
<div class="service-icon-wrap">
 +
<i class="fa fa-suitcase fa-2x"></i>
 +
</div> <!-- /.service-icon-wrap -->
 +
<div class="service-cnt-wrap">
 +
<h3 class="service-title">Special Thanks</h3>
 +
<p>Credit goes to <a rel="nofollow" href="http://unsplash.com" target="_blank">Unsplash</a> for images used in this template.</p>
 +
</div> <!-- /.service-cnt-wrap -->
 +
</div> <!-- /.service-box-wrap -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
</section> <!-- /.services -->
 +
 
 +
<section class="dark-content portfolio">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="section-header">
 +
<h2 class="section-title">Our Lovely Portfolio</h2>
 +
<p class="section-desc">Everything you need to create a professional website.</p>
 +
</div> <!-- /.section-header -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
 +
<div id="portfolio-carousel" class="portfolio-carousel portfolio-holder">
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Dashboard Template</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Visual Admin</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project1.jpg" title="Visual Admin">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project1.jpg" alt="Visual Admin">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Mobile Ready</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Compass Template</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project2.jpg" title="Compass Template">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project2.jpg" alt="Compass Template">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Responsive Design</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Awesome Theme</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project3.jpg" title="Awesome Theme">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project3.jpg" alt="Awesome Theme">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Portfolio</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Volton Personal Site</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project4.jpg" title="Volton Personal Site">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project4.jpg" alt="Volton Personal Site">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Green</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Rectangle Design</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project5.jpg" title="Rectangle Design">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project5.jpg" alt="Rectangle Design">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Portfolio</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Masonry Gallery</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project6.jpg" title="Masonry Gallery">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project6.jpg" alt="Masonry Gallery">
 +
</div>
 +
</div> <!-- /.item -->
 +
<div class="item">
 +
<div class="thumb-post">
 +
<div class="overlay">
 +
<div class="overlay-inner">
 +
<div class="portfolio-infos">
 +
<span class="meta-category">Branding / Identity</span>
 +
<h3 class="portfolio-title"><a href="project-slideshow.html">Gloss Template</a></h3>
 +
</div>
 +
<div class="portfolio-expand">
 +
<a class="fancybox" href="images/includes/project7.jpg" title="Gloss Template">
 +
<i class="fa fa-expand"></i>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<img src="images/includes/project7.jpg" alt="Gloss Template">
 +
</div>
 +
</div> <!-- /.item -->
 +
</div> <!-- /#owl-demo -->
 +
</section> <!-- /.portfolio-holder -->
 +
 
 +
<section class="testimonials-widget">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="bxslider">
 +
<div class="testimonial">
 +
<div class="testimonial-content">
 +
<span class="testimonial-author">Andy Colin - Architect</span>
 +
<p class="testimonial-description">Thank you for all your good work in creating theme. They have a ‘presence’ which feels right.</p>
 +
</div>
 +
</div>
 +
<div class="testimonial">
 +
<div class="testimonial-content">
 +
<span class="testimonial-author">Thomas Teddy - Design Writer</span>
 +
<p class="testimonial-description">I love the logo. Particularly how the mark can stand on its own. Nice work! It feels tall and proud and powerful — and I love that. That’s what I was after.</p>
 +
</div>
 +
</div>
 +
<div class="testimonial">
 +
<div class="testimonial-content">
 +
<span class="testimonial-author">John Willy - Developer</span>
 +
<p class="testimonial-description">You’re pretty awesome to work with. Incredibly organized, easy to communicate with, responsive with next iterations, and beautiful work.</p>
 +
</div>
 +
</div>
 +
</div> <!-- /.bxslider -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
</section> <!-- /.testimonials-widget -->
 +
 
 +
<section class="light-content our-team">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="section-header">
 +
<h2 class="section-title">Meet our happy staff</h2>
 +
<p class="section-desc">Medigo is the automated way to keep track of what everyone is working on.</p>
 +
</div> <!-- /.section-header -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
<div class="team-members">
 +
<div class="container">
 +
<div class="row">
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="team-member">
 +
<div class="thumb-post">
 +
<img src="images/includes/member1.jpg" alt="">
 +
<span class="member-role">Marketing Manager</span>
 +
</div>
 +
<div class="member-content">
 +
<h4 class="member-name">Amy Groovy</h4>
 +
<p>Duis vitae consequat neque. Nulla pharetra eleifend nulla. </p>
 +
</div>
 +
</div> <!-- /.team-member -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="team-member">
 +
<div class="thumb-post">
 +
<img src="images/includes/member2.jpg" alt="">
 +
<span class="member-role">Web Developer</span>
 +
</div>
 +
<div class="member-content">
 +
<h4 class="member-name">Candy Sharp</h4>
 +
<p>Duis vitae consequat neque. Nulla pharetra eleifend nulla. </p>
 +
</div>
 +
</div> <!-- /.team-member -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
<div class="col-md-4 col-sm-4">
 +
<div class="team-member">
 +
<div class="thumb-post">
 +
<img src="images/includes/member3.jpg" alt="">
 +
<span class="member-role">Graphic Designer</span>
 +
</div>
 +
<div class="member-content">
 +
<h4 class="member-name">Linda Master</h4>
 +
<p>Duis vitae consequat neque. Nulla pharetra eleifend nulla. </p>
 +
</div>
 +
</div> <!-- /.team-member -->
 +
</div> <!-- /.col-md-4 -->
 +
 
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
</div> <!-- /.team-members -->
 +
</section> <!-- /.our-team -->
 +
 +
<section id="blogPosts" class="parallax">
 +
    <div class="parallax-overlay">
 +
    <div class="container">
 +
        <div class="row">
 +
        <div class="col-md-12">
 +
        <div class="section-header">
 +
<h2 class="section-title">Recent from our blog</h2>
 +
<p class="section-desc">Everything you need to create a professional website.</p>
 +
</div> <!-- /.section-header -->
 +
        </div> <!-- /.col-md-12 -->
 +
        </div> <!-- /.row -->
 +
        <div class="row latest-posts">
 +
        <div class="col-md-4 col-sm-6">
 +
        <div class="blog-post clearfix">
 +
        <div class="thumb-post">
 +
        <a href="blog-single.html"><img src="images/includes/blogthumb1.jpg" alt="" class="img-circle"></a>
 +
        </div>
 +
        <div class="blog-post-content">
 +
        <h4 class="post-title"><a href="blog-single.html">Getting Creative With the Google Maps API</a></h4>
 +
        <span class="meta-post-date">12 February 2084</span>
 +
        </div>
 +
        </div> <!-- /.blog-post -->
 +
        </div> <!-- /.col-md-4 -->
 +
        <div class="col-md-4 col-sm-6">
 +
        <div class="blog-post clearfix">
 +
        <div class="thumb-post">
 +
        <a href="blog-single.html"><img src="images/includes/blogthumb2.jpg" alt="" class="img-circle"></a>
 +
        </div>
 +
        <div class="blog-post-content">
 +
        <h4 class="post-title"><a href="blog-single.html">Design Deliverables – easily share project</a></h4>
 +
        <span class="meta-post-date">10 February 2084</span>
 +
        </div>
 +
        </div> <!-- /.blog-post -->
 +
        </div> <!-- /.col-md-4 -->
 +
        <div class="col-md-4 col-sm-6">
 +
        <div class="blog-post clearfix">
 +
        <div class="thumb-post">
 +
        <a href="blog-single.html"><img src="images/includes/blogthumb3.jpg" alt="" class="img-circle"></a>
 +
        </div>
 +
        <div class="blog-post-content">
 +
        <h4 class="post-title"><a href="blog-single.html">Using Templates to Get Your Clients Thinking</a></h4>
 +
        <span class="meta-post-date">8 February 2084</span>
 +
        </div>
 +
        </div> <!-- /.blog-post -->
 +
        </div> <!-- /.col-md-4 -->
 
        </div> <!-- /.row -->
 
        </div> <!-- /.row -->
 
    </div> <!-- /.container -->
 
    </div> <!-- /.container -->
 
    </div> <!-- /.parallax-overlay -->
 
    </div> <!-- /.parallax-overlay -->
−
</section>
+
</section> <!-- /#blogPosts -->
−
<section>
+
 
−
<h4>Project Description</h4>
+
<footer class="site-footer">
−
<p>  
+
<div class="container">
−
Poly-γ-glutamic acid (γ-PGA) is an important,  naturally occurring polyamide consisting of D/L-glutamate monomers. Unlike  typical peptide linkages, the amide linkages inγ-PGA are  formed between the α-amino group and the  γ-carboxyl group. γ-PGA exhibits many favorable features such as biodegradable,  water soluble, edible and non-toxic to humans and the environment. Therefore,  it has been widely used in fields of foods, medicines, cosmetics and  agriculture and many unique applications, such as a sustained release material  and drug carrier, curable biological adhesive, biodegradable fibres, and highly  water absorbable hydrogels.<br>
+
<div class="row">
−
<br>
+
<div class="col-md-12">
−
  Strains capable for producing γ-PGA  are divided into two categories based on their requirement for glutamate acid:  glutamate-dependent strains and glutamate-independent strains.  Glutamate-independent strains are preferable for industrial production because  of their low cost and simplified fermentation process. However, compared with  glutamate-dependent strains, their lower γ-PGA productivity limits their  industrial application.  Therefore,  the construction of a glutamate-independent strain with high γ-PGA yield is  important for industrial applications. <br>
+
<nav class="footer-nav clearfix">
−
  <br>
+
<ul class="footer-menu">
−
  <em>Bacillusamyloliquefaciens</em> LL3, isolated from fermented food, is a glutamate-independent strain, which can produce 3-4 g/L γ-PGA with sucrose as  its carbon source and ammonium sulfate as its nitrogen source. The <em>B. amyloliquefaciens</em> LL3 strain was deposited in the China Center for Type Culture  Collection (CCTCC) with accession number CCTCC M 208109 and its whole genome has been sequenced in 2011. In this study,  we aimed to improve the γ-PGA production based on the <em>B. amyloliquefaciens </em>NK-1 strain (a derivative of LL3 strain with  its endogenous plasmid and <em>upp</em> gene  deleted).<br>
+
<li><a href="index.html">Home</a></li>
−
  <br>
+
<li><a href="portfolio.html">Portfolio</a></li>
−
In order to improve  γ-PGA production, we employed two strategies to fine-tune the synthetic  pathways and balance the metabolism in the glutamate-independent <em>B. amyloliquefaciens </em>NK-1 strain. Firstly,  we constructed a metabolic toggle switch in the NK-1 strain to inhibit the  expression of ODHC (2-oxoglutarate dehydrogenase complex) by adding IPTG in the  stationary stage and distribute the metabolic flux more frequently to be used  for γ-PGA precursor-glutamate synthesis. As scientists had found that the activity of ODHC was rather  low when glutamate was highly produced in a  <em>Corynebacterium&nbsp;glutamicum</em> strain. Second, to balance the increase  of endogenous glutamate production, we optimized the expression level of <em>pgsBCA</em> genes (responsible for γ-PGA synthesis) by replacing its native promoter to  seven different strength of promoters. Through these two strategies, we aimed  to obtain a γ-PGA production improved mutant strain. </p>
+
<li><a href="blog.html">Blog Posts</a></li>
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
<li><a href="archives.html">Shortcodes</a></li>
−
</section>
+
<li><a href="contact.html">Contact</a></li>
 +
</ul> <!-- /.footer-menu -->
 +
</nav> <!-- /.footer-nav -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
<div class="row">
 +
<div class="col-md-12">
 +
<p class="copyright-text">Copyright &copy; 2084 Company Name
 +
                    | More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container -->
 +
</footer> <!-- /.site-footer -->
 +
 
 +
<!-- Scripts -->
 +
<script src="https://2015.igem.org/Template:Nankai/plugins.minJS?action=raw&ctype=text/javascript"></script>
 +
        <script src="https://2015.igem.org/Template:Nankai/medigo-custom.minJS action=raw&ctype=text/javascript"></script></body>
 
</html>
 
</html>
−
{{Nankai}}
 

Revision as of 12:19, 29 July 2015

<!DOCTYPE html> Medigo Blue, free responsive template /*------------------------------------------------------ HEADER STYLES --------------------------------------------------------*/ .site-header { position: fixed; top: 0; left: 0; width: 100%; background: white; box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px; z-index: 9999; padding: 35px 0; overflow: visible; transition: padding 0.3s ease-in-out; -moz-transition: padding 0.3s ease-in-out; -webkit-transition: padding 0.3s ease-in-out; } .site-header.site-header-shrink { padding: 17px 0; } .main-nav ul li { float: left; display: block; margin-left: 20px; position: relative; } .main-nav ul li a { color: #31373a; font-size: 13px; font-weight: 700; text-transform: uppercase; font-family: "Raleway", sans-serif; padding: 5px 15px; display: block; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .main-nav ul li a:hover { color: #00a8d6; } .main-nav ul li a i { margin-left: 7px; } .main-nav ul li.active a { color: #00a8d6; background-color: #f1f4f5; } .main-nav ul li ul { display: none; top: 100%; left: 0; margin-top: 5px; position: absolute; width: 220px; background-color: white; border: 2px solid #f1f4f5; } .main-nav ul li ul li { margin-left: 0; width: 100%; border-bottom: 1px solid #dce4e6; } .main-nav ul li ul li:last-child { border-bottom: none; } .main-nav ul li ul li a { background-color: transparent !important; color: #777777 !important; text-transform: capitalize; font-weight: 600; } .main-nav ul li ul li a:hover { color: #00a8d6 !important; } .main-nav ul li ul li:last-child a { border-bottom: none; } a.menu-toggle-btn { float: right; margin-right: 20px; color: #31373a; font-size: 14px; display: block; } a.menu-toggle-btn i { font-size: 18px; } .main_menu li { border-bottom: 1px solid #485156; padding: 10px 0; } .main_menu li:first-child { padding-top: 0; } .main_menu li:last-child { border-bottom: none; padding-bottom: 0; } .main_menu li a { font-size: 14px; font-family: "Raleway", sans-serif; color: #bfbfbf; font-weight: 500; } .main_menu li ul li { margin-left: 20px; } .main_menu li ul li:first-child { border-top: 1px solid #485156; padding-top: 8px; margin-top: 10px; } .main_menu li ul li:before { content: '-'; color: gray; margin-right: 10px; } .responsive_menu { padding: 20px; background-color: rgba(49, 55, 58, 0.98); display: none; position: relative; z-index: 9999; } /*------------------------------------------------------ General Styling --------------------------------------------------------*/ .light-content { background-color: white; width: 100%; } .dark-content { background-color: #31373a; width: 100%; padding: 70px 0 80px 0; } .dark-content .section-header .section-title { color: white; } .dark-content .section-header .section-desc { color: #939ea4; } .section-header { padding-bottom: 70px; text-align: center; } .section-header .section-title { font-size: 30px; font-weight: 600; } .larger-text { font-size: 18px; line-height: 36px; } .light-text { color: #aaaaaa; } .large-button { padding: 15px 20px; font-size: 12px; font-family: "Raleway", sans-serif; text-transform: uppercase; font-weight: 800; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } a.large-button.white-color { color: #31373a; background-color: white; } .main-button { padding: 12px 15px; font-size: 12px; font-family: "Raleway", sans-serif; text-transform: uppercase; font-weight: 700; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } a.main-button.accent-color { background-color: #00a8d6; color: white; } a.main-button.accent-color:hover { background-color: #31373a; } .icon-button { margin-left: 15px; } .last-item-margin { margin-bottom: 100px; } label { font-weight: normal; color: #aaaaaa; } input, textarea { border: 0; color: #777777; padding: 8px 14px; background-color: #f1f4f5; border: 1px solid #f1f4f5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } input:focus, textarea:focus { background-color: white; border-color: #dce4e6; } .mainBtn { background-color: #00a8d6; padding: 7px 17px; color: white; display: inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: background 250ms ease-in; -moz-transition: background 250ms ease-in; -ms-transition: background 250ms ease-in; -o-transition: background 250ms ease-in; transition: background 250ms ease-in; } .mainBtn:hover { background-color: #00b8ea; } button { outline: 0; border: 0; } input.mainBtn:focus, input.mainBtn { background-color: #00a8d6; border: 0; } #homeIntro { background-image: url("../images/includes/homeintro.jpg"); } #portfolio { background-image: url("../images/includes/portfolio.jpg"); } #portfolioId { background-image: url("../images/includes/portfolioId.jpg"); } #blogPosts { background-image: url("../images/includes/blogPosts.jpg"); } #blog { background-image: url("../images/includes/blog.jpg"); } #blogId { background-image: url("../images/includes/blogId.jpg"); background-attachment: inherit; } #contact { background-image: url("../images/includes/contact.jpg"); } .parallax { background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; overflow: hidden; } .parallax-overlay { background-color: rgba(0, 0, 0, 0.65); } .pageTitle { padding-top: 70px; padding-bottom: 70px; } .page-title { color: white; margin: 5px 0 0 0; font-size: 30px; font-weight: 800; } .page-location { background-color: rgba(0, 0, 0, 0.4); display: inline-block; font-size: 14px; padding: 7px 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .home-intro-content { padding: 11em 0; text-align: center; } .home-intro-content h2 { font-size: 36px; font-weight: 800; color: white; } .home-intro-content p { margin: 55px 0; font-size: 18px; line-height: 32px; } .home-intro-content .large-button:hover { opacity: 0.8; } blockquote { margin: 30px 0; display: block; color: #aaaaaa; }

Choose the Optimal Workspace for Your Business

We asked six entrepreneurs with drastically different office strategies for their advice on
choosing a workspace.

Want to use Medigo? Go and download it on templatemo.com

Visit templatemo

Easy Theme Colors

There are 4 color themes (blue, green, red, orange) and this one is blue.

Change Icons

Check FontAwesome for your suitable icons. Example: <i class="fa fa-download"></i>

Pixel Perfect Design

Based on a 12 column grid system, with every pixel snapped.

Valid HTML5

We offer validated html files and well commented code on our themes.

Retina Ready

Incredibly clean design provides you powerful way to grow your business.

Special Thanks

Credit goes to Unsplash for images used in this template.

Our Lovely Portfolio

Everything you need to create a professional website.

Andy Colin - Architect

Thank you for all your good work in creating theme. They have a ‘presence’ which feels right.

Thomas Teddy - Design Writer

I love the logo. Particularly how the mark can stand on its own. Nice work! It feels tall and proud and powerful — and I love that. That’s what I was after.

John Willy - Developer

You’re pretty awesome to work with. Incredibly organized, easy to communicate with, responsive with next iterations, and beautiful work.

Meet our happy staff

Medigo is the automated way to keep track of what everyone is working on.

Marketing Manager

Amy Groovy

Duis vitae consequat neque. Nulla pharetra eleifend nulla.

Web Developer

Candy Sharp

Duis vitae consequat neque. Nulla pharetra eleifend nulla.

Graphic Designer

Linda Master

Duis vitae consequat neque. Nulla pharetra eleifend nulla.

Recent from our blog

Everything you need to create a professional website.

Getting Creative With the Google Maps API

12 February 2084

Design Deliverables – easily share project

10 February 2084

Using Templates to Get Your Clients Thinking

8 February 2084