Difference between revisions of "Team:BioMarvel"

 
(97 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{BioMarvel}}
−
<html lang="en">
+
<html>
  
−
  <head>
+
<body>
 +
<script type="text/javascript">
 +
 +
window.onload = function(){
 +
rotateBanner = setInterval(function(){
 +
var pos = document.getElementsByName("pos");
 +
var size = pos.length;
 +
for(var i = 0; i < size; i++) {
 +
if(pos[i].checked) {
 +
var m = i+1;
 +
if (m >= size) {
 +
m = 0;
 +
}
 +
pos[m].checked = true;
 +
pos[i].checked = false;
 +
break;
 +
}
 +
}
 +
}, 3600);
 +
}
  
−
    <meta charset="utf-8">
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
−
    <meta name="description" content="">
 
−
    <meta name="author" content="">
 
  
−
    <title>Team:BioMarvel - 2018.igem.org</title>
+
</script>
  
−
    <!-- Bootstrap core CSS -->
+
<style>
−
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
*{margin:0;padding:0;}
 +
ul,li{list-style:none;}
 +
.slideBox{
 +
position: relative;
 +
width: 100%
 +
}
 +
.slideBox:before{
 +
content: "";
 +
display: block;
 +
padding-top: 39.8148%;
 +
}
 +
.slideBoxbox{
 +
position: absolute;
 +
top: 0;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
}
 +
#slide{
 +
height:100%;
 +
width:100%;
 +
position:relative;
 +
overflow:hidden;
 +
}
 +
#slide ul{width:300%;height:100%;transition:1s;}
 +
#slide ul:after{content:"";display:block;clear:both;}
 +
#slide li{float:left;width:33.333%;height:100%;}
 +
#slide li:nth-child(1){
 +
 +
}
 +
#slide li:nth-child(2){
  
−
    <!-- Custom fonts for this template -->
+
}
−
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+
#slide li:nth-child(3){
−
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+
−
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
+
−
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+
−
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
+
  
−
    <!-- Custom styles for this template -->
+
}
−
    <link href="css/agency.min.css" rel="stylesheet">
+
#slide input{display:none;}
 +
#slide label{display:inline-block;vertical-align:middle;width:15px;height:15px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;margin-left: : 5px;margin-right: 5px;}
 +
#slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
 +
#pos1:checked~ul{margin-left:0%;}
 +
#pos2:checked~ul{margin-left:-100%;}
 +
#pos3:checked~ul{margin-left:-200%;}
 +
#pos1:checked~.pos>label:nth-child(1){background:#666;}
 +
#pos2:checked~.pos>label:nth-child(2){background:#666;}
 +
#pos3:checked~.pos>label:nth-child(3){background:#666;}
  
−
  </head>
+
.mSHdiv{
 +
width: 100%;
 +
height: 45px;
 +
background-color: #203864;
 +
}
 +
.mSHdiv h1{
 +
color: white;
 +
margin-left: 10px;
 +
}
 +
.youtubeBox{
 +
position: relative;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 94%
 +
}
 +
.youtubeBox:before{
 +
content: "";
 +
display: block;
 +
padding-top: 56.25%;
 +
}
 +
.youtubeBoxbox{
 +
position: absolute;
 +
border: 2px solid black;
 +
top: 0;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
}
  
−
  <body id="page-top">
 
  
−
    <!-- Navigation -->
+
</style>
−
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
+
−
      <div class="container">
+
−
        <a class="navbar-brand js-scroll-trigger" href="#page-top">BioMarvel</a>
+
−
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+
−
          Menu
+
−
          <i class="fa fa-bars"></i>
+
−
        </button>
+
−
        <div class="collapse navbar-collapse" id="navbarResponsive">
+
−
          <ul class="navbar-nav text-uppercase ml-auto">
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#services">HOME</a>
+
−
            </li>
+
−
            <li class="nav-item dropdown">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">PROJECT</a>
+
−
              <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
+
−
              <ul role="menu" class="dropdown-menu navbar-nav text-uppercase ml-auto">
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Overview</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Background</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Design</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Experiments</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Results</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Demonstrate</a>
+
−
              </li>
+
−
              <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#portfolio">Improve</a>
+
−
              </li>
+
−
              </ul>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#about">PEOPLE</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#team">PARTS</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#contact">HUMAN PRACTICES</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#contact">SAFETY</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#contact">NOTEBOOK</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#contact">AWARDS</a>
+
−
            </li>
+
−
            <li class="nav-item">
+
−
              <a class="nav-link js-scroll-trigger" href="#contact">JUDGING FORM</a>
