Difference between revisions of "Team:Exeter/Team"

Line 3: Line 3:
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
−
 
 
 
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
 
+
−
 
+
−
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
    
 
    
−
  <link rel="stylesheet" type="text/css" href="Style.css" />
+
−
<script>
+
−
$(document).ready(function(){
+
−
var w = $(".navbar-brand").innerWidth() - 30; // keeps div constant
+
−
$("#mainLink").mouseenter(function(){
+
−
$(".navbar-brand").width(w);
+
−
$(this).html("Home");
+
−
$(this).css("color","#15B5C5");
+
−
});
+
−
$("#mainLink").mouseleave(function(){
+
−
$(this).html("ExGem");
+
−
$(this).css("color","#15B5C5");
+
−
$(".navbar-brand").width(w);
+
−
});
+
−
$(".navbar-toggle").mouseleave(function(){$(this).css("background-color","#4e4e4e");});//toggle backound
+
−
+
−
//topnav script
+
−
var width = document.documentElement.clientWidth;
+
−
if (width > 539){
+
−
$( window ).scroll(function(){
+
−
//id scrollPosition links to a hidden div at top of html that
+
−
//constantly counts the pixels you have scrolled down.
+
−
//Any other solution only worked when page is refreshed.
+
−
$('#scrollPosition').html($( window ).scrollTop());
+
−
//Handles #topnav at bottom of page
+
−
var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight;
+
−
var boxHeight = $("#topnav").height();
+
−
var manualPaddingbot = 5;
+
−
var padding = boxHeight - distHeight + manualPaddingbot;
+
−
//Causes #topnav to be a variable height from bottom when
+
−
//footer is in view, and a fixed position on screen when
+
−
//footer is out of view
+
−
if (distHeight <= boxHeight){
+
−
$("#topnav").css("bottom",(padding + manualPaddingbot));
+
−
}
+
−
if (distHeight > boxHeight){
+
−
$("#topnav").css("bottom",manualPaddingbot);
+
−
}
+
−
})
+
−
}
+
−
});
+
−
</script>
+
 
</head>
 
</head>
−
 
+
−
<body onLoad="window.scroll(0, 155)">
+
<body>
 
<style type="text/css">
 
<style type="text/css">
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
  @media (max-width: 920px) {
 +
  .navbar-header {
 +
      float: none;
 +
  }
 +
  .navbar-left,.navbar-right {
 +
      float: none !important;
 +
  }
 +
  .navbar-toggle {
 +
      display: block;
 +
  }
 +
  .navbar-collapse {
 +
      box-shadow: inset 0 0 0 rgba(255,255,255,0.1);
 +
  }
 +
  .navbar-fixed-top {
 +
      top: 0;
 +
      border-width: 0 0 1px;
 +
  }
 +
  .navbar-collapse.collapse {
 +
      display: none!important;
 +
  }
 +
 
 +
  .navbar-nav {
 +
      float: none!important;
 +
      margin-top: 7.5px;
 +
  }
 +
  .navbar-nav>li {
 +
      float: none;
 +
  }
 +
  .navbar-nav>li>a {
 +
      padding-top: 10px;
 +
      padding-bottom: 10px;
 +
  }
 +
  .collapse.in{
 +
      display:block !important;
 +
  }
 +
  #soc_1, #soc_2, #soc_3{
 +
display:none;
 +
  }
 +
}
 +
#links{
 +
color:#47BCC2;
 +
font-size:20px;
 +
line-height:0px;
 +
padding-top:28px;
 +
}
  
−
#sideMenu, #top_title {display:none;}
+
#links:hover{
−
+
color:#339499;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
+
}
−
body{
+
#links:active{
 +
color:#339499;
 +
}
 +
.navbar{
 +
background-color:#e8e8e8;
 +
border-bottom:none;
 +
min-height:54px;
 +
    margin:4px 0 0 0;
 +
}
 +
.navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
 +
    background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle:hover {
 +
background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
 +
    background-color:#47BCC2;  
 +
}
 +
.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{
 
background-color:#eeeeee;
 
background-color:#eeeeee;
 +
}
 +
/*soc classes controll css for media icons*/
 +
#soc{
 +
margin-top:-12px;
 +
 
}
 
}
−
#moda{
+
/****Social Media navbar icons****/
−
color:#23527c;
+
/*youtube*/
 +
#soc_1{  
 +
margin-right:3px;
 +
height:50px;
 +
