Difference between revisions of "Template:CCU Taiwan"

Line 522: Line 522:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------------------------------------------------------Our Edit Begins Here--------------------------------------------------->
 +
.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);
 +
 
 +
}
 +
 +
}

Revision as of 02:15, 11 July 2018

.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); } }