<script> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(window).on('scroll',function() {
if($(window).scrollTop())
{
$('.container').css('background', '#808080');
$('nav ul li ul').css('background', '#808080'); $('nav').css('opacity','1');
} else
{ $('.container').css('background', '#000000'); $('nav ul li ul').css('background', '#000000'); $('nav').css('opacity','1');
} });
// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.height = scrolled + "%";
}
$(document).ready(function(){
// Add smooth scrolling to all links $("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault();
// Store hash var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if });
});
$(window).on('scroll',function() {
if($(window).scrollTop())
{
$('.container').css('background', '#808080');
$('nav ul li ul').css('background', '#808080'); $('nav').css('opacity','1');
} else
{ $('.container').css('background', '#000000'); $('nav ul li ul').css('background', '#000000'); $('nav').css('opacity','1');
} });
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// </script>
<style>
/**************************************************************************************************************************************************************************************************/ /* DEFAULT WIKI SETTINGS */ /**************************************************************************************************************************************************************************************************/
#home_logo, #sideMenu { display:none; }
#sideMenu, #top_title, .patrollink {display:none;}
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
body {background-color:white; }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
/**************************************************************************************************************************************************************************************************/ /* CONTENT OF THE PAGE */ /**************************************************************************************************************************************************************************************************/
/*mobile*/ /**************************************************************************************************************************************************************************************************/
/* 1800px */
/************************************************/
@media only screen and (max-width: 1800px) {
.igem_2018_team_content { width: 85%;}
.igem_2018_team_menu {display:block;}
}
/* 1400px */ /************************************************/ @media only screen and (max-width: 1400px) { .igem_2018_team_menu .menu_item { font-size:100%;} .igem_2018_team_menu .submenu .submenu_item { font-size:90%;} .igem_2018_team_menu {display:block;} }
@media only screen and (max-width: 1001px) { .igem_2018_team_menu {display:block;} }
/* 1000px */ /************************************************/ @media only screen and (max-width: 1000px) { .igem_2018_team_content {width:100%; margin-left:0px;} .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;} .igem_2018_team_mobile_bar {display:block;} .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
}
@media only screen and (max-width: 500px) {
.igem_2018_team_menu {min-width:100%; width:100%; }
}
/**************************************************************************************************************************************************************************************************/
/**************************************************************************************************************************************************************************************************/
/**************************************************************************************************************************************************************************************************/
.container {
position: fixed;
width: 100%;
margin: 0 auto;
background: #000000;
height: 55px;
padding-top:10px;
} nav {
margin-top:0;
height: 55px; } nav ul {
margin: 0; list-style: none; padding-top: 5px;
} nav ul li {
display: inline-block; margin-left: 130px; padding-top: 5px; position: relative;
} nav ul li ul{ position:absolute; background: #000000; clear:left;
margin-right:20px;
life-style: none; padding-top:20px; padding-left:0px; width:140px;
border-radius: 5px;
} nav ul li ul li{ margin-left: 0; position: relative; text-align: center; float:none; display: none;
padding-top:20px;
padding-left:5px; padding-bottom:10px; } nav a {
color:#FFFFFF; font-family: monospace; font-size: 25px; text-decoration: none;
} nav a::before {
content: ; display: block; height: 3px; background-color: blue;
position: absolute; top: 0; width: 0%; transition: all ease-in-out 400ms;
} nav a:hover {
color: #000000; background: #F5F5F5; transition: 300ms; border-radius: 2px;
} nav a:hover::before {
width: 100%;
} nav ul li:hover ul li{ display: block; } .parallax {
background-image: url(""); height: 600px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; margin-bottom:-90px;
} .scroll-down {
background: none;
} .scroll a:hover {
opacity: .5; position: absolute;
} .a {
background: transparent;
} .scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
} .scroll-down {
bottom: 20px;
left: 50%;
margin-left: -24px;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.scroll-down: before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
.scroll-down {
margin-top: -50px;
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
} .under {
position: relative; background: black; z-index: -2; padding-bottom: 200px; margin-bottom: 0px;
} .progress-container {
position: fixed; width: 10%; height: 50vh; top: 150px; background-image:url(""); margin-left: 51px; z-index: -1;
}
.progress-bar {
height: 0px; background: white; width: 100%; margin-left: 28px; z-index: -1;
} .cup{
position: fixed; width: 20%; height:100vh; top: 150px; -webkit-clip-path:polygon(-20% -20%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%); background:#AAAAAA; z-index: -1; margin-left: 50px;
} .content {
margin:0; padding: 60px 0; width: 60%; margin-left: 400px;
} .first {
font-size: 50px; font-family: "Arial Black", Gadget, sans-serif; color: #e5e5e5;
} .second {
font-size: 30px; font-family: Arial, Helvetica, sans-serif; color: #f9f9f9;
} .description {
font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #f9f9f9;
} /**************************************************************************************************************************************************************************************************/ /**************************************************************************************************************************************************************************************************/ /**************************************************************************************************************************************************************************************************/ </style>