(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | |||
<style> | <style> | ||
Line 6: | Line 7: | ||
#sideMenu, #top_title {display:none;} | #sideMenu, #top_title {display:none;} | ||
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;} | #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:#bcc8dd; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
− | + | /********************************* MENU ********************************/ | |
− | /********************************* | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
/* Wrapper for the menu */ | /* Wrapper for the menu */ | ||
.menu_wrapper { | .menu_wrapper { | ||
− | width: | + | width:150px; |
height:100vh; | height:100vh; | ||
position:fixed; | position:fixed; | ||
padding:0px; | padding:0px; | ||
float:left; | float:left; | ||
− | background-color:# | + | background-color:#a8bce1; |
text-align:left; | text-align:left; | ||
} | } | ||
Line 67: | Line 27: | ||
margin:-2px 0px 0px -20px; | margin:-2px 0px 0px -20px; | ||
padding: 10px 10px; | padding: 10px 10px; | ||
− | border-bottom: 1px solid | + | border-bottom: 1px solid white; |
font-weight:bold; | font-weight:bold; | ||
− | color: | + | color:white; |
cursor: pointer; | cursor: pointer; | ||
} | } | ||
Line 76: | Line 36: | ||
.menu_item:hover { | .menu_item:hover { | ||
color:#000000; | color:#000000; | ||
− | background-color: # | + | background-color: #c4d1e9; |
} | } | ||
Line 109: | Line 69: | ||
padding: 15px 0px 15px 15px ; | padding: 15px 0px 15px 15px ; | ||
display:block; | display:block; | ||
− | border-bottom: 1px solid # | + | border-bottom: 1px solid #d3d3d3; |
text-align:left; | text-align:left; | ||
font-weight:bold; | font-weight:bold; | ||
text-decoration:none; | text-decoration:none; | ||
− | color: | + | color:white; |
list-style-type:none; | list-style-type:none; | ||
cursor:pointer; | cursor:pointer; | ||
Line 127: | Line 87: | ||
padding: 11px 90px 12px 20px; | padding: 11px 90px 12px 20px; | ||
text-decoration: none; | text-decoration: none; | ||
− | color: | + | color:white; |
} | } | ||
/* When hovering on a menu item */ | /* When hovering on a menu item */ | ||
.menu_items li:hover { | .menu_items li:hover { | ||
− | background-color:# | + | background-color:#a8bce1; |
color: #000000; | color: #000000; | ||
} | } | ||
Line 165: | Line 125: | ||
padding: 5px 10px; | padding: 5px 10px; | ||
display: inline-block; | display: inline-block; | ||
− | border-bottom: 1px solid | + | border-bottom: 1px solid white; |
− | background-color: | + | background-color:#c1cfe8; |
text-decoration:none; | text-decoration:none; | ||
− | color: | + | color:white; |
} | } | ||
Line 174: | Line 134: | ||
.submenu li a:hover { | .submenu li a:hover { | ||
− | background-color:# | + | background-color:#a3b6d7; |
− | color: | + | color:black; |
} | } | ||
Line 200: | Line 160: | ||
background-color: #72c9b6; | background-color: #72c9b6; | ||
color:#000000; | color:#000000; | ||
+ | } | ||
+ | |||
+ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
+ | |||
+ | /* Wrapper for the content */ | ||
+ | .content_wrapper { | ||
+ | width: 85%; | ||
+ | margin-left:150px; | ||
+ | padding:10px 0px; | ||
+ | float:left; | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | /*LAYOUT */ | ||
+ | .column { | ||
+ | padding: 10px 0px; | ||
+ | float:left; | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | .full_size { | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .full_size img { | ||
+ | padding: 10px 15px; | ||
+ | width:96.5%; | ||
+ | } | ||
+ | |||
+ | .half_size { | ||
+ | width: 50%; | ||
+ | } | ||
+ | .half_size img { | ||
+ | padding: 10px 15px; | ||
+ | width: 93%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | width: 90%; | ||
+ | margin: auto; | ||
+ | padding: 15px 5px; | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*STYLING */ | ||
+ | |||
+ | /* styling for the titles */ | ||
+ | .content_wrapper h1, .content_wrapper h2 { | ||
+ | padding:5px 15px; | ||
+ | border-bottom:0px; | ||
+ | color:#72c9b6; | ||
+ | |||
+ | } | ||
+ | .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { | ||
+ | padding:5px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* font and text */ | ||
+ | .content_wrapper p { | ||
+ | padding:0px 15px; | ||
+ | font-size: 13px; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Links */ | ||
+ | .content_wrapper a { | ||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | text-decoration-color:#72c9b6; | ||
+ | color: #72c9b6; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* hover for the links */ | ||
+ | .content_wrapper a:hover { | ||
+ | text-decoration:none; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | /* non numbered lists */ | ||
+ | .content_wrapper ul { | ||
+ | padding:0px 20px; | ||
+ | font-size: 13px; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* numbered lists */ | ||
+ | .content_wrapper ol { | ||
+ | padding:0px; | ||
+ | font-size: 13px; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Table */ | ||
+ | .content_wrapper table { | ||
+ | width: 97%; | ||
+ | margin:15px 10px; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table cells */ | ||
+ | .content_wrapper td { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table headers */ | ||
+ | .content_wrapper th { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | background-color:#f2f2f2; | ||
+ | } | ||
+ | |||
+ | /* Button class */ | ||
+ | .button_click { | ||
+ | margin: 10px auto; | ||
+ | padding: 15px; width:12%; | ||
+ | text-align:center; | ||
+ | font-weight:bold; | ||
+ | background-color: #72c9b6; | ||
+ | cursor:pointer; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* button class on hover */ | ||
+ | .button_click:hover { | ||
+ | background-color:#000000; | ||
+ | color:#72c9b6; | ||
+ | } | ||
+ | |||
+ | /********************************* RESPONSIVE STYLING ********************************/ | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 1000PX */ | ||
+ | |||
+ | @media only screen and (max-width: 1000px) { | ||
+ | |||
+ | #content {width:100%; } | ||
+ | .menu_wrapper {width:15%;} | ||
+ | .content_wrapper {margin-left: 15%;} | ||
+ | .menu_item {display:block;} | ||
+ | .icon {display:none;} | ||
+ | .highlight {padding:10px 0px;} | ||
+ | } | ||
+ | |||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 680PX */ | ||
+ | |||
+ | @media only screen and (max-width: 680px) { | ||
+ | .collapsable_menu_control { display:block;} | ||
+ | .menu_item {display:none;} | ||
+ | .menu_wrapper { width:100%; height: 15%; position:relative;} | ||
+ | .content_wrapper {width:100%; margin-left:0px;} | ||
+ | .column.half_size {width:100%; } | ||
+ | .column img { width: 100%; padding: 5px 0px;} | ||
+ | .icon {display:block;} | ||
+ | .highlight {padding:15px 5px;} | ||
} | } | ||
Line 205: | Line 343: | ||
− | + | ||
+ | |||
+ | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
+ | |||
+ | |||
+ | <!-- This tells the browser that your page is responsive --> | ||
+ | |||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | |||
<div class="menu_wrapper" > | <div class="menu_wrapper" > | ||
Line 221: | Line 371: | ||
<li class="menu_item"> <div class="icon plus"></div> TEAM | <li class="menu_item"> <div class="icon plus"></div> TEAM | ||
<ul class="submenu"> | <ul class="submenu"> | ||
− | <li> <a href=" https://2016.igem.org/Team:Dundee_Schools/Team"> | + | <li> <a href=" https://2016.igem.org/Team:Dundee_Schools/Team"> Meet the Agents </a> </li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Collaborations"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Collaborations"> Collaborations </a> </li> |
</ul> | </ul> | ||
</li> | </li> | ||
Line 228: | Line 378: | ||
<li class="menu_item"> <div class="icon plus"></div> PROJECT | <li class="menu_item"> <div class="icon plus"></div> PROJECT | ||
<ul class="submenu"> | <ul class="submenu"> | ||
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Description"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Description"> Description </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Design"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Design"> Design </a></li> |
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Experiments"> Experiments </a></li> | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Experiments"> Experiments </a></li> | ||
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Proof"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Proof"> Proof of Concept </a></li> |
− | + | ||
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Results"> Results </a></li> | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Results"> Results </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Notebook"> Notebook </a></li> | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Notebook"> Notebook </a></li> | ||
Line 241: | Line 390: | ||
<ul class="submenu"> | <ul class="submenu"> | ||
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Parts">Parts </a></li> | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Parts">Parts </a></li> | ||
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Basic_Part"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Basic_Part"> Basic Parts </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Composite_Part"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Composite_Part"> Composite Parts </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Part_Collection"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Part_Collection"> Part Collection </a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
Line 251: | Line 400: | ||
− | <li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Attributions"> | + | <li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Attributions"> ATTRIBUTIONS </a></li> |
Line 257: | Line 406: | ||
<ul class="submenu"> | <ul class="submenu"> | ||
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Human_Practices"> Human Practices </a></li> | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Human_Practices"> Human Practices </a></li> | ||
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Silver"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Silver"> Silver </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Gold"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/HP/Gold">Gold </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Integrated_Practices"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Integrated_Practices"> Integrated Practices </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Engagement"> | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Engagement"> Engagement </a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
Line 267: | Line 416: | ||
<li class="menu_item"> <div class="icon plus"></div> AWARDS | <li class="menu_item"> <div class="icon plus"></div> AWARDS | ||
<ul class="submenu"> | <ul class="submenu"> | ||
− | <li><a href="https://2016.igem.org/Team:Dundee_Schools/ | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Model">Modelling </a></li> |
− | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/ | + | <li> <a href="https://2016.igem.org/Team:Dundee_Schools/Medals">Medals</a></li> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 279: | Line 424: | ||
</div> | </div> | ||
− | </body> | + | <div class="content_wrapper"> |
+ | |||
+ | |||
+ | |||
+ | <h1 id="team_name"> Dundee Schools </h1> | ||
+ | <h4 id="page_name"> Integrated Practices </h4> | ||
+ | |||
+ | <p>The final design of our product looks like this:</p> | ||
+ | <img class="half_size" src="https://static.igem.org/mediawiki/2016/2/2c/T--Dundee_Schools--integratedpractices1.png"/> | ||
+ | <p>This basic design is the first step to tackling the concerns we came across when talking to professionals about our project.<br></br> | ||
+ | |||
+ | It is a filter designed to target the desired bacteria (for our project we chose <i>Vibrio cholerae</i> and <i>Shigella</i>) and prevent it from causing infection. The small filter with the bacteria inside means the bacteria won’t be ingested, and therefore prevents any problems of the <i>E. coli</i> and RNA not surviving in the body. Also, having the filter come in a bottle would increase the chance of our filter being used in developing countries as well asproviding a container for storing water.</p> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<script> | <script> | ||
Line 340: | Line 503: | ||
}); | }); | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</script> | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 02:43, 20 October 2016
Dundee Schools
Integrated Practices
The final design of our product looks like this:
This basic design is the first step to tackling the concerns we came across when talking to professionals about our project.
It is a filter designed to target the desired bacteria (for our project we chose Vibrio cholerae and Shigella) and prevent it from causing infection. The small filter with the bacteria inside means the bacteria won’t be ingested, and therefore prevents any problems of the E. coli and RNA not surviving in the body. Also, having the filter come in a bottle would increase the chance of our filter being used in developing countries as well asproviding a container for storing water.