Difference between revisions of "Team:Dundee Schools/Team"

Line 2: Line 2:
  
 
<style>
 
<style>
 +
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:100%; margin:-1.25vh 0vw 0vh -1vw;}
+
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
/********************************* MENU ********************************/
 +
/* Wrapper for the menu */
 +
.menu_wrapper {
 +
width:150px;
 +
height:100vh;
 +
position:fixed;
 +
padding:0px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
text-align:left;
 +
}
 +
 
 +
/* styling for the menu items */
 +
.menu_item {
 +
width:100%;  
 +
margin:-2px 0px 0px -20px;
 +
padding: 10px 10px; 
 +
border-bottom: 1px solid #d3d3d3;
 +
font-weight:bold;
 +
color:#000000;
 +
cursor: pointer;
 +
}
 +
 
 +
/* when hovering on a menu item */
 +
.menu_item:hover {
 +
color:#000000;
 +
background-color: #72c9b6;
 +
}
 +
 
 +
/* decoration icon for the menu buttons*/
 +
.icon {
 +
float:right; 
 +
font-size:16px;
 +
font-weight:bold;
 +
}
 +
 +
/* this is the icon for when the content is collapsed */
 +
.plus::before {
 +
content: "+";
 +
}
 +
/* this is the icon for when the content is expanded */
 +
.less::before {
 +
content: "–";
 +
}
 +
 
 +
/* styling for the ul that creates the buttons */
 +
ul.menu_items {
 +
width:100%;
 +
margin-left:0px;
 +
padding:0px;
 +
list-style: none;
 +
}
 +
 
 +
/* styling for the li that are the menu items */
 +
.menu_items li {
 +
width:90%;
 +
margin-top:-2px;
 +
padding: 15px 0px 15px 15px ;
 +
display:block;
 +
border-bottom: 1px solid #d3d3d3; 
 +
text-align:left;
 +
font-weight:bold;
 +
text-decoration:none;
 +
color:#000000;
 +
list-style-type:none;
 +
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; 
 +
}
 +
 
 +
.menu_item a {
 +
width: 100%;
 +
margin-left: -20px;
 +
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:black;
 +
}
 +
 
 +
/* When hovering on a menu item */
 +
.menu_items li:hover {
 +
background-color:#72c9b6;
 +
color: #000000;
 +
}
 +
 
 +
/* styling for the submenus */
 +
.submenu {
 +
width:100%;
 +
display: none; 
 +
font-weight:bold;
 +
cursor:pointer;
 +
 
 +
}
 +
 
 +
/* moving the margin for the submenu ul list */
 +
ul.submenu {
 +
width: 100%;
 +
margin: 10px 0px -11px 0px;
 +
list-style: none;
 +
}
 +
 
 +
/*styling for the submenu buttons */
 +
.submenu li {
 +
width: 100%;
 +
margin-left: 10px;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
 
 +
/* hover state for the submenu buttons */
 +
.submenu li a {
 +
width: 100%;
 +
padding: 5px 10px;
 +
display: inline-block;
 +
border-bottom: 1px solid #d3d3d3;
 +
background-color:white;
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 
 +
 
 +
 
 +
.submenu li a:hover  {
 +
background-color:#000000;
 +
color: #72c9b6;
 +
}
 +
 
 +
 
 +
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 +
.collapsable_menu_control {
 +
width:100%;
 +
padding: 15px 0px;
 +
display:none;
 +
background-color:#000000;
 +
text-align:center; 
 +
font-weight:bold;
 +
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;
 +
}
 +
 
 +
/* when hovering on that button */
 +
.collapsable_menu_control:hover {
 +
background-color: #72c9b6;
 +
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;}
 +
}
 +
 
 
</style>
 
</style>
  
−
<head>
+
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
 
−
  <title>Dundee Schools: Meet the Agents</title>
+
 
 +
<!--- 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>
 
</head>
  
  
−
<style>
 
  
−
  body {
 
−
padding:0px;
 
−
margin:0px;
 
−
        list-style-type:none;
 
−
        list-style:none;
 
−
        text-decoration:none;
 
−
background-color:white;
 
−
overflow-y:scroll;
 
−
overflow-x:hidden;
 
−
font-family:Helvetica;
 
−
        opacity:1; filter:alpha(opacity=100);
 
−
    }
 
  
−
#nav_bar {
+
<div class="menu_wrapper" >
−
    background-color:#2b3990;
+
−
    opacity:0.6; filter:alpha(opacity=60);
+
−
    width:100vw;
+
−
    height:11vh;
+
−
    margin-top:0px;
+
−
    position:fixed;
+
−
}
+
  