+
−
            </li>
+
−
          </ul>
+
−
        </div>
+
−
      </div>
+
−
    </nav>
+
  
−
    <!-- Header -->
 
−
    <header class="masthead">
 
−
      <div class="container">
 
−
        <div class="intro-text">
 
−
          <div class="intro-lead-in">Welcome To Our Studio!</div>
 
−
          <div class="intro-heading text-uppercase">It's Nice To Meet You</div>
 
−
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
 
−
        </div>
 
−
      </div>
 
−
    </header>
 
  
−
    <!-- Services -->
+
<div class="mMainBox">
−
    <section id="services">
+
<section id="mSection">
−
      <div class="container">
+
<a href="https://www.facebook.com/biomarvel.igem.9"><img class="myimg" src="https://static.igem.org/mediawiki/2018/1/18/T--Biomarvel--mainhome.jpg"></a>
−
        <div class="row">
+
</section>
−
          <div class="col-lg-12 text-center">
+
<div class="slideBox">
−
            <h2 class="section-heading text-uppercase">Services</h2>
+
<div class="slideBoxbox">
−
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
+
<div id="slide">
−
          </div>
+
<input type="radio" name="pos" id="pos1" checked>
−
        </div>
+
<input type="radio" name="pos" id="pos2">
−
        <div class="row text-center">
+
<input type="radio" name="pos" id="pos3">
−
          <div class="col-md-4">
+
<ul>
−
            <span class="fa-stack fa-4x">
+
<li><a href="https://2018.igem.org/Team:BioMarvel/WET_LAB/Experiments"><img src="https://static.igem.org/mediawiki/2018/f/f0/T--Biomarvel--Banner1.png" style="width: 100%; height: 100%"></a></li>
−
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
+
<li><a href="https://2018.igem.org/Team:BioMarvel/Public_Engagement"><img src="https://static.igem.org/mediawiki/2018/7/76/T--Biomarvel--Banner2_1.png" style="width: 100%; height: 100%"></a></li>
−
              <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
+
<li><a href="https://2018.igem.org/Team:BioMarvel/Project/Description"><img src="https://static.igem.org/mediawiki/2018/7/7f/T--Biomarvel--Banner3.png" style="width: 100%; height: 100%"></a></li>
−
            </span>
+
</ul>
−
            <h4 class="service-heading">E-Commerce</h4>
+
<p class="pos" style="padding-top: 2em;padding-bottom: 1em; margin: 0;">
−
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
+
<label for="pos1"></label>
−
          </div>
+
<label for="pos2"></label>
−
          <div class="col-md-4">
+
<label for="pos3"></label>
−
            <span class="fa-stack fa-4x">
+
</p>
−
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
+
</div>
−
              <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
+
</div>
−
            </span>
+
</div>
−
            <h4 class="service-heading">Responsive Design</h4>
+
<section id="mSection">
−
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
+
<div class="mSHdiv">
−
          </div>
+
<h1 style="color: white;padding-top: 8px; padding-bottom: 7px;">Abstract</h1>
−
          <div class="col-md-4">
+
</div>
−
            <span class="fa-stack fa-4x">
+
<br>
−
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
+
<p>The goal of this project is to construct a novel fusion protein of gold binding polypeptides (GBP)-protein G (ProG) to develop an electrochemical biosensor for rapid and simple diagnosis and monitoring heart failure.</p>
−
              <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
+
<p>DH5-alpha <i>E. coli</i> strain was transformed by a genetically modified recombinant vector coding GBP and ProG. The GBP-ProG fusion protein was derived from the strain with IPTG-induced expression and purified using the TALON metal affinity resin. The resulting GBP-ProG was directly self-immobilized onto gold surfaces via the GBP portion, followed by the oriented binding of antibodies onto the ProG domain targeting the Fc region of antibodies.</p>
−
            </span>
+
<p>An electrochemical immunochip was fabricated through the GBP-ProG and gold patterned interdigitated array electrode. Antibody immobilization onto the gold surface of the electrode by the GBP-ProG was rapidly and simply achieved with proper antibody orientation. This immunochip could be used for diagnosis and monitoring of heart failure.</p>
−
            <h4 class="service-heading">Web Security</h4>
+
</section>
−
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
+
<br>
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </section>
+
  
−
    <!-- Portfolio Grid -->
+
<section id="mSection">
−
    <section class="bg-light" id="portfolio">
+
<div class="mSHdiv">
−
      <div class="container">
+
<h1 style="color: white;padding-top: 8px; padding-bottom: 7px;">U-HEALTHCARE SERVICE SYSTEM</h1>
−
        <div class="row">
