(470 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | + | ||
<style> | <style> | ||
− | div. | + | h2 { |
+ | font-family: Verdana; | ||
+ | font-color: green; | ||
+ | } | ||
+ | |||
+ | div.navbar_back{ | ||
+ | height: 100px; | ||
+ | width: 100%; | ||
+ | background-color: #234C69; | ||
position: fixed; | position: fixed; | ||
− | + | top: 0px; | |
− | + | z-index: 999; | |
− | + | } | |
− | + | ||
+ | #logo { | ||
+ | position: relative; | ||
+ | bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .fullnavbar { | ||
+ | z-index: 100; | ||
+ | text-decoration: none; | ||
+ | top: 0px; | ||
} | } | ||
ul.navbar { | ul.navbar { | ||
− | + | right: 0; | |
− | + | top: 25px; | |
− | + | position: fixed; | |
− | + | width: 100%; | |
− | + | ||
padding-left: 10px; | padding-left: 10px; | ||
padding-right: 10px; | padding-right: 10px; | ||
+ | padding-bottom: 0px; | ||
+ | list-style: none; | ||
+ | text-decoration: none; | ||
+ | z-index: 1000; | ||
+ | list-style-image: none | ||
+ | } | ||
+ | |||
+ | div.fullnavbar ul.navbar { | ||
list-style-type: none; | list-style-type: none; | ||
+ | decoration: none; | ||
+ | width:12.5%; | ||
+ | |||
} | } | ||
Line 27: | Line 53: | ||
float: left; | float: left; | ||
list-style-type: none; | list-style-type: none; | ||
+ | color: rgba(0,0,0,0.8) | ||
+ | border-width: 5px; | ||
+ | border-color: #FFFFFF; | ||
+ | text-decoration: none; | ||
} | } | ||
li.navbar a, .dropbtn { | li.navbar a, .dropbtn { | ||
+ | text-align: center; | ||
display: inline-block; | display: inline-block; | ||
color: white; | color: white; | ||
+ | line-height: 20px; | ||
+ | font-family: Verdana; | ||
+ | font-weight: bold; | ||
+ | font-size: 20px; | ||
text-align: center; | text-align: center; | ||
padding: 14px 16px; | padding: 14px 16px; | ||
text-decoration: none; | text-decoration: none; | ||
+ | |||
} | } | ||
li.navbar a:hover, .dropdown:hover .dropbtn { | li.navbar a:hover, .dropdown:hover .dropbtn { | ||
− | background-color: | + | background-color: #EBF1F5; |
+ | |||
} | } | ||
Line 48: | Line 85: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
− | background-color: # | + | background-color: #FFFFFF; |
min-width: 160px; | min-width: 160px; | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
− | |||
} | } | ||
Line 61: | Line 97: | ||
text-align: left; | text-align: left; | ||
} | } | ||
+ | |||
+ | li.navbar img{float: left; width: auto; height: 70px; top: 0px;} | ||
.dropdown-content a:hover {background-color: #f1f1f1} | .dropdown-content a:hover {background-color: #f1f1f1} | ||
Line 70: | Line 108: | ||
− | < | + | <div.fullnavbar> |
+ | |||
+ | <header> | ||
+ | <div class="navbar_back"> | ||
+ | </div> | ||
<ul class="navbar"> | <ul class="navbar"> | ||
− | <li class="navbar"><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS"> | + | <li class="navbar" id="logo"><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS"><img src="https://static.igem.org/mediawiki/2017/3/33/US_AFRL_CarrollHS_Logo.png" ></a></li> |
<li class="dropdown"> | <li class="dropdown"> | ||
+ | |||
<a href="javascript:void(0)" class="dropbtn">Team</a> | <a href="javascript:void(0)" class="dropbtn">Team</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Team">Team</a> | <a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Team">Team</a> | ||
+ | <a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Mentors">Mentors</a> | ||
<a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Collaborations">Collaborations</a> | <a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Collaborations">Collaborations</a> | ||
Line 85: | Line 129: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Description">Description</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Description">Description</a> | ||
+ | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Interlab">Interlab</a> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Design">Design</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Design">Design</a> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Experiments">Experiments</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Experiments">Experiments</a> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Notebook">Notebook</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Notebook">Notebook</a> | ||
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Contribution"> | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Contribution">Contributions</a> |
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Model"> | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Model">Modeling</a> |
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/ | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Results">Results</a> |
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Improve">Improve</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Improve">Improve</a> | ||
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Attributions"> | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Attributions">Attributions</a> |
<div class="dropdown-content"> <li class="dropdown"> | <div class="dropdown-content"> <li class="dropdown"> | ||
Line 99: | Line 144: | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Parts">Parts</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Parts">Parts</a> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Basic_Part">Basic Parts</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Basic_Part">Basic Parts</a> | ||
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/ | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Composite_Part">Composite Parts</a> |
− | + | ||
− | <li class="navbar"><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS">Safety</a></li> | + | <li class="navbar"><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Safety">Safety</a></li> |
<li class="dropdown"> | <li class="dropdown"> | ||
Line 109: | Line 153: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Silver">Silver HP</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Silver">Silver HP</a> | ||
− | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Gold_Integrated">Integrated and Gold</a> | + | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Gold_Integrated">Integrated and Gold HP</a> |
<a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Engagement">Public Engagement</a> | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Engagement">Public Engagement</a> | ||
+ | |||
− | + | ||
− | + | <div class="dropdown-content"> <li class="dropdown"> | |
− | + | <a href="javascript:void(0)" class="dropbtn">Judging</a> | |
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/MedalCriteria">Medal Criteria</a> | ||
+ | <a href="https://igem.org/2017_Judging_Form?team=US_AFRL_CarrollHS">Judging Form</a> | ||
+ | |||
+ | <div class="dropdown-content"> <li class="dropdown"> | ||
+ | <a href="javascript:void(0)" class="dropbtn">Jamboree</a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Awards">Awards</a> | ||
+ | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Boston">Our Time in Boston</a> | ||
+ | <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Memes" style="background:transparent; color: transparent; | ||
+ | height: 4px; padding:0px; ">Memes</a> | ||
+ | |||
</div> | </div> | ||
Line 120: | Line 177: | ||
</ul> | </ul> | ||
− | </ | + | </header> |
</div> | </div> | ||
Line 130: | Line 187: | ||
<html> | <html> | ||
+ | <script> | ||
+ | // This is the jquery part of your template. | ||
+ | // Try not modify any of this code too much since it makes your menu work. | ||
− | + | $(document).ready(function() { | |
+ | $("#HQ_page").attr('id',''); | ||
+ | // call the functions that control the menu | ||
+ | menu_functionality(); | ||
+ | hide_show_menu(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols | ||
+ | function menu_functionality() { | ||
+ | |||
+ | //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu | ||
+ | $(".menu_button").click(function(){ | ||
+ | |||
+ | // add or remove the class "open" , this class holds the "-" | ||
+ | $(this).children().toggleClass("open"); | ||
+ | // show or hide the submenu | ||
+ | $(this).next('.submenu_wrapper').fadeToggle(400); | ||
+ | }); | ||
+ | |||
+ | // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu | ||
+ | $("#display_menu_control").click(function(){ | ||
+ | $('#menu_content').fadeToggle(400); | ||
+ | }); | ||
+ | |||
+ | // call the current page highlight function | ||
+ | highlight_current_page(); | ||
+ | } | ||
+ | |||
+ | |||
+ | // call the highlight current page function to show it on the menu with a different background color | ||
+ | function highlight_current_page() { | ||
+ | |||
+ | // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color | ||
+ | $("#"+ wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page"); | ||
+ | |||
+ | // now that the current_page class has been added to a menu item, make the submenu fade in | ||
+ | $(".current_page").parents(".submenu_wrapper").fadeIn(400); | ||
+ | // change the +/- symbol of the corresponding menu button | ||
+ | $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open"); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | // allow button on the black menu bar to show/hide the side menu | ||
+ | function hide_show_menu() { | ||
− | + | // in case you preview mode is selected, the menu is hidden for better visibility | |
+ | if (window.location.href.indexOf("submit") >= 0) { | ||
+ | $(".igem_2017_menu_wrapper").hide(); | ||
+ | } | ||
+ | // if the black menu bar has been loaded | ||
+ | if (document.getElementById('bars_item')) { | ||
− | / | + | // when the "bars_item" has been clicked |
+ | $("#bars_item").click(function() { | ||
+ | $("#sideMenu").hide(); | ||
− | + | // show/hide the menu wrapper | |
− | + | $(".igem_2017_menu_wrapper").fadeToggle("100"); | |
− | + | }); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet | ||
+ | else { | ||
+ | setTimeout(hide_show_menu, 15); | ||
+ | } | ||
+ | } | ||
− | |||
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <style> | |
− | + | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .logo_2017 { display: none; background: none;} | |
− | + | #top_title {display:none; background: none; } | |
− | + | #home_logo {display:none; background: none;} | |
− | + | #sideMenu {display: none;} | |
− | + | body {background-color: white; width:100%; top: 0px;} | |
+ | #h2 {text-decoration: none;} | ||
+ | #content {width: 100%; margin-left: 0px; margin: 0px; padding: 0px; top: 0px;} | ||
+ | h1 {text-align: center; line-height: 55px; font: verdana; font-size: 55px; z-index: 20; color: #234C69; border-bottom: none;} | ||
+ | #globalWrapper {padding-bottom: 0 !important; bottom: 0 !important;} | ||
+ | #mw-content-text > p:last-of-type { display: none } | ||
+ | #content { | ||
+ | background: #FFF; | ||
+ | } | ||
− | + | p {width: 80%; font-size: 18px; line-height: 24px; margin-top: 15px; margin-bottom: 15px; margin-left: 10%; margin-right: 10%; color: #234C69;} | |
− | + | p a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | .text p a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | .text2 p a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | ||
− | + | ||
− | + | .text ol a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | .text2 ol a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .text ul a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | .text2 ul a {font-size: 18px; line-height: 24px; color: #234C69; font-weight: bold;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .text ol {width: 75%; font-size: 18px; line-height: 24px; margin-top: 15px; margin-bottom: 15px; margin-left: 12.5%; margin-right: 12.5%; color: #234C69;} | |
− | + | .text ul {list-style: circle;} | |
− | + | .text ul li {list-style: circle;} | |
− | + | .text ul li {font-size: 18px; line-height: 24px; color: #234C69;} | |
− | + | .text ul.ulmedcri {width: 75%; font-size: 18px; line-height: 24px; margin-top: 15px; margin-bottom: 15px; margin-left: 12.5%; margin-right: 12.5%; color: #234C69;} | |
− | + | ||
− | + | ||
− | + | ||
+ | .text2 ol h3 {font-size: 24px; line-height: 26px; color: #FCCFCD;} | ||
− | + | .text2 ol {width: 75%; font-size: 18px; line-height: 24px; margin-top: 15px; margin-bottom: 15px; margin-left: 12.5%; margin-right: 12.5%; color: #234C69;} | |
+ | .text2 ul {list-style: circle;} | ||
+ | .text2 ul li {list-style: circle;} | ||
+ | .text2 ul li {font-size: 18px; line-height: 24px;color: #234C69;} | ||
+ | .text2 ul.ulmedcri {width: 75%; font-size: 18px; line-height: 24px; margin-top: 15px; margin-bottom: 15px; margin-left: 12.5%; margin-right: 12.5%; color: #234C69;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | h2 {width: 80%; margin-left: 10%; margin-right: 10%; font-size: 30px; line-height: 32px; color: #F37F78; } | |
− | + | h3 {width: 80%; margin-left: 10%; margin-right: 10%; font-size: 24px; line-height: 26px; color: #FCCFCD;} | |
− | + | h3 a{font-size: 24px; line-height: 26px; color: #FCCFCD;} | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .text2 {width: 100%; background-color: #E7F1F7;} | |
− | + | .text2 p{width: 80%; margin-left: 10%; margin-right: 10%; color: #234C69;} | |
− | + | .text2 h2{width: 80%; margin-left: 10%; margin-right: 10%; color: #F37F78;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | caption{caption-side: bottom; text-align: justify; color:#234C69; font-weight: bold;} | ||
+ | p.caption{width: 80%; margin-left: 10%; margin-right: 10%; text-align: justify; color:#234C69; font-weight: bold; font-size: 14px; line-height: 14px; margin-top: 10px; margin-bottom: 10px;} | ||
+ | p.caption2{width: 70%; margin-left: 15%; margin-right: 15%; text-align: justify; color:#234C69; font-weight: bold; font-size: 14px; line-height: 14px; margin-top: 10px; margin-bottom: 10px;} | ||
+ | th {color:#234C69; font-weight: bold; text-align: left;} | ||
+ | td {width: auto; text-align: left; color: #234C69;} | ||
+ | table {width: 70%; margin-left: 15%; margin-right: 15%;border: 2px solid #234C69; background-color: #F3F8FB;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | img.graph {width: 70%; height: auto; margin-left:15%; margin-right: 15%;margin-top: 15px;} | ||
+ | img.graph2 {width: 90%; height: auto; margin-left:5%; margin-right: 5%;margin-top: 15px;} | ||
− | + | img.actualgraph {width: 55%; height: auto; margin-left:22.5%; margin-right: 22.5%;margin-top: 15px;} | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | #body { | ||
+ | background: #F27E77; | ||
+ | margin-bottom: 50px; | ||
+ | } | ||
+ | .hero-image { | ||
+ | height: 100vh; | ||
+ | top: -1px; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .hero-text { | ||
+ | |||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | left: 20%; | ||
+ | width: 60%; | ||
+ | height: 17%; | ||
+ | background-color: rgba(255, 255, 255, 0.5); | ||
+ | border: 5px solid white; | ||
+ | } | ||
+ | |||
+ | .hero-text2 { | ||
+ | |||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | left: 20%; | ||
+ | width: 60%; | ||
+ | height: 25%; | ||
+ | background-color: rgba(255, 255, 255, 0.5); | ||
+ | border: 5px solid white; | ||
+ | } | ||
+ | |||
+ | .hero-text h1 { | ||
+ | text-align: center; | ||
+ | vertical align: middle; | ||
+ | line-height: 80px; | ||
+ | color: #234C69; | ||
+ | font-size: 80px; | ||
+ | line-height: 80px; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .hero-text2 h1 { | ||
+ | text-align: center; | ||
+ | color: #234C69; | ||
+ | font-size: 80px; | ||
+ | line-height: 80px; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
Line 343: | Line 425: | ||
@media only screen and (max-width: 800px) { | @media only screen and (max-width: 800px) { | ||
+ | li.navbar {float: left;} | ||
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;} | .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;} | ||
.igem_2017_content_wrapper {width:100%; margin-left:0px;} | .igem_2017_content_wrapper {width:100%; margin-left:0px;} | ||
Line 362: | Line 445: | ||
background-color: #3399ff; | background-color: #3399ff; | ||
text-align: center; | text-align: center; | ||
− | color: # | + | color: #90BFDD; |
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
-moz-transition: all 0.4s ease; | -moz-transition: all 0.4s ease; |
Latest revision as of 23:30, 15 December 2017