(12 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
<title>Northwestern Template</title> | <title>Northwestern Template</title> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Line 7: | Line 8: | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
+ | <script src="//use.edgefonts.net/josefin-sans:n1,i1,n3,i3,n4,i4,n6,i6,n7,i7.js"></script> | ||
+ | <script src="//use.edgefonts.net/aladin.js"></script> | ||
+ | </head> | ||
<style> | <style> | ||
/*************STYLING FOR HEADER*************/ | /*************STYLING FOR HEADER*************/ | ||
/* Bye-Bye iGEM Defaults */ | /* Bye-Bye iGEM Defaults */ | ||
+ | |||
+ | h1 { | ||
+ | |||
+ | font-family: aladin; | ||
+ | color: #551A8B; | ||
+ | font-size: 30 px; | ||
+ | |||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | |||
+ | font-family: josefin-sans, sans-serif; | ||
+ | font-size:22px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
#sideMenu, | #sideMenu, | ||
#top_title { | #top_title { | ||
Line 24: | Line 46: | ||
background-color: white; | background-color: white; | ||
width: 100%; | width: 100%; | ||
+ | font-family: josefin-sans, sans-serif; | ||
} | } | ||
Line 72: | Line 95: | ||
− | body,h1,h2,h3,h4,h5,h6 {font-family: | + | body,h1,h2,h3,h4,h5,h6 {font-family: josefin-sans, sans-serif;} |
body, html { | body, html { | ||
height: 100%; | height: 100%; | ||
Line 154: | Line 177: | ||
/* Create a Parallax Effect */ | /* Create a Parallax Effect */ | ||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | } | ||
+ | |||
+ | .overlay { | ||
+ | height: 0%; | ||
+ | width: 100%; | ||
+ | position: fixed; | ||
+ | z-index: 1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background-color: rgb(0,0,0); | ||
+ | background-color: rgba(0,0,0, 0.9); | ||
+ | overflow-y: hidden; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .overlay-content { | ||
+ | position: relative; | ||
+ | top: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | .overlay a { | ||
+ | padding: 8px; | ||
+ | text-decoration: none; | ||
+ | font-size: 36px; | ||
+ | color: #818181; | ||
+ | display: block; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .overlay a:hover, .overlay a:focus { | ||
+ | color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | .overlay .closebtn { | ||
+ | position: absolute; | ||
+ | top: 20px; | ||
+ | right: 45px; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-height: 450px) { | ||
+ | .overlay {overflow-y: auto;} | ||
+ | .overlay a {font-size: 20px} | ||
+ | .overlay .closebtn { | ||
+ | font-size: 40px; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | } | ||
+ | } | ||
+ | |||
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 { | .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 { | ||
background-attachment: fixed; | background-attachment: fixed; | ||
Line 307: | Line 387: | ||
</style> | </style> | ||
+ | |||
<body> | <body> | ||
− | </body> | + | <!-- Navbar code (sits on top) --> |
+ | |||
+ | <!-- | ||
+ | <div class="w3-top"> | ||
+ | <div class="w3-bar" "w3-white" "w3-right" "w3-hide-small" id="myNavbar"> | ||
+ | <a class="w3-bar-item w3-button w3-hover-purple w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu"> | ||
+ | <i class="fa fa-bars"></i> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2017.igem.org/Team:Northwestern#contact" class= "w3-bar-item w3-button w3-hide-small w3-right nav-link"> Contact </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#humanpractices" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Human Practices </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#parts" class= "w3-bar-item w3-button w3-hide-small w3-right nav-link"> Parts </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern/lab" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Lab </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#team" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Team </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#project" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Project </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#home" class="w3-bar-item w3-button w3-hide-small w3-right nav-link">HOME</a> | ||
+ | </div> | ||
+ | --> | ||
+ | <!-- Navbar on small screens --> | ||
+ | <!-- | ||
+ | <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#home" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Home</a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#project" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Project</a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#team" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Team</a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern/lab" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Lab </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#parts" class= "w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Parts </a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#humanpractices" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Human Practices</a> | ||
+ | <a href="https://2017.igem.org/Team:Northwestern#contact" class= "w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Contact </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | --> | ||
+ | |||
+ | </body> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ | ||
+ | function myFunction() { | ||
+ | var x = document.getElementById("myTopnav"); | ||
+ | if (x.className === "topnav") { | ||
+ | x.className += " responsive"; | ||
+ | } else { | ||
+ | x.className = "topnav"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* When the user clicks on the button, | ||
+ | toggle between hiding and showing the dropdown content */ | ||
+ | function myFunction() { | ||
+ | document.getElementById("myDropdown").classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | // Close the dropdown if the user clicks outside of it | ||
+ | window.onclick = function(e) { | ||
+ | if (!e.target.matches('.dropbtn')) { | ||
+ | var myDropdown = document.getElementById("myDropdown"); | ||
+ | if (myDropdown.classList.contains('show')) { | ||
+ | myDropdown.classList.remove('show'); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 16:37, 28 August 2017