Difference between revisions of "Team:Tianjin/Community/Overview"

 
(91 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/style.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/style.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/bootstrap.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/bootstrap.css}}
−
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/font.css}}
+
 
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animation.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animation.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animate.css}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/Community/css/animate.css}}
  
 
<html>
 
<html>
−
<head>
 
−
<meta charset="utf-8">
 
−
<title>Worthy</title>
 
−
<meta name="description" content="Worthy a Bootstrap-based, Responsive HTML5 Template">
 
−
<meta name="author" content="htmlcoder.me">
 
  
−
<!-- Mobile Meta -->
+
<style>
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
#Outreach{
 +
  color: inherit;
 +
  background-color: rgba(255, 255, 255, 0.1);
 +
}
 +
</style>
  
−
<!-- Favicon -->
 
−
<link rel="shortcut icon" href="images/favicon.ico">
 
  
−
+
<body class="no-trans" style="background: white;">
−
 
+
−
</head>
+
−
 
+
−
<body class="no-trans">
+
−
<!-- scrollToTop -->
+
−
<!-- ================ -->
+
−
<div class="scrollToTop"><i class="icon-up-open-big"></i></div>
+
−
 
+
−
<!-- header start -->
+
−
<!-- ================ -->
+
−
+
−
<!-- header end -->
+
−
 
+
−
<!-- banner start -->
+
−
<!-- ================ -->
+
−
+
−
 
+
−
<!-- section start -->
+
 
<!-- ================ -->
 
<!-- ================ -->
 
<div class="section clearfix object-non-visible" data-animation-effect="fadeIn">
 
<div class="section clearfix object-non-visible" data-animation-effect="fadeIn">
 
<div class="container">
 
<div class="container">
−
                         <div></br></div><div></br></div><div></br></div>
+
                         <div></br></div><div></br></div><div></br></br></br></div>
−
<div class="row">
+
 
<div class="col-md-12">
 
<div class="col-md-12">
−
<h1 id="about" class="title text-center">About <span>Worthy</span></h1>
+
<h1 id="about" class="title text-center" style="max-width:960px">Overview On <span>Human Practice</span></h1>
−
<p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta officia, aspernatur.</p>
+
 
<div class="space"></div>
 
<div class="space"></div>
 
<div class="row">
 
<div class="row">
−
<div class="col-md-6">
+
<div class="col-md-5">
−
<img src="https://static.igem.org/mediawiki/2016/e/e1/T--Tianjin--community-section-image-1.png" alt="desktop">
+
<img src="https://static.igem.org/mediawiki/2016/thumb/3/36/T--Tianjin--Overview--57.svg/512px-T--Tianjin--Overview--57.svg.png" alt="desktop" style="height:100%">
 
<div class="space"></div>
 
<div class="space"></div>
 
</div>
 
</div>
−
<div class="col-md-6">
+
<div class="col-md-7">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.</p>
+
<p style="font-size:20px">This year, we aimed to degrade PET, which is a kind of pollution source, with our modified enzymes PETase and MHETase. We believe that in the near future, it will be applied to tackle with the problem of white pollution. Meanwhile, the masses’ awareness of environmental protection should also be aroused. As a researcher, we are bound to popularize the knowledge of white pollution and synthetic biology. In addition, we discussed with many experts in respect of PET degradation research. They were all helpful and enthusiastic with suggestions on how we could improve our system.</br></br>
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?</p>
+
We conducted human practice in nine different aspects--Education, Industry, Society, Government, NGO, Law, Competition, Media, Businessplan.
−
<ul class="list-unstyled">
+
</p>
−
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Lorem ipsum dolor sit amet</li>
+
−
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Reiciendis deleniti neque aliquid</li>
+
−
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Ipsam fuga error commodi</li>
+
−
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Lorem ipsum dolor sit amet</li>
+
−
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Dignissimos molestiae necessitatibus</li>
+
−
</ul>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="space"></div>
 
