SHARE
TWEET

Untitled

a guest Nov 12th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html {
  2.         height: 100%;
  3.         margin: 0;
  4.         font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  5. }
  6.  
  7. body {
  8.         margin: 0;
  9.         height: 100%;
  10.         background-image: url("../images/bucegi.jpg");
  11.         background-repeat: no-repeat;
  12.         background-size: cover;
  13.         background-attachment: fixed;
  14.         background-position: center;
  15. }
  16.  
  17. header {  
  18.         width: 100%;
  19.         height: 10%;
  20.         position: fixed;
  21.         top: 0;
  22.         left: 0;
  23.         animation-name: intro;
  24.         animation-duration: 1100ms;
  25.         padding: 0;
  26.         background: #7f9cad;
  27. }
  28.  
  29. nav {
  30.         height: 100%;
  31. }
  32.  
  33. ul.menu, ul.sub-menu {
  34.         margin: 0;
  35.         padding: 0;
  36. }
  37.  
  38. ul.menu {
  39.         width: 100%;
  40.         height: 100%;
  41.         display: block;
  42.         position: relative;
  43.         font-size: 100%;
  44.         left: 51.5%
  45. }
  46.  
  47. ul.menu>li {
  48.         animation-name: release;
  49.         animation-duration: 500ms;
  50.         height: 100%;
  51.         padding: 0px;
  52.         width: 12%;
  53.         margin: 0;
  54.         float: left;
  55.         text-align: center;
  56.         vertical-align: 50%;
  57.         background:#7f9cad;
  58. }
  59.  
  60. ul.menu>li>ul.sub-menu{
  61.         position: relative;
  62.         display: none;
  63. }
  64.  
  65. ul.menu>li>a {
  66.         display:block;
  67.         position: relative;
  68.         bottom: 0;
  69. }
  70.  
  71. ul.menu>li>a, ul.sub-menu>li>a {
  72.         text-decoration: wavy;
  73.         color:#dbdbdb;
  74.         font-weight: 900;
  75. }
  76.  
  77.  
  78.  
  79. ul.menu>li, ul.menu>li>ul.sub-menu>li {
  80.         position: relative;
  81.         font-weight: lighter;
  82.         list-style-type: none;
  83. }
  84.  
  85. ul.menu>li:hover ul.sub-menu>li {
  86.         background-color:#2a3342;
  87.         vertical-align: center;
  88.         animation-name: release3;
  89.         animation-duration: 100ms;  
  90. }
  91.  
  92. ul.menu>li:hover ul.sub-menu>li:hover {
  93.         background-color: #3e8e41;
  94.         animation-name: hover2;
  95.         animation-duration: 500ms;  
  96. }
  97. ul.menu>li:hover ul.sub-menu {
  98.         animation-name: release2;
  99.         animation-duration: 500ms;    
  100.         display: block;
  101. }
  102.  
  103. ul.menu>li:hover {
  104.         background-color: #223327;
  105.         animation-name: hover;
  106.         animation-duration: 500ms;
  107. }
  108.  
  109. @keyframes hover {
  110.         0% {background:#7f9cad;}
  111.         100%{background-color: #223327;}
  112. }
  113.  
  114. @keyframes hover2 {
  115.         0% {background-color:#2a3342;}
  116.         100%{background-color: #3e8e41;}
  117. }
  118.  
  119. @media only screen and (max-width: 768px) {
  120.         ul.menu {
  121.                 float: none;
  122.                 position: relative;
  123.                 top: 0px;
  124.                 left: 0px;
  125.                 width: 100%;
  126.                
  127.  
  128.         }
  129.         ul.menu>li {
  130.                 float: none;
  131.                 width: 100%;
  132.                 display: block;
  133.         }
  134.  
  135.         header {
  136.                 animation-name: intro-responsive;
  137.                 animation-duration: 1500ms;
  138.         }
  139.         ul.menu>li:active ul.menu>li:sub-menu {
  140.                 display: block;
  141.         }
  142.         ul.menu>li:hover ul.menu>li:sub-menu:hover {
  143.                 display: block;
  144.         }
  145. }
  146.  
  147. @keyframes intro {
  148.         0% {top:-10%;}
  149.         100%{top:0;}
  150. }
  151. @keyframes intro-responsive {
  152.         0% {top: -150%;}
  153.         100% {top: 0;}
  154. }
  155. @keyframes release {
  156.         0%{background-color: #223327;}
  157.         100% {background:#7f9cad;}
  158. }
  159.  
  160.  
  161. @keyframes release2 {
  162.         0%{display: none;}
  163.         100% {display: block;}
  164. }
  165.  
  166. @keyframes release3 {
  167.         0%{background-color:#2a3342;}
  168.         100% {background-color: #3e8e41;}
  169. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top