+
</div>
−
          <div class="col-lg-12 text-center">
+
<video class="myVideo" src="https://static.igem.org/mediawiki/2018/6/63/T--Biomarvel--Ubiquitous_System.mp4" muted="muted" controls="" autoplay="autoplay" loop="loop"></video>
−
            <h2 class="section-heading text-uppercase">Portfolio</h2>
+
<br>
−
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
+
−
          </div>
+
−
        </div>
+
−
        <div class="row">
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Threads</h4>
+
−
              <p class="text-muted">Illustration</p>
+
−
            </div>
+
−
          </div>
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Explore</h4>
+
−
              <p class="text-muted">Graphic Design</p>
+
−
            </div>
+
−
          </div>
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Finish</h4>
+
−
              <p class="text-muted">Identity</p>
+
−
            </div>
+
−
          </div>
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Lines</h4>
+
−
              <p class="text-muted">Branding</p>
+
−
            </div>
+
−
          </div>
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Southwest</h4>
+
−
              <p class="text-muted">Website Design</p>
+
−
            </div>
+
−
          </div>
+
−
          <div class="col-md-4 col-sm-6 portfolio-item">
+
−
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
+
−
              <div class="portfolio-hover">
+
−
                <div class="portfolio-hover-content">
+
−
                  <i class="fa fa-plus fa-3x"></i>
+
−
                </div>
+
−
              </div>
+
−
              <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="">
+
−
            </a>
+
−
            <div class="portfolio-caption">
+
−
              <h4>Window</h4>
+
−
              <p class="text-muted">Photography</p>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </section>
+
  
−
    <!-- About -->
+
<!--
−
    <section id="about">
+
<h1 style="text-align: center; text-shadow: 2px 2px 3px gray;">Ubiquitous System for Diagnosis and Monitoring of Heart Failure</h1>
−
      <div class="container">
+
-->
−
        <div class="row">
+
<br>
−
          <div class="col-lg-12 text-center">
+
<a href="https://2018.igem.org/Team:BioMarvel/People/Team"><img class="myimg" src="https://static.igem.org/mediawiki/2018/2/27/T--Biomarvel--mainhome2_1.png"></a>
−
            <h2 class="section-heading text-uppercase">About</h2>
+
</section>
−
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
+
<br>
−
          </div>
+
<section>
−
        </div>
+
−
        <div class="row">
+
<div class="youtubeBox">
−
          <div class="col-lg-12">
+
<div class="youtubeBoxbox">
−
            <ul class="timeline">
+
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/URUYaF4gsQ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
−
              <li>
+
</div>
−
                <div class="timeline-image">
+
</div>
−
                  <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
+
</section>
−
                </div>
+
−
                <div class="timeline-panel">
+
−
                  <div class="timeline-heading">
+
−
                    <h4>2009-2011</h4>
+
−
                    <h4 class="subheading">Our Humble Beginnings</h4>
+
−
                  </div>
+
−
                  <div class="timeline-body">
+
−
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
+
−
                  </div>
+
−
                </div>
+
−
              </li>
+
−
              <li class="timeline-inverted">
+
−
                <div class="timeline-image">
+
−
                  <img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
+
−
                </div>
+
−
                <div class="timeline-panel">
+
−
                  <div class="timeline-heading">
+
−
                    <h4>March 2011</h4>
+
−
                    <h4 class="subheading">An Agency is Born</h4>
+
−
                  </div>
+
−
                  <div class="timeline-body">
+
−
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
+
−
                  </div>
+
−
                </div>
+
−
              </li>
+
−
              <li>
+
−
                <div class="timeline-image">
+
−
                  <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
+
−
                </div>
+
−
                <div class="timeline-panel">
+
−
                  <div class="timeline-heading">
+
−
                    <h4>December 2012</h4>
+
−
                    <h4 class="subheading">Transition to Full Service</h4>
+
−
                  </div>
+
−
                  <div class="timeline-body">
+
−
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
+
−
                  </div>
+
−
                </div>
+
−
              </li>
+
−
              <li class="timeline-inverted">
+
−
                <div class="timeline-image">
+
−
                  <img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
+
−
                </div>
+
−
                <div class="timeline-panel">
+
−
                  <div class="timeline-heading">
+
−
                    <h4>July 2014</h4>
+
−
                    <h4 class="subheading">Phase Two Expansion</h4>
+
−
                  </div>
+
−
                  <div class="timeline-body">
+
−
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
+
−
                  </div>
+
−
                </div>