width:48px;
 
}
 
}
−
h1{
+
/*facebook*/
−
text-align:center;
+
#soc_2{
−
        border-style:none;
+
margin-right:3px;
 +
height:50px;
 +
width:48px;
 
}
 
}
 +
/*Twitter*/
 +
#soc_3{
 +
margin-right:3px;
 +
margin-right:18px;
 +
height:50px;
 +
width:48px;
 +
}
 +
 +
/*Navbar exgem logo styling*/
 +
#logo, #logo_inverse{
 +
margin-top:-12px;
 +
vertical-align:middle;
 +
width:48px;
 +
height:48px;
 +
/*Alligns logo with toggled list on thin screens*/
 +
margin-left:13px;
 +
margin-right:-12px;
 +
}
 +
/*Logo is visable on page load by default*/
 +
#logo{
 +
display:block;
 +
}
 +
/*The inverse logo is not visable by default, but becomes visable*/
 +
/*when #logo_button is hovered over (found in jquery)*/
 +
#logo_inverse{
 +
display:none;
 +
}
 +
 +
/*Displays brand inline with ExGem*/
 +
.navbar-brand > img {
 +
    display: inline;
 +
}
 +
.navbar-right a{
 +
height:50px;
 +
width:48px;
 +
}
 +
#Top_link.navbar-brand{/*Top link styling*/
 +
color:#47BCC2;
 +
font-size:25px;
 +
margin-bottom:5px;
 +
opacity:0.6
 +
}
 +
#topnav{
 +
padding-bottom:0px;
 +
position:fixed;
 +
}
 +
#topnav (max-width: 767px) {
 +
display:none;
 +
}
 +
#text{/*Top link text*/
 +
color:#47BCC2;
 +
}
 +
#myNavbar{
 +
border: none;
 +
}
 +
/*sticky footer*/
 +
.wrap {
 +
  min-height: 100%;
 +
  margin-bottom: -65px;  /* equal to footer height */
 +
}
 +
.wrap:after {
 +
  content: "";
 +
  display: block;
 +
}
 +
.footer, .wrap:after {
 +
  height: 60px;
 +
  padding-top:5px;
 +
}
 +
.flare .wrap:after{
 +
height:5px;
 +
}
 +
.flare{
 +
background-color:#8cd5d9; 
 +
padding-top:3px;
 +
position:relative;
 +
bottom:0px;
 +
width:100%;
 +
}
 +
.footer{
 +
background-color:#e8e8e8;
 +
}
 +
/*Hides igm logo and team name*/
 +
#sideMenu, #top_title {display:none;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
 +
#top_title{visibility: hidden; background:#eeeeee;}
 +
#bodyContent{background:#eeeeee;}
 +
#mw-content-text{background:#eeeeee;}
 +
#HQ_page{background:none; height:0px; width:0px;}
 +
#content{background:none;}
 +
#globalWrapper{height:0px;background:#eeeeee;}
 +
/*end of hacky css :) */
 
/*There is a <p></p> at bottom of iGEM page. In order to keep footer*/
 
/*There is a <p></p> at bottom of iGEM page. In order to keep footer*/
 
/*On bottom of page we have styled <p> tags to have no margin or border*/
 
/*On bottom of page we have styled <p> tags to have no margin or border*/
Line 80: Line 211:
 
         border-style:none;
 
         border-style:none;
 
}
 
}
 +
/*Paragraph styling*/
 
#pp{
 
#pp{
−
padding-top:3%;
+
padding-top:2%;
 
padding-left:5%;
 
padding-left:5%;
 
padding-right:5%;
 
padding-right:5%;
−
padding-bottom:1%;
+
font-size:120%;
−
font-size:150%;
+
 
}
 
}
−
#you{
+
/*list element styling*/
−
margin-left:5%;
+
.wrap li{
 
}
 
}
−
#links{
+
/*list styling*/
−
color:#eeeeee;
+
.wrap ul{
−
font-size:20px
+
padding-top:1%;
 +
padding-left:7%;
 +
padding-right:7%;
 +
font-size:120%;
 +
list-style-type:none;
 +
margin:0;
 
}
 
}
−
#Team_home{
+
/*sub list styling*/
−
position: relative;  
+
.wrap ul ul{
−
width: 100%;
+
padding-left:4%;
−
}
+
padding-right:4%;
−
#Team_home_Text{
+
font-size:100%;
−
font-size:8vw;
+
list-style-type:none;
−
    position: absolute;
