Allen850413 (Talk | contribs) |
Allen850413 (Talk | contribs) |
||
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