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

(Prototype team page)
 
Line 1: Line 1:
−
{{Mingdao}}
+
{{:Team:Mingdao/test9}}
−
<html>
+
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>Description</title>
 +
  </head>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<style type="text/css">
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
  
−
<div class="clear"></div>
+
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
  
  
 +
.bg-container {
 +
  background-attachment: fixed;
 +
  background-color: rgba(255,255,255, .6);
 +
  overflow: hidden;
 +
  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;
 +
}
  
−
<div class="column full_size">
+
.my-main-container {
 +
  width: 100%;
 +
  padding: 50px 7%;
 +
}
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
+
.main-content {
 +
  background-color: rgba(255,255,255, .7);
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  min-height: 3000vh;
 +
  z-index: 10; }
  
−
<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>
+
.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; }
  
−
<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>
+
.m-block img {
 +
  width: 100%; }
  
−
<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.
+
.path-btns {
−
</p>
+
  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); }
  
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
.path {
−
+
  height: 100px;
−
<ul>
+
  display: flex; }
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
  .path .pathSvg {
−
<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>
+
    display: block; }
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
  .path .pathWord {
−
<li>links to helpful <a href="https://2018.igem.org/Human_Practices/Resources">resources</a></li>
+
    padding-right: 10%; }
−
<li>And more! </li>
+
  .path .path-btn {
−
</ul>
+
    cursor: pointer;
−
+
    fill: #fff; }
−
+
    .path .path-btn.path-active {
−
<div class="clear extra_space"></div>
+
      fill: #385e66; }
−
+
  .path .path-word-sm {
−
<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>
+
    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: 24px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
  
−
<div class="highlight decoration_background">
+
.text-area h2{
−
<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.
+
    text-align: center;
−
</p>
+
    margin-bottom: 2rem !important;
−
</div>
+
    margin-top: 2rem;
−
</div>
+
    color: black !important;
 +
    font-size: 28px;
 +
    font-weight:bold;
 +
}
 +
  .text-area h3{
 +
  text-align: center;
 +
  margin-bottom: 2rem !important;
 +
  margin-top: 2rem;
 +
  color: black !important;
 +
  font-size: 26px;
 +
  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;
 +
}
 +
 
 +
video {
 +
            position:relative;
 +
            width: 100%;
 +
            height:auto;
 +
            margin: 20px auto !important;
 +
          }
 +
.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 {
 +
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 +
}
 +
.card-hidden {
 +
  display: none;
 +
}
 +
 
 +
img {
 +
    border-radius: 5px 5px 0 0;
 +
}
 +
 
 +
.container {
 +
    padding: 2px 10px;
 +
}
 +
.btn {
 +
  background-color:#ADD8E6;
 +
  border: 1px solid #cccccc;
 +
  //border-radius: 1rem;
 +
  color: #696969;
 +
  padding: 0.5rem;
 +
  text-transform: lowercase;
 +
}
 +
 
 +
.btn--block {
 +
  display: block;
 +
  width: 10%;
 +
}
 +
</style>
 +
 
 +
<body>
 +
 
 +
    <div class="bg-container" style="max-height:none;">
 +
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/e/ed/T--Mingdao--hp--top.jpg" style="width:100%">
 +
      <div class="my-main-container">
 +
        <div class="main-content">
 +
          <div class="text-area">
 +
            <h1>Human Practice</h1>
 +
            <h2 id="d-meetups">Meetups with different teams</h2>
 +
          <div class="card">
 +
  <img src="https://static.igem.org/mediawiki/2018/a/ae/T--Mingdao--hp_pic_meetup1.jpg" alt="Avatar" style="width:100%">
 +
  <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 class="card">
 +
  <img src="https://static.igem.org/mediawiki/2018/4/43/T--Mingdao--meetup_nccu_pic.jpg" alt="Avatar" style="width:100%">
 +
  <div class="container">
 +
    <h4><b>8.18 nccu meet-ups</b></h4>
 +
    <p>Interior Designer</p>
 +
    <button id="button" class="btn btn--block card__btn">Learn More</button>
 +
  </div>
 +
 
 +
    </div>       
 +
 
 +
 
 +
<div class="card">
 +
  <img src="https://static.igem.org/mediawiki/2018/4/41/T--Mingdao--meetup_nctu_nthu_pic.jpg" alt="Avatar" style="width:100%">
 +
  <div class="container">
 +
    <h4><b>7.23 nthu nctu meet-ups</b></h4>
 +
    <p>Interior Designer</p>
 +
    <button id="button" class="btn btn--block card__btn">Learn More</button>
 +
  </div>
 +
 
 +
    </div>       
 +
 
 +
<div class="card">
 +
  <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--meetup_nchu_pic.jpg" alt="Avatar" style="width:100%">
 +
  <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>       
 +
 
 +
    <h2 id = "d-professor" class="text-area">Meetings with professors</h2>
 +
   
 +
    <div class="path-btns" style="left:0;">
 +
      <div class="path">
 +
        <div class="pathSvg">
 +
          <svg width="80" height = "100">
 +
            <rect x ="36" y="20" width="6" height="80" style="fill:#385e66"/>
 +
          </svg>
 +
        </div>
 +
        <div id="d-meetups-btn" class="path-dot"></div>
 +
        <div class="pathWord path-word-sm">
 +
          <p>Meetups</p>
 +
        </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">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
 +
    </div>
 +
  </body>
 +
  <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(){
 +
      $('.top').on('click', function(){
 +
        $('html, body').animate({scrollTop: '0px'}, 500);
 +
      });
 +
        $("#d-meetups-btn").css('background-color', '#385e66');
 +
        var scroll_pos = 0;
 +
        $(document).scroll(function() {
 +
            scroll_pos = $(this).scrollTop();
 +
 
 +
            d_meetups_pos = $("#d-meetups").offset().top -100
 +
            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) {
 +
                $(".path-dot").css('background-color', '#fff')
 +
                $("#d-professor-btn").css('background-color', '#385e66');
 +
            }
 +
        });
 +
    });
 +
    $("#button").on("click", function(e) {
 +
if ($(".card-hidden").length > 0) {
 +
    $(".card-hidden").first().slideToggle(function() {
 +
      $(this).removeClass("card-hidden");
 +
    });
 +
} else {
 +
  console.log("No more cards to show.");
 +
}
 +
});
 +
  </script>
 +
 
 +
</html>

Revision as of 04:12, 10 October 2018

HOME
Description

Human Practice

Meetups with different teams

Avatar

4.3 nchu meet-ups

Interior Designer

Avatar

8.18 nccu meet-ups

Interior Designer

Avatar

7.23 nthu nctu meet-ups

Interior Designer

Avatar

4.3 nchu meet-ups

Interior Designer

Meetings with professors

Meetups

Professional Meetings