+
−
bottom: 30px;
+
−
left: 50px;
+
−
+
−
color:#82828;
+
−
+
−
}
+
−
#text_background{
+
−
background-color:rgba(130, 130, 130, 0.7);
+
−
padding-left:10px;
+
−
padding-right:10px;
+
−
}
+
−
#links:hover{
+
−
color:#15B5C5;
+
 
}
 
}
−
#links:active{
+
/*list bullet style*/
−
color:#15B5C5;
+
.wrap ul li::before{
 +
content:"◾";
 +
padding-right:8px;
 +
color:#339499;
 
}
 
}
−
#Top_link.navbar-brand{/*Top link styling*/
+
/*sub list bullet style*/
−
color:#15B5C5;
+
.wrap ul ul li::before{
−
font-size:25px;
+
content:"◽";
−
margin-bottom:5px;
+
padding-right:8px;
−
opacity:0.6
+
color:#339499;
 +
}
 +
/*orderd list styling*/
 +
.wrap ol li {counter-increment: li}
 +
.wrap ol{
 +
padding-top:1%;
 +
padding-left:7%;
 +
padding-right:7%;
 +
font-size:120%;
 +
margin:0;
 +
list-style: none;
 +
counter-reset: li;
 +
}
 +
.wrap ol li::before {
 +
content: counter(li) ".";
 +
color: #339499;
 +
display: inline-block;
 +
width: 1em;
 +
margin-left: -1em;
 +
}
 +
/*sub orderd list styling*/
 +
.wrap ol ol{
 +
padding-left:4%;
 +
padding-right:4%;
 +
font-size:100%;
 +
list-style: none;
 +
counter-reset: li;
 +
}
 +
.wrap ol ol li::before {
 +
content: counter(li) ".";
 +
color: #339499;
 +
display: inline-block;
 +
width: 1em;
 +
margin-left: -1em;
 +
  }
 +
/*horizontal rule stying*/
 +
hr{
 +
border-color:#339499;
 +
margin-left:3%;
 +
margin-right:3%;
 +
}
 +
/*Orderd in numbered style*/
 +
.wrap ul ol{
 +
padding-left:4%;
 +
padding-right:4%;
 +
font-size:100%;
 +
list-style: none;
 +
counter-reset: li;
 +
}
 +
.wrap ul ol li::before {
 +
content: counter(li) ".";
 +
color: #339499;
 +
display: inline-block;
 +
width: 1em;
 +
margin-left: -1em;
 +
  }
 +
/*Numbered in Orderd style*/
 +
.wrap ol ul{
 +
padding-left:4%;
 +
padding-right:4%;
 +
font-size:100%;
 +
list-style: none;
 +
counter-reset: li;
 +
}
 +
.wrap ol ul li::before {
 +
content:"◽";
 +
padding-right:8px;
 +
color:#339499;
 +
  }
 +
/*Heading styles*/
 +
.wrap h1, h2, h3, h4, h5{
 +
text-align:center;
 +
color:#339499;
 +
font-weight:500;
 +
}
 +
h1{font-size:340%;}
 +
h2{font-size:320%;}
 +
h3{font-size:290%;}
 +
h4{font-size:260%;}
 +
h5{font-size:220%;}
 +
.wrap h6{
 +
color:#339499;
 +
font-weight:500;
 +
font-size:200%;
 +
padding-left:5%;
 
}
 
}
  
−
#topnav{
+
/*Italics for Quotes using i tag*/
−
padding-bottom:0px;
+
q{
−
position:fixed;
+
text-align:center;
 +
color:#339499;
 +
padding-left:10%;
 +
padding-right:10%;
 +
font-size:120%;
 +
font-style: italic;
 
}
 
}
−
#topnav (max-width: 767px) {
+
/*Styling for links*/
−
display:none;
+
.wrap a{
 +
color:#339499;
 +
font-weight:550;
 
}
 
}
−
#text{/*Top link text*/
+
/**page content styling starts**/
−
color:#15B5C5;
+
body{
 +
background-color:#eeeeee;
 +
}
 +
h1{
 +
text-align:center;
 +
        border-style:none;
 +
}
 +
#Section_Link, #Section_Link:visited{
 +
display:block;
 +
margin:0 auto 10px auto;
 +
width:14px;
 
}
 
}
 +
#Section_Link:hover{
  
−
#Top_link:hover{
 
