Difference between revisions of "Team:BIT"

(Prototype team page)
 
Line 1: Line 1:
−
{{BIT}}
+
<!DOCTYPE html>
−
<html>
+
<html lang="en">
 +
<head>
 +
<!-- Basic Page Needs
 +
================================================== -->
 +
<meta charset="utf-8">
 +
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<title>Home</title>
 +
<meta name="description" content="">
 +
<meta name="keywords" content="">
 +
<meta name="author" content="">
  
−
<div class="column full_size" >
+
<!-- Favicons
−
<img src="http://placehold.it/800x300/d3d3d3/f2f2f2">
+
================================================== -->
−
</div>
+
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
 +
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
 +
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
 +
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
  
−
<div class="column full_size" >
+
<!-- Bootstrap -->
−
<h2> Welcome to iGEM 2016! </h2>
+
<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
<link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.css">
 +
<link rel="stylesheet" type="text/css" href="css/jasny-bootstrap.min.css">
 +
<link rel="stylesheet" type="text/css" href="css/animate.css">
  
−
</div>  
+
<!-- Slider
 +
================================================== -->
 +
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
 +
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
  
−
<div class="column half_size" >
+
<!-- Stylesheet
−
<h5>Before you start: </h5>
+
================================================== -->
−
<p> Please read the following pages:</p>
+
<link rel="stylesheet" type="text/css"  href="css/style2.css">
−
<ul>
+
<link rel="stylesheet" type="text/css" href="css/responsive.css">
−
<li> <a href="https://2016.igem.org/Requirements">Requirements page </a> </li>
+
 
−
<li> <a href="https://2016.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
 
−
<li> <a href="https://2016.igem.org/Resources/Template_Documentation"> Template Documentation </a></li>
+
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
−
</ul>
+
 
 +
<script type="text/javascript" src="js/modernizr.custom.js"></script>
 +
 
 +
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 +
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
<!--[if lt IE 9]>
 +
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 +
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
<![endif]-->
 +
</head>
 +
<body>
 +
 
 +
<!-- Off Canvas Navigation
 +
================================================== -->
 +
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas"> <!--- Off Canvas Side Menu -->
 +
<div class="close" data-toggle="offcanvas" data-target=".navmenu">
 +
<span class="fa fa-close"></span>
 +
</div>
 +
<div class="add-margin"></div>
 +
<ul class="nav navmenu-nav"> <!--- Menu -->
 +
<li><a href="home.html">Home</a></li>
 +
<li><a href="biology.html">Project</a></li>
 +
<li><a href="practice.html">Practice</a></li>
 +
<li><a href="judging.html">Judging</a></li>
 +
<li><a href="team.html">Team</a></li>
 +
</ul><!--- End Menu -->
 +
</div> <!--- End Off Canvas Side Menu -->
 +
 
 +
<!-- Home Section -->
 +
<div id="home">
 +
<div class="container text-center">
 +
<!-- Navigation -->
 +
<nav id="menu" data-toggle="offcanvas" data-target=".navmenu">
 +
<span class="fa fa-bars"></span>
 +
</nav>
 +
 
 +
<div class="content">
 +
<h4>iGEM_BIT</h4>
 +
<hr>
 +
<div class="header-text btn">
 +
<h1><span id="head-title"></span></h1>
 +
</div>
 +
</div>
 +
 
 +
<a href="#meet-us" class="down-btn page-scroll">
 +
<span class="fa fa-angle-down"></span>
 +
</a>
 +
</div>
 
</div>
 
</div>
  
−
<div class="column half_size" >
+
<!-- Meet Us Section -->
−
<div class="highlight">
+
<div id="meet-us">
−
<h5> Styling your wiki </h5>
+
<div class="container">
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
<div class="row text-center">
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
<div class="col-md-8 col-md-offset-2">
 +
<div class="section-title">
 +
<h2>Project</h2>
 +
<hr>
 +
</div>
 +
<p>This project is aiming at using synthetic biological engineering bacteria, connected with the aptamers, to make engineering bacteria able to detect the macromolecules, thus making detection more accurate, precise and convenient, which leads crowd-creating medical industry.</p>
 +
<a href="#services" class="down-btn page-scroll">
 +
<span class="fa fa-angle-down"></span>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
 +
<!-- Overview Video Section -->
 +
<div id="overview-video">
 +
