Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- background-image: url("../img/background.jpg");
- height: 100vh;
- overflow:auto;
- background-position: center center;
- background-attachment: fixed;
- background-repeat: no-repeat;
- background-size: cover;
- }
- html, body {
- height: auto;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- /* width */
- ::-webkit-scrollbar {
- width: 20px;
- }
- /* Track */
- ::-webkit-scrollbar-track {
- box-shadow: inset 0 0 75px black;
- border-radius: 10px;
- }
- /* Handle */
- ::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-image: -webkit-linear-gradient(top, rgba(2,42,64,1) 0%, rgba(6,170,188,1) 50%, rgba(2,42,64,1) 100%);
- }
- /* Handle on hover */
- ::-webkit-scrollbar-thumb:hover {
- background-image:-webkit-linear-gradient(top, rgba(4,88,134,1) 0%, rgba(141,240,251,1) 50%, rgba(4,88,134,1) 100%);
- }
- p {
- margin: 0;
- padding: 3px;
- }
- .container {
- text-align: center;
- margin: auto;
- }
- .logo {
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-top: 20px;
- margin-bottom: 40px;
- width: 45%;
- animation-name: logo;
- animation-duration: 4s;
- animation-iteration-count: infinite;
- animation-timing-function: ease-in-out;
- }
- @keyframes logo {
- 0% {
- transform: scale(1);
- }
- 50% {
- transform: scale(1.05);
- }
- 100% {
- transform: scale(1);
- }
- }
- .btn {
- border: none;
- background-color: #3c5d72;
- padding: 10px;
- font-size: 16px;
- cursor: pointer;
- word-wrap: break-word;
- width: auto;
- max-width: 100%;
- border-radius: 8px;
- }
- .btn:hover {background: #365568;}
- .ip {color: white;}
- .btn span {
- font-weight: bold;
- }
- .items {
- display: flex;
- justify-content: space-around;
- flex-basis: 100px;
- margin:auto;
- margin-bottom: 50px;
- padding: 50px 0 30px 0;
- width: 50%
- }
- .item img {
- transition: all 0.3s ease;
- }
- .item img:hover {
- transform:scale(1.25);
- }
- .img {
- width: 100%;
- }
- .tooltip {
- position: relative;
- display: inline-block;
- border-bottom: 0px dotted black;
- }
- .tooltip .tooltiptext {
- visibility: hidden;
- width: auto;
- background-color: #3c5d72;
- color: #fff;
- text-align: center;
- padding: 5px 15px;
- border-radius: 6px;
- position: absolute;
- z-index: 1;
- bottom: 125%;
- left: 50%;
- margin-left: -60px;
- opacity: 0;
- transition: opacity 0.3s;
- }
- .tooltip .tooltiptext::after {
- content: "";
- position: absolute;
- top: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: #555 transparent transparent transparent;
- }
- .tooltip:hover .tooltiptext {
- visibility: visible;
- opacity: 1;
- }
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes fadeInUp {
- 0% {
- opacity: 0;
- transform: translate3d(0, 25%, 0);
- }
- 50% {
- opacity: 1;
- transform: none;
- }
- 100% {
- opacity: 1;
- transform: translate3d(0, 10%, 0);
- }
- }
- .scene_element--fadein {
- animation-name: fadeIn;
- animation-duration: 1s;
- transition-timing-function: ease-in;
- animation-fill-mode: both;
- }
- .scene_element--fadein2 {
- animation-name: fadeIn;
- animation-duration: 4s;
- transition-timing-function: ease-in;
- animation-fill-mode: both;
- }
- .scene_element--fadeinup2 {
- animation-name: fadeInUp;
- animation-duration: 1s;
- transition-timing-function: ease-in;
- animation-fill-mode: both;
- }
- .scene_element--fadeinup3 {
- animation-name: fadeInUp;
- animation-duration: 1.5s;
- transition-timing-function: ease-in;
- animation-fill-mode: both;
- }
- .scene_element--fadeinup4 {
- animation-name: fadeInUp;
- animation-duration: 2s;
- transition-timing-function: ease-in;
- animation-fill-mode: both;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement