Difference between revisions of "Template:CCU Taiwan"

Line 1: Line 1:
 
<html>
 
<html>
 
<script>
 
<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() {
 
$(window).on('scroll',function() {
 
   if($(window).scrollTop())  
 
   if($(window).scrollTop())  
Line 103: Line 64:
 
     }
 
     }
 
   });
 
   });
−
 
+
$(document).ready(function(){
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
$('#fullPage').fullpage({
 +
scrollingSpeed: 30,
 +
});
 +
});
 
</script>
 
</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 82:
  
 
.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 89:
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}
−
 
 
/* 1400px  */
 
/* 1400px  */
 
/************************************************/
 
/************************************************/
Line 145: Line 96:
 
.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 108:
  
 
}
 
}
−
 
−
 
 
@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 125:
 
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 195:
 
.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 251:
  
 
  }
 
  }
−
 
−
 
−
.scroll-down {
 
−
  margin-top: -50px;
 
−
}
 
  
 
@keyframes bounce {
 
@keyframes bounce {
Line 364: Line 294:
  
 
}
 
}
−
.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 302:
 
   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 309:
 
   width: 100%;
 
   width: 100%;
 
   margin-left: 28px;
 
   margin-left: 28px;
−
   z-index: -1;
+
   z-index: 1;
 
}
 
}
 
.cup{
 
.cup{
Line 395: Line 318:
 
   -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;
 
}
 
}
−
/**************************************************************************************************************************************************************************************************/
+
#fullPage {
−
/**************************************************************************************************************************************************************************************************/
+
margin:0;
−
/**************************************************************************************************************************************************************************************************/
+
}
 +
#fullPage section{
 +
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;
 +
}
 
</style>
 
</style>
 +
</html>

Revision as of 14:13, 12 July 2018