<div class="overlay">
 +
<div class="container">
 +
<a href="#">
 +
<span class="fa fa-play"></span>
 +
</a>
 +
</div>
 +
</div>
 
</div>
 
</div>
  
−
<div class="column full_size" >
+
<!-- Services Section -->
−
<h5> Wiki template information </h5>
+
<div id="services">
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
<div class="container text-center">
 +
<div class="row">
 +
<div class="col-md-8 col-md-offset-2">
 +
<div class="section-title">
 +
<h2>Experiment</h2>
 +
<hr>
 +
</div>
 +
<p>There are varieties of methods of disease detection. However, the detection of disease can hardly meet the expectation with the features of high accuracy, short-term, low-cost and user-friendliness. Our project is aiming at making disease detection more instant, convenient and accurate. </p>
 +
</div>
 +
</div>
  
−
</div>  
+
<div class="space"></div>
  
 +
<div class="row">
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service">
 +
<span class="fa fa-book fa-3x"></span>
 +
<h4>Branding</h4>
 +
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis. </p>
 +
</div>
 +
</div>
  
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service">
 +
<span class="fa fa-bicycle fa-3x"></span>
 +
<h4>Web Devepment</h4>
 +
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Accusamus et. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis </p>
 +
</div>
 +
</div>
  
 +
<div class="col-md-4 col-sm-4">
 +
<div class="service">
 +
<span class="fa fa-plug fa-3x"></span>
 +
<h4>App Design</h4>
 +
<p>Nulla vitae elit libero, a pharetra augue. At vero eos et accusamus et iusto odio dignissimos ducimus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
 +
</div>
 +
</div>
 +
</div>
 +
<a href="#works" class="down-btn page-scroll">
 +
<span class="fa fa-angle-down"></span>
 +
</a>
 +
</div>
 +
</div>
  
−
<div class="column half_size" >
+
<!-- Call-to-Action Section -->
−
<h5> Editing your wiki </h5>
+
<div id="cta">
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
<div class="container text-center">
−
<p> <a href="https://2016.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
<a href="#" class="btn go-to-btn">Check our shop</a>
 +
</div>
 +
</div>
  
 +
<!-- Portfolio Section -->
 +
<div id="works">
 +
<div class="container">
 +
<div class="row text-center">
 +
<div class="col-md-8 col-md-offset-2">
 +
<div class="section-title">
 +
<h2>Human practice</h2>
 +
<hr>
 +
</div>
 +
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
 +
</div>
 +
</div>
 +
<div class="space"></div>
 +
</div>
 +
<div class="container-fluid">
 +
<div class="row">
 +
<div class="col-md-3 col-sm-6 nopadding">
 +
<div class="portfolio-item">
 +
<div class="hover-bg">
 +
<a href="#">
 +
<div class="hover-text">
 +
<h5>Logo Design</h5>
 +
<p class="lead">Client Seal</p>
 +
<div class="hline"></div>
 +
</div>
 +
<img src="img/portfolio/01.jpg" class="img-responsive" alt="...">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-sm-6 nopadding">
 +
<div class="portfolio-item">
 +
<div class="hover-bg">
 +
<a href="#">
 +
<div class="hover-text">
 +
<h5>Stationery</h5>
 +
<p class="lead">Design Project</p>
 +
<div class="hline"></div>
 +
</div>
 +
<img src="img/portfolio/02.jpg" class="img-responsive" alt="...">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-sm-6 nopadding">
 +
<div class="portfolio-item">
 +
<div class="hover-bg">
 +
<a href="#">
 +
<div class="hover-text">
 +
<h5>Branding</h5>
 +
<p class="lead">Metalbrand</p>
 +
<div class="hline"></div>
 +
</div>
 +
</a>
 +
<img src="img/portfolio/03.jpg" class="img-responsive" alt="...">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-3 col-sm-6 nopadding">
 +
<div class="portfolio-item">
 +
<div class="hover-bg">
 +
<a href="#">
 +
<div class="hover-text">
 +
<h5>Business Card</h5>
 +
<p class="lead">Clothing Line</p>
 +
<div class="hline"></div>
 +
</div>
 +
</a>
 +
<img src="img/portfolio/04.jpg" class="img-responsive" alt="...">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="space"></div>
 +
<div class="text-center">
 +
<a href="#" class="btn read-more-btn">Check more</a>
 +
