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

(Prototype team page)
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Mingdao}}
+
{{:Team:Mingdao/test9}}
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
* {
 +
    box-sizing: border-box;
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
/* The grid: Three equal columns that floats next to each other */
−
<h3>★  ALERT! </h3>
+
.column {
−
<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>
+
    float: left;
−
<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>
+
    width: 25%;
−
</div>
+
    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;
 +
}
  
−
<div class="clear"></div>
+
.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;
 +
}
  
−
<div class="column full_size">
+
/* 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;
 +
}
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
+
/* Responsive columns */
 +
@media screen and (max-width: 600px) {
 +
  .column {
 +
    width: 100%;
 +
    display: block;
 +
    margin-bottom: 20px;
 +
    margin-left: 0px;
 +
  }
 +
}
  
−
<p>Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices and views outside the lab. </p>
 
  
−
<p>On this page, your team should document your Education and Public Engagement work and activities. Describe your team’s efforts to include more people in shaping synthetic biology (such as creating or building upon innovative educational tools and/or public engagement activities to establish two-way dialogue with new communities, and/or engaging new groups in discussions about synthetic biology and public values). Describe your approach, why you chose it, and what was learned by everyone involved (including yourselves!).</p>
 
  
−
<p>This work may relate to or overlap with the work you document on your Human Practices page. Whereas Integrated Human Practices relates to the process of refining your project purpose and design, this page may highlight significant efforts that go beyond your particular project focus and/or address a significant broader concern in iGEM.
+
/* Style the counter cards */
−
</p>
+
.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; }
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
body {
−
+
  width: 100%;
−
<ul>
+
  margin: 0;
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
  padding: 0;
−
<li>tips on <a href="https://2018.igem.org/Human_Practices/How_to_Succeed">how to succeed</a> including explanations of judging criteria and advice about how to conduct and document your Human Practices work</li>
+
  font-family: 'Ubuntu' !important;
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
  background-color:black;
−
<li>links to helpful <a href="https://2018.igem.org/Human_Practices/Resources">resources</a></li>
+
}
−
<li>And more! </li>
+
−
</ul>
+
−
+
−
+
−
<div class="clear extra_space"></div>
+
−
+
−
<p>If you nominate your team for the <a href="https://2018.igem.org/Judging/Awards"></a>Best Education and Public Engagement Special Prize</a> by filling out the corresponding field in the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>, the judges will review this page to consider your team for that prize. The criteria are listed below. </p>
+
  
−
<div class="highlight decoration_background">
+
.bg-container {
−
<p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and public engagement activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.
+
  background-attachment: fixed;
−
</p>
+
  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: left;
 +
  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">
 +
 
 +
 
 +
 
 +
<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>
 +
 +
<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>
 +
 +
<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>
 +
 +
 +
 +
</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>
 +
</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}}

Latest revision as of 01:10, 18 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