−
.ul {
 
−
    height:10vh;
 
−
    width:100vw;
 
−
    display:inline-block;
 
−
    list-style-type:none;
 
−
    list-style:none;
 
−
    overflow:hidden;
 
−
    position:fixed;
 
−
}
 
  
−
li {
 
−
    float:right;
 
−
    opacity:1; filter:alpha(opacity=100);
 
−
}
 
  
−
#logos {
 
−
    height:9.5vh;
 
−
    margin:.25vh 0vw .25vh .25vw;
 
−
    width:auto;
 
−
    max-width:35vw;
 
−
    opacity:1.0; filter:alpha(opacity=100);
 
−
    z-index:200;
 
−
}
 
  
 +
<div class="collapsable_menu_control"> MENU ▤ </div>
  
−
li .a {
+
<ul id="accordion" class="accordion">
−
    color: white;
+
−
    padding:1vh .5vw 1vh .5vw;
+
−
    text-decoration:none;
+
−
    z-index:200;
+
−
    opacity:1; filter:alpha(opacity=100);
+
−
}
+
  
−
.dropbtn, li.dropdown {
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools">HOME </a> </li>
−
    list-style-type:none;
+
−
    float:right;
+
−
    max-width:20vw;
+
−
    margin-top:7.25vh;
+
−
    padding-bottom:1vh;
+
−
    font-size:2.5vh;
+
−
    text-decoration:none;
+
−
}
+
  
−
li .a:hover, .dropdown:hover .dropbtn {
 
−
    background-color:#a8bce1;
 
−
    color:black;
 
−
    list-style-type:none;
 
−
    z-index:201;
 
−
    opacity:1; filter:alpha(opacity=100);
 
−
}
 
  
−
.dropdown-content {
+
<li class="menu_item"> <div class="icon plus"></div> TEAM
−
    display:none;
+
<ul class="submenu">
−
    position:fixed;
+
<li> <a href=" https://2016.igem.org/Team:Dundee_Schools/Team"> Meet the Agents  </a> </li>
−
    list-style-type:none;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Collaborations"> Collaborations </a> </li>
−
    background-color:#7f88bc;
+
                    </ul>
−
    opacity:0.6; filter:alpha(opacity=60);
+
                </li>
−
}
+
  
−
.dropdown-content .a {
+
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
−
    color:white;
+
<ul class="submenu">
−
    margin:0px;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Description"> Description </a></li>
−
    padding:1.5vh .25vw .5vh .25vw;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Design"> Design </a></li>
−
    text-decoration:none;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Experiments"> Experiments </a></li>
−
    display:block;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Proof"> Proof of Concept </a></li>
−
    list-style-type:none;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Results"> Results </a></li>
−
    text-align:left;
+
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Notebook"> Notebook </a></li>
−
}
+
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PARTS 
 +
<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/Basic_Part"> Basic Parts </a></li>
 +
<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">Part Collection </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Safety"> SAFETY </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Dundee_Schools/Attributions"> ATTRIBUTIONS </a></li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
 +
<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/HP/Silver">Silver </a></li>
 +
<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">Integrated Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Engagement">Engagement </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Model">Modelling </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Dundee_Schools/Medals">Medals </a></li>
 +
 
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="content_wrapper">
 +
 
 +
 
 +
 
 +
