Difference between revisions of "Team:Queens Canada/Public Engagement"

Line 45: Line 45:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<style>
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 +
body {
 +
    background-color: #474e5d;
 +
    font-family: Helvetica, sans-serif;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline {
 +
    position: relative;
 +
    max-width: 1200px;
 +
    margin: 0 auto;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 6px;
 +
    background-color: white;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -3px;
 +
}
 +
 +
/* Container around content */
 +
.container {
 +
    padding: 10px 40px;
 +
    position: relative;
 +
    background-color: inherit;
 +
    width: 50%;
 +
}
 +
 +
/* The circles on the timeline */
 +
.container::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 25px;
 +
    height: 25px;
 +
    right: -17px;
 +
    background-color: white;
 +
    border: 4px solid #FF9F55;
 +
    top: 15px;
 +
    border-radius: 50%;
 +
    z-index: 1;
 +
}
 +
 +
/* Place the container to the left */
 +
.left {
 +
    left: 0;
 +
}
 +
 +
/* Place the container to the right */
 +
.right {
 +
    left: 50%;
 +
}
 +
 +
/* Add arrows to the left container (pointing right) */
 +
.left::before {
 +
    content: " ";
 +
    height: 0;
 +
    position: absolute;
 +
    top: 22px;
 +
    width: 0;
 +
    z-index: 1;
 +
    right: 30px;
 +
    border: medium solid white;
 +
    border-width: 10px 0 10px 10px;
 +
    border-color: transparent transparent transparent white;
 +
}
 +
 +
/* Add arrows to the right container (pointing left) */
 +
.right::before {
 +
    content: " ";
 +
    height: 0;
 +
    position: absolute;
 +
    top: 22px;
 +
    width: 0;
 +
    z-index: 1;
 +
    left: 30px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 +
}
 +
 +
/* Fix the circle for containers on the right side */
 +
.right::after {
 +
    left: -16px;
 +
}
 +
 +
/* The actual content */
 +
.content {
 +
    padding: 20px 30px;
 +
    background-color: white;
 +
    position: relative;
 +
    border-radius: 6px;
 +
}
 +
 +
/* Media queries - Responsive timeline on screens less than 600px wide */
 +
@media screen and (max-width: 600px) {
 +
  /* Place the timelime to the left */
 +
  .timeline::after {
 +
    left: 31px;
 +
  }
 +
 
 +
  /* Full-width containers */
 +
  .container {
 +
    width: 100%;
 +
    padding-left: 70px;
 +
    padding-right: 25px;
 +
  }
 +
 
 +
  /* Make sure that all arrows are pointing leftwards */
 +
  .container::before {
 +
    left: 60px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 +
  }
 +
 +
  /* Make sure all circles are at the same spot */
 +
  .left::after, .right::after {
 +
    left: 15px;
 +
  }
 +
 
 +
  /* Make all right containers behave like the left ones */
 +
  .right {
 +
    left: 0%;
 +
  }
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<div class="timeline">
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2016</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2015</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2012</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2011</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2007</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
</body>
 +
</html>

Revision as of 00:46, 8 July 2018

HOME
TEAM
Team Members
Acknowledgement
PROJECT
Overview
Design
InterLab
Model
Results
Attributions
SAFETY
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Plant
Software
JUDGING FORM

★ ALERT!

This page is used by the judges to evaluate your team for the medal criterion or award listed below.

Delete this box in order to be evaluated for this medal criterion and/or award. See more information at Instructions for Pages for awards.

Human Practices: Education and Public Engagement Special Prize

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.

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!).

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.

If you nominate your team for the Best Education and Public Engagement Special Prize by filling out the corresponding field in the judging form, the judges will review this page to consider your team for that prize. The criteria are listed below.

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.

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2012

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2011

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2007

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.