<br>
 +
<a href="#about-us" class="down-btn page-scroll"><span class="fa fa-angle-down"></span></a>
 +
</div>
 
</div>
 
</div>
  
 +
<!-- Clients Section -->
 +
<div id="clients">
 +
<div class="overlay">
 +
<div class="container text-center">
 +
<div class="section-title">
 +
<h2>Team</h2>
 +
<hr>
 +
</div>
  
−
<div class="column half_size" >
+
<ul class="clients">
−
<h5>Tips</h5>
+
<li><a href="#"><img src="img/clients/01.png" class="img-responsive" alt="..."></a></li>
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
<li><a href="#"><img src="img/clients/02.png" class="img-responsive" alt="..."></a></li>
−
<ul>
+
<li><a href="#"><img src="img/clients/03.png" class="img-responsive" alt="..."></a></li>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
</ul>
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
</div>
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
</div>
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2016.igem.org/Calendar">iGEM 2016 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>  
+
 
</div>
 
</div>
  
 +
<!-- About Us Section -->
 +
<div id="about-us">
 +
<div class="container">
 +
<div class="row text-center">
 +
<div class="col-md-8 col-md-offset-2">
 +
<div class="section-title">
 +
<h2>About Us</h2>
 +
<hr>
 +
</div>
 +
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
 +
</div>
 +
</div>
 +
<div class="space"></div>
 +
<div class="row">
 +
<div class="col-md-10 col-sm-10">
 +
<div class="row">
 +
<div class="col-md-4 col-sm-4">
 +
<div class="team">
 +
<img src="img/team/02.jpg" class="img-responsive img-circle" alt="...">
 +
<br>
 +
<h4>Yang wei</h4>
 +
<p class="small">Team leader</p>
 +
<hr>
 +
</div>
 +
</div>
  
−
<div class="column half_size" >
+
<div class="col-md-4 col-sm-4">
−
<h5>Inspiration</h5>
+
<div class="team">
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
<img src="img/team/04.jpg" class="img-responsive img-circle" alt="...">
−
<ul>
+
<br>
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
<h4>Wang xu</h4>
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
<p class="small">Web Coder</p>
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
<hr>
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
</div>
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
</div>
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
<div class="col-md-4 col-sm-4">
−
<h5> Uploading pictures and files </h5>
+
<div class="team">
−
<p> You can upload your pictures and files to the iGEM 2016 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
<img src="img/team/03.jpg" class="img-responsive img-circle" alt="...">
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
<br>
 +
<h4>Chen Daoyin</h4>
 +
<p class="small">Web Designer</p>
 +
<hr>
 +
</div>
 +
</div>
  
 +
</div>
 +
</div>
  
−
<div class="button_click" onClick=" parent.location= 'https://2016.igem.org/Special:Upload '">
+
<div class="col-md-2 col-sm-2">
−
UPLOAD FILES
+
<div class="team hire">
 +
<h4>Know more</h4>
 +
<hr>
 +
<div class="space"></div>
 +
<a href="#">
 +
<span class="fa fa-paper-plane-o fa-2x"></span>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div class="text-center">
 +
<a href="#contact" class="page-scroll down-btn">
 +
<span class="fa fa-angle-down"></span>
 +
</a>
 +
</div>
 +
 
 +
</div>
 
</div>
 
</div>
  
 +
<!-- Testimonial Section -->
 +
<div id="testimonials">
 +
<div class="overlay">
 +
<div class="container">
 +
<div class="section-title">
 +
<h2>Message Board</h2>
 +
<hr>
 +
</div>
 +
 +
<div id="testimonial" class="owl-carousel owl-theme">
 +
  <div class="item">
 +
<h3>iGEM is a Jamboree! </h3>
 +
<br>
 +
<h6>Wang Xu</h6>
 +
  </div>
 +
 +
  <div class="item">
 +
<h3>Fusce dapibus, tellus ac cursus commodo, tortor<br> mauris condimentum. Duis mollis, est non commodo luctus, nisi erat </h3>
 +
<br>
 +
<h6>Kai, Web Geekster</h6>
 +
  </div>
 +
 +
  <div class="item">
 +
<h3>Cras justo odio, dapibus ac facilisis in, egestas <br>eget quam. Donec id elit non mi porta gravida at eget metus.</h3>
 +
<br>
 +