<div class="space"></div>
−
<h2>Becessitatibus quae beatae possimus ullam</h2>
+
 
<div class="row">
 
<div class="row">
−
<div class="col-md-6">
+
<!--  part left  -->
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci illo, voluptatum ipsam fuga error commodi architecto, laudantium culpa tenetur at id, beatae placeat deserunt iure quas voluptas fugit eveniet.</p>
+
<div class="col-md-12">
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ducimus explicabo quibusdam temporibus deserunt doloremque pariatur ea, animi a. Delectus similique atque eligendi, enim vel reiciendis deleniti neque aliquid, sit?</p>
+
−
<p>Vitae dolores quam magnam accusantium nam, voluptatibus expedita delectus, dolorum odio magni ut nemo nihil ex earum pariatur molestias velit eveniet, facere autem saepe aut. Ut minima itaque porro facere. Cumque vitae autem, dignissimos molestiae necessitatibus culpa aliquam deleniti soluta sunt voluptatibus tenetur, unde dolorem eligendi doloribus quibusdam facere totam. Possimus atque deserunt numquam aliquam magnam, facilis officiis illo alias ipsa voluptas laborum, praesentium eveniet nobis velit voluptatem odio eligendi, corporis et iste distinctio! Repellendus, id, ad.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
<div class="panel panel-default">
 
<div class="panel panel-default">
−
<div class="panel-heading" role="tab" id="headingOne">
+
<div class="panel-heading" role="tab" id="headingSix">
 
<h4 class="panel-title">
 
<h4 class="panel-title">
−
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" style="font-size:30px">
−
Collapsible Group Item #1
+
Education
 
</a>
 
</a>
 
</h4>
 
</h4>
 
</div>
 
</div>
−
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+
<div id="collapseSix" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingSix">
−
<div class="panel-body">
+
<div class="panel-body" style="font-size:24px">
−
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher.
+
This section is about our correspondence with Prof. Cunjiang Song, Prof. Qing Liu, Prof. Jun Yang and the lecture to students in primary school, middle school and university respectively.</br><h6><a href="https://2016.igem.org/Team:Tianjin/Community/Education">Click Here To View</a></h6>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="panel panel-default">
 
<div class="panel panel-default">
−
<div class="panel-heading" role="tab" id="headingTwo">
+
<div class="panel-heading" role="tab" id="headingSeven">
 
<h4 class="panel-title">
 
<h4 class="panel-title">
−
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven" style="font-size:30px">
−
Collapsible Group Item #2
+
Industry
 
</a>
 
</a>
 
</h4>
 
</h4>
 
</div>
 
</div>
−
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
−
<div class="panel-body">
+
<div class="panel-body" style="font-size:24px">
−
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+
This section is about our visit to Great Biology Pharmaceutical CO.LTD and Tianjin Nankai Hecheng Science & Technology Co.,Ltd.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Industry">Click Here To View</a></h6>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="panel panel-default">
+
 
−
<div class="panel-heading" role="tab" id="headingThree">
+
 
 +
 
 +
 
 +
<div class="panel panel-default">
 +
<div class="panel-heading" role="tab" id="headingNine">
 
<h4 class="panel-title">
 
<h4 class="panel-title">
−
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNine" aria-expanded="false" aria-controls="collapseNine" style="font-size:30px">
−
Collapsible Group Item #3
+
Society
 
</a>
 
</a>
 
</h4>
 
</h4>
 
</div>
 
</div>
−
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+
<div id="collapseNine" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingNine">
−
<div class="panel-body">
+
<div class="panel-body" style="font-size:24px">
−
Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic.
+
This section is about our visit to the TEDA 
 +