−
color:#58cc00;
 
−
background:#d9d9d9;
 
−
border-radius:10px;
 
−
border-color:#eeeeee;
 
 
}
 
}
−
#Top_link:active{
+
#sectionGap, #sectionGap:focus, #contentTitle{
−
color:#eeeeee;
+
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 
}
 
}
−
.flare{
+
#sectionGap:hover, #sectionGap:active{
−
background-color:#15B5C5;
+
color:#339499;
−
padding-top:5px;
+
}
−
position:relative;
+
.container{
−
bottom:0px;
+
min-width:100%;
−
width:100%;  
+
padding:0;
 +
}
 +
.div_vl{
 +
padding-top:2%;
 +
height:35vw;
 +
width:95vw;
 +
display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Exeter--Home_Background1.png');
 +
background-repeat:no-repeat;
 +
background-size: 100% auto;
 +
width:100%;
 +
height:60vh;
 +
}
 +
#title{
 +
style="font-family: 'Arial';
 +
color:#4e4e4e;
 +
text-align:center;
 +
margin-bottom:20px;
 +
font-size:400%;
 +
}
 +
.div_content{
 +
padding:0;
 +
min-height:100vh;
 +
width:100%;
 +
background:#eeeeee;
 
}
 
}
  
 +
/*div_banner contains to links at the top of each page to link to*/
 +
/*each section of the page*/
 +
.div_banner{
 +
max-width:90vw;
 +
margin:12vh auto 5vh auto;
 +
display:block;
 +
height:8vh;
 +
}
  
−
#mainLink{ /*Makes ExGem larger than other tabs.*/
+
/*Contains styling for the left and right pictures of the banner*/
−
font-size: 25px;
+
.subdiv_banner{
−
color:#15B5C5;
+
height:8vh;
 +
padding:0;
 +
}
 +
.subdiv_banner.left{
 +
float:left;
 +
display:block;
 +
}
 +
.subdiv_banner.right{
 +
float:right;
 +
display:block;
 +
}
 +
.subdiv_banner.middle{
 +
height:100%;
 +
}
 +
/*Positions the images in correct place in the divs*/
 +
.subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 50%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%)
 +
}
 +
.banner_link,.banner_link:visited{
 +
height:100%;
 +
color:#47BCC2;
 +
text-align:center;
 +
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link:hover{
 +
text-decoration:none;
 +
color:#339499;
 +
}
 +
 
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
background-image: url('#');
 +
background:#ddd;
 +
}
 +
#title{
 +
font-size:150%;
 +
}
 +
/*Makes side pictures on banner invisible on small screens*/
 +
/*as it clutters screen*/
 +
.subdiv_banner.left, .subdiv_banner.right{
 +
display:none;
 +
}
 +
}
 +
/*Team page css*/
 +
.role{
 +
text-align:center;
 +
color:6fff00;
 +
font-size:80%;
 
}
 
}
 
ul.img-list {
 
ul.img-list {
Line 173: Line 494:
 
       width: 100%;
 
       width: 100%;
 
}
 
}
−
 
+
#moda{
 +
color:#23527c;
 +
}
 
