|
|
| Line 1: |
Line 1: |
| | | | |
| − | <style>
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------------------------------------------------------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);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