green technology exhibition hall and a survey of the uses of plastic.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Society">Click Here To View</a></h6>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<div class="panel panel-default">
−
</div>
+
<div class="panel-heading" role="tab" id="headingTen">
−
</div>
+
<h4 class="panel-title">
−
</div>
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTen" aria-expanded="false" aria-controls="collapseTen" style="font-size:30px">
−
</div>
+
Government
−
</div>
+
</a>
−
</div>
+
</h4>
−
<!-- section end -->
+
</div>
 +
                                                                 
 +
<div id="collapseTen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTen">
 +
<div class="panel-body" style="font-size:24px">
 +
This section is about our communication with Tianjin Environmental Protection Agency by Weibo about the disposition of the plastic garbage and the actions that government takes to reduce the white pollution.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Government">Click Here To View</a></h6>
 +
</div></div>
  
−
<!-- section start -->
 
−
<!-- ================ -->
 
−
<div class="section translucent-bg bg-image-1 blue">
 
−
<div class="container object-non-visible" data-animation-effect="fadeIn">
 
−
<h1 id="services"  class="text-center title">Worthy Services</h1>
 
−
<div class="space"></div>
 
−
<div class="row">
 
−
<div class="col-sm-6">
 
−
<div class="media">
 
−
<div class="media-body text-right">
 
−
<h4 class="media-heading">Service 1</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
<div class="media-right">
 
−
<i class="fa fa-cog"></i>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-body text-right">
 
−
<h4 class="media-heading">Service 2</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
<div class="media-right">
 
−
<i class="fa fa-check"></i>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-body text-right">
 
−
<h4 class="media-heading">Service 3</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
<div class="media-right">
 
−
<i class="fa fa-desktop"></i>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-body text-right">
 
−
<h4 class="media-heading">Service 4</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
<div class="media-right">
 
−
<i class="fa fa-users"></i>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="space visible-xs"></div>
 
−
<div class="col-sm-6">
 
−
<div class="media">
 
−
<div class="media-left">
 
−
<i class="fa fa-leaf"></i>
 
−
</div>
 
−
<div class="media-body">
 
−
<h4 class="media-heading">Service 5</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-left">
 
−
<i class="fa fa-area-chart"></i>
 
−
</div>
 
−
<div class="media-body">
 
−
<h4 class="media-heading">Service 6</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-left">
 
−
<i class="fa fa-child"></i>
 
−
</div>
 
−
<div class="media-body">
 
−
<h4 class="media-heading">Service 7</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
</div>
 
−
<div class="media">
 
−
<div class="media-left">
 
−
<i class="fa fa-codepen"></i>
 
−
</div>
 
−
<div class="media-body">
 
−
<h4 class="media-heading">Service 8</h4>
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus, voluptate eaque suscipit iste placeat.</p>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<!-- section end -->
 
  
−
<!-- section start -->
+
<div class="panel panel-default">
−
<!-- ================ -->
+
<div class="panel-heading" role="tab" id="headingOne">
−
<div class="default-bg space blue">
+
<h4 class="panel-title">
−
<div class="container">
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="font-size:30px">
−
<div class="row">
+
NGO
−
<div class="col-md-8 col-md-offset-2">
+
</a>
−
<h1 class="text-center">Let's Work Together!</h1>
+
</h4>
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- section end -->
+
−
 
+
−
<!-- section start -->
+
−
<!-- ================ -->
+
−
<div class="section">
+
−
<div class="container">
+
−
<h1 class="text-center title" id="portfolio">Portfolio</h1>
+
−
<div class="separator"></div>
+
−
<p class="lead text-center">Lorem ipsum dolor sit amet laudantium molestias similique.<br> Quisquam incidunt ut laboriosam.</p>
+
−
<br>
+
−
<div class="row object-non-visible" data-animation-effect="fadeIn">
+
−
<div class="col-md-12">
+
−
 
+
−
<!-- isotope filters start -->
+
−
<div class="filters text-center">
+
−
<ul class="nav nav-pills">
+
−
<li class="active"><a href="#" data-filter="*">All</a></li>
+
−
<li><a href="#" data-filter=".web-design">Web design</a></li>
+
−
<li><a href="#" data-filter=".app-development">App development</a></li>
+
−
<li><a href="#" data-filter=".site-building">Site building</a></li>
+
−
</ul>
+
−
</div>
+
−
<!-- isotope filters end -->
+
−
 