+
−
              </li>
+
−
              <li class="timeline-inverted">
+
−
                <div class="timeline-image">
+
−
                  <h4>Be Part
+
−
                    <br>Of Our
+
−
                    <br>Story!</h4>
+
−
                </div>
+
−
              </li>
+
−
            </ul>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </section>
+
  
−
    <!-- Team -->
 
−
    <section class="bg-light" id="team">
 
−
      <div class="container">
 
−
        <div class="row">
 
−
          <div class="col-lg-12 text-center">
 
−
            <h2 class="section-heading text-uppercase">Our Amazing Team</h2>
 
−
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
 
−
          </div>
 
−
        </div>
 
−
        <div class="row">
 
−
          <div class="col-sm-4">
 
−
            <div class="team-member">
 
−
              <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
 
−
              <h4>Kay Garland</h4>
 
−
              <p class="text-muted">Lead Designer</p>
 
−
              <ul class="list-inline social-buttons">
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-twitter"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-facebook"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-linkedin"></i>
 
−
                  </a>
 
−
                </li>
 
−
              </ul>
 
−
            </div>
 
−
          </div>
 
−
          <div class="col-sm-4">
 
−
            <div class="team-member">
 
−
              <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
 
−
              <h4>Larry Parker</h4>
 
−
              <p class="text-muted">Lead Marketer</p>
 
−
              <ul class="list-inline social-buttons">
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-twitter"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-facebook"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-linkedin"></i>
 
−
                  </a>
 
−
                </li>
 
−
              </ul>
 
−
            </div>
 
−
          </div>
 
−
          <div class="col-sm-4">
 
−
            <div class="team-member">
 
−
              <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
 
−
              <h4>Diana Pertersen</h4>
 
−
              <p class="text-muted">Lead Developer</p>
 
−
              <ul class="list-inline social-buttons">
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-twitter"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-facebook"></i>
 
−
                  </a>
 
−
                </li>
 
−
                <li class="list-inline-item">
 
−
                  <a href="#">
 
−
                    <i class="fa fa-linkedin"></i>
 
−
                  </a>
 
−
                </li>
 
−
              </ul>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
        <div class="row">
 
−
          <div class="col-lg-8 mx-auto text-center">
 
−
            <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </section>
 
−
 
−
    <!-- Clients -->
 
−
    <section class="py-5">
 
−
      <div class="container">
 
−
        <div class="row">
 
−
          <div class="col-md-3 col-sm-6">
 
−
            <a href="#">
 
−
              <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt="">
 
−
            </a>
 
−
          </div>
 
−
          <div class="col-md-3 col-sm-6">
 
−
            <a href="#">
 
−
              <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt="">
 
−
            </a>
 
−
          </div>
 
−
          <div class="col-md-3 col-sm-6">
 
−
            <a href="#">
 
−
              <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt="">
 
−
            </a>
 
−
          </div>
 
−
          <div class="col-md-3 col-sm-6">
 
−
            <a href="#">
 
−
              <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt="">
 
−
            </a>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </section>
 
−
 
−
    <!-- Contact -->
 
−
    <section id="contact">
 
−
      <div class="container">
 
−
        <div class="row">
 
−
          <div class="col-lg-12 text-center">
 
−
            <h2 class="section-heading text-uppercase">Contact Us</h2>
 
−
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
 
−
          </div>
 
−
        </div>
 
−
        <div class="row">
 
−
          <div class="col-lg-12">
 
−
            <form id="contactForm" name="sentMessage" novalidate="novalidate">
 
−
              <div class="row">
 
−
                <div class="col-md-6">
 
−
                  <div class="form-group">
 
−
                    <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name.">
 
−
                    <p class="help-block text-danger"></p>
 
−
                  </div>
 
−
                  <div class="form-group">
 
−
                    <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address.">
 
−
                    <p class="help-block text-danger"></p>
 
−
                  </div>
 
−
                  <div class="form-group">
 
−
                    <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number.">
 
−
                    <p class="help-block text-danger"></p>
 
−
                  </div>
 
−
                </div>
 
−
                <div class="col-md-6">
 
−
                  <div class="form-group">
 
−
                    <textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
 
−
                    <p class="help-block text-danger"></p>
 
−
                  </div>
 
−
                </div>
 
−
                <div class="clearfix"></div>
 
−
                <div class="col-lg-12 text-center">
 
−
                  <div id="success"></div>
 
−
                  <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
 
−
                </div>
 
−
              </div>
 
−
            </form>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </section>
 
−
 
−
    <!-- Footer -->
 
−
    <footer>
 
