style.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. top15 {
  6. margin-top: 15px
  7. }
  8. top25 {
  9. margin-top: 25px
  10. }
  11. top30 {
  12. margin-top: 30px
  13. }
  14. a.navbar-brand {
  15. float: left;
  16. height: 50px;
  17. padding: 15px 15px;
  18. font-size: 18px;
  19. line-height: 20px;
  20. text-decoration: none;
  21. color: orangered;
  22. font-family: cursive;
  23. font-weight: 700;
  24. }
  25. nav.main-navigation {
  26. position: relative;
  27. }
  28. nav.main-navigation ul.nav-list {
  29. margin: 0;
  30. padding: 0;
  31. list-style: none;
  32. position: relative;
  33. text-align: right;
  34. }
  35. .nav-list li.nav-list-item {
  36. display: inline-block;
  37. line-height: 40px;
  38. margin-left: 30px;
  39. margin-top: 15px;
  40. }
  41. a.nav-link {
  42. text-decoration: none;
  43. font-size: 18px;
  44. font-family: sans-serif;
  45. font-weight: 500;
  46. cursor: pointer;
  47. position: relative;
  48. color: #404040;
  49. }
  50. @keyframes FadeIn {
  51. 0% {
  52. opacity: 0;
  53. -webkit-transition-duration: 0.8s;
  54. transition-duration: 0.8s;
  55. -webkit-transform: translateY(-10px);
  56. -ms-transform: translateY(-10px);
  57. transform: translateY(-10px);
  58. }
  59. 100% {
  60. opacity: 1;
  61. -webkit-transform: translateY(0);
  62. -ms-transform: translateY(0);
  63. transform: translateY(0);
  64. pointer-events: auto;
  65. transition: cubic-bezier(0.4, 0, 0.2, 1);
  66. }
  67. }
  68. .nav-list li {
  69. animation: FadeIn 1s cubic-bezier(0.65, 0.05, 0.36, 1);
  70. animation-fill-mode: both;
  71. }
  72. .nav-list li:nth-child(1) {
  73. animation-delay: .3s;
  74. }
  75. .nav-list li:nth-child(2) {
  76. animation-delay: .6s;
  77. }
  78. .nav-list li:nth-child(3) {
  79. animation-delay: .9s;
  80. }
  81. .nav-list li:nth-child(4) {
  82. animation-delay: 1.2s;
  83. }
  84. .nav-list li:nth-child(5) {
  85. animation-delay: 1.5s;
  86. }
  87. /* Animation */
  88. @keyframes fadeInUp {
  89. from {
  90. transform: translate3d(0, 40px, 0)
  91. }
  92. to {
  93. transform: translate3d(0, 0, 0);
  94. opacity: 1
  95. }
  96. }
  97. @-webkit-keyframes fadeInUp {
  98. from {
  99. transform: translate3d(0, 40px, 0)
  100. }
  101. to {
  102. transform: translate3d(0, 0, 0);
  103. opacity: 1
  104. }
  105. }
  106. .animated {
  107. animation-duration: 1s;
  108. animation-fill-mode: both;
  109. -webkit-animation-duration: 1s;
  110. -webkit-animation-fill-mode: both
  111. }
  112. .animatedFadeInUp {
  113. opacity: 0
  114. }
  115. .fadeInUp {
  116. opacity: 0;
  117. animation-name: fadeInUp;
  118. -webkit-animation-name: fadeInUp;
  119. }