Difference between revisions of "Team:NCKU Tainan/Public Engagement"

(Prototype team page)
 
Line 1: Line 1:
−
{{NCKU_Tainan}}
+
{{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}}
 +
 
 
<html>
 
<html>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<head>
−
<h3>★  ALERT! </h3>
+
    <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/HP_About_style?action=raw&ctype=text/css">
−
<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>
+
</head>
−
<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>
+
<body data-spy="scroll" data-target=".navbar-example">
 +
 
 +
      <header>
 +
          <div class="carousel-inner" role="listbox">
 +
            <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
 +
            </div>
 +
      </div>
 +
      </header>
 +
 
 +
    <div class="container content">
 +
        <h1 class="head">Integrated Human Practices</h1>
 +
        <div class="navbar-example">
 +
            <div class="row">
 +
                <div class="col-2 side">
 +
                    <div id="sidelist" class="list-Fgroup">
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-1">Professor(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-2">Professor-activity list(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-3">Cooperation Vist(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-4">Cooperation Vist-activity list(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-5">Meet Up(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#list-item-6">Meet Up-activity list(待訂)</a>
 +
                        <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 +
                                aria-hidden="true"></i></a>
 +
                    </div>
 +
                </div>
 +
                <div class="col-10">
 +
                    <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
 +
                        <div class="container">
 +
                            <div id="list-item-1">
 +
                                <h3>Professor</h3>
 +
                                <h10>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt,
 +
                                    finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut
 +
                                    urna
 +
                                    elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class
 +
                                    aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
 +
                                    himenaeos.
 +
                                    Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus
 +
                                    enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti
 +
                                    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus
 +
                                    congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet
 +
                                    felis.</h10>
 +
                            </div>
 +
 
 +
                            <div id="list-item-2">
 +
                              <div class="card">
 +
                                    <div class="thumbnail">
 +
                                        <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
 +
                                    </div>
 +
                                    <div class="right">
 +
                                        <h1>Meetup with Tec Chihuahua</h1>
 +
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
 +
                                            has two part.
 +
                                            The main part is E-coding, which use
 +
                                            bacteria to record the data. Another part is to sense the pollute in
 +
                                            Mexico. </div>
 +
                                    </div>
 +
                                    <h9>9</h9>
 +
                                    <h6>JULY</h6>
 +
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 +
                                            More</a></div>
 +
                                </div>
 +
 
 +
                                <div class="card">
 +
                                    <div class="thumbnail">
 +
                                        <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
 +
                                    </div>
 +
                                    <div class="right">
 +
                                        <h1>Meetup with Tec Chihuahua</h1>
 +
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
 +
                                            has two part.
 +
                                            The main part is E-coding, which use
 +
                                            bacteria to record the data. Another part is to sense the pollute in
 +
                                            Mexico. </div>
 +
                                    </div>
 +
                                    <h9>9</h9>
 +
                                    <h6>JULY</h6>
 +
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 +
                                            More</a></div>
 +
                                </div>
 +
                                <div class="card">
 +
                                    <div class="thumbnail">
 +
                                        <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
 +
                                    </div>
 +
                                    <div class="right">
 +
                                        <h1>Meetup with Tec Chihuahua</h1>
 +
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
 +
                                            has two part.
 +
                                            The main part is E-coding, which use
 +
                                            bacteria to record the data. Another part is to sense the pollute in
 +
                                            Mexico. </div>
 +
                                    </div>
 +
                                    <h9>9</h9>
 +
                                    <h6>JULY</h6>
 +
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 +
                                            More</a></div>
 +
                                </div>
 +
                            </div>
 +
 
 +
                            <div id="list-item-3">
 +
                               
 +
                            </div>
 +
 
 +
 
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
<style>
 +
 
 +
/*header*/
 +
.carousel-item {
 +
    height: 100vh;
 +
    min-height: 300px;
 +
    background: no-repeat center center scroll;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    -o-background-size: cover;
 +
    background-size: cover;
 +
  }
 +
 
 +
 
 +
  body {
 +
    background-color: #272625;
 +
    font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
 +
  }
 +
 
 +
  h3 {
 +
    color: white;
 +
    font-size: 35px;
 +
  }
 +
 
 +
  p {
 +
    color: white;
 +
    font-size: 20px;
 +
  }
 +
 
 +
  /* Button */
 +
  .animate{
 +
transition: all 0.1s;
 +
-webkit-transition: all 0.1s;
 +
  }
 +
 
 +
  .action-button{
 +
    position: relative;
 +
    padding: 10px 40px;
 +
    margin: 0px 10px 10px 0px;
 +
    float: right;
 +
    margin-right: 20px;
 +
    margin-bottom: 20px;
 +
    margin-bottom: 20px;
 +
    margin-right: 20px;
 +
border-radius: 10px;
 +
font-family: 'Pacifico', cursive;
 +
font-size: 25px;
 +
color: #FFF;
 +
text-decoration: none;
 +
  }
 +
 
 +
  .blue:hover{
 +
  background-color: #46a3ff;
 +
  }
 +
 
 +
 
 +
  .blue{
 +
background-color: #3498DB;
 +
border-bottom: 5px solid #2980B9;
 +
text-shadow: 0px -2px #2980B9;
 +
  }
 +
 
 +
  /* The card */
 +
  .card {
 +
    position: relative;
 +
    height: 400px;
 +
    width: 900px;
 +
    margin: 200px auto;
 +
    background-color: #FFF;
 +
    -webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
 +
    -moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
 +
    box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
 +
  }
 +
 
 +
  /* Image on the left side */
 +
  .thumbnail {
 +
    float: left;
 +
    position: relative;
 +
    left: 30px;
 +
    top: -100px;
 +
    height: 400px;
 +
    width: 400px;
 +
  }
 +
 
 +
  /*object-fit: cover; */
 +
  /*object-position: center; */
 +
  img.left {
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
 +
    border-radius: 3px;
 +
    height: 300px;
 +
    width: 400px;
 +
    -webkit-transform: translate(-50%, -50%);
 +
    -ms-transform: translate(-50%, -50%);
 +
    transform: translate(-50%, -50%);
 +
  }
 +
 
 +
  /* Right side of the card */
 +
  .right {
 +
    margin-left: 450px;
 +
    margin-right: 20px;
 +
    margin-top: 20px;
 +
    position: absolute;
 +
  }
 +
 
 +
  #cardtext {
 +
    text-align: justify;
 +
    font-size: 1.3rem;
 +
    line-height: 150%;
 +
    color: #4B4B4B;
 +
  }
 +
 
 +
 
 +
 
 +
  /* DATE of release */
 +
  h9 {
 +
    position: absolute;
 +
    left: 50px;
 +
    bottom: 90px;
 +
    font-size: 4.0rem;
 +
  }
 +
 
 +
  h6 {
 +
    position: absolute;
 +
    left: 32px;
 +
    bottom: 10px;
 +
    font-size: 2.2rem;
 +
  }
 +
 
 +
  /* paragraph content*/
 +
  h10 {
 +
    color: white;
 +
    font-size: 1.4rem;
 +
    line-height: 150%;
 +
  }
 +
 
 +
  .navbar {
 +
    padding-top: 10px;
 +
    margin-bottom: 0;
 +
  }
 +
  .navbar-brand {
 +
    font-size: 30px;
 +
  }
 +
  .nav-link {
 +
    font-size: 20px;
 +
  }
 +
  a.dropdown-item {
 +
    color: #4F7F52;
 +
  }
 +
  a.dropdown-item:active {
 +
    background-color: #4F7F52;
 +
  }
 +
  .caret {
 +
    display: inline-block;
 +
    width: 0;
 +
    height: 0;
 +
    margin-left: 2px;
 +
    vertical-align: middle;
 +
    border-top: 4px solid;
 +
    border-right: 4px solid transparent;
 +
    border-left: 4px solid transparent;
 +
  }
 +
  /*滑到navbar就展開*/
 +
  .dropdown-menu li:hover .sub-menu {visibility: visible;}
 +
  .dropdown:hover .dropdown-menu {display: block;}
 +
 
 +
  .head {
 +
    color: white;
 +
    width: 60%;
 +
    font-size: 50px;
 +
    font-weight: 700;
 +
    border-bottom: 10px solid #7ae26f !important;
 +
    position: relative;
 +
    margin-top: 100px;
 +
  }
 +
  .container.content {
 +
    margin-top: 80px;
  
 +
  }
  
−
<div class="clear"></div>
+
  @media (min-width: 992px) {
 +
    .navbar {
 +
      padding-left: 80px;
 +
      padding-right: 80px;
 +
    }
 +
  }
 +
  @media (max-width: 768px) {
 +
    .navbar-right form {
 +
      display: none;
 +
    }
 +
  }
 +
  @media (max-width: 568px) {
 +
    footer {
 +
      text-align: center;
 +
    }
 +
    .list-group {
 +
      display: none;
 +
    }
 +
  }
  
 +
  /*folded-corner*/
 +
  .post {
 +
    position: relative;
 +
  }
 +
  .folded-corner {
 +
    position: absolute;
 +
    bottom: 0px; 
 +
    right: 0px;
 +
    border-width: 0;
 +
    border-style: solid;
 +
    background: hsla(260,100%,100%,0.2);
 +
    box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
 +
    border-radius: 15px 0 0 0;
 +
    border-color: transparent #B9DEBB transparent transparent;
 +
    transition: border-width 0.2s ease-out;
 +
  }
 +
  .post:hover .folded-corner {
 +
    border-width: 40px 40px 0 0;
 +
  }
 +
  .photo .folded-corner {
 +
    background: hsla(260,5%,75%,0.5);
 +
  }
  
 +
  [class*="col-"] {
 +
    float: left;
 +
    padding: 13px;
 +
  }
 +
  a.list-group-item:visited {
 +
    color: white;
 +
  }
 +
  a:hover {
 +
    background-color: transparent;
 +
  }
 +
  .list-group {
 +
    margin-top: 100px;
 +
  }
 +
  .col-2.side {
 +
    padding: 0;
 +
  }
 +
  .list-group-item {
 +
    padding: .55rem .35rem;
 +
    background-color: #272625;
 +
    color: white;
 +
    border: none;
 +
    font-size: 19px;
 +
  }
 +
  a.list-group-item.list-group-item-action {
 +
    background-color: transparent;
 +
  }
 +
  a.list-group-item.list-group-item-action:hover {
 +
    color: #98CC9B;
 +
  }
 +
  a.list-group-item.list-group-item-action.active {
 +
    background-color: transparent;
 +
    color: #7ae26f;
 +
  }
 +
  .scrollspy-example h4{
 +
    font-size: 2rem;
 +
  }
  
−
<div class="column full_size">
+
 
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
+
  img.contentimg {
 +
      width: 100%;
 +
      margin: 20px 0;
 +
  }
 +
  a.link {
 +
      font-size: 30px;
 +
      color: #4F7F52;
 +
  }
 +
  #list-item-1 {
 +
      padding-top: 0px;
 +
  }
 +
  #list-item-2 {
 +
      padding-top: 0px;
 +
  }
 +
  #list-item-3 {
 +
    padding-top: 0px;
 +
  }
 +
  #list-item-4 {
 +
    padding-top: 0px;
 +
  }
 +
  #list-item-5 {
 +
    padding-top: 0px;
 +
  }
 +
  a.reference {
 +
    color: #4F7F52;
 +
  }
 +
 
 +
