Difference between revisions of "Template:CCU Taiwan"

Revision as of 03:59, 12 July 2018

$(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>

@@ Line 1: / Line 1: @@
-<html>
 <script>
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////