<h1 id="team_name"> Dundee Schools </h1>
 +
<h4 id="page_name"> Meet the Agents </h4>
 +
 
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Bartosz.png"/>
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Albert.png"/>
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Matthew.png"/>
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Mia.png"/>
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Beth.png"/>
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Dundee_Schools--AC_Darryl.png"/>
  
−
.dropdown-content .a:hover {
 
−
    background-color:#a8bce1;
 
−
    color:black;
 
−
    list-style-type:none;
 
−
    opacity:1; filter:alpha(opacity=100);
 
−
}
 
  
−
.dropdown:hover .dropdown-content {
 
−
    display:block;
 
−
    z-index:200;
 
−
    list-style-type:none;
 
−
    opacity:1; filter:alpha(opacity=100);
 
−
}
 
  
−
</style>
 
−
<body>
 
  
−
<!--navigation bar-->
 
−
<div id="nav_bar"></div>
 
−
  <p style="position:fixed;float:right;width:auto;color:white;margin:1.5vh 2vw 0vh 40vw;font-weight:bold;font-size:3vh;">DUNDEE SCHOOLS: FIGHTING BACTERIAL INFECTIONS</p>
 
−
<ul class="ul">
 
−
<img id="logos" src="https://static.igem.org/mediawiki/2016/2/20/T--Dundee_Schools--nav_logos.png"/>
 
−
  <li><a style="height:2.5vh;width:auto;float:right;margin:6vh 2vw 0vh 0vw;padding:1vh .5vw 1vh .5vw;font-size:2.5vh;display:inline;" class="a" class="active" href="https://2016.igem.org/Team:Dundee_Schools/Attributions">ATTRIBUTIONS</a></li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">PARTS</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Parts">Parts</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Basic">Basic</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Composite">Composite</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Part_collection">Collection</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">LAB WORK</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Experiments">Experiments</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Results">Results</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Safety">Safety</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">HUMAN PRACTICES</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Human_Practices">Human Practices</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/HP/Silver">Silver</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/HP/Gold">Gold</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Integrated_Practices">Integrated Practices</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Engagement">Engagement</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">PROJECT</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Description">Description</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Design">Design</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Proof">Proof of concept</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Notebook">Notebook</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Medals">Medals</a>
 
−
    </div>
 
−
  </li>
 
−
  <li class="dropdown">
 
−
    <a class="a" href="#" class="dropbtn">TEAM</a>
 
−
    <div class="dropdown-content">
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Team">Meet the agents</a>
 
−
      <a class="a" href="https://2016.igem.org/Team:Dundee_Schools/Collaborations">Collaborations</a>
 
−
    </div>
 
−
  </li>
 
−
  <li><a style="height:2.5vh;width:auto;float:right;margin:6vh 0vw 0vh 0vw;padding:1.25vh .5vw 1.25vh .5vw;font-size:2.5vh;" class="a" class="active" href="https://2016.igem.org/Team:Dundee_Schools">HOME</a></li>
 
−
</ul>
 
  
−
</body>
 
 
<script>
 
<script>
  
Line 225: Line 496:
  
  
 +
$(".collapsable_menu_control").click(function() {
 +
$(".menu_item").toggle();
 +
});
  
 +
$( window ).resize(function() {
 +
$(".menu_item").show();
 +
});
  
  
 
});
 
});
−
 
−
if( ($(location).attr('href')).indexOf("submit") >= 0  ) {
 
−
$(".menu_wrapper").css( { "position": "absolute", "height": "auto"});
 
−
$("#wpTextbox1").css( 'margin-top', '440px');
 
−
}
 
−
 
−
 
−
 
  
  
Line 242: Line 511:
  
 
</script>
 
</script>
−
 
  
  
 
</html>
 
</html>

Revision as of 02:23, 19 October 2016

MENU ▤

Dundee Schools

Meet the Agents