+
−
<!-- portfolio items start -->
+
−
<div class="isotope-container row grid-space-20">
+
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-1">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Web Design</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-1-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-1.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
                                                                        </div>
−
</div>
+
<div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
−
<!-- Modal end -->
+
<div class="panel-body" style="font-size:24px">
−
</div>
+
This section is about our visit to Tianjin TEDA low-carbon economic promotion center. We discussed a lot about the center and the plastic waste disposal
−
 
+
with Mrs. Zhao, who is in charge of it.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/NGO">Click Here To View</a></h6>
−
<div class="col-sm-6 col-md-3 isotope-item app-development">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="images/portfolio-2.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-2">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>App Development</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-2">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-2" tabindex="-1" role="dialog" aria-labelledby="project-2-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-2-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-2.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<div class="panel panel-default">
−
<!-- Modal end -->
+
<div class="panel-heading" role="tab" id="headingTwo">
−
</div>
+
<h4 class="panel-title">
−
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:30px">
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
+
Law
−
<div class="image-box">
+
</a>
−
<div class="overlay-container">
+
</h4>
−
<img src="images/portfolio-3.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-3">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Web Design</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-3">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-3" tabindex="-1" role="dialog" aria-labelledby="project-3-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-3-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-3.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
−
</div>
+
<div class="panel-body" style="font-size:24px">
−
<!-- Modal end -->
+
This section is about our inquiry to Dacheng Law Offices. We asked many questions about environmental law to Mr. Licheng Lin,a lawyer from Dacheng Law Office in Beijing.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Law">Click Here To View</a></h6>
−
</div>
+
−
+
−
<div class="col-sm-6 col-md-3 isotope-item site-building">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="images/portfolio-4.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-4">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Site Building</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-4">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-4" tabindex="-1" role="dialog" aria-labelledby="project-4-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-4-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-4.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<div class="panel panel-default">
−
<!-- Modal end -->
+
<div class="panel-heading" role="tab" id="headingThree">
−
</div>
+
<h4 class="panel-title">
−
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="font-size:30px">
−
<div class="col-sm-6 col-md-3 isotope-item app-development">
+
Competition
−
<div class="image-box">
+
</a>
−
<div class="overlay-container">
+
</h4>
−
<img src="images/portfolio-5.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-5">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>App Development</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-5">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-5" tabindex="-1" role="dialog" aria-labelledby="project-5-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-5-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-5.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
−
</div>
+
<div class="panel-body" style="font-size:24px">
−
<!-- Modal end -->
+
This section is about the debate competition held by IGEM Tianjin together with Beiyang Environment-Protecting Association, discussing ethical issues provoked by the application of synthesis biology, aiming to publicize the conception of synthesis biology and arouse attention to biotechnology and protecting the globe.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Competition#">Click Here To View</a></h6>
−
</div>
+
 
−
+
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="images/portfolio-6.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-6">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Web Design</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-6">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-6" tabindex="-1" role="dialog" aria-labelledby="project-6-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-6-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-6.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
 
−
<!-- Modal end -->
 
−
</div>
 
−
 
−
<div class="col-sm-6 col-md-3 isotope-item site-building">
 
−
<div class="image-box">
 
−
<div class="overlay-container">
 
−
<img src="images/portfolio-7.jpg" alt="">
 
−
<a class="overlay" data-toggle="modal" data-target="#project-7">
 
−
<i class="fa fa-search-plus"></i>
 
−
<span>Site Building</span>
 
−
</a>
 
−
</div>
 
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-7">Project Title</a>
 
−
</div>
 
−
<!-- Modal -->
 
−
<div class="modal fade" id="project-7" tabindex="-1" role="dialog" aria-labelledby="project-7-label" aria-hidden="true">
 
