Difference between revisions of "Template:CCU Taiwan"

Line 236: Line 236:
 
nav ul li:hover ul li{
 
nav ul li:hover ul li{
 
display: block;
 
display: block;
 +
}
 +
.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("https://i.imgur.com/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);
 +
 
 +
}
 +
 
}
 
}
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/

Revision as of 04:11, 11 July 2018