Difference between revisions of "Team:UNSW Australia"

m
(New Home page)
Line 2: Line 2:
  
 
<div id="mainContainer>
 
<div id="mainContainer>
<div id="headerImage">
+
<head>
<h1 class="center"> Welcome to UNSW Australia's 2018 iGEM Wiki! </h1>
+
<title>UNSW iGEM</title>
<div id="teamPhoto">
+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<img class="teamPhoto" src="https://static.igem.org/mediawiki/2018/b/b6/T--UNSW_Australia--TeamPhoto.jpg">
+
<link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet">
</div>
+
</head>
</div>
+
<body>
 +
<div id="navbar">
 +
<header>
 +
<div class="logo">
 +
<img height= "60px" src="./Assets/Cube-logo-black.png">
 +
</div>
 +
<input type="checkbox" class="navToggle" id="navToggle">
 +
<nav>
 +
<ul>
 +
<li><a href="./Team">People</a></li>
 +
<li><a href="./Description">Project</a></li>
 +
<li><a href="./Parts">Parts</a></li>
 +
<li><a href="./Modelling">Modelling</a></li>
 +
<li><a href="./Human_Practices">Human Practices</a></li>
 +
<li><a href="./Software">Software</a></li>
 +
<li class="last-nav"><a href="./Notebook">Notebook</a></li>
 +
</ul>
 +
</nav>
 +
 +
<label for="navToggle" class="navToggleLabel">
 +
<span></span>
 +
</label>
 +
<label for="navToggle" class="navToggleText">
 +
<span>Navigation</span>
 +
</label>
 +
</header>
 +
</div>
  
<div id="wikiCollab">
+
<div id="hero">
<a href="https://2018.igem.org/Team:UNSW_Australia/Wiki_Collaboration"><button class="wikiCollab">Join our Wiki Collaboration Here!</button></a>
+
<h1 class="red">ASSEMBL</h1><h1 class="grey">ASE</h1>
</div>
+
<h3>UNSW Australia iGEM 2018</h3>
 +
</div>
  
<div id="socialMedia">
+
<div class ="body">
<h3 class="center">Find out more about our project by checking out our social media accounts below or send us an email!</h3>
+
<div class="content">
</div>
+
<h3><b>Our Project</b></h3>
 +
<p>Enzymes are biological catalysts which speed up chemical reactions, and are often part of sequential pathways. The speed of these chemical reactions is essential to the viability and efficiency of processes across many industries, including: pharmaceuticals, waste management and food production. However, many of these reactions are slowed down by significant distances between enzyme catalysts in solution, which can then also lead to unwanted reactions involving intermediate substrates in multi-step reactions.</p>
 +
<div class="image-div">
 +
<img class="single-img" src="./Assets/prospectus-diagram.png">
 +
</div>
  
<div id="socialMediaIcons">
+
<p>We have designed a novel protein scaffold onto which we can attach the enzymes of any pathway, creating an assembly line of chemical reactions. By bringing several enzymes together onto a scaffold, we can control (and reduce) the distance the intermediate products of a reaction are required to diffuse to reach the next enzyme. We hope to demonstrate greatly increased rates of reaction, which may be quite useful in many industrial processes, and discuss implications of this with various stakeholders; particularly those in industry.</p>
<a href="mailto:unsw.igem@gmail.com"><img class="socialIcon" class="email" src="https://static.igem.org/mediawiki/2018/6/66/T--UNSW_Australia--Email.png"></a>
+
<div class="image-div">
<a href="https://www.facebook.com/unswigemteam"><img class="socialIcon" class="facebook" src="https://static.igem.org/mediawiki/2018/2/2d/T--UNSW_Australia--Facebook.png"></a>
+
<img class="double-img" src="./Assets/prospectus-diagram2.png">
<a href="https://www.instagram.com/unsw_igem"><img class="socialIcon" class="instagram" src="https://static.igem.org/mediawiki/2018/7/70/T--UNSW_Australia--Instagram.png"></a>
+
<img class="double-img" src="./Assets/prospectus-diagram3.png">
</div>
+
</div>
 +
