Template:CCU Taiwan
.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("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);
}
}