Difference between revisions of "Template:CCU Taiwan"

Line 1: Line 1:
−
<html>
 
  
 
<style>
 
<style>

Revision as of 02:22, 11 July 2018

<style>

/**************************************************************************************************************************************************************************************************/

.container { position: fixed; width: 100%; margin: 0 auto; background: #000000; padding-top: 10px; height: 55px; } header { } /*.logo { 

 float: left;
 width: 100;
 margin-left: 0;
 border-radius: 6px;

}*/ nav { height: 55px; } nav ul { 

 margin: 0;
 list-style: none;
 padding-top: 5px;

} nav ul li { 

 display: inline-block;
 margin-left: 85px;
 padding-top: 5px;
 position: relative;

} nav ul li ul{ position:absolute; background: #000000; margin-left:0; clear:left; life-style: none; padding-top:9px; padding-left:0px; width:140px; } nav ul li ul li{ margin-left: 0; position: relative; text-align: center; float:none; display: none; } nav a { 

 color:#FFFFFF;
 font-family: monospace;
 font-size: 25px;
 text-decoration: none;

} nav a::before { 

 content: ;
 display: block;
 height: 3px;
 background-color: #7FFFD4;

 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; } .words { 

 margin-top: 130px;
 margin-left: 100px;

}

body { 

 margin: 0;
 font-size: 28px;

}

.parallax { 

   background-image: url("gif.gif");
   height: 800px; 
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 1;

}

.under { 

   position: relative;
   background-color: #000000;
   z-index: -2;

}

.header h2 { 

 text-align: center;

}

.first { 

 font-size: 130%;
 font-family: "Arial Black", Gadget, sans-serif;
 color: #e5e5e5;

}

.second { 

 font-size: 90%;
 font-family: Arial, Helvetica, sans-serif;
 color: #f9f9f9;

} .description { 

 font-size: 70%;
 font-family: Arial, Helvetica, sans-serif;
 color: #f9f9f9;

}

.progress-container { 

 position: fixed;
 width: 10%;
 height: 50vh;
 top: 150px;
 background-image:url("oxkrzAb.png");
 margin-left: 51px;
 z-index: -1;

}

.progress-bar { 

 height: 0;
 background: black;
 width: 100%;
 margin-left: 28px;
 z-index: -1;

}

.cup{ 

 position: fixed;
 width: 20%;
 height:100vh;
 top: 150px;
 -webkit-clip-path:polygon(0% 0%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%);
 background:#AAAAAA;
 z-index: -1;
 margin-left: 50px;

}

.bubble { 

 position: fixed;
 width: 20%;
 margin-left: 50px;
 z-index: -1;

}

.scrolldown { 

 background: none;

}

.scroll a:hover { 

 opacity: .5;

}

.a { 

 background: transparent;

}

.content { 

 margin:0;
 padding: 60px 0;
 width: 50%;
 margin-left: 500px;

}

.scroll-down {

opacity: 1;

-webkit-transition: all .5s ease-in 3s;

transition: all .5s ease-in 3s;

}


.scroll-down {

position: absolute;

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: -10px;

}

@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); 

}

}



</style>