<p>We are aiming to speed up biochemical reactions so that we can increase their level of productivity. This research doesn't just help scientists gain a new perspective on enzymatic reactions; it also has real world applications. Speeding up biochemical reactions could lower the cost and time of production for many everyday items, such as antibiotics, laundry detergent, and fermented food and beverages. Furthermore, our enzyme scaffold could also be used in the bioremediation and degradation of pollutants in our environment, such as plastics and petro-chemicals, to make them non-toxic. We project that the  use of our scaffold with relevant bioremediation enzymes may lower the time required to restore our environment to its prior healthy state.</p>
  
</div>
+
<br />
 +
<br />
 +
 
 +
<h3><b>Our Team</b></h3>
 +
<p>This year UNSW is entering its largest and most interdisciplinary team yet. We are made up of eleven undergraduate students, with backgrounds in the medical sciences, cell and molecular biology, engineering, education, and law. We are all enthusiastic about scientific research and excited about our project, which we hope to use to expand the synthetic biologist’s toolkit.</p>
 +
<div class="image-div">
 +
<img id="team-photo" src="./Assets/Team-Photo---Web.jpg">
 +
</div>
 +
 
 +
<br />
 +
<br />
 +
 
 +
<h3><b>Collaborations</b></h3>
 +
<p>Being one of only two iGEM teams based in Australia, we would love to chat to teams from all over the world to talk about iGEM and our project. Let us know about any collaboration requests you may have or check out the current collaborations we are running below!</p>
 +
<div id="collaborations">
 +
<a href="./Wiki_Collaboration"><div id="skill-share" class="collab-box">
 +
<div class="collab-content">
 +
<h4>Wiki Skill Share</h4>
 +
<p>We are running a wiki skill share for teams to get feedback on their wiki design.</p>
 +
<p>Click here to learn more!</p>
 +
</div>
 +
</div></a>
 +
 
 +
<div id="fav-enzyme" class="collab-box">
 +
<div class="collab-content">
 +
<h4>Enzymes Teaching Resource</h4>
 +
<p>We are compiling a teaching resource to help teach high school students about enzymes.</p>
 +
<p>Email us to find out more!</p>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
 
 +
<div id="footer">
 +
<div id="?" class="footer-columns">
 +
<h3>Placeholder</h3>
 +
<span>?</span>
 +
</div>
 +
 
 +
<div id="social" class="footer-columns">
 +
<h3>Follow Us:</h3>
 +
<img src="./Assets/Facebook Red.png">
 +
<img src="./Assets/Instagram Red.png">
 +
</div>
 +
<div id="contact" class="footer-columns">
 +
<h3>Contact Us:</h3>
 +
<p>Email: <a href="mailto:unsw.igem@gmail.com">unsw.igem@gmail.com</a></p>
 +
<p>Samuels Building, UNSW Sydney</p>
 +
</div>
 +
<br />
 +
</div>
 +
 
 +
<!-- Set up JavaScript and JQuery -->
 +
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 +
<script type="text/javascript" src="./Home.js"></script>
 +
 
 +
</body>
  
 
<style>
 
<style>
 +
* {
 +
margin: 0px;
 +
font-family: 'Lato', sans-serif;
 +
}
  
@keyframes growPhoto {
+
/* Navigation Style */
0% {
+
 
    transform: scale(0,0);
+
header {
  }
+
background-color: black;
100% {
+
text-align: center;
    transform: scale(1,1,);
+
position: fixed;
  }
+
width: 100%;
 +
height: 65px;
 +
z-index: 1000;
 
}
 
}
  
 +
.logo {
 +
margin-top: 2px;
 +
color: white;
 +
}
  
.center {
+
nav {
text-align: center;
+
position: absolute;
 +
text-align: left;
 +
top: 100%;
 +
left: 0;
 +
background-color: black;
 +
width: 100%;
 +
transform: scale(1, 0);
 +
transform-origin: top;
 +
transition: transform 400ms ease-in-out;
 
}
 
}
  
#content {
+
.navToggle {
width: 100vw;
+
display: none;
margin: 0;
+
padding: 0px;
+
 
}
 
}
  
#top_title {
+
.navToggleLabel {
display: none;
+
position: absolute;
 +
top: 0;
 +
left: 0;
 +
margin-left: 1em;
 +
height: 100%;
 +
display: flex;
 +
align-items: center;
 
}
 
}
  
#mainContainer {
+
.navToggleLabel span,
width: 970px;
+
.navToggleLabel span:before,
display: flex;
+
.navToggleLabel span:after {
margin: auto;
+
display: block;
justify-content: center;
+
background: white;
overlap: hide;
+
height: 2px;
 +
width: 2em;
 +
border-radius: 2px;
 +
position: relative;
 
}
 
}
  