−
<div class="modal-dialog modal-lg">
 
−
<div class="modal-content">
 
−
<div class="modal-header">
 
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 
−
<h4 class="modal-title" id="project-7-label">Project Title</h4>
 
−
</div>
 
−
<div class="modal-body">
 
−
<h3>Project Description</h3>
 
−
<div class="row">
 
−
<div class="col-md-6">
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 
−
</div>
 
−
<div class="col-md-6">
 
−
<img src="images/portfolio-7.jpg" alt="">
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="modal-footer">
 
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<!-- Modal end -->
 
−
</div>
 
−
 
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
 
−
<div class="image-box">
 
−
<div class="overlay-container">
 
−
<img src="images/portfolio-8.jpg" alt="">
 
−
<a class="overlay" data-toggle="modal" data-target="#project-8">
 
−
<i class="fa fa-search-plus"></i>
 
−
<span>Web Design</span>
 
−
</a>
 
−
</div>
 
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-8">Project Title</a>
 
−
</div>
 
−
<!-- Modal -->
 
−
<div class="modal fade" id="project-8" tabindex="-1" role="dialog" aria-labelledby="project-8-label" aria-hidden="true">
 
−
<div class="modal-dialog modal-lg">
 
−
<div class="modal-content">
 
−
<div class="modal-header">
 
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 
−
<h4 class="modal-title" id="project-8-label">Project Title</h4>
 
−
</div>
 
−
<div class="modal-body">
 
−
<h3>Project Description</h3>
 
−
<div class="row">
 
−
<div class="col-md-6">
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
 
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
 
−
</div>
 
−
<div class="col-md-6">
 
−
<img src="images/portfolio-8.jpg" alt="">
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="modal-footer">
 
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<!-- Modal end -->
 
−
</div>
 
  
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
+
 
−
<div class="image-box">
+
<div class="panel panel-default">
−
<div class="overlay-container">
+
<div class="panel-heading" role="tab" id="headingFour">
−
<img src="images/portfolio-9.jpg" alt="">
+
<h4 class="panel-title">
−
<a class="overlay" data-toggle="modal" data-target="#project-9">
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="font-size:30px">
−
<i class="fa fa-search-plus"></i>
+
Social Media
−
<span>Web Design</span>
+
</a>
−
</a>
+
</h4>
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-9">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-9" tabindex="-1" role="dialog" aria-labelledby="project-9-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-9-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-9.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
−
</div>
+
<div class="panel-body" style="font-size:24px">
−
<!-- Modal end -->
+
This section is about our communications and interactions with other teams and our advertisements about our sponsors on twitter, facebook, Wechat and Weibo.<h6><a href="https://2016.igem.org/Team:Tianjin/Community/Media">Click Here To View</a></h6>
−
</div>
+
−
 
+
−
<div class="col-sm-6 col-md-3 isotope-item site-building">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="images/portfolio-10.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-10">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Site Building</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-10">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-10" tabindex="-1" role="dialog" aria-labelledby="project-10-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-10-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-10.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<div class="panel panel-default">
−
<!-- Modal end -->
+
<div class="panel-heading" role="tab" id="headingFive">
−
</div>
+
<h4 class="panel-title">
−
 
+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" style="font-size:30px">
−
<div class="col-sm-6 col-md-3 isotope-item web-design">
+
Businessplan
−
<div class="image-box">
+
</a>
−
<div class="overlay-container">
+
</h4>
−
<img src="images/portfolio-11.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-11">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>Web Design</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-11">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-11" tabindex="-1" role="dialog" aria-labelledby="project-11-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-11-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-11.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
−
</div>
+
<div class="panel-body" style="font-size:24px">
−
<!-- Modal end -->
+
This section is about the conditions of three enterprises sponsoring us and we are so honored to get their help!<h6><a href="https://2016.igem.org/Team:Tianjin/businessplan">Click Here To View</a></h6>
−
</div>
+
−
 