span.name{
 
span.name{
 
   color: black;
 
   color: black;
Line 195: Line 518:
 
opacity:0.4;
 
opacity:0.4;
 
}
 
}
−
* {
 
−
  margin: 0;
 
 
}
 
}
−
/*sticky footer*/
+
</style>
−
.wrap {
+
−
  min-height: 100%;
+
−
  margin-bottom: -65px;  /* equal to footer height */
+
−
}
+
−
.wrap:after {
+
−
  content: "";
+
−
  display: block;
+
−
}
+
−
.footer, .wrap:after {
+
−
  height: 60px;
+
−
  padding-top:5px;
+
−
}
+
−
.flare .wrap:after{
+
−
height:5px;
+
−
}
+
−
.role{
+
−
text-align:center;
+
−
color:6fff00;
+
−
font-size:80%;
+
−
}
+
−
.footer{
+
−
background-color:#4e4e4e;
+
−
}
+
−
.navbar{
+
−
background-color:#4e4e4e;
+
−
border-bottom:none;
+
−
min-height:54px;
+
−
        margin:6px 0 0 0;
+
−
}
+
−
.navbar-inverse .navbar-toggle .icon-bar {/*green toggle */
+
−
    background-color:#15B5C5;
+
−
}
+
−
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
+
−
border:none;
+
−
background-color:4e4e4e;
+
−
}
+
−
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
+
−
border:none;
+
−
background-color:#4e4e4e;
+
−
}
+
−
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
+
−
border:none;
+
−
background-color:#4e4e4e;
+
−
}
+
−
.navbar-inverse .navbar-toggle:hover {
+
−
background-color:#4e4e4e;
+
−
}
+
−
.navbar-inverse .navbar-toggle:hover .icon-bar{
+
−
background-color:#eeeeee;
+
−
}
+
−
hr {
+
−
border-color:#828282;
+
−
}
+
−
/*soc classes controll css for media icons*/
+
−
#soc{
+
−
margin-top:-12px;
+
−
margin-left:-15px;
+
−
}
+
−
.soc_1{
+
−
margin-right:3px;
+
−
}
+
−
.soc_2{
+
−
margin-right:3px;
+
−
}
+
−
.soc_3{
+
−
margin-right:3px;
+
−
}
+
−
/*Hides igm logo and team name*/
+
−
#top_title{visibility: hidden; background:#eeeeee;}
+
−
#bodyContent{background:#eeeeee;}
+
−
#mw-content-text{background:#eeeeee;}
+
−
#HQ_page{background:none; height:0px; width:0px;}
+
−
#content{background:none;}
+
−
#globalWrapper{height:0px;background:#eeeeee;}
+
−
/*end of hacky css :) */
+
  
−
</style>
 
  
 
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
 
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
Line 285: Line 530:
 
           <span class="icon-bar"></span>                         
 
           <span class="icon-bar"></span>                         
 
</button>
 
</button>
−
       <a class="navbar-brand" href="https://2016.igem.org/Team:Exeter" style="height:54px;border-right: solid 3px #777777; border"id="mainLink">ExGem</a>
+
       <a id="logo_button" class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
 +
<img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
 +
<img id="logo_inverse" src="https://static.igem.org/mediawiki/2016/2/23/T--Exeter--Template_Logo2_inverse.png"/>
 +
  </a>
 
   
 
   
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
         <div class="collapse navbar-collapse" id="myNavbar">
 
         <div class="collapse navbar-collapse" id="myNavbar">
−
<ul class="nav navbar-nav" >
+
<ul class="nav navbar-nav">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter">Project</a></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Project">Project</a></li>
−
  <li><a id="links"href="#">Parts</a></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
−
  <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
−
  <li><a id="links" href="#">Human Practices</a></li></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices</a></li>
−
  <li><a id="links"href="#">Attributions</a></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
−
  <li><a id="links"href="#">Awards</a></li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
 
</ul>
 
</ul>
 
<ul class="nav navbar-nav navbar-right" >
 
<ul class="nav navbar-nav navbar-right" >
−
<li style="height:50px;width:48px;"class="soc_1"><a style="height:50px;width:48px;"href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ"><img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/></a></li>
+
<li class="media_icon" id="soc_1">
−
    <li style="height:50px;width:48px;"class="soc_2"><a style="height:50px;width:48px;"href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel"><img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/></a></li>
+
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
−
    <li style="height:50px;width:48px;"class="soc_3"><a style="height:50px;width:48px;" href="https://twitter.com/exeter_igem"><img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/></a></li>
+
<img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
 +
</a>
 +
</li>
 +
    <li class="media_icon" id="soc_2">
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
 +
</a>
 +
</li>
 +
    <li class="media_icon" id="soc_3">
 +
<a href="https://twitter.com/exeter_igem">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
 +
</a>
 +
</li>
 
</ul>
 
</ul>
 
    </div>
 
    </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
</nav>  
+
</nav>
−
<div style="height:6px; background-color:#828282; margin-top:0px;" ></div>
+
<div style="height:3px; background-color:#8cd5d9; margin-top:0px;" ></div>
 +
<!--div below contains a rolling counter for scrolling position-->
 +
<div id="scrollPosition" style="display:none;">0</div>
 +
<script>
 +