#headerImage h1 {
+
.navToggleLabel span:before,
font-size: 2.5rem;
+
.navToggleLabel span:after {
margin: 20px;
+
content: '';
line-height: 160%;
+
position: absolute;
 
}
 
}
  
#teamPhoto {
+
.navToggleLabel span:before {
padding: 0 25%;
+
bottom: 7px;
width: auto;
+
margin: auto;
+
float: center;
+
 
}
 
}
  
.teamPhoto {
+
.navToggleLabel span:after {
width: 100%;
+
top: 7px;
animation: 1s ease-out 0s 1 growPhoto
+
 
}
 
}
  
#wikiCollab {
+
nav ul {
justify-content: center;
+
margin: 0;
display: flex;
+
padding: 0;
margin-top: 20px;
+
list-style: none;
 
}
 
}
  
button {
+
nav li {
padding: 15px;
+
margin-bottom: 1em;
background-color: #97b5a4;
+
margin-right: 0;
font-size: 1.2rem;
+
font-family: 'Lato', sans-serif;
border-radius: 5px;
+
 
}
 
}
  
button:hover {
+
nav a {
background-color: #5b8068;
+
color: white;
 +
text-decoration: none;
 +
font-size: 1.1rem;
 +
text-transform: uppercase;
 +
opacity: 0;
 +
transition: opacity 150ms ease-in-out;
 
}
 
}
  
#socialMedia {
+
nav a:hover {
width: auto;
+
color: #e40042;
padding: 0 30%;
+
 
}
 
}
  
#socialMedia h3 {
+
.navToggle:checked ~ nav {
padding-top: 40px;
+
transform: scale(1, 1);
font-size: 1.2rem;
+
line-height: 140%;
+
 
}
 
}
  
#socialMediaIcons {
+
.navToggle:checked ~ nav a {
width: 314px;
+
opacity: 1;
height: 100px;
+
transition: opacity 250ms ease-in-out 250ms;
margin: auto;
+
float: center;
+
 
}
 
}
  
.socialIcon {
+
@media screen and (min-width: 500px) {
padding: 15px;
+
header {
height: 50px;
+
text-align: left;
 +
}
 +
 
 +
nav {
 +
text-align: right;
 +
}
 +
 
 +
nav a {
 +
margin-right: 1em;
 +
}
 +
 
 +
.navToggleLabel {
 +
display: none;
 +
}
 +
 
 +
.logo {
 +
margin-left: 30px;
 +
}
 +
 
 +
.navToggleText {
 +
position: absolute;
 +
text-transform: uppercase;
 +
top: 0;
 +
right: 0;
 +
margin-right: 1em;
 +
height: 100%;
 +
display: flex;
 +
align-items: center;
 +
color: white;
 +
font-size: 1.5rem;
 +
font-color: white;
 +
font-family: 'Lato', sans-serif;
 +
}
 +
 
 +
.navToggleText:hover {
 +
color: #e40042;
 +
}
 +
 
 +
.navToggle:checked ~ nav {
 +
transform: scale(1, 1);
 +
}
 +
 
 +
.navToggle:checked ~ nav a {
 +
text-align: right;
 +
opacity: 1;
 +
transition: opacity 250ms ease-in-out 250ms;
 +
}
 +
 
 
}
 
}
  
.socialIcon:hover {
+
@media screen and (min-width: 900px) {
opacity: 0.6;
+
.navToggleLabel,
 +
.navToggleText {
 +
display: none;
 +
}
 +
 
 +
header {
 +
display: grid;
 +
grid-template-columns: 100px auto minmax(780px, 1.6fr);
 +
}
 +
 
 +
.logo {
 +
grid-column: 1 / span 1;
 +
margin-left: 30px;
 +
}
 +
 
 +
nav {
 +
all: unset;
 +
grid-column: 3 / span 1;
 +
display: flex;
 +
justify-content: flex-end;
 +
align-items: center;
 +
height: 60px;
 +
}
 +
 
 +
nav ul {
 +
display: flex;
 +
justify-content: flex-end;
 +
}
 +
 
 +
nav li {
 +
font-size: 0.7em;
 +
padding-top: 20px;
 +
}
 +
 
 +
nav a {
 +
opacity: 1;
 +
}
 +
 
 
}
 
}
  
 +
 +
