|
|
| Line 1: |
Line 1: |
| − | {{Queens Canada/Header}}
| |
| − | {{Queens Canada/Navbar}}
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <style>
| |
| | | | |
| − |
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | /* Create two equal columns that floats next to each other */
| |
| − | .columns {
| |
| − | float: left;
| |
| − | width: 35%; /*Pros and Cons next to each other, within content*/
| |
| − | padding: 10px;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | /* Clear floats after the columns */
| |
| − | .row:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background-color: white;
| |
| − | font-family: Helvetica, sans-serif;
| |
| − | margin-top: 50px;
| |
| − | max-width: 1200px;
| |
| − | position: relative;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | /* The actual timeline (the vertical ruler) */
| |
| − | .timeline {
| |
| − | max-width: 1200px;
| |
| − | position: relative;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | /* The actual timeline (the vertical ruler) */
| |
| − | .timeline::after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | width: 6px;
| |
| − | background-color: black;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 50%;
| |
| − | margin-left: -3px;
| |
| − | }
| |
| − |
| |
| − | /* Container around content */
| |
| − | .container {
| |
| − | padding: 10px 40px;
| |
| − | position: relative;
| |
| − | background-color: white;
| |
| − | width: 50%;
| |
| − | }
| |
| − |
| |
| − | /* The circles on the timeline
| |
| − | .container::after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | background-color: blue;
| |
| − | border: 4px solid #2ECC71;
| |
| − | top: 15px;
| |
| − | border-radius: 50%;
| |
| − | z-index: 1;
| |
| − | }*//*out for now*/
| |
| − |
| |
| − | /* Place the container to the left */
| |
| − | .left {
| |
| − | left: -25%;
| |
| − | }
| |
| − |
| |
| − | /* Place the container to the right */
| |
| − | .right {
| |
| − | left: 25%;
| |
| − | }
| |
| − |
| |
| − | /* 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 blue;
| |
| − | }
| |
| − |
| |
| − | /* 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 blue transparent transparent;
| |
| − | }
| |
| − |
| |
| − | /* Fix the circle for containers on the right side */
| |
| − | .right::after {
| |
| − | left: -16px;
| |
| − | }
| |
| − |
| |
| − | /* The actual content */
| |
| − | .content {
| |
| − | padding: 20px 30px;
| |
| − | background-color: #2ECC71;
| |
| − | 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: 5px;
| |
| − | padding-right: 25px;
| |
| − | }
| |
| − |
| |
| − | /* Make sure that all arrows are pointing leftwards */
| |
| − | .container::before {
| |
| − | left: 10px;
| |
| − | 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>
| |
| − |
| |
| − | <h1>Community Engagement</h1>
| |
| − |
| |
| − | <div class="timeline">
| |
| − | <div class="container left">
| |
| − | <div class="content">
| |
| − | <h2>Science Rendezvous</h2>
| |
| − | <p>The Kingston Science Rendezvous is an annual event that showcases current research in the fields of science and engineering to the community. QGEM saw it as an excellent opportunity to connect with people from different ages and background, and we held a booth that presented some interesting science experiments and demonstrations. At the event we had three stations, the first demonstrated the process of kiwi DNA extraction with household materials. This was meant to establish the idea that science experiments can take place in everyday life and to encourage parents to explore science-related projects with their children at home. The second was a microscope station presenting a set of fruit fly abdomen cross section under the microscope. This was prepared by one of our volunteers and many were impressed by the anatomy of the fruit fly. We took the chance to explain the importance of fruit flies in genetic research and gave children an idea of the variety of work geneticists carry out. Both parents and children had shown great interest as fruit flies are commonly seen in households and yet it was rare for people to be able to see their organs and inner structures. Our microscope set-up also featured other prepared slides containing different types of plankton. By allowing participants to use the microscope, they were able to gain a better appreciation for both how this technology works, as well as the microorganisms and microparticles that compose the world we live in. The third component of our booth was the use of a virtual reality (VR) headset with the app InCell VR. This application allowed participants to get an in-depth view of the inside of a human cell at the molecular level. Children were able to see cell components including the nucleus, mitochondria, and ribosomes during this interactive virtual experience. Although it was difficult to explain complicated concepts and experimental procedures to young children as it was their first time approaching the field of genetics, they were mostly fascinated and intrigued.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container right">
| |
| − | <div class="content">
| |
| − | <h2>Some pictures from the event</h2>
| |
| − | <p></p>
| |
| − | <img src="https://static.igem.org/mediawiki/2018/a/a5/T--Queens_Canada--ScienceRendezvous1.jpeg" width=70% height=70% />
| |
| − | <img src="https://static.igem.org/mediawiki/2018/f/f2/T--Queens_Canada--ScienceRendezvous2.jpeg" width=70% height=70% />
| |
| − | <img src="https://static.igem.org/mediawiki/2018/e/e8/T--Queens_Canada--ScienceRendezvous3.jpeg" width=70% height=70% />
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container left">
| |
| − | <div class="content">
| |
| − | <h2>CUTC</h2>
| |
| − | <p>QGEM was invited to attend and participate in the annual Maker’s Fair at the Canadian Undergraduate Technology Conference hosted by the University of Waterloo. CUTC is Canada's largest technology conference for undergraduate students established to bring together creators, designers, engineers, entrepreneurs, budding scientists and young visionaries across the country. There we were able to interact with and explain potential applications of synthetic biology to students in both high school and post-secondary. The team also highlighted problems tackled by past QGEM teams and briefly outlined recent years’ projects for a better understanding of the work that we do. As well, we were able to collaborate and share our ideas with other design teams from around Ontario.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container right">
| |
| − | <div class="content">
| |
| − | <h2>Heading 4</h2>
| |
| − | <p>Text.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container left">
| |
| − | <div class="content">
| |
| − | <h2>Heading 5</h2>
| |
| − | <p>Text.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container right">
| |
| − | <div class="content">
| |
| − | <h2>Heading 6</h2>
| |
| − | <p>Text.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
