Difference between revisions of "Team:Mingdao/Public Engagement"

Line 1: Line 1:
 
{{:Team:Mingdao/test9}}
 
{{:Team:Mingdao/test9}}
−
<html lang="en">
+
<html>
−
  <head>
+
<head>
−
    <meta charset="UTF-8">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
+
<style>
−
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
+
* {
−
     <title>Description</title>
+
     box-sizing: border-box;
−
  </head>
+
}
  
−
<style type="text/css">
+
/* 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;
 
   margin: 0;
Line 19: Line 127:
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
−
   font-family: 'Ubuntu' !important; }
+
   font-family: 'Ubuntu' !important;  
−
 
+
  background-color:black;
 +
}
  
 
.bg-container {
 
.bg-container {
 
   background-attachment: fixed;
 
   background-attachment: fixed;
−
   background-color: rgba(255,255,255, .6);
+
   background-color: black;
 +
  margin-top:0px;
 
   overflow: hidden;
 
   overflow: hidden;
 
   position: relative;
 
   position: relative;
−
  background-image: url(https://static.igem.org/mediawiki/2018/9/96/T--Mingdao--human_practice_top.jpg);
 
−
  background-repeat: no-repeat;
 
−
  background-size: 100%;
 
−
  background-position: center;
 
 
}
 
}
  
 
.my-main-container {
 
.my-main-container {
 
   width: 100%;
 
   width: 100%;
−
   padding: 50px 7%;
+
   padding: 0% 0% 0% 0%;
 
  }
 
  }
  
 
.main-content {
 
.main-content {
−
  background-color: rgba(255,255,255, .7);
+
   width: 60%;
−
   width: 80%;
+
   margin-top: 0%;
−
   margin-left: 10%;
+
   margin-left: 20%;
−
   padding: 50px;
+
margin-bottom:0%;
−
  min-height: 3000vh;
+
   padding: 0%;
−
  z-index: 10; }
+
min-height: 600vh;
−
 
+
}
−
.text-area {
+
−
  margin-bottom: 80px; }
+
−
   .text-area h1 {
+
−
    font-size: 60px;
+
−
    font-weight: 700;
+
−
    font-family: 'Arizonia' !important;
+
−
    text-align: center;
+
−
    margin-bottom: 1rem; }
+
−
  .text-area p {
+
−
    font-size: 24px;
+
−
    font-weight: 500; }
+
  
 
.m-block img {
 
.m-block img {
Line 81: Line 176:
 
       transition: all .3s;
 
       transition: all .3s;
 
       transform: scale(1.2); }
 
       transform: scale(1.2); }
−
 
  
 
.path {
 
.path {
Line 103: Line 197:
 
}
 
}
 
#HQ_page .text-area p {
 
#HQ_page .text-area p {
−
   font-size: 24px;
+
   font-size: 22px;
 
   font-family: 'Ubuntu';
 
   font-family: 'Ubuntu';
 
   font-weight: 500; }
 
   font-weight: 500; }
 
img.center {
 
img.center {
 
   display: block;
 
   display: block;
−
   margin: 0 auto; }
+
   margin: 0 auto;
 +
width: 60%;  }
  
−
.text-area h2{
+
.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; }
 +
 
 +
h2{
 
     text-align: center;
 
     text-align: center;
 
     margin-bottom: 2rem !important;
 
     margin-bottom: 2rem !important;
 
     margin-top: 2rem;
 
     margin-top: 2rem;
−
     color: black !important;
+
     color: pink !important;
−
     font-size: 28px;
+
     font-size: 40px;
 
     font-weight:bold;
 
     font-weight:bold;
 +
    font-family:Helvetica;
 
}
 
}
−
  .text-area h3{
+
h3{
−
   text-align: center;
+
   text-align: left;
 
   margin-bottom: 2rem !important;
 
   margin-bottom: 2rem !important;
 
   margin-top: 2rem;
 
   margin-top: 2rem;
−
   color: black !important;
+
   color: #4682B4  !important;
−
   font-size: 26px;
+
   font-size: 20px;
 +
  font-weight:bold;
 +
    font-family:Helvetica;
 +
}
 +
h5{
 +
  text-align: center;
 +
  color:#ffffff  !important;
 +
  font-size: 12px;
 
   font-weight:bold;
 
   font-weight:bold;
 
}
 
}
Line 134: Line 252:
 
   width: 50px;
 
   width: 50px;
 
   cursor: pointer; }
 
   cursor: pointer; }
−
  .top img {
+
 
 +
.top img {
 
     width: 100%; }
 
     width: 100%; }
 +
 
img.pic {
 
img.pic {
 
   display: block !important;
 
   display: block !important;
 
   margin: 40px auto !important;
 
   margin: 40px auto !important;
 +
}
 +
 +
.top-picture{
 +
  z-index:2;
 +
width:100%;
 +
position:absolute;
 
}
 
}
  
Line 145: Line 271:
 
             width: 100%;
 
             width: 100%;
 
             height:auto;
 
             height:auto;
−
             margin: 20px auto !important;
+
             margin: 0px auto !important;
−
          }
+
            z-index:1;
−
.card {
+
−
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+
−
    transition: 0.3s;
+
−
    width: 40%;
+
−
    border-radius: 5px;
+
−
    float:left;
+
 
}
 
}
  
−
.card:hover {
+
.fig_block{
−
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+
     position: relative;//設為相對定位(relative)
−
}
+
            width: 60%;
−
.card-hidden {
+
            height:auto;
−
  display: none;
+
            margin: 0px auto !important;
 +
    text-align: center;
 +
    border:2px solid black;
 +
z-index:-1;
 +
background-color: black;
 
}
 
}
  
−
img {
+
//hot紅色區塊
−
     border-radius: 5px 5px 0 0;
+
.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;
 
}
 
}
  
−
.container {
+
.fig_icon1{
−
     padding: 2px 10px;
+
     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;
 +
 
 
}
 
}
−
.btn {
+
.fig_icon2{
−
  background-color:#ADD8E6;
+
    position: absolute;//設為絕對定位(absolute)
−
  border: 1px solid #cccccc;
+
    font-weight: bold;
−
  //border-radius: 1rem;
+
    font-size:8;
−
  color: #696969;
+
    top: 54%;
−
  padding: 0.5rem;
+
    bottom: 0px;
−
  text-transform: lowercase;
+
    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;
  
−
.btn--block {
+
}
−
  display: block;
+
.fig_icon4{
−
  width: 10%;
+
    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>
 
</style>
 +
</head>
  
 
<body>
 
<body>
 +
<div class="bg-container">
 +
</div>
 +
<div class="row">
 +
<h1>Education & Public Engagement </h1>
 +
<h2 style="text-align:center">Blood Testing</h2>
 +
<p>Resize the browser window to see the effect.</p>
  
−
    <div class="bg-container" style="max-height:none;">
+
<div class="column3">
−
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/e/ed/T--Mingdao--hp--top.jpg" style="width:100%">
+
    <div class="card2">
−
       <div class="my-main-container">
+
<img src="" style="width:100%">
−
        <div class="main-content">
+
       <h3></h3>
−
          <div class="text-area">
+
      <p></p>
−
            <h1>Human Practice</h1>
+
      <p> </p>
−
            <h2 id="d-meetups">Meetups with different teams</h2>
+
      <p> </p>
−
          <div class="card">
+
      <p> </p>
−
  <img src="https://static.igem.org/mediawiki/2018/a/ae/T--Mingdao--hp_pic_meetup1.jpg" alt="Avatar" style="width:100%">
+
     </div>
−
  <div class="container">
+
−
    <h4><b>4.3 nchu meet-ups</b></h4>  
+
−
    <p>Interior Designer</p>  
+
−
     <button id="button" class="btn btn--block card__btn">Learn More</button>
+
 
   </div>
 
   </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="card">
+
  <div class="column">
−
  <img src="https://static.igem.org/mediawiki/2018/4/43/T--Mingdao--meetup_nccu_pic.jpg" alt="Avatar" style="width:100%">
+
    <div class="card">
−
   <div class="container">
+
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-1-2">
−
     <h4><b>8.18 nccu meet-ups</b></h4>  
+
<img src="https://static.igem.org/mediawiki/2018/6/68/T--Mingdao--HP_3-1-2.png" style="width:100%">
−
    <p>Interior Designer</p>  
+
      <h3>HIV Lourdes Association</h3>
−
    <button id="button" class="btn btn--block card__btn">Learn More</button>
+
      <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>
  
−
    </div>      
+
<div class="row">
 +
<div class="column2" style="width:50%">
 +
  <h2 style="text-align:center">Biotech Workshop</h2>
 +
  <p>Resize the browser window to see the effect.</p>
 +
</div>
 +
<div class="column2" style="width:50%">
 +
  <h2 style="text-align:center">Debate Conference</h2>
 +
  <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="card">
+
<div class="column">
−
   <img src="https://static.igem.org/mediawiki/2018/4/41/T--Mingdao--meetup_nctu_nthu_pic.jpg" alt="Avatar" style="width:100%">
+
   <div class="card">
−
  <div class="container">
+
  <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-2-2">
−
    <h4><b>7.23 nthu nctu meet-ups</b></h4>  
+
  <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Mingdao--HP_3-2-2.png" style="width:100%">
−
    <p>Interior Designer</p>  
+
  <h3>Biotech for Young Kids</h3>
−
    <button id="button" class="btn btn--block card__btn">Learn More</button>
+
  <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>
  
−
    </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="card">
+
<div class="column">
−
   <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--meetup_nchu_pic.jpg" alt="Avatar" style="width:100%">
+
   <div class="card">
−
  <div class="container">
+
  <a href="https://2018.igem.org/Team:Mingdao/Human_Practices_3-3-2">
−
    <h4><b>4.3 nchu meet-ups</b></h4>  
+
  <img src="https://static.igem.org/mediawiki/2018/f/f9/T--Mingdao--HP_3-3-2.png" style="width:100%">
−
    <p>Interior Designer</p>  
+
  <h3>Pros and Cons of Biotech</h3>
−
    <button id="button" class="btn btn--block card__btn">Learn More</button>
+
  <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>
 +
</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>
  
−
    <h2 id = "d-professor" class="text-area">Meetings with professors</h2>
+
  <div class="column">
−
   
+
     <div class="card">
−
     <div class="path-btns" style="left:0;">
+
<video playinline controls="true">
−
      <div class="path">
+
  <source src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--HomePage_intro.mp4" type="video/mp4";  >
−
        <div class="pathSvg">
+
    </video>
−
          <svg width="80" height = "100">
+
      <h3>Proposal</h3>
−
            <rect x ="36" y="20" width="6" height="80" style="fill:#385e66"/>
+
       <p>Interview: Mr. Ching-Kuei Lin (CEO)</p>
−
          </svg>
+
      <p> Date: Jul. 19, 2018 </p>
−
        </div>
+
      <p> Location: SHIN YAN SHENO PRECISION INDUSTRIAL CO., LTD. </p>
−
        <div id="d-meetups-btn" class="path-dot"></div>
+
      <p> Reflection: syringe recycling problem, environmental friendly product </p>
−
        <div class="pathWord path-word-sm">
+
</a>
−
          <p>Meetups</p>
+
    </div>
−
        </div>
+
  </div>
−
      </div>
+
−
       <div class="path">
+
−
        <div class="pathSvg">
+
−
          <svg width="80" height = "100">
+
−
            <rect x ="36" y="20" width="6" height="0" style="fill:#385e66"/>
+
−
          </svg>
+
−
        </div>
+
−
        <div id="d-professor-btn" class="path-dot" style="top: 100px"></div>
+
−
        <div class="pathWord path-word-sm">
+
−
          <p>Professional Meetings</p>
+
−
        </div>
+
−
      </div>
+
  
−
     <div class="top">
+
  <div class="column">
−
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
+
     <div class="card">
 +
<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%">
 +
      <h3>SWOT analysis</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>
−
   </body>
+
   </div>
−
  <script type="text/javascript">
+
−
    $("#d-meetups-btn").click(function() {
+
−
      $('html, body').animate({
+
−
          scrollTop: $("#d-overview").offset().top
+
−
      }, 500);
+
−
    });
+
−
    $("#d-professor-btn").click(function() {
+
−
      $('html, body').animate({
+
−
          scrollTop: $("#d-funding").offset().top
+
−
      }, 500);
+
−
    });
+
 
    
 
    
−
     $(document).ready(function(){
+
  <div class="column">
−
      $('.top').on('click', function(){
+
     <div class="card">
−
        $('html, body').animate({scrollTop: '0px'}, 500);
+
<a href="https://2018.igem.org/Team:Mingdao/DM_test">
−
       });
+
<img src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" style="width:100%">
−
        $("#d-meetups-btn").css('background-color', '#385e66');
+
      <h3>Marketing</h3>
−
        var scroll_pos = 0;
+
      <p>Interview: the public </p>
−
        $(document).scroll(function() {
+
      <p> Date: Aug. 19, 2018 </p>
−
            scroll_pos = $(this).scrollTop();
+
      <p>Location: Shin Kong Mitsukoshi Department Store Co., Ltd., Taichung </p>
 +
       <p> Reflection: blood testing preference, safety, accuracy </p>
 +
</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>
  
−
            d_meetups_pos = $("#d-meetups").offset().top -100
+
</div>
−
            d_professor_pos = $("#d-professor").offset().top -100
+
−
           
+
−
            // overview
+
−
            if(scroll_pos < d_meetups_pos) {
+
−
                $(".path-dot").css('background-color', '#fff')
+
−
                $("#d-meetups-btn").css('background-color', '#385e66');
+
−
         
+
  
−
            //detective
+
 
−
            else if( scroll_pos >= d_professor_pos) {
+
<h1>Conclusion & Perspective</h1>
−
                $(".path-dot").css('background-color', '#fff')
+
<h2> Every Deed Begins with a Purpose </h2>
−
                $("#d-professor-btn").css('background-color', '#385e66');
+
<div class="row">
−
            }
+
<div class="column5">
−
        });
+
    <div class="card2">
−
    });
+
    </div>
−
    $("#button").on("click", function(e) {
+
  </div>
−
if ($(".card-hidden").length > 0) {
+
−
    $(".card-hidden").first().slideToggle(function() {
+
<div class="column4">
−
      $(this).removeClass("card-hidden");
+
    <div class="card3">
−
    });
+
<p style="text-indent:2em; color:white; font-size:20px;">
−
} else {
+
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.
−
  console.log("No more cards to show.");
+
</p>
−
}
+
    </div>
−
});
+
  </div>
−
  </script>
+
</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>
 +
  <h2>Box 1</h2>
 +
  <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>
 +
  <h2>Box 2</h2>
 +
  <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>
 +
  <h2>Box 3</h2>
 +
  <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>
 +
</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>
 
</html>
 +
{{:Team:Mingdao/test6}}

Revision as of 16:24, 16 October 2018

HOME

Education & Public Engagement

Blood Testing

Resize the browser window to see the effect.

Syringe Manufacture Corp.

Interview: Mr. Ching-Kuei Lin (CEO)

Date: Jul. 19, 2018

Location: SHIN YAN SHENO PRECISION INDUSTRIAL CO., LTD.

Reflection: syringe recycling problem, environmental friendly product

HIV Lourdes Association

Interview: a HIV/AIDS social worker

Date: Aug. 22, 2018

Location: Lourdes association office in Taichung

Reflection: patient care, dignity and privacy

Street Survey

Interview: the public

Date: Aug. 19, 2018

Location: Shin Kong Mitsukoshi Department Store Co., Ltd., Taichung

Reflection: blood testing preference, safety, accuracy

Biotech Workshop

Resize the browser window to see the effect.

Debate Conference

Resize the browser window to see the effect.

iGEM Winter Camp

Participants: Mingdao junior high school students

Date: Feb. 3 - 7, 2018

Location: Biolab at Mingdao High School

Perspective: iGEMers in the future

Biotech for Young Kids

Participants: elementary school students

Date: Oct. 9, 2018

Location: Chiao-Jen elementary school, Taichung

Perspective: biotech scientists

Mingdao Voice Club

Participants: club members and iGEMers

Date: May 29, 2018

Location: Hungdao Library at Mingdao High School

Dialogue: GMO issues

Pros and Cons of Biotech

Participants: high school studens and iGEMers of Teams CCU & Mingdao

Date: Sep. 4, 2018

Location: Conference Hall at Mingdao High School

Dialogue: synthetic biology and ethical issues

Entrepreneurship

Proposal

Interview: Mr. Ching-Kuei Lin (CEO)

Date: Jul. 19, 2018

Location: SHIN YAN SHENO PRECISION INDUSTRIAL CO., LTD.

Reflection: syringe recycling problem, environmental friendly product

SWOT analysis

Interview: a HIV/AIDS social worker

Date: Aug. 22, 2018

Location: Lourdes association office in Taichung

Reflection: patient care, dignity and privacy

Marketing

Interview: the public

Date: Aug. 19, 2018

Location: Shin Kong Mitsukoshi Department Store Co., Ltd., Taichung

Reflection: blood testing preference, safety, accuracy

Conclusion & Perspective

Every Deed Begins with a Purpose

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.