Difference between revisions of "Template:Team:Calgary/TestingPage"

(Created page with "{{Team:Calgary/assets/main.css}} {{Team:Calgary-Reset}} <html> <head> <link href="https://fonts.googleapis.com/css?family=Patrick+Hand+SC|Varela+Round" rel="stylesheet">...")
 
Line 7: Line 7:
 
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand+SC|Varela+Round" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand+SC|Varela+Round" rel="stylesheet">
  
 +
<script>
  
 +
$(document).ready(function(){
 +
var ulNav= "#nav", openNav = "active";
 +
 +
$('.toggle-menu').click(function(e){
 +
if($(ulNav).hasClass(openNav)){
 +
$(ulNav).removeClass(openNav)
 +
}else{
 +
$(ulNav).addClass(openNav);
 +
}
 +
e.preventDefault();
 +
})
 +
 +
$('.toggle-drop').on('click', function() {
 +
$(this).next().slideToggle(400);
 +
  $(this).toggleClass('active');
 +
});
 +
})
 +
</script>
  
 
<style>
 
<style>
Line 54: Line 73:
 
    
 
    
 
}
 
}
 +
 +
 +
 +
html{
 +
font-size: 14px;
 +
}
 +
 +
body{
 +
width: 75%;
 +
margin:9rem auto;
 +
padding: 2rem;
 +
color: #444;
 +
font-family: helvetica, arial, sans-serif;
 +
  background-color: #faece5;
 +
 
 +
background-image: url("http://static.simpledesktops.com/uploads/desktops/2015/06/15/ramadan-2015-wallpaper1.png");
 +
`
 +
  /* everything shrinks to an extent */
 +
  background-repeat: no-repeat;
 +
  background-position: center center;
 +
  background-attachment: fixed;
 +
  background-size: cover;
 +
background-position: 100px 9rem;
 +
 +
  /* make sure the background doesnt move when you scroll */
 +
  background-attachment: fixed;
 +
}
 +
 +
a:link, a:visited{
 +
font-family: 'Varela Round', sans-serif;
 +
color:#faece5;
 +
font-weight: 900;
 +
}
 +
a:hover, a:active{
 +
color: #fcaa77;
 +
}
 +
 +
/* Thirds */
 +
div.thirds {
 +
  padding-bottom: 50px;
 +
}
 +
 +
div.one-third {
 +
  width: 30%;
 +
  float: left;
 +
  margin-right: 5%;
 +
}
 +
 +
div.one-third-last {
 +
  margin: 0;
 +
}
 +
 +
 +
/*styling content*/
 +
#BodyContent{
 +
background-color:rgba(251, 242, 238, 1);
 +
padding: 2rem;
 +
line-height: 2.2rem;
 +
box-shadow: 5px 5px 15px #DDDDDD;
 +
width: 75%;
 +
}
 +
div>p{
 +
text-indent: 2.6rem;
 +
}
 +
#BottomFooter{
 +
    background: #e65c00;
 +
    color: #fbfbfb; 
 +
    text-align: center;
 +
    padding: 2em 0;
 +
    box-shadow: 5px 5px 15px #DDDDDD;
 +
}
 +
 +
h1{
 +
font-family: 'Varela Round', sans-serif;
 +
color: #538cc6;
 +
font-size:18px;
 +
}
 +
 +
img {
 +
  max-width: 100%;
 +
  height: auto;
 +
  margin: 0 0 10px 0;
 +
}
 +
 +
/*styling the header part*/
 +
.toggle-menu{
 +
display: none;
 +
}
 +
 +
.toggle-drop{
 +
display: none;
 +
}
 +
 +
#TopBar{
 +
padding-top: 0.5rem;
 +
padding-bottom: 0.5rem;
 +
padding-right: 40rem;
 +
padding-left: 40rem;
 +
    position: fixed; /* Set the navbar to fixed position */
 +
    top: 0; /* Position the navbar at the top of the page */
 +
    width: 75%; /* Full width */
 +
    align-items: middle;
 +
    text-align: center;
 +
margin:1rem auto;
 +
margin-left: -40rem;
 +
background-color: #e65c00;
 +
    list-style: none;
 +
}
 +
 +
#TopBar li {
 +
    list-style: none;
 +
}
 +
 +
.logo img{
 +
max-width: 100px;
 +
display: inline-block;
 +
vertical-align: middle;
 +
}
 +
 +
.nav-list{
 +
display: flex;
 +
flex-flow: row;
 +
justify-content: space-between;
 +
align-items: center;
 +
white-space: nowrap;
 +
}
 +
.nav-list > li {
 +
position: relative;
 +
list-style-type: none;
 +
}
 +
 +
.nav-list>li:not(.has-logo)>a{
 +
text-transform: uppercase;
 +
display: block;
 +
padding:1rem;
 +
}
 +
 +
.nav-list ul{
 +
position: absolute;
 +
z-index: 1010;
 +
background-color: #e65c00;
 +
line-height: 2rem;
 +
left: -9999px;
 +
box-shadow: 5px 5px 15px #DDDDDD;
 +
}
 +
 +
.nav-list li:hover{
 +
    background-color:#000;
 +
}
 +
 +
.nav-list ul a{
 +
font-weight: normal;
 +
display: block;
 +
padding: .5rem 1rem;
 +
}
 +
 +
.nav-list > li:hover a + ul{
 +
left: 0;
 +
top:100%;
 +
}
 +
 +
 +
.mobile-display{
 +
display: none;
 +
}
 +
 +
#drop{
 +
display:none;
 +
}
 +
 +
@media only screen and (max-width: 58.75rem){
 +
html{
 +
font-size: 13px;
 +
}
 +
body{
 +
margin:8rem auto;
 +
width: 75%;
 +
}
 +
.logo{
 +
display:none;
 +
}
 +
.has-logo{
 +
display: none;
 +
}
 +
.mobile-display{
 +
display: block;
 +
margin:2rem auto;
 +
text-align: center
 +
}
 +
.nav-bar{
 +
padding-top: 30px;
 +
padding-bottom: 30px;
 +
}
 +
}
 +
 +
@media only screen and (max-width: 44.68rem){
 +
.nav-bar{
 +
width: 100%;
 +
position: static;
 +
}
 +
.logo{
 +
display:block;
 +
}
 +
.toggle-menu{
 +
display: block;
 +
max-width: -webkit-min-content;
 +
max-width: -moz-min-content;
 +
max-width: min-content;
 +
margin: 1rem auto;
 +
background-color: #e65c00;
 +
text-align: center;
 +
color: #fff !important;
 +
padding: 1rem;
 +
border-radius: .25em;
 +
}
 +
 +
.toggle-menu:hover{
 +
    background-color: #fcaa77;
 +
  }
 +
 +
  .toggle-drop{
 +
display: block;
 +
}
 +
 +
  .nav-list ul{
 +
background-color: #f76e13;
 +
}
 +
 +
.nav-list{
 +
display: block;
 +
width: 100%;
 +
position: static;
 +
line-height: 1rem;
 +
z-index: 1012;
 +
left: 0;
 +
top:0;
 +
text-align: left;
 +
max-height: 0;
 +
overflow: hidden;
 +
}
 +
 +
.active{
 +
max-height: 100%;
 +
overflow: auto;
 +
}
 +
 +
.logo img{
 +
max-width: 200px !important;
 +
}
 +
.nav-list  ul{
 +
position: static;
 +
text-indent: 2rem;
 +
z-index: 1013;
 +
box-shadow: none;
 +
}
 +
}
 +
 +
 +
 +
 +
  
 
</style>
 
</style>
Line 60: Line 340:
  
 
<body>
 
<body>
−
 
+
<div class="mobile-display" >
 +
<h2 class="logo">
 +
<a href="#">
 +
<img src="#">
 +
</a>
 +
</h2>
 +
</div>
 +
<div class="nav-bar">
 +
<div id="TopBar">
 +
<div class="nav">
 +
<a href="#" class="toggle-menu">&#9776;</a>
 +
<ul class="nav-list nav-open" id="nav">
 +
<li><a href="#">Home</a></li>
 +
<li><a href="#" class="toggle-drop">Project</a>
 +
<ul id="drop">
 +
<li><a href="#">Problem/Description</a></li>
 +
<li><a href="#">Experiments</a></li>
 +
<li><a href="#">Results</a></li>
 +
<li><a href="#">Parts</a></li>
 +
<li><a href="#">Accomplishments</a></li>
 +
<li><a href="#">Synthesis</a></li>
 +
<li><a href="#">Lysis</a></li>
 +
<li><a href="#">Engineering</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#" class="toggle-drop">Notebook</a>
 +
<ul id="drop">
 +
<li><a href="#">Protocols</a></li>
 +
<li><a href="#">Data Page</a></li>
 +
</ul>
 +
</li>
 +
<li class="has-logo">
 +
<h2 class="logo">
 +
<img src="#" alt="iGemLogo">
 +
</h2>
 +
</li>
 +
<li><a href="#" class="toggle-drop">Team</a>
 +
<ul id="drop">
 +
<li><a href="#">Team Members</a></li>
 +
<li><a href="#">Attributions</a></li>
 +
<li><a href="#">Sponsors</a></li>
 +
<li><a href="#">Our Profile</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#" class="toggle-drop">Human <br>Practices</a>
 +
<ul id="drop">
 +
<li><a href="#">HP Summary</a></li>
 +
<li><a href="#">HP Gold</a></li>
 +
<li><a href="#">HP Silver</a></li>
 +
<li><a href="#">Integrated Practices</a></li>
 +
<li><a href="#">Collaborations</a></li>
 +
<li><a href="#">Engagement</a></li>
 +
<li><a href="#">Safety</a></li>
 +
<li><a href="#">Legislation</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#" class="toggle-drop">Judging</a>
 +
<ul id="drop">
 +
<li><a href="#">Interlab</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
  
  

Revision as of 20:22, 26 June 2017


iGEM Team Calgary Coming Soon!

Governments and private enterprises alike are gearing up for travel across the Solar System. Plans to colonize the solar system are underway, with Elon Musk spearheading the initiative to have a Mars colony by 2030. In a parallel vein, NASA is planning a manned exploratory mission to Mars as soon as the 2030s (and several other space agencies have similar plans and timelines for their own respective Mars explorations). This exciting time in our history nonetheless comes with the challenges of long-term space travel. Two specific issues which make frequent space missions economically and ecologically challenging are the high cost of shipping materials up to space , and how to sustainably manage the waste that is produced on a spaceship.

This year, our project involves using genetically engineered E.coli to turn human waste into bioplastics. We envision our project as a start-to-finish integrated system which can be used in space to generate items useful to the astronauts who will be undertaking early Mars missions. This solves the problem of waste management, since it essentially upcycles the solid human waste into a usable product, and it will likely reduce the cost of space travel, as fewer materials would have to be shipped up to space.