/* Main Banner */
 +
 +
#hero {
 +
width: 100%;
 +
margin: 0;
 +
background: black;
 +
height: 200px;
 +
color: white;
 +
text-align: center;
 +
padding-top: 120px;
 +
}
 +
 +
#hero h1 {
 +
display: inline;
 +
font-size: 60px;
 +
}
 +
 +
#hero h3 {
 +
font-size: 23px;
 +
color: #aaa;
 +
}
 +
 +
.red {
 +
color: #e40042;
 +
}
 +
 +
.grey {
 +
color: #3f3f3f;
 +
}
 +
 +
#hero img {
 +
width: 100%;
 +
float: right;
 +
}
 +
 +
 +
/* Content Menu */
 +
.content {
 +
margin-bottom: 50px;
 +
margin: 20px;
 +
font-size: 1.1rem;
 +
}
 +
 +
.content h3 {
 +
font-size: 1.5rem;
 +
text-transform: uppercase;
 +
}
 +
 +
.image-div {
 +
display: flex;
 +
justify-content: center;
 +
margin: 10px 0;
 +
}
 +
 +
.single-img {
 +
width: 100%;
 +
height: 100%;
 +
max-width: 700px;
 +
max-height: 500px;
 +
}
 +
 +
.double-img {
 +
width: 50%;
 +
height: 50%;
 +
max-height: 400px;
 +
max-width: 350px;
 +
margin: 5px;
 +
}
 +
 +
#team-photo {
 +
width: 100%;
 +
max-width: 800px;
 +
height: 100%;
 +
box-shadow: 5px 5px 5px #888;
 +
}
 +
 +
/* Collaborations */
 +
#collaborations {
 +
display: flex;
 +
justify-content: center;
 +
}
 +
 +
#collaborations a {
 +
text-decoration: none;
 +
}
 +
 +
.collab-box {
 +
display: flex;
 +
margin: 20px;
 +
}
 +
 +
.collab-content h4 {
 +
padding-top: 60px;
 +
margin: 10px;
 +
font-size: 25px;
 +
text-transform: uppercase;
 +
}
 +
 +
.collab-content p {
 +
margin: 10px;
 +
font-size: 18px;
 +
}
 +
 +
@media (min-width: 700px) {
 +
.collab-content {
 +
display: inline-block;
 +
height: 300px;
 +
width: 300px;
 +
color: white;
 +
text-align: center;
 +
opacity: 0;
 +
background-color: rgba(0, 0, 0, 0.6);
 +
}
 +
 +
.collab-content h4 {
 +
padding-top: 60px;
 +
margin: 10px;
 +
font-size: 25px;
 +
text-transform: uppercase;
 +
}
 +
 +
.collab-content p {
 +
margin: 10px;
 +
font-size: 18px;
 +
}
 +
 +
.collab-content:hover {
 +
opacity: 1;
 +
}
 +
 +
#skill-share {
 +
background-image: url(./Assets/Skill-Share.jpg);
 +
background-size: 100%;
 +
}
 +
 +
#fav-enzyme {
 +
background-image: url(./Assets/enzyme.jpg);
 +
background-size: 100%;
 +
}
 +
}
 +
 +
 +
/* Footer */
 +
 +
#footer {
 +
background-color: #373737;
 +
color: #CCCCCC;
 +
text-align: center;
 +
padding-top: 20px;
 +
display: inline-block;
 +
width: 100%
 +
}
 +
 +
#footer h3 {
 +
color: white;
 +
}
 +
 +
#footer a {
 +
color: #ab606b;
 +
}
 +
 +
#footer p {
 +
margin: 5px;
 +
}
 +
 +
.footer-columns img {
 +
width: 60px;
 +
margin: 9px;
 +
opacity: 0.4;
 +
}
 +
 +
.footer-columns img:hover {
 +
opacity: 0.6;
 +
}
 +
 +
@media screen and (min-width: 500px) {
 +
.footer-columns {
 +
float: left;
 +
width: 33%;
 +
height: 120px;
 +
margin-bottom: 20px;
 +
}
 +
 +
#social {
 +
border-left: 3px solid #CCC;
 +
border-right: 3px solid #CCC;
 +
}
 +
}
 
</style>
 
</style>
  

Revision as of 14:49, 28 June 2018