<h6>Jenn, Coders' Playground</h6>
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
  
 +
<!-- Contact Section -->
 +
<div id="contact">
 +
<div class="container">
 +
<div class="section-title text-center">
 +
<h2>Contact Us</h2>
 +
<hr>
 +
</div>
 +
<div class="space"></div>
  
 +
<div class="row">
 +
<div class="col-md-3">
 +
<address>
 +
<strong>Address</strong><br>
 +
<br>
 +
Beijing Institute of Technology,<br>
 +
No. 5 South Zhong Guan Cun Street,<br>
 +
Haidian Beijing 100081, P. R. China<br><br>
 +
Twitter : @igem_BIT<br><br>
 +
 +
Sina Weibo : @igem_BIT<br><br>
 +
 +
Website : http://www.bit.edu.cn
 +
<ul class="social">
 +
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
 +
<li><a href="#"><span class="fa fa-google-plus"></span></a></li>
 +
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
 +
<li><a href="#"><span class="fa fa-dribbble"></span></a></li>
 +
  </ul>
 +
</address>
 +
</div>
 +
 +
<div class="col-md-9">
 +
<form autocomplete="off">
 +
<div class="row">
 +
<div class="col-md-6">
 +
<input type="text" class="form-control" placeholder="Your Name">
 +
<input type="text" class="form-control" placeholder="Phone No.">
 +
</div>
 +
<div class="col-md-6">
 +
<input type="text" class="form-control" placeholder="Email">
 +
<input type="text" class="form-control" placeholder="Subject">
 +
</div>
 +
</div>
 +
<textarea class="form-control" rows="4" placeholder="Message"></textarea>
 +
<div class="text-right">
 +
<a href="#" class="btn send-btn">Send</a>
 +
</div>
 +
</form>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
  
 +
<nav id="footer">
 +
<div class="container">
 +
 +
<div class="pull-right">
 +
<a href="#home" class="page-scroll">Back to Top <span class="fa fa-angle-up"></span></a>
 +
</div>
 +
</div>
 +
</nav>
  
 +
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
 +
<!-- Include all compiled plugins (below), or include individual files as needed -->
 +
<script type="text/javascript" src="js/bootstrap.js"></script>
 +
<script type="text/javascript" src="js/SmoothScroll.js"></script>
 +
<script type="text/javascript" src="js/jasny-bootstrap.min.js"></script>
  
 +
<script src="js/owl.carousel.js"></script>
 +
<script src="js/typed.js"></script>
 +
<script>
 +
  $(function(){
 +
  $("#head-title").typed({
 +
strings: ["Alarm of Breast Cancer", "Based on Detection of miRNA-155/21" ,"Alarm of Breast Cancer"],
 +
typeSpeed: 100,
 +
loop: true,
 +
startDelay: 100
 +
  });
 +
  });
 +
</script>
  
 +
<!-- Javascripts
 +
================================================== -->
 +
<script type="text/javascript" src="js/main.js"></script>
  
 +
</body>
 
</html>
 
</html>

Revision as of 18:46, 16 October 2016

<!DOCTYPE html> Home

iGEM_BIT

Project

This project is aiming at using synthetic biological engineering bacteria, connected with the aptamers, to make engineering bacteria able to detect the macromolecules, thus making detection more accurate, precise and convenient, which leads crowd-creating medical industry.

Experiment

There are varieties of methods of disease detection. However, the detection of disease can hardly meet the expectation with the features of high accuracy, short-term, low-cost and user-friendliness. Our project is aiming at making disease detection more instant, convenient and accurate.

Branding

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.

Web Devepment

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Accusamus et. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis

App Design

Nulla vitae elit libero, a pharetra augue. At vero eos et accusamus et iusto odio dignissimos ducimus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Human practice

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Logo Design

Client Seal

...
Stationery

Design Project

...
Branding

Metalbrand

 ...
Business Card

Clothing Line

 ...
Check more

Team

  • ...
  • ...
  • ...

About Us

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

...

Yang wei

Team leader

...

Wang xu

Web Coder

...

Chen Daoyin

Web Designer

Know more

Message Board

Contact Us

Address

Beijing Institute of Technology,
No. 5 South Zhong Guan Cun Street,
Haidian Beijing 100081, P. R. China

Twitter : @igem_BIT

Sina Weibo : @igem_BIT

Website : http://www.bit.edu.cn
Send