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 64: Line 103:
 
     }
 
     }
 
   });
 
   });
−
$(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 82: Line 122:
  
 
.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 89: Line 137:
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}
 +
 
/* 1400px  */
 
/* 1400px  */
 
/************************************************/
 
/************************************************/
Line 96: Line 145:
 
.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 108: Line 159:
  
 
}
 
}
 +
 +
 
@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 125: Line 175:
 
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 195: Line 244:
 
.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: 100vh;  
+
     height: 600px;  
 
     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: 2;
+
     z-index: 1;
 +
    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 251: Line 316:
  
 
  }
 
  }
 +
 +
 +
.scroll-down {
 +
  margin-top: -50px;
 +
}
  
 
@keyframes bounce {
 
@keyframes bounce {
Line 294: Line 364:
  
 
}
 
}
−
 
+
.under {
 +
    position: relative;
 +
    background: black;
 +
    z-index: -2;
 +
    padding-bottom: 200px;
 +
    margin-bottom: 0px;
 +
}
 
.progress-container {
 
.progress-container {
 
   position: fixed;
 
   position: fixed;
Line 302: Line 378:
 
   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 309: Line 386:
 
   width: 100%;
 
   width: 100%;
 
   margin-left: 28px;
 
   margin-left: 28px;
−
   z-index: 1;
+
   z-index: -1;
 
}
 
}
 
.cup{
 
.cup{
Line 318: Line 395:
 
   -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 {
−
   padding-top:80px;
+
  margin:0;
−
   width: 80%;
+
   padding: 60px 0;
−
   margin-left:150px;
+
   width: 60%;
 +
   margin-left: 400px;
 
}
 
}
 
.first {
 
.first {
−
   font-size: 30px;
+
   font-size: 50px;
 
   font-family: "Arial Black", Gadget, sans-serif;
 
   font-family: "Arial Black", Gadget, sans-serif;
 
   color: #e5e5e5;
 
   color: #e5e5e5;
 
}
 
}
 
.second {
 
.second {
−
   font-size: 20px;
+
   font-size: 30px;
 
   font-family: Arial, Helvetica, sans-serif;
 
   font-family: Arial, Helvetica, sans-serif;
 
   color: #f9f9f9;
 
   color: #f9f9f9;
 
}
 
}
 
.description {
 
.description {
−
   font-size: 18px;
+
   font-size: 20px;
 
   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:11, 12 July 2018