Difference between revisions of "Template:CCU Taiwan"

Line 1: Line 1:
 
<html>
 
<html>
−
<script>
 
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
−
 
−
$(document).ready(function() {
 
−
 
−
$("#HQ_page").attr('id','');
 
−
 
−
 
−
//highlight current page on the menu
 
−
highlight_current_page_menu();
 
−
 
−
//accessing submenus
 
−
$(".menu_item").click(function(){
 
−
$(".submenu_control_icon", this).toggleClass("open");
 
−
$(this).next(".submenu").fadeToggle(400);
 
−
});
 
−
 
−
//mobile menu access
 
−
$(".igem_2018_team_mobile_bar").click(function(){
 
−
$(this).next().toggleClass("displaying_menu");
 
−
});
 
−
 
−
});
 
−
 
−
 
−
function highlight_current_page_menu() {
 
−
 
−
var page_url="https://2018.igem.org/";
 
−
page_url = page_url + wgPageName;
 
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
 
−
 
−
//if the page is in a submenu, open the submenu and make the appropiate changes
 
−
if( $( ".current_page" ).hasClass( "submenu_item" )){
 
−
 
−
$(".current_page").parent().parent().fadeToggle(400);
 
−
$(".current_page").parent().parent().prev().addClass("current_page");
 
−
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 
−
 
−
}
 
−
}
 
−
$(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>
 
<style>
−
 
+
/*DEFAULT WIKI SETTINGS*/
−
/**************************************************************************************************************************************************************************************************/
+
/*DONT TOUCH*/
−
/* DEFAULT WIKI SETTINGS */
+
/*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
−
/**************************************************************************************************************************************************************************************************/
+
#home_logo, #sideMenu { display:none; }
−
 
+
−
 
+
−
#home_logo, #sideMenu { display:none; }
+
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
Line 122: Line 11:
  
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
−
 
−
/**************************************************************************************************************************************************************************************************/
 
−
/* CONTENT OF THE PAGE */
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
 
/*mobile*/
 
/*mobile*/
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
 
 
/* 1800px  */
 
/* 1800px  */
 
/************************************************/
 
/************************************************/
Line 137: Line 18:
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}
−
 
 
/* 1400px  */
 
/* 1400px  */
 
/************************************************/
 
/************************************************/
Line 145: Line 25:
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}
−
 
 
@media only screen and (max-width: 1001px) {
 
@media only screen and (max-width: 1001px) {
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}
−
 
 
/* 1000px  */
 
/* 1000px  */
 
/************************************************/
 
/************************************************/
Line 159: Line 37:
  
 
}
 
}
−
 
−
 
 
@media only screen and (max-width: 500px) {
 
@media only screen and (max-width: 500px) {
 
.igem_2018_team_menu {min-width:100%; width:100%; }
 
.igem_2018_team_menu {min-width:100%; width:100%; }
 
}
 
}
 +
/*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 +
/*DEFAULT WIKI SETTINGS ENDS HERE*/
  
−
 
+
body{
−
/**************************************************************************************************************************************************************************************************/
+
padding:0;
−
/**************************************************************************************************************************************************************************************************/
+
margin:0;
−
/**************************************************************************************************************************************************************************************************/
+
background: black;
 +
}
 
.container {
 
.container {
 
position: fixed;
 
position: fixed;
Line 175: Line 54:
 
background: #000000;
 
background: #000000;
 
height: 55px;
 
height: 55px;
−
        padding-top:10px;
+
    padding-top:10px;
 +
z-index: 3;
 
}
 
}
 
nav {
 
nav {
−
        margin-top:0;
+
    margin-top:0;
 
height: 55px;
 
height: 55px;
 
}
 
}
Line 244: Line 124:
 
.parallax {
 
.parallax {
 
     background-image: url("https://orig00.deviantart.net/04aa/f/2014/323/0/a/forest_gif__by_sharandula-d86yqnf.gif");
 
     background-image: url("https://orig00.deviantart.net/04aa/f/2014/323/0/a/forest_gif__by_sharandula-d86yqnf.gif");
−
     height: 600px;  
+
     height: 100vh;  
 
     background-attachment: fixed;
 
     background-attachment: fixed;
 
     background-position: center;
 
     background-position: center;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 
     background-size: cover;
 
     background-size: cover;
−
     z-index: 1;
+
     z-index: 2;
−
    margin-bottom:-90px;
+
 
}
 
}
 +
 
.scroll-down {
 
.scroll-down {
 
   background: none;
 
   background: none;
 +
  position:absolute;
 +
  transition: all .5s ease-in 3s;
 +
  bottom: 50px;
 +
  left: 50%;
 +
  margin-left: -24px;
 +
  z-index: 3;
 +
  -webkit-transition: all .5s ease-in 3s;
 +
  -webkit-animation: bounce 2s infinite 2s;
 +
  animation: bounce 2s infinite 2s;
 +
  -webkit-transition: all .2s ease-in;
 +
  transition: all .2s ease-in;
 +
  margin-top: -50px;
 
}
 
}
 +
 
