SHARE
TWEET

Untitled

a guest Mar 23rd, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body {
  2.   background-image: url("../img/background.jpg");
  3.   height: 100vh;
  4.   overflow:auto;
  5.   background-position: center center;
  6.   background-attachment: fixed;
  7.   background-repeat: no-repeat;
  8.   background-size: cover;
  9.  
  10. }
  11. html, body {
  12.     height: auto;
  13.     display: flex;
  14.     justify-content: center;
  15.     align-items: center;
  16. }
  17.  
  18. /* width */
  19. ::-webkit-scrollbar {
  20.   width: 20px;
  21. }
  22.  
  23. /* Track */
  24. ::-webkit-scrollbar-track {
  25.   box-shadow: inset 0 0 75px black;
  26.   border-radius: 10px;
  27.  
  28. }
  29.  
  30. /* Handle */
  31. ::-webkit-scrollbar-thumb
  32. {
  33.     border-radius: 10px;
  34.     background-image:  -webkit-linear-gradient(top, rgba(2,42,64,1) 0%, rgba(6,170,188,1) 50%, rgba(2,42,64,1) 100%);
  35. }
  36. /* Handle on hover */
  37. ::-webkit-scrollbar-thumb:hover {
  38.   background-image:-webkit-linear-gradient(top, rgba(4,88,134,1) 0%, rgba(141,240,251,1) 50%, rgba(4,88,134,1) 100%);
  39.  
  40. }
  41.  
  42. p {
  43.     margin: 0;
  44.     padding: 3px;
  45. }
  46.  
  47. .container {
  48.     text-align: center;
  49.     margin: auto;
  50. }
  51.  
  52. .logo {
  53.   display: block;
  54.   margin-left: auto;
  55.   margin-right: auto;
  56.   margin-top: 20px;
  57.   margin-bottom: 40px;
  58.   width: 45%;
  59.   animation-name: logo;
  60.   animation-duration: 4s;
  61.   animation-iteration-count: infinite;
  62.   animation-timing-function: ease-in-out;
  63. }
  64.  
  65. @keyframes logo {
  66.     0% {
  67.         transform: scale(1);
  68.     }
  69.     50% {
  70.         transform: scale(1.05);
  71.     }
  72.     100% {
  73.         transform: scale(1);
  74.     }
  75. }
  76.  
  77. .btn {
  78.   border: none;
  79.   background-color: #3c5d72;
  80.   padding: 10px;
  81.   font-size: 16px;
  82.   cursor: pointer;
  83.   word-wrap: break-word;
  84.   width: auto;
  85.   max-width: 100%;
  86.   border-radius: 8px;
  87. }
  88.  
  89. .btn:hover {background: #365568;}
  90.  
  91. .ip {color: white;}
  92.  
  93. .btn span {
  94.     font-weight: bold;
  95. }
  96.  
  97. .items {
  98.     display: flex;
  99.     justify-content: space-around;
  100.     flex-basis: 100px;
  101.     margin:auto;
  102.     margin-bottom: 50px;
  103.     padding: 50px 0 30px 0;
  104.     width: 50%
  105. }
  106.  
  107. .item img {
  108.     transition: all 0.3s ease;
  109. }
  110.  
  111. .item img:hover {
  112.     transform:scale(1.25);
  113. }
  114.  
  115. .img {
  116.     width: 100%;
  117. }
  118.  
  119. .tooltip {
  120.   position: relative;
  121.   display: inline-block;
  122.   border-bottom: 0px dotted black;
  123. }
  124.  
  125. .tooltip .tooltiptext {
  126.   visibility: hidden;
  127.   width: auto;
  128.   background-color: #3c5d72;
  129.   color: #fff;
  130.   text-align: center;
  131.   padding: 5px 15px;
  132.   border-radius: 6px;
  133.  
  134.   position: absolute;
  135.   z-index: 1;
  136.   bottom: 125%;
  137.   left: 50%;
  138.   margin-left: -60px;
  139.  
  140.   opacity: 0;
  141.   transition: opacity 0.3s;
  142. }
  143.  
  144. .tooltip .tooltiptext::after {
  145.   content: "";
  146.   position: absolute;
  147.   top: 100%;
  148.   left: 50%;
  149.   margin-left: -5px;
  150.   border-width: 5px;
  151.   border-style: solid;
  152.   border-color: #555 transparent transparent transparent;
  153. }
  154.  
  155. .tooltip:hover .tooltiptext {
  156.   visibility: visible;
  157.   opacity: 1;
  158. }
  159.  
  160. @keyframes fadeIn {
  161.   0% {
  162.     opacity: 0;
  163.   }
  164.  
  165.   100% {
  166.     opacity: 1;
  167.   }
  168. }
  169.  
  170. @keyframes fadeInUp {
  171.   0% {
  172.     opacity: 0;
  173.     transform: translate3d(0, 25%, 0);
  174.   }
  175.  
  176.   50% {
  177.     opacity: 1;
  178.     transform: none;
  179.   }
  180.   100% {
  181.     opacity: 1;
  182.     transform: translate3d(0, 10%, 0);
  183.   }
  184. }
  185.  
  186.   .scene_element--fadein {
  187.     animation-name: fadeIn;
  188.     animation-duration: 1s;
  189.     transition-timing-function: ease-in;
  190.     animation-fill-mode: both;
  191.   }
  192.  
  193.   .scene_element--fadein2 {
  194.     animation-name: fadeIn;
  195.     animation-duration: 4s;
  196.     transition-timing-function: ease-in;
  197.     animation-fill-mode: both;
  198.   }
  199.  
  200.   .scene_element--fadeinup2 {
  201.     animation-name: fadeInUp;
  202.     animation-duration: 1s;
  203.     transition-timing-function: ease-in;
  204.     animation-fill-mode: both;
  205.   }
  206.  
  207.   .scene_element--fadeinup3 {
  208.     animation-name: fadeInUp;
  209.     animation-duration: 1.5s;
  210.     transition-timing-function: ease-in;
  211.     animation-fill-mode: both;
  212.   }
  213.  
  214.   .scene_element--fadeinup4 {
  215.     animation-name: fadeInUp;
  216.     animation-duration: 2s;
  217.     transition-timing-function: ease-in;
  218.     animation-fill-mode: both;
  219.   }
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