Difference between revisions of "Team:Mingdao/Human Practices"

(Blanked the page)
Line 1: Line 1:
{{:Team:Mingdao/test9}}
 
<html>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
  
#myBtn {
 
  display: none;
 
  position: fixed;
 
  bottom: 20px;
 
  right: 30px;
 
  z-index: 99;
 
  font-size: 18px;
 
  border: none;
 
  outline: none;
 
  background-color: red;
 
  color: white;
 
  cursor: pointer;
 
  padding: 15px;
 
  border-radius: 4px;
 
}
 
 
#myBtn:hover {
 
  background-color: #555;
 
}
 
 
 
* {
 
    box-sizing: border-box;
 
}
 
 
/* The grid: Three equal columns that floats next to each other */
 
.column {
 
    float: left;
 
    width: 25%;
 
    padding: 10px;
 
    text-align: center;
 
    font-size: 40px;
 
    cursor: pointer;
 
    color: white;
 
}
 
 
.column2 {
 
    float: left;
 
    width: 25%;
 
    padding: 10px;
 
    text-align: center;
 
    font-size: 40px;
 
    cursor: pointer;
 
    color: white;
 
}
 
.column3 {
 
    float: left;
 
    width: 12.5%;
 
    padding: 10px;
 
    text-align: center;
 
    font-size: 40px;
 
    cursor: pointer;
 
    color: white;
 
}
 
.column4 {
 
    float: left;
 
    width: 80%;
 
    padding: 10px;
 
    text-align: center;
 
    font-size: 40px;
 
    cursor: pointer;
 
    color: white;
 
}
 
 
.column5 {
 
    float: left;
 
    width: 10%;
 
    padding: 10px;
 
    text-align: center;
 
    font-size: 60px;
 
    cursor: pointer;
 
    color: white;
 
}
 
 
.containerTab {
 
    padding: 20px;
 
    color: white;
 
}
 
 
/* Clear floats after the columns */
 
.row: {
 
    content: "";
 
    display: table;
 
    clear: both;
 
}
 
 
/* Closable button inside the container tab */
 
.closebtn {
 
    float: right;
 
    color: white;
 
    font-size: 35px;
 
    cursor: pointer;
 
}
 
/* Clear floats after the columns */
 
.row: {
 
  content: "";
 
  display: table;
 
  clear: both;
 
}
 
 
/* Responsive columns */
 
@media screen and (max-width: 600px) {
 
  .column {
 
    width: 100%;
 
    display: block;
 
    margin-bottom: 20px;
 
    margin-left: 0px;
 
  }
 
}
 
 
 
 
/* Style the counter cards */
 
.card {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
  padding: 16px;
 
  text-align: center;
 
  background-color: #f1f1f1;
 
}
 
.card2 {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
  padding: 16px;
 
  text-align: center;
 
  background-color:#000000;
 
}
 
.card3 {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
  padding: 16px;
 
  font-size:60px;
 
  text-align: center;
 
  background-color:#000000;
 
}
 
</style>
 
 
<style type="text/css">
 
* {
 
  margin: 0;
 
  padding: 0;
 
  box-sizing: border-box; }
 
 
body {
 
  width: 100%;
 
  margin: 0;
 
  padding: 0;
 
  font-family: 'Ubuntu' !important;
 
  background-color:black;
 
}
 
 
.bg-container {
 
  background-attachment: fixed;
 
  background-color: black;
 
  margin-top:0px;
 
  overflow: hidden;
 
  position: relative;
 
}
 
 
.my-main-container {
 
  width: 100%;
 
  padding: 0% 0% 0% 0%;
 
}
 
 
.main-content {
 
  width: 60%;
 
  margin-top: 0%;
 
  margin-left: 20%;
 
margin-bottom:0%;
 
  padding: 0%;
 
min-height: 600vh;
 
}
 
 
.m-block img {
 
  width: 100%; }
 
 