.scroll a:hover {
 
.scroll a:hover {
 
   opacity: .5;
 
   opacity: .5;
 
   position: absolute;
 
   position: absolute;
 
}
 
}
 +
 
.a {
 
.a {
 
   background: transparent;
 
   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 {
 
.scroll-down: before {
Line 316: Line 180:
  
 
  }
 
  }
−
 
−
 
−
.scroll-down {
 
−
  margin-top: -50px;
 
−
}
 
  
 
@keyframes bounce {
 
@keyframes bounce {
Line 364: Line 223:
  
 
}
 
}
−
.under {
+
 
−
    position: relative;
+
−
    background: black;
+
−
    z-index: -2;
+
−
    padding-bottom: 200px;
+
−
    margin-bottom: 0px;
+
−
}
+
 
.progress-container {
 
.progress-container {
 
   position: fixed;
 
   position: fixed;
Line 378: Line 231:
 
   background-image:url("https://i.imgur.com/oxkrzAb.png");
 
   background-image:url("https://i.imgur.com/oxkrzAb.png");
 
   margin-left: 51px;
 
   margin-left: 51px;
−
   z-index: -1;
+
   z-index: 1;
 
}
 
}
−
 
 
.progress-bar {
 
.progress-bar {
 
   height: 0px;
 
   height: 0px;
Line 386: Line 238:
 
   width: 100%;
 
   width: 100%;
 
   margin-left: 28px;
 
   margin-left: 28px;
−
   z-index: -1;
+
   z-index: 1;
 
}
 
}
 
.cup{
 
.cup{
Line 395: Line 247:
 
   -webkit-clip-path:polygon(-20% -20%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%);
 
   -webkit-clip-path:polygon(-20% -20%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%);
 
   background:#AAAAAA;
 
   background:#AAAAAA;
−
   z-index: -1;
+
   z-index: 1;
 
   margin-left: 50px;
 
   margin-left: 50px;
 
}
 
}
 
.content {
 
.content {
−
  margin:0;
+
   padding-top:80px;
−
   padding: 60px 0;
+
   width: 80%;
−
   width: 60%;
+
   margin-left:150px;
−
   margin-left: 400px;
+
 
}
 
}
 
.first {
 
.first {
−
   font-size: 50px;
+
   font-size: 30px;
 
   font-family: "Arial Black", Gadget, sans-serif;
 
   font-family: "Arial Black", Gadget, sans-serif;
 
   color: #e5e5e5;
 
   color: #e5e5e5;
 
}
 
}
 
.second {
 
.second {
−
   font-size: 30px;
+
   font-size: 20px;
 
   font-family: Arial, Helvetica, sans-serif;
 
   font-family: Arial, Helvetica, sans-serif;
 
   color: #f9f9f9;
 
   color: #f9f9f9;
 
}
 
}
 
.description {
 
.description {
−
   font-size: 20px;
+
   font-size: 18px;
 
   font-family: Arial, Helvetica, sans-serif;
 
   font-family: Arial, Helvetica, sans-serif;
 
   color: #f9f9f9;
 
   color: #f9f9f9;
 
}
 
}
−
.gif_test{
+
#fullPage {
−
      position:absolute;
+
margin:0;
−
        top:1550px;
+
−
      left:1050px;
+
−
        width:220px;
+
−
        height: 264px;
+
−
        background-image:url("https://i.imgur.com/woNXxVh.jpg");
+
−
      -webkit-clip-path:polygon(0% 0%, 100% 0%,50% 50% ,50% 100%, 0% 100%); <!-- 圖形-->
+
−
        animation:test 1250ms infinite 0s steps(19);
+
−
        animation-play-state:paused ;
+
−
        z-index: 0;
+
 
}
 
}
−
.gif_test2:hover{
+
#fullPage section{
−
      animation-play-state:running;
+
margin:0;
 +
padding:0;
 +
height:100vh;
 +
}
 +
#fullPage section:nth-child(1)
 +
{
 +
}
 +
 
 +
#fullPage section:nth-child(2)
 +
{
 +
    position: relative;
 +
    background: black;
 +
    z-index: -2;
 +
    padding-top: 50px;
 +
margin-bottom: 50px;
 +
}
 +
 
 +
#fullPage section:nth-child(3)
 +
{
 +
    position: relative;
 +
    z-index: -2;
 +
    margin-top: 150px;
 +
height: 100%;
 +
}
 +
 
 +
#logo{
 +
width: 100%;
 +
position: relative;
 +
z-index: -2;
 +
margin:0;
 +
height:100vh;
 
}
 
}
−
@keyframes test{
 
−
        0%{
 
−
            background-position:0 0px ;
 
−
        }
 
−
        100%{
 
−
            background-position: 0 -5244px;
 
−
        }
 
−
    }
 
−
/**************************************************************************************************************************************************************************************************/
 
−
/**************************************************************************************************************************************************************************************************/
 
−
/**************************************************************************************************************************************************************************************************/
 
 
</style>
 
</style>

Revision as of 14:01, 12 July 2018