Difference between revisions of "Team:Mingdao/Applied Design"

(Prototype team page)
 
Line 1: Line 1:
−
{{Mingdao}}
+
{{:Team:Mingdao/test}}
−
<html>
+
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>Prototype</title>
 +
  </head>
 +
  <style type="text/css">
  
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
  
 +
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
  
 +
.bg-container {
 +
  overflow: hidden;
 +
  position: relative;
 +
  background-color: #c5d7d9;
 +
  background-image: url(https://static.igem.org/mediawiki/2017/2/20/T--CSMU_NCHU_Taiwan--inter_lab.png);
 +
  background-repeat: repeat-y;
 +
  background-size: 100%;
 +
}
  
−
<div class="clear"></div>
+
.my-main-container {
 +
  width: 100%;
 +
  padding: 50px 7%;
 +
}
  
 +
.main-content {
 +
  background-color: white;
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  min-height: 180vh;
 +
  z-index: 10; }
  
−
<div class="column full_size">
+
.text-area {
−
<h1>Applied Design</h1>
+
  margin-bottom: 80px; }
−
</div>
+
  .text-area h1 {
−
<div class="clear"></div>
+
    font-size: 60px;
 +
    font-weight: 700;
 +
    font-family: 'Arizonia' !important;
 +
    text-align: center; }
 +
  .text-area p {
 +
    font-size: 22px;
 +
    font-weight: 500; }
  
 +
.pdfbtn {
 +
  width: 100%;
 +
  margin: 20px 0 10px 0;
 +
  padding: 10px 20px;
 +
  border-radius: 5px;
 +
  background-color: #556b7e;
 +
  color: white;
 +
  display: block;
 +
  position: relative; }
 +
  .pdfbtn i {
 +
    position: absolute;
 +
    right: 50px;
 +
    top: 50%;
 +
    transform: translateY(-50%); }
  
−
<div class="column two_thirds_size">
+
.pdf-container {
−
<h3>Best Applied Design Special Prize</h3>
+
  width: 100%;
 +
  text-align: center;
 +
  height: 90vh;
 +
  display: none; }
  
−
<p>This is a prize for the team that has developed a synbio product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.
+
.ul-container {
−
<br><br>
+
  width: 100%;
−
To compete for the <a href="https://2018.igem.org/Judging/Awards">Best Applied Design prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>.
+
  text-align: center;
−
<br><br>
+
  height: auto;
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
  }
−
</p>
+
−
</div>
+
  
 +
.ul-container ul.medal li {
 +
  list-style: none; }
 +
  .ul-container ul.medal li:before {
 +
    content: '';
 +
    display: inline-block;
 +
    height: 1em;
 +
    width: 2em;
 +
    background-size: 1em;
 +
    background-image: url(../img/circle.png);
 +
    background-repeat: no-repeat; }
  
−
<div class="column third_size">
+
.ul-container ul {
−
<div class="highlight decoration_A_full">
+
  text-align: left;
−
<h3>Inspiration</h3>
+
  padding: 20px 50px;
−
<p>Take a look at what some teams accomplished for this prize.</p>
+
  margin-left: 0;
−
<ul>
+
−
<li><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">2016 NCTU Formosa</a></li>
+
−
<li><a href="https://2016.igem.org/Team:HSiTAIWAN/Product?locationId=Design">2016 HSiTAIWAN</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Pasteur_Paris/Design">2016 Pasteur Paris</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
 +
  border: #556b7e solid 2px;
 +
  font-size: 22px; }
 +
  .ul-container ul li {
 +
    padding: 10px;
 +
    list-style: disc; }
 +
    .ul-container ul li a {
 +
      text-decoration: none;
 +
      color: #000; }
 +
      .ul-container ul li a:visited, .ul-container ul li a:hover, .ul-container ul li a:focus {
 +
        color: #000;
 +
        text-decoration: none; }
 +
    .ul-container ul li span {
 +
      background-color: #fadd3a;
 +
      padding: 1px 10px;
 +
      border-radius: 5px;
 +
      margin-left: 20px;
 +
      cursor: pointer; }
 +
    .ul-container ul li i {
 +
      padding-left: 10px; }
  
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
.top {
 +
  position: fixed;
 +
  right: 50px;
 +
  bottom: 50px;
 +
  height: 50px;
 +
  width: 50px;
 +
  cursor: pointer; }
 +
  .top img {
 +
    width: 100%; }
 +
h2 {
 +
font-family: 'Ubuntu';
 +
font-size: 30px;
 +
text-align: center;
 +
color: #000000 !important;
 +
}
 +
h3{
 +
font-family: 'Ubuntu';
 +
font-size: 24px;
 +
text-align: left;
 +
color: #4682B4 !important;
 +
}
  
 +
</style>
  
 +
  <body>
 +
    <div class="bg-container">
 +
      <div class="my-main-container">
 +
        <div class="main-content">
 +
          <div class="text-area">
 +
            <h1>Prototype</h1>
 +
         
  
 +
         
  
  
 +
<h2>Product Design</h2>
 +
<div class="ul-container">
 +
              <ul>
 +
                <li>So now that the experiments are proven successful, it’s time to take the mosquitoes out for a spin. But we wouldn’t want the mosquitoes flying around spreading diseases. And that’s where the prototype comes in.
 +
Our cage-bandage consists of three parts. The first part is a transparent top for observing the mosquitoes. The second part is a fine metal web, sort of like a screen window. The mosquitoes can draw blood through the holes, but can’t wriggle through it. The final part is the bandage, for sticking the device onto skin.</li>
 +
              </ul>
 +
<p>
 +
<p>
 +
<h3>Under View</h3>
 +
<p>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2018/7/76/T--Mingdao--Prototype1.jpg" width="101%" height="101%">
 +
<p>
 +
<p>
 +
<h3>Top View</h3>
 +
<p>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2018/7/76/T--Mingdao--Prototype2.jpg" width="101%" height="101%">
 +
<p>
 +
<p>
 +
<h3>Side View</h3>
 +
<p>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2018/9/96/T--Mingdao--Prototype3.jpg" width="101%" height="101%">
 +
<p>
 +
<p>
 +
<h3>Transparent Window Allows Observation</h3>
 +
<p>
 +
<p>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2018/c/c3/T--Mingdao--Prototype4.jpg" width="80%" height="80%">
 +
<p>
 +
<p>
 +
<p>The device is no larger than a matchbox, so it is light enough to be carried in hundreds on a drone. Yet, the box is still large enough to hold more than 20 mosquitoes. The drone would be equipped with a UV light bulb to read the results. The results would then be uploaded to a hard-drive in a world wide database.</p>
 +
<p>
 +
<p>
 +
<h3>Smaller Than a Matchbox</h3>
 +
<p>
 +
<p>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2018/4/40/T--Mingdao--Prototype5.jpg" width="80%" height="80%">
 +
<p>
 +
<p>
 +
<p>There have been people who ask, what happens if a mosquito escape? Well, we have an easy solution. We simple have to pluck off the wings. It can stop the mosquitoes to spread quickly because mosquitoes are terrible at crawling.</p>
  
 +
 +
 +
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="top">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
 +
    </div>
 +
  </body>
 +
  <script type="text/javascript">
 +
    $('#interlab-btn-1').on('click', function(){
 +
      $('#interlab-1').css('height','250vh')
 +
      $('#interlab-1').slideToggle("slow");
 +
      $('.bg-container').css('max-height','500vh')
 +
      $('.main-content').css('min-height','200vh')
 +
    });
 +
    $('#interlab-btn-2').on('click', function(){
 +
      $('#interlab-2').slideToggle("slow");
 +
      $('.bg-container').css('max-height','500vh')
 +
      $('.main-content').css('min-height','200vh')
 +
    });
 +
    $('.top').on('click', function(){
 +
      $('html, body').animate({scrollTop: '0px'}, 500);
 +
    });
 +
</script>
 
</html>
 
</html>
 +
{{:Team:Mingdao/test5}}

Revision as of 05:48, 5 October 2018

HOME
Prototype

Prototype

Product Design

  • So now that the experiments are proven successful, it’s time to take the mosquitoes out for a spin. But we wouldn’t want the mosquitoes flying around spreading diseases. And that’s where the prototype comes in. Our cage-bandage consists of three parts. The first part is a transparent top for observing the mosquitoes. The second part is a fine metal web, sort of like a screen window. The mosquitoes can draw blood through the holes, but can’t wriggle through it. The final part is the bandage, for sticking the device onto skin.

Under View

Top View

Side View

Transparent Window Allows Observation

     

The device is no larger than a matchbox, so it is light enough to be carried in hundreds on a drone. Yet, the box is still large enough to hold more than 20 mosquitoes. The drone would be equipped with a UV light bulb to read the results. The results would then be uploaded to a hard-drive in a world wide database.

Smaller Than a Matchbox

     

There have been people who ask, what happens if a mosquito escape? Well, we have an easy solution. We simple have to pluck off the wings. It can stop the mosquitoes to spread quickly because mosquitoes are terrible at crawling.

HOME