+
−
<div class="col-sm-6 col-md-3 isotope-item app-development">
+
−
<div class="image-box">
+
−
<div class="overlay-container">
+
−
<img src="images/portfolio-12.jpg" alt="">
+
−
<a class="overlay" data-toggle="modal" data-target="#project-12">
+
−
<i class="fa fa-search-plus"></i>
+
−
<span>App Development</span>
+
−
</a>
+
−
</div>
+
−
<a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-12">Project Title</a>
+
−
</div>
+
−
<!-- Modal -->
+
−
<div class="modal fade" id="project-12" tabindex="-1" role="dialog" aria-labelledby="project-12-label" aria-hidden="true">
+
−
<div class="modal-dialog modal-lg">
+
−
<div class="modal-content">
+
−
<div class="modal-header">
+
−
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+
−
<h4 class="modal-title" id="project-12-label">Project Title</h4>
+
−
</div>
+
−
<div class="modal-body">
+
−
<h3>Project Description</h3>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
+
−
<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<img src="images/portfolio-12.jpg" alt="">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<!-- Modal end -->
+
</div><p style="font-size:25px"><b>Check our judging form:<a href="https://2016.igem.org/Team:Tianjin/HP/Gold" target="_blank" style="color:#3399FF">Gold Medal</a>, <a href="https://2016.igem.org/Team:Tianjin/HP/Silver" target="_blank" style="color:#3399FF">Silver Medal</a>, <a href="https://2016.igem.org/Team:Tianjin/Integrated_Practices" target="_blank" style="color:#3399FF">Integrated Human Practices</a>, <a href="https://2016.igem.org/Team:Tianjin/Engagement" target="_blank" style="color:#3399FF">Education and Public Engagement</a> and <a href="https://2016.igem.org/Team:Tianjin/Collaborations" target="_blank"style="color:#3399FF">Collaborations</a>.</b></p>
−
</div>
+
  
 +
<!--  part left  -->
 +
        <!--  part right  -->
 +
 +
<div class="space"></div><div class="space"></div>
 
</div>
 
</div>
−
<!-- portfolio items end -->
 
−
 
 
</div>
 
</div>
−
</div>
+
</div>
−
</div>
+
−
</div>
+
−
<!-- section end -->
+
  
−
<!-- section start -->
+
 
−
<!-- ================ -->
+
−
<div class="section translucent-bg bg-image-2 pb-clear">
+
<!-- part right  -->
−
<div class="container object-non-visible" data-animation-effect="fadeIn">
+
−
<h1 id="clients" class="title text-center">Clients</h1>
+
−
<div class="space"></div>
+
−
<div class="row">
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-1.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">You are Amazing!</h3>
+
−
<blockquote>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-2.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">Yeah!</h3>
+
−
<blockquote>
+
−
<p>Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-3.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">Thank You!</h3>
+
−
<blockquote>
+
−
<p>Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-2.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">Thank You!</h3>
+
−
<blockquote>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aperiam consequatur quo.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-3.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">Amazing!</h3>
+
−
<blockquote>
+
−
<p>Iure aperiam consequatur quo quis exercitationem reprehenderit dolor vel ducimus.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="media testimonial">
+
−
<div class="media-left">
+
−
<img src="images/testimonial-1.png" alt="">
+
−
</div>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">Best!</h3>
+
−
<blockquote>
+
−
<p>Aperiam consequatur quo quis exercitationem reprehenderit suscipit iste placeat.</p>
+
−
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+
−
</blockquote>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- section start -->
+
−
<!-- ================ -->
+
−
<div class="translucent-bg blue">
+
−
<div class="container">
+
−
<div class="list-horizontal">
+
−
<div class="row">
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="client">
+
−
</div>
+
−
</div>
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="images/client-2.png" alt="client">
+
−
</div>
+
−
</div>
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="images/client-3.png" alt="client">
+
−
</div>
+
−
</div>
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="images/client-4.png" alt="client">
+
−
</div>
+
−
</div>
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="images/client-5.png" alt="client">
+
−
</div>
+
−
</div>
+
−
<div class="col-xs-2">
+
−
<div class="list-horizontal-item">
+
−
<img src="images/client-6.png" alt="client">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- section end -->
+
−
</div>
+
 
