(Prototype team page) |
|||
(4 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{Hawaii}} | {{Hawaii}} | ||
+ | {{Hawaii/All}} | ||
+ | {{Hawaii/Navbar}} | ||
<html> | <html> | ||
+ | <div class="human-banner"> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
+ | <div class="human-circle"> | ||
+ | <h1>HUMAN PRACTICES</h1> | ||
+ | </div> | ||
− | <div class=" | + | <div class="human-section1"> |
+ | <p class="hp" id="p1">Centromeric retrotransposable (CR) elements utilize a natural transportation system to package and carry genes to functional centromeres. While its potential role in gene delivery | ||
+ | will need to be continuously investigated, introducing a complex system to improve quality of life needs to be done in a careful way. The public, especially our youth, will need to be aware of | ||
+ | what this system will entail to make informed decisions about its use when the opportunity to do so arises.</p> | ||
+ | <h3>ENGAGING OUR YOUTH</h3> | ||
+ | <p class="hp">We thus created a typing game, Biotyper, that will allow students to explore some of the images depicting cell components and processes while typing through their descriptions. Although | ||
+ | the descriptions may be too hard to understand at first, we hope this sparks | ||
+ | interest in the younger community to start investigating what the images mean. These images are from the Cell Image Library and students are encouraged to explore what the image entails even further by researching terms that they are unfamiliar with online. </p> | ||
− | < | + | <p id="click-me"> |
+ | <button id="play"><a href="https://2018.igem.org/Team:Hawaii/Game">PLAY</a></button> | ||
+ | </p> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | </ | + | |
+ | <style> | ||
+ | .human-banner { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2018/7/77/T--Hawaii--hp_banner.png'); | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | background-color: rgb(30,30,30); | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | justify-content: space-between; | ||
+ | } | ||
+ | .human-circle { | ||
+ | width: 900px; | ||
+ | height: 450px; | ||
+ | border-radius: 900px 900px 0 0; | ||
+ | background-color: white; | ||
+ | position: absolute; | ||
+ | top: 90px; | ||
+ | left: -60px; | ||
+ | display: flex; | ||
+ | justify-content: flex-start; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .human-circle h1 { | ||
+ | width: 700px; | ||
+ | font-family: 'Oswald',sans-serif; | ||
+ | font-size: 90px; | ||
+ | color: rgb(50,50,50); | ||
+ | letter-spacing: 3px; | ||
+ | margin-left: 160px; | ||
+ | margin-top: 150px; | ||
+ | } | ||
+ | #p1 { | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | .hp { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-size: 20px; | ||
+ | padding-left: 100px; | ||
+ | padding-right: 100px; | ||
+ | line-height: 1.5; | ||
+ | } | ||
+ | .human-section1 h3 { | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 40px; | ||
+ | color: rgb(50,50,50); | ||
+ | margin-left: 100px; | ||
+ | } | ||
+ | #human-inner-section { | ||
+ | width: 100%; | ||
+ | height: 500px; | ||
+ | /* background-color: pink; */ | ||
+ | display: flex; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | #human-inner-section div { | ||
+ | width: 90%; | ||
+ | height: 100%; | ||
+ | /* background-color: blue; */ | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | #game-description { | ||
+ | width: 300px; | ||
+ | height: 100%; | ||
+ | /* background-color: orange; */ | ||
+ | /* padding-right: 50px; */ | ||
+ | margin: 0px; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-size: 20px; | ||
+ | line-height: 1.5; | ||
+ | } | ||
+ | #game-image { | ||
+ | width: 60%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | #click-me { | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | #play { | ||
+ | width: 150px; | ||
+ | height: 60px; | ||
+ | background-color: #3b9789 ; | ||
+ | border: none; | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 30px; | ||
+ | letter-spacing: 2px; | ||
+ | color: white; | ||
+ | } | ||
+ | #play:hover { | ||
+ | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | ||
+ | } | ||
+ | #play:focus { | ||
+ | border: none; | ||
+ | } | ||
− | + | </style> | |
− | + | </html> | |
− | + | {{Hawaii/Footer}} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Latest revision as of 03:37, 18 October 2018
HUMAN PRACTICES
Centromeric retrotransposable (CR) elements utilize a natural transportation system to package and carry genes to functional centromeres. While its potential role in gene delivery will need to be continuously investigated, introducing a complex system to improve quality of life needs to be done in a careful way. The public, especially our youth, will need to be aware of what this system will entail to make informed decisions about its use when the opportunity to do so arises.
ENGAGING OUR YOUTH
We thus created a typing game, Biotyper, that will allow students to explore some of the images depicting cell components and processes while typing through their descriptions. Although the descriptions may be too hard to understand at first, we hope this sparks interest in the younger community to start investigating what the images mean. These images are from the Cell Image Library and students are encouraged to explore what the image entails even further by researching terms that they are unfamiliar with online.