</style>
  
−
<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>
+
<script>
  
−
<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>
+
$(document).ready(function() {
 +
    $(window).scroll(function() {
 +
      if ($(this).scrollTop() >= 750) {
 +
        var position = $("#sidelist").position();
 +
        if(position == undefined){}
 +
        else{
 +
          $('#sidelist').css({"position": "fixed", "top": "145px", "margin-top": "0px"});
 +
        }
 +
      } else {
 +
        $('#sidelist').removeAttr('style');
 +
      }
 +
    });
 +
    $(function(){
 +
      $('i.fa-arrow-up').click(function(){
 +
        $('html, body').animate({scrollTop:0},600);
 +
        return false;
 +
      });
 +
    });
 +
});
  
−
<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.
+
    </script>
−
</p>
+
  
 +
    <script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
    <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
  
−
<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>
−
+
−
<ul>
+
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
−
<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>
+
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
−
<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">
+
</html>
−
<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.
+
{{NCKU_Tainan/footer}}
−
</p>
+
−
</div>
+
−
</div>
+

Revision as of 07:38, 9 September 2018

Integrated Human Practices

Professor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt, finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut urna elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet felis.

Meetup with Tec Chihuahua

We finished a video meeting with Tec-Monterry. Their project has two part. The main part is E-coding, which use bacteria to record the data. Another part is to sense the pollute in Mexico.
9
JULY

Meetup with Tec Chihuahua

We finished a video meeting with Tec-Monterry. Their project has two part. The main part is E-coding, which use bacteria to record the data. Another part is to sense the pollute in Mexico.
9
JULY

Meetup with Tec Chihuahua

We finished a video meeting with Tec-Monterry. Their project has two part. The main part is E-coding, which use bacteria to record the data. Another part is to sense the pollute in Mexico.
9
JULY
Follow us
Contact us

igem.ncku.tainan@gmail.com
No.1, Daxue Rd., East Dist., Tainan City 701, Taiwan (R.O.C.)