<!-- section end -->
 
<!-- section end -->
  
 
<!-- section start -->
 
<!-- section start -->
 
<!-- ================ -->
 
<!-- ================ -->
−
<div class="default-bg space">
+
</body>
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-md-8 col-md-offset-2">
+
−
<h1 class="text-center">10000+ Happy Clients!</h1>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- section end -->
+
−
 
+
−
<!-- footer start -->
+
−
<!-- ================ -->
+
−
<footer id="footer">
+
−
 
+
−
<!-- .footer start -->
+
−
<!-- ================ -->
+
−
+
−
<!-- .footer end -->
+
−
 
+
−
+
−
 
+
−
</footer>
+
−
<!-- footer end -->
+
−
 
+
−
+
−
</body>
+
 
</html>
 
</html>
−
 
+
{{:Team:Tianjin/Templates/Sponsor|}}
−
 
+
−
 
+
−
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/modernir.js}}
+
−
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/isotope.js}}
+
−
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/backstretch.js}}
+
−
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/appear.js}}
+
−
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/Community/js/template.js}}
+

Latest revision as of 13:52, 19 October 2016

TEAM TIANJIN

LOGO







Overview On Human Practice

desktop

This year, we aimed to degrade PET, which is a kind of pollution source, with our modified enzymes PETase and MHETase. We believe that in the near future, it will be applied to tackle with the problem of white pollution. Meanwhile, the masses’ awareness of environmental protection should also be aroused. As a researcher, we are bound to popularize the knowledge of white pollution and synthetic biology. In addition, we discussed with many experts in respect of PET degradation research. They were all helpful and enthusiastic with suggestions on how we could improve our system.

We conducted human practice in nine different aspects--Education, Industry, Society, Government, NGO, Law, Competition, Media, Businessplan.

This section is about our correspondence with Prof. Cunjiang Song, Prof. Qing Liu, Prof. Jun Yang and the lecture to students in primary school, middle school and university respectively.
Click Here To View
This section is about our visit to Great Biology Pharmaceutical CO.LTD and Tianjin Nankai Hecheng Science & Technology Co.,Ltd.
Click Here To View
This section is about our visit to the TEDA  green technology exhibition hall and a survey of the uses of plastic.
Click Here To View
This section is about our communication with Tianjin Environmental Protection Agency by Weibo about the disposition of the plastic garbage and the actions that government takes to reduce the white pollution.
Click Here To View
This section is about our visit to Tianjin TEDA low-carbon economic promotion center. We discussed a lot about the center and the plastic waste disposal with Mrs. Zhao, who is in charge of it.
Click Here To View
This section is about our inquiry to Dacheng Law Offices. We asked many questions about environmental law to Mr. Licheng Lin,a lawyer from Dacheng Law Office in Beijing.
Click Here To View
This section is about the debate competition held by IGEM Tianjin together with Beiyang Environment-Protecting Association, discussing ethical issues provoked by the application of synthesis biology, aiming to publicize the conception of synthesis biology and arouse attention to biotechnology and protecting the globe.
Click Here To View
This section is about our communications and interactions with other teams and our advertisements about our sponsors on twitter, facebook, Wechat and Weibo.
Click Here To View
This section is about the conditions of three enterprises sponsoring us and we are so honored to get their help!
Click Here To View

Check our judging form:Gold Medal, Silver Medal, Integrated Human Practices, Education and Public Engagement and Collaborations.

Team Tianjin Sponsor Alltech
Team Tianjin Sponsor GenScript
Team Tianjin Sponsor SynbioTech