$(document).ready(function(){
 +
//topnav script
 +
var width = document.documentElement.clientWidth;
 +
console.log(width, "Hello, world!");
 +
if (width > 539){
 +
$( window ).scroll(function(){
 +
//id scrollPosition links to a hidden div at top of html that
 +
//constantly counts the pixels you have scrolled down.
 +
//Any other solution only worked when page is refreshed.
 +
$('#scrollPosition').html($( window ).scrollTop());
 +
//Handles #topnav at bottom of page
 +
var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight;
 +
var boxHeight = $("#topnav").height();
 +
var manualPaddingbot = 5;
 +
var padding = boxHeight - distHeight + manualPaddingbot;
 +
//Causes #topnav to be a variable height from bottom when
 +
//footer is in view, and a fixed position on screen when
 +
//footer is out of view
 +
if (distHeight <= boxHeight){
 +
$("#topnav").css("bottom",(padding + manualPaddingbot));
 +
}
 +
if (distHeight > boxHeight){
 +
$("#topnav").css("bottom",manualPaddingbot);
 +
}
 +
})
 +
}
 +
//Causes the navbar logo to switch between the default and
 +
//inverse versions when the <a> with #logo_button is hovered over
 +
$('#logo_button').hover(function(){
 +
$('#logo').toggle();
 +
$('#logo_inverse').toggle();
 +
});
 +
});
 +
</script>
 +
<!--Counter and topnav ends-->
 +
<!--Content begins-->
 +
<div class="container">
 +
<div class="div_vl backgroundimage">
 +
<h1 id="title">Page Title</h1>
 +
<!--Contains links to sections on page-->
 +
<div class="div_banner">
 +
<!--Right picture (the teal line on right)-->
 +
<div class="col-sm-2 subdiv_banner left">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
 +
</div>
 +
<!--Contains all information of banner in the middle-->
 +
<!--of the two outer images-->
 +
<div class="col-xs-12 col-sm-8 subdiv_banner middle">
 +
<!--Use bootstrap to add links using all 12 columns-->
 +
<!--For each link please give double the coloumns for when-->
 +
<!--the screen is xs compared to when it is sm-->
 +
 +
<!--Font size & line size is in style because you will need to change-->
 +
<!--to look good each time --sorry-- -->
 +
<a href="#section_1" style="font-size:145%;line-height:350%;" class="banner_link col-xs-6 col-sm-3">Section 1</a>
 +
<a href="#section_2" style="font-size:145%;line-height:350%;" class="banner_link col-xs-6 col-sm-3">Section 2</a>
 +
<a href="#section_3" style="font-size:145%;line-height:350%;" class="banner_link col-xs-6 col-sm-3">Section 3</a>
 +
<a href="#section_4" style="font-size:145%;line-height:350%;" class="banner_link col-xs-6 col-sm-3">Section 4</a>
 +
</div>
 +
<!--Left picture (the teal line on left)-->
 +
<div class="col-sm-2 subdiv_banner right">
 +
<img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
 +
</div>
 +
</div>
 +
<div>
 +
<a id="Section_Link" href="#section_1"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_1" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 1
 +
</div>
 +
<div>
 +
<a id="Section_Link" href="#section_2"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_2" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 2
 +
</div>
 +
<div>
 +
<a id="Section_Link" href="#section_3"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_3" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 3
 +
</div>
 +
</div>
 +
</div>
 
<div class="wrap">
 
<div class="wrap">
 
<!--Content Begins-->
 
<!--Content Begins-->
Line 979: Line 1,332:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 
<!--Content Ends-->
 
<!--Content Ends-->
−
<nav id="topnav" class="nav-navbar" style="right:3px;">
+
<nav id="topnav" class="nav-navbar" style="right:2px;">
 
   <div class="container-fluid">
 
   <div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
       <a class="navbar-brand" id="Top_link" href="#Top"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a>
+
       <a class="navbar-brand" id="Top_link" href="#Top">
 +
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 +
  </a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
Line 989: Line 1,345:
 
<div class="flare"></div>
 
<div class="flare"></div>
 
<footer class="footer">
 
<footer class="footer">
−
<a id="you" href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ"><img src="https://static.igem.org/mediawiki/2016/2/23/You.png"/></a>
+
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
−
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel"><img src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/></a>
+
<img style="padding-left:3%" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
−
<a href="https://twitter.com/exeter_igem"><img src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/></a>
+
</a>
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
 +
</a>
 +
<a href="https://twitter.com/exeter_igem">
 +
<img src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
 +
</a>
 
</footer>
 
</footer>
−
 
+
<!--numbr 1:  i cant get your toplink to show number 2: weird grey bar on toggle menue-->
 
</body>
 
</body>
  
−
<html>
+
</html>
−
<!--Things to add:
+
−
*Team vid 2
+
−
-->
+

Revision as of 15:10, 24 August 2016