(Prototype team page) |
AndrewWild (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | </div></div></div></div></div> | ||
+ | <meta charset="utf-8"> | ||
+ | <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"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
+ | <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <style type="text/css"> | ||
+ | @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;*/ | ||
+ | font-size:1.2vw; | ||
+ | margin:0 0.9vw 0.5vh 0.9vw; | ||
+ | padding:0; | ||
+ | line-height:0px; | ||
+ | padding-top:28px; | ||
+ | } | ||
+ | /*Fixes font size when nav-bar is collapsed*/ | ||
+ | @media (max-width: 920px) { | ||
+ | #links{ | ||
+ | font-size:20px; | ||
+ | } | ||
+ | #links_drop{ | ||
+ | margin:0.9vw -0.4vw 0 -0.2vw; | ||
+ | } | ||
+ | } | ||
+ | #links:hover{ | ||
+ | color:#339499; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
+ | /*soc classes controll css for media icons*/ | ||
+ | #soc{ | ||
+ | margin-top:-12px; | ||
+ | |||
+ | } | ||
+ | /****Social Media navbar icons****/ | ||
+ | /*youtube*/ | ||
+ | #soc_1{ | ||
+ | margin-right:3px; | ||
+ | height:50px; | ||
+ | width:48px; | ||
+ | } | ||
+ | /*facebook*/ | ||
+ | #soc_2{ | ||
+ | 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*/ | ||
+ | /*On bottom of page we have styled <p> tags to have no margin or border*/ | ||
+ | /*Therefore on all of our paragraphs need to id "pp" to work properly*/ | ||
+ | p{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border-style:none; | ||
+ | } | ||
+ | #pp{ | ||
+ | padding-top:20px; | ||
+ | padding-right:40px; | ||
+ | padding-left:40px; | ||
+ | font-size:150%; | ||
+ | } | ||
+ | .container ul, .container ol{ | ||
+ | font-size:140%; | ||
+ | padding-right:40px; | ||
+ | padding-left:60px; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | /*Heading styles*/ | ||
+ | h1, h2, h3, h4, h5{ | ||
+ | text-align:center; | ||
+ | color:#339499; | ||
+ | font-weight:500; | ||
+ | padding-left: 40px; | ||
+ | padding-right: 40px; | ||
+ | padding-top: 40px; | ||
+ | padding-bottom:0; | ||
+ | } | ||
+ | h1{font-size:340%;} | ||
+ | h2{font-size:320%;} | ||
+ | h3{font-size:290%;} | ||
+ | h4{font-size:260%;} | ||
+ | h5{font-size:220%;} | ||
+ | h6{ | ||
+ | color:#339499; | ||
+ | font-weight:500; | ||
+ | font-size:200%; | ||
+ | padding-left:40px; | ||
+ | padding-top: 20px; | ||
+ | padding-bottom:-10px; | ||
+ | } | ||
+ | /*Italics for Quotes using i tag*/ | ||
+ | q{ | ||
+ | text-align:center; | ||
+ | color:#339499; | ||
+ | padding-left:10%; | ||
+ | padding-right:10%; | ||
+ | font-size:120%; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | /*Styling for links*/ | ||
+ | a{ | ||
+ | color:#339499; | ||
+ | font-weight:550; | ||
+ | } | ||
+ | /**page content styling starts**/ | ||
+ | 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{ | ||
− | + | } | |
− | + | #sectionGap, #sectionGap:focus, #contentTitle{ | |
− | + | 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; | ||
+ | } | ||
+ | #sectionGap:hover, #sectionGap:active{ | ||
+ | color:#339499; | ||
+ | } | ||
+ | .container{ | ||
+ | min-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:88vh; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
− | < | + | /*Contains styling for the left and right pictures of the banner*/ |
− | </div> | + | .subdiv_banner{ |
+ | height:8vh; | ||
+ | padding:0; | ||
+ | margin:auto; | ||
+ | position:relative; | ||
+ | bottom:0; | ||
+ | right: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: 38%; | ||
+ | -ms-transform: translateY(-50%) /* IE 9 */ | ||
+ | -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */ | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .banner_link,.banner_link:visited{ | ||
+ | position: relative; | ||
+ | height:100%; | ||
+ | padding:0, 2px!important; | ||
+ | color:#47BCC2; | ||
+ | text-align:center; | ||
+ | font-size:1.5vw; | ||
+ | /*Max font size where "section" and "1" don't appear on*/ | ||
+ | } | ||
+ | .banner_link span.oneline{ | ||
+ | position: relative; | ||
+ | top: 34.5%; | ||
+ | -ms-transform: translateY(-50%) /* IE 9 */ | ||
+ | -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */ | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .banner_link span.twoline{ | ||
+ | position: relative; | ||
+ | top: 7.5%; | ||
+ | -ms-transform: translateY(-50%) /* IE 9 */ | ||
+ | -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */ | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .banner_link:hover{ | ||
+ | text-decoration:none; | ||
+ | color:#339499; | ||
+ | } | ||
+ | .link_fix{ | ||
+ | display:block; | ||
+ | position:relative; | ||
+ | height:1px; | ||
+ | top:-15px; | ||
+ | } | ||
+ | /*Mobile and small screen css*/ | ||
+ | @media (max-width: 767px){ | ||
+ | .link_fix{ | ||
+ | display:none; | ||
+ | } | ||
+ | .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; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | <div id="top_page" class="link_fix"></div> | ||
+ | <nav id="Top" class="navbar navbar-inverse navbar-static-top"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar-header"> | ||
+ | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <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 class="collapse navbar-collapse" id="myNavbar"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Project">Lab</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/Interlab">InterLab</a></li> | ||
+ | <li><div id="links" class="dropdown"> | ||
+ | <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="margin-top:-0.15vw;background:#e8e8e8;border-style:none;"> | ||
+ | <span>Human Practises</span> | ||
+ | <span class="caret"></span> | ||
+ | </button> | ||
+ | <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> | ||
+ | <li role="separator" style="background:#8cd5d9;margin:-5px 0 15px -7px;" class="divider"></li> | ||
+ | <li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/Human_Practices">Old_HP_Page</a></li> | ||
+ | <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li> | ||
+ | <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/Engagement">Engagement</a></li> | ||
+ | <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li> | ||
+ | </ul> | ||
+ | </div></li> | ||
+ | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li> | ||
+ | <li><div id="links" class="dropdown"> | ||
+ | <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="margin-top:-0.15vw;background:#e8e8e8;border-style:none;"> | ||
+ | <span>Awards</span> | ||
+ | <span class="caret"></span> | ||
+ | </button> | ||
+ | <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> | ||
+ | <li role="separator" style="background:#8cd5d9;margin:-5px 0 15px -7px;" class="divider"></li> | ||
+ | <li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1vw;" href="href="https://2016.igem.org/Team:Exeter/awards">Medals</a></li> | ||
+ | <li><span style="margin:10px 0 30px 2px;padding:0;">Special pages</span></li> | ||
+ | <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/hp/">HP Silver</a></li> | ||
+ | <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1vw;" href="https://2016.igem.org/Team:Exeter/hp/silver">HP Gold</a></li> | ||
− | <div | + | </ul> |
+ | </div></li> | ||
+ | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li> | ||
+ | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li> | ||
− | < | + | |
− | </div> | + | </ul> |
+ | <ul class="nav navbar-nav navbar-right" > | ||
+ | <li class="media_icon"> | ||
+ | <a id="soc_1" 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" > | ||
+ | <a id="soc_2"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" > | ||
+ | <a id="soc_3" href="https://twitter.com/exeter_igem"> | ||
+ | <img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <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">Engagement</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--> | ||
+ | |||
+ | <!--Give span class "oneline" or "twoline" depending on how llong the section text is--> | ||
+ | <a href="#section_1" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S1</span></a> | ||
+ | <a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S2</span></a> | ||
+ | <a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S3</span></a> | ||
+ | <a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S4</span></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" style="display:block;margin:34vh auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 div_content"> | ||
+ | <div id="section_1" class="link_fix"></div> | ||
+ | <div id="contentTitle"> | ||
+ | S1 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div> | ||
+ | <a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 div_content"> | ||
+ | <div id="section_2" class="link_fix"></div> | ||
+ | <div id="contentTitle"> | ||
+ | S2 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div> | ||
+ | <a id="Section_link" href="#section_3" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 div_content"> | ||
+ | <div id="section_3" class="link_fix"></div> | ||
+ | <div id="contentTitle"> | ||
+ | S3 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div> | ||
+ | <a id="Section_link" href="#section_4" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-xs-12 div_content"> | ||
+ | <div id="section_4" class="link_fix"></div> | ||
+ | <div id="contentTitle"> | ||
+ | S4 | ||
+ | </div> | ||
+ | |||
− | + | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
+ | <!--Content Ends--> | ||
+ | <nav id="topnav" class="nav-navbar" style="right:2px;"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar-header"> | ||
+ | <a class="navbar-brand" id="Top_link" href="#top_page"> | ||
+ | <span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <div class="flare"></div> | ||
+ | <footer class="footer"> | ||
+ | <a style="margin-left:3%" href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/2/23/You.png"/> | ||
+ | </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> | ||
+ | <!--numbr 1: i cant get your toplink to show number 2: weird grey bar on toggle menue--> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 13:30, 5 October 2016