−
      <div class="container">
 
−
        <div class="row">
 
−
          <div class="col-md-4">
 
−
            <span class="copyright">Copyright &copy; Your Website 2018</span>
 
−
          </div>
 
−
          <div class="col-md-4">
 
−
            <ul class="list-inline social-buttons">
 
−
              <li class="list-inline-item">
 
−
                <a href="#">
 
−
                  <i class="fa fa-twitter"></i>
 
−
                </a>
 
−
              </li>
 
−
              <li class="list-inline-item">
 
−
                <a href="#">
 
−
                  <i class="fa fa-facebook"></i>
 
−
                </a>
 
−
              </li>
 
−
              <li class="list-inline-item">
 
−
                <a href="#">
 
−
                  <i class="fa fa-linkedin"></i>
 
−
                </a>
 
−
              </li>
 
−
            </ul>
 
−
          </div>
 
−
          <div class="col-md-4">
 
−
            <ul class="list-inline quicklinks">
 
−
              <li class="list-inline-item">
 
−
                <a href="#">Privacy Policy</a>
 
−
              </li>
 
−
              <li class="list-inline-item">
 
−
                <a href="#">Terms of Use</a>
 
−
              </li>
 
−
            </ul>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </footer>
 
−
 
−
    <!-- Portfolio Modals -->
 
−
 
−
    <!-- Modal 1 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Threads</li>
 
−
                    <li>Category: Illustration</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Modal 2 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/02-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Explore</li>
 
−
                    <li>Category: Graphic Design</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Modal 3 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Finish</li>
 
−
                    <li>Category: Identity</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Modal 4 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/04-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Lines</li>
 
−
                    <li>Category: Branding</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Modal 5 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/05-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Southwest</li>
 
−
                    <li>Category: Website Design</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Modal 6 -->
 
−
    <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
 
−
      <div class="modal-dialog">
 
−
        <div class="modal-content">
 
−
          <div class="close-modal" data-dismiss="modal">
 
−
            <div class="lr">
 
−
              <div class="rl"></div>
 
−
            </div>
 
−
          </div>
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-lg-8 mx-auto">
 
−
                <div class="modal-body">
 
−
                  <!-- Project Details Go Here -->
 
−
                  <h2 class="text-uppercase">Project Name</h2>
 
−
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
 
−
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/06-full.jpg" alt="">
 
−
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
 
−
                  <ul class="list-inline">
 
−
                    <li>Date: January 2017</li>
 
−
                    <li>Client: Window</li>
 
−
                    <li>Category: Photography</li>
 
−
                  </ul>
 
−
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
 
−
                    <i class="fa fa-times"></i>
 
−
                    Close Project</button>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <!-- Bootstrap core JavaScript -->
 
−
    <script src="vendor/jquery/jquery.min.js"></script>
 
−
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
−
 
−
    <!-- Plugin JavaScript -->
 
−
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
 
−
 
−
    <!-- Contact form JavaScript -->
 
−
    <script src="js/jqBootstrapValidation.js"></script>
 
−
    <script src="js/contact_me.js"></script>
 
−
 
−
    <!-- Custom scripts for this template -->
 
−
    <script src="js/agency.min.js"></script>
 
−
 
−
  </body>
 
  
 +
</div>
 +
</body>
 
</html>
 
</html>
 +
{{BioMarvel/footer}}

Latest revision as of 23:28, 6 December 2018

≡

Abstract


The goal of this project is to construct a novel fusion protein of gold binding polypeptides (GBP)-protein G (ProG) to develop an electrochemical biosensor for rapid and simple diagnosis and monitoring heart failure.

DH5-alpha E. coli strain was transformed by a genetically modified recombinant vector coding GBP and ProG. The GBP-ProG fusion protein was derived from the strain with IPTG-induced expression and purified using the TALON metal affinity resin. The resulting GBP-ProG was directly self-immobilized onto gold surfaces via the GBP portion, followed by the oriented binding of antibodies onto the ProG domain targeting the Fc region of antibodies.

An electrochemical immunochip was fabricated through the GBP-ProG and gold patterned interdigitated array electrode. Antibody immobilization onto the gold surface of the electrode by the GBP-ProG was rapidly and simply achieved with proper antibody orientation. This immunochip could be used for diagnosis and monitoring of heart failure.


U-HEALTHCARE SERVICE SYSTEM




#iGEM #2018 #BioMarvel #Heart #Biochip #Diagnosis

Contact Us !

IGEM2018BioMarvel@gmail.com

Copyright © 2018 By BioMarvel. All right reserved.