.path-btns {
 
  position: fixed;
 
  width: 250px;
 
  top: 200px;
 
  left: 225px; }
 
  .path-btns .path-dot {
 
    width: 25px;
 
    height: 25px;
 
    border-radius: 50%;
 
    position: absolute;
 
    background-color: #fff;
 
    top: 5px;
 
    left: 27px;
 
    border: 5px solid #385e66;
 
    cursor: pointer; }
 
    .path-btns .path-dot.active {
 
      background-color: #385e66; }
 
    .path-btns .path-dot:hover {
 
      transition: all .3s;
 
      transform: scale(1.2); }
 
 
.path {
 
  height: 100px;
 
  display: flex; }
 
  .path .pathSvg {
 
    display: block; }
 
  .path .pathWord {
 
    padding-right: 10%; }
 
  .path .path-btn {
 
    cursor: pointer;
 
    fill: #fff; }
 
    .path .path-btn.path-active {
 
      fill: #385e66; }
 
  .path .path-word-sm {
 
    font-size: 12px; }
 
#HQ_page .path .pathWord p {
 
      font-weight: 700;
 
      text-align: left !important;
 
      font-size: 16px;
 
}
 
#HQ_page .text-area p {
 
  font-size: 22px;
 
  font-family: 'Ubuntu';
 
  font-weight: 500; }
 
img.center {
 
  display: block;
 
  margin: 0 auto;
 
width: 60%;  }
 
 
.p {
 
  font-size: 40px;
 
  font-family: 'Ubuntu';
 
  font-weight: 500;
 
  color:white; }
 
 
h1{
 
    text-align:center;
 
    font-size: 50px;
 
    font-weight: 700;
 
    font-family: 'Arizonia' !important;
 
    color:white !important;
 
    text-align: center;
 
    margin-bottom: 1rem; }
 
 
h4{
 
    text-align: center;
 
    margin-bottom: 2rem !important;
 
    margin-top: 2rem;
 
    color: pink !important;
 
    font-size: 40px;
 
    font-weight:bold;
 
    font-family:Helvetica;
 
}
 
.text-area h2{
 
    text-align: center;
 
    margin-bottom: 2rem !important;
 
    margin-top: 2rem;
 
    color: white !important;
 
    font-size: 40px;
 
    font-weight:bold;
 
    font-family:serif;
 
}
 
h3{
 
  text-align: center;
 
  margin-bottom: 2rem !important;
 
  margin-top: 2rem;
 
  color: #4682B4  !important;
 
  font-size: 20px;
 
  font-weight:bold;
 
    font-family:Helvetica;
 
}
 
h5{
 
  text-align: center;
 
  color:#ffffff  !important;
 
  font-size: 12px;
 
  font-weight:bold;
 
}
 
 
.top {
 
  position: fixed;
 
  right: 50px;
 
  bottom: 50px;
 
  height: 50px;
 
  width: 50px;
 
  cursor: pointer; }
 
 
.top img {
 
    width: 100%; }
 
 
img.pic {
 
  display: block !important;
 
  margin: 40px auto !important;
 
}
 
 
.top-picture{
 
  z-index:2;
 
width:100%;
 
position:absolute;
 
}
 
 
video {
 
            position:relative;
 
            width: 100%;
 
            height:auto;
 
            margin: 0px auto !important;
 
            z-index:1;
 
}
 
 
.fig_block{
 
    position: relative;//設為相對定位(relative)
 
            width: 60%;
 
            height:auto;
 
            margin: 0px auto !important;
 
    text-align: center;
 
    border:2px solid black;
 
z-index:-1;
 
background-color: black;
 
}
 
 
//hot紅色區塊
 
.fig_icon{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 40%;
 
    bottom: 0px;
 
    left: 200px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 40px;
 
    text-align: center;
 
}
 
 
.fig_icon1{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 46.25%;
 
    bottom: 0px;
 
    left: 470px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
 
 
}
 
.fig_icon2{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 54%;
 
    bottom: 0px;
 
    left: 850px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
 
 
}
 
.fig_icon3{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 62%;
 
    bottom: 0px;
 
    left: 480px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
 
}
 
.fig_icon4{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 71%;
 
    bottom: 0px;
 
    left: 810px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
}
 
.fig_icon5{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 80%;
 
    bottom: 0px;
 
    left: 500px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
}
 
.fig_icon6{
 
    position: absolute;//設為絕對定位(absolute)
 
    font-weight: bold;
 
    font-size:8;
 
    top: 91%;
 
    bottom: 0px;
 
    left: 820px;
 
    right : 0px; //右邊上面都設0,則出現在右上方
 
    color: white;
 
    display: block;
 
    background: red;
 
    width: 110px;
 
    height: 30px;
 
    text-align: center;
 
}
 
.title {
 
        position: absolute;
 
        width: 300px;
 
        height: 20px;
 
        background: blue;
 
        color: white;
 
        font-weight: bold;
 
        top: 1500px;
 
        z-index:-1;
 
}
 
</style>
 
</head>
 
 
<body>
 
<div class="bg-container">
 
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/9/90/T--Mingdao--Phil13-5.png">
 
</br></br></br></br></br></br></br></br></br></br>
 
</br></br></br></br></br></br></br></br></br></br>
 
</br></br></br></br></br>
 
 
 
<img class="center" src="https://static.igem.org/mediawiki/2018/c/c7/T--Mingdao--HP_overview.png">
 
<h1>Overview </h1>
 
<h4>The Purpose under Every Deed</h4>
 
<div class="row">
 
<div class="column5">
 
    <div class="card2">
 
<img src="" style="width:100%">
 
 
 
      <h3></h3>
 
      <p></p>
 
      <p></p>
 
      <p></p>
 
      <p></p>
 
    </div>
 
  </div>
 
 
<div class="column4">
 
    <div class="card3">
 
<p style="text-indent:2em; color:white; font-size:20px;">
 
We define Human Practice as a progress of evolution, which transforms our project into a better situation by receiving and giving back. By looking to our past and teasing out the most important threads--the experience we've had, the people we've been influenced by, the lives we've touched and the highs and lows we've faced, we've indeed made our project profound and meaningful. In brief, it's about "Sharing, giving and mutual interaction". Thus, we categorized our Human Practice into three major pieces “WHY-WHAT-HOW” for highlighting the importance of these roles. ”While most people plunge through their lives focusing on the what and how, they rarely takes the time to identify the one purpose, cause or belief that is at the heart of who they are.”, written by Simon Sinek, and indeed, we’re now following its steps to find out a practical guide for us to discover the purpose for every deeds we’ve made. We are going to guide you through our work-of-art, realizing that what we value the most are nothing more than “Sharing and Reciprocity”. We created integrated work and dialogues from human practices, education and public engagement. We also learned SWOT analysis and marketing our product through entrepreneurship.
 
</p>
 
    </div>
 
  </div>
 
</div>
 
 
<div class="row">
 
 
<h1>Integrated Human Practices </h1>
 
<h4>Motivation & Brainstorming</h4>
 
<p style="text-align: center;">Resize the browser window to see the effect.</p>
 
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-1-1">
 
<img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--HP_2-1-1.png" style="width:100%" style="height:50%">
 
      <h3>International Volunteers</h3>
 
      <p>Interview:students volunteers</p>
 
      <p>Time: Aug. 3, 2018 </p>
 
      <p>Location:International Department of Mingdao High School </p>
 
      <p>Reflection: limited resources, diseases </p>
 
</a>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-1-2">
 
<img src="https://static.igem.org/mediawiki/2018/0/04/T--Mingdao--HP_2-1-2.png" style="width:100%" style="height:50%">
 
      <h3>Pest Control</h3>
 
      <p>Interview: Dr. Yu-Chan Chao </p>
 
      <p>Time:  Oct. 9, 2018 </p>
 
      <p>Location:  video chat </p>
 
      <p>Reflection:  GE mosquito application </p><p style="color:#f1f1f1; font-size:1px;"></p>
 
</a>
 
    </div>
 
  </div>
 
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-1-3">
 
<img src="https://static.igem.org/mediawiki/2018/b/bd/T--Mingdao--HP_2-1-3.png" style="width:100%">
 
      <h3>iGEM Meetups</h3>
 
      <p style="text-align: left">Meetup: NCHU, CCU, NCTU, NTHU, Baltimore_BioCrew</p>
 
      <p>Time:  through iGEM 2018 season </p>
 
      <p>Location:  Biolab of Mingdao High School </p>
 
      <p> Sharing: motivation, iGEM experience, etc. </p>
 
</a>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-1-4">
 
<img src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HP_2-1-4.png" style="width:100%">
 
      <h3>iGEM Conference</h3>
 
      <p>Conference: 6th Asia-Pacific iGEM Conference</p>
 
      <p>Time:  Jul. 30 – Aug. 2, 2018 </p>
 
      <p>Location:  National Chung Hsing University </p>
 
      <p> Spirit: iGEMers as a big family </br></p>
 
</a>
 
  </div>
 
  </div>
 
</div>
 
 
<div class="row">
 
<div class="column2" style="width:50%">
 
  <h4>Project Design</h4>
 
  <p style="text-align: center;">Resize the browser window to see the effect.</p>
 
</div>
 
<div class="column2" style="width:50%">
 
  <h4 style="text-align:center">Prototype Design</h4>
 
  <p>Resize the browser window to see the effect.</p>
 
</div>
 
</div>
 
 
<div class="row">
 
  <div class="column2">
 
    <div class="card">
 
    <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-2-1">
 
    <img src="https://static.igem.org/mediawiki/2018/f/fc/T--Mingdao--HP_2-2-1.png" style="width:100%">
 
    <h3>BioBrick Design</h3>
 
    <p>Interview: Prof. David J. Westenberg</p>
 
    <p> Date: Jun. 29, 2018 </p>
 
    <p> Location: Biolab of Mingdao High School </p>
 
    <p> Reflection: Circuit regulation, HP implementation </p>
 
    </a>
 
    </div>
 
  </div>
 
 
  <div class="column2">
 
    <div class="card">
 
    <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-2-2">
 
      <img src="https://static.igem.org/mediawiki/2018/1/10/T--Mingdao--HP_2-2-2.png" style="width:100%">
 
      <h3>HIV Testing Method</h3>
 
      <p>Interview: Prof. Jason C. Huang</p>
 
      <p> Date: Jul. 29, 2018 </p>
 
      <p style="text-align: left"> Location: AIDS control center at National Yang Ming University </p>
 
      <p> Reflection: HIV control, T cell activation signaling </p>
 
    </a>
 
    </div>
 
  </div>
 
 
  <div class="column2">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-3-1">
 
<img src="https://static.igem.org/mediawiki/2018/0/02/T--Mingdao--HP_2-3-1.png" style="width:100%">
 
      <h3>Mosquito Behavior</h3>
 
      <p>Interview: Dr. Hau-You Tzeng</p>
 
      <p> Date: Apr. 10 & Jul. 23, 2018 </p>
 
      <p>Location: Mingdao High School & NYMU </p>
 
      <p> Reflection: Mosquito preferences, safety issue </p>
 
</a>
 
    </div>
 
  </div>
 
 
  <div class="column2">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_2-3-2">
 
<img src="https://static.igem.org/mediawiki/2018/a/a8/T--Mingdao--HP_2-3-2.png" style="width:100%">
 
      <h3>Livestock Application</h3>
 
      <p>Interview: Prof. Wu-Chun Tu</p>
 
      <p> Date: Sep. 23, 2018 </p>
 
      <p style="text-align: left"> Location: National Mosquito-Borne Diseases Control Research Center, NHRI </p>
 
      <p> Reflection: Ethical issue, technical problem </p>
 
</a>
 
    </div>
 
  </div>
 
 
</div>
 
 
<div class="row">
 
<h1>Education & Public Engagement </h1>
 
<h4 style="text-align:center">Blood Testing</h4>
 
<p>Resize the browser window to see the effect.</p>
 
 
<div class="column3">
 
    <div class="card2">
 
<img src="" style="width:100%">
 
      <h3></h3>
 
      <p></p>
 
      <p>  </p>
 
      <p>  </p>
 
      <p>  </p>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-1-1">
 
<img src="https://static.igem.org/mediawiki/2018/0/0d/T--Mingdao--HP_3-1-1.png" style="width:100%">
 
      <h3>Syringe Manufacture Corp.</h3>
 
      <p>Interview: Mr. Ching-Kuei Lin (CEO)</p>
 
      <p> Date: Jul. 19, 2018 </p>
 
      <p style="text-align: left"> Location: Shin Yan Sheno Precision Industrial Co., Ltd. </p>
 
      <p style="text-align: left"> Reflection: syringe recycling problem, environmental friendly product </p>
 
</a>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-1-2">
 
<img src="https://static.igem.org/mediawiki/2018/6/68/T--Mingdao--HP_3-1-2.png" style="width:100%">
 
      <h3>HIV Lourdes Association</h3>
 
      <p>Interview: a HIV/AIDS social worker  </p>
 
      <p>Date: Aug. 22, 2018 </p>
 
      <p> Location: Lourdes association office in Taichung </p>
 
      <p> Reflection: patient care, dignity and privacy </p>
 
</a>
 
    </div>
 
  </div>
 
 
 
  <div class="column">
 
    <div class="card">
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-1-3">
 
<img src="https://static.igem.org/mediawiki/2018/3/30/T--Mingdao--HP_3-1-3.png" style="width:100%">
 
      <h3>Street Survey</h3>
 
      <p>Interview: the public </p>
 
      <p> Date: Aug. 19, 2018 </p>
 
      <p style="text-align: left">Location: Shin Kong Mitsukoshi Department Store Co., Ltd., Taichung </p>
 
      <p style="text-align: left">Reflection: blood testing preference, safety, accuracy </p>
 
</a>
 
    </div>
 
  </div>
 
</div>
 
 
<div class="row">
 
<div class="column2" style="width:50%">
 
  <h4 style="text-align:center">Biotech Workshop</h4>
 
  <p>Resize the browser window to see the effect.</p>
 
</div>
 
<div class="column2" style="width:50%">
 
  <h4 style="text-align:center">Debate Conference</h4>
 
  <p>Resize the browser window to see the effect.</p>
 
</div>
 
</div>
 
 
<div class="row">
 
  <div class="column">
 
    <div class="card">
 
    <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-2-1">
 
    <img src="https://static.igem.org/mediawiki/2018/4/4c/T--Mingdao--HP_3-2-1.png" style="width:100%">
 
    <h3>iGEM Winter Camp</h3>
 
    <p>Participants: Mingdao junior high school students</p>
 
    <p>Date: Feb. 3 - 7, 2018 </p>
 
    <p>Location: Biolab at Mingdao High School </p>
 
    <p>Perspective: iGEMers in the future </p>
 
    </a>
 
    </div>
 
  </div>
 
 
<div class="column">
 
  <div class="card">
 
  <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-2-2">
 
  <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Mingdao--HP_3-2-2.png" style="width:100%">
 
  <h3>Biotech for Young Kids</h3>
 
  <p>Participants: elementary school students</p>
 
  <p>Date: Oct. 9, 2018 </p>
 
  <p>Location: Chiao-Jen elementary school, Taichung </p>
 
  <p>Perspective: biotech scientists </p>
 
  </a>
 
  </div>
 
</div>
 
 
<div class="column">
 
  <div class="card">
 
  <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-3-1">
 
  <img src="https://static.igem.org/mediawiki/2018/a/ad/T--Mingdao--HP_3-3-1.png" style="width:100%">
 
  <h3>Mingdao Voice Club</h3>
 
  <p>Participants: club members and iGEMers</p>
 
  <p>Date: May 29, 2018</p>
 
  <p>Location: Hungdao Library at Mingdao High School </p>
 
  <p>Dialogue: GMO issues </p>
 
  </a>
 
  </div>
 
</div>
 
 
<div class="column">
 
  <div class="card">
 
  <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-3-2">
 
  <img src="https://static.igem.org/mediawiki/2018/f/f9/T--Mingdao--HP_3-3-2.png" style="width:100%">
 
  <h3>Pros and Cons of Biotech</h3>
 
  <p>Participants: high school studens and iGEMers of Teams CCU & Mingdao</p>
 
  <p>Date: Sep. 4, 2018 </p>
 
  <p>Location: Conference Hall at Mingdao High School </p>
 
  <p>Dialogue: synthetic biology and ethical issues </p>
 
  </a>
 
  </div>
 
</div>
 
</div>
 
 
<h1>Entrepreneurship</h1>
 
<div class="row">
 
<div class="column3">
 
    <div class="card2">
 
<img src="" style="width:100%">
 
      <h3></h3>
 
      <p></p>
 
      <p>  </p>
 
      <p>  </p>
 
      <p>  </p>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
      <h3>Entrepreneurship</h3>
 
<a href="https://2018.igem.org/Team:Mingdao/Entrepreneurship">
 
<img src="https://static.igem.org/mediawiki/2018/6/68/T--Mingdao--FINAL1.png" style="width:100%">
 
 
    </a>
 
    </div>
 
  </div>
 
 
  <div class="column">
 
    <div class="card">
 
      <h3>SWOT analysis</h3>
 
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_SWOT">
 
<img src="https://static.igem.org/mediawiki/2018/9/97/T--Mingdao--HP_SWOT.png" style="width:100%">
 
 
</a>
 
    </div>
 
  </div>
 
 
 
  <div class="column">
 
    <div class="card">
 
      <h3>Marketing</h3>
 
<a href="https://static.igem.org/mediawiki/2018/0/03/T--Mingdao--HomePage_DM.pdf">
 
<img src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" style="width:100%">
 
 
    </a>
 
    </div>
 
  </div>
 
 
 
<div class="column3">
 
    <div class="card2">
 
<img src="" style="width:100%">
 
      <h3></h3>
 
      <p></p>
 
      <p>  </p>
 
      <p>  </p>
 
      <p>  </p>
 
    </div>
 
  </div>
 
 
</div>
 
 
 
<h1>Conclusion & Perspective</h1>
 
<h4> Every Deed Begins with a Purpose </h4>
 
<div class="row">
 
<div class="column5">
 
    <div class="card2">
 
    </div>
 
  </div>
 
 
<div class="column4">
 
    <div class="card3">
 
<p style="text-indent:2em; color:white; font-size:20px;">
 
All in all, it’s hard to deny that people still have concerns about our project. Convincing the public that our product is safety and security is a difficult task. For adults, based on their personal experiences, they recognize that mosquitoes bring nothing but disease and itching. So it might came upon a bad impression for them, however, they did support us to do more and are eager to know what our final product is. For primary school students, they are quite young and don’t have too much concerns about safety, they prefer a natural bite more than a scared syringe. Promotion and propaganda for GMO products as well as realizing the way to spreading HIV infectious diseases play an indispensable role within our project. Moreover, because of the survey, we came up with our applied device, which keeps mosquitoes secure in a cage as small as a matchbox. And combined with the other experiences, we’ve come up with an idea of peeling off mosquito wings for preventing escaping. Our product hasn’t come true, our journey never stops, every deed begins with a purpose, and the purpose makes our life meaningful.
 
</p>
 
    </div>
 
  </div>
 
</div>
 
 
 
</div>
 
 
<!-- Full-width columns: (hidden by default) -->
 
<div id="b1" class="containerTab" style="display:none;background:green">
 
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 
  <h4>Box 1</h4>
 
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 
</div>
 
 
<div id="b2" class="containerTab" style="display:none;background:blue">
 
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 
  <h4>Box 2</h4>
 
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 
</div>
 
 
<div id="b3" class="containerTab" style="display:none;background:red">
 
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 
  <h4>Box 3</h4>
 
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 
</div>
 
</div>
 
    </div>
 
 
        <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
 
 
 
<script>
 
// When the user scrolls down 20px from the top of the document, show the button
 
window.onscroll = function() {scrollFunction()};
 
 
function scrollFunction() {
 
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 
        document.getElementById("myBtn").style.display = "block";
 
    } else {
 
        document.getElementById("myBtn").style.display = "none";
 
    }
 
}
 
 
// When the user clicks on the button, scroll to the top of the document
 
function topFunction() {
 
    document.body.scrollTop = 0;
 
    document.documentElement.scrollTop = 0;
 
}
 
</script>
 
 
 
</body>
 
 
 
 
<script>
 
function openTab(tabName) {
 
  var i, x;
 
  x = document.getElementsByClassName("containerTab");
 
  for (i = 0; i < x.length; i++) {
 
    x[i].style.display = "none";
 
  }
 
  document.getElementById(tabName).style.display = "block";
 
}
 
</script>
 
 
</html>
 
{{:Team:Mingdao/test6}}
 

Revision as of 07:57, 3 September 2019