HyburdzMC

portal.css

Mar 2nd, 2021
599
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .portal {
  2.   min-height: 100vh;
  3. }
  4.  
  5. .logo {
  6.   margin: 10vh;
  7.   margin-left: 40%;
  8. }
  9.  
  10.  
  11.  
  12. .logo__image {
  13.   max-width: 100%;
  14.   width: 20vw;
  15.   height: 20vw;
  16.   object-fit: contain;
  17.   transform: scale(1);
  18.   animation: 3s zinzout infinite;
  19.   animation-direction: alternate;
  20. }
  21.  
  22. @keyframes zinzout {
  23.   from {
  24.     transform: scale(.9);
  25.   }
  26.  
  27.   to {
  28.     transform: scale(1);
  29.   }
  30. }
  31.  
  32. .info {
  33.   text-align: center;
  34. }
  35.  
  36. .infoc1 {
  37.   --color: #ffa260;
  38.   --hover: #e5ff60;
  39. }
  40.  
  41. .infoc2 {
  42.   --color: rgba(255, 0, 0, 0.7);
  43.   --hover: rgba(255, 100, 20, 0.5);
  44. }
  45.  
  46. .infoc3 {
  47.   --color: hsla(120, 100%, 50%, 0.5);
  48.   --hover: hsla(120, 100%, 50%, 1);
  49. }
  50.  
  51. .info__inner {
  52.   padding: 0px;
  53.   border: 2px solid;
  54.   border-top-left-radius: 2rem;
  55.   border-bottom-right-radius: 2rem;
  56.   border-bottom-left-radius: 0.5rem;
  57.   border-top-right-radius: 0.5rem;
  58.   background: bisque;
  59.   color: var(--color);
  60.   transition: 0.30s;
  61. }
  62.  
  63. .info__inner:hover,
  64. .info__inner:focus {
  65.   border-color: var(--hover);
  66.   -webkit-border-color: var(--hover);
  67.   color: #fff;
  68.   background: var(--color);
  69.   -webkit-background: var(--color);
  70. }
  71.  
  72. .info__inner--offline {
  73.   background: #cc4d55;
  74. }
  75.  
  76. .info__inner--offline:hover,
  77. .info__inner--offline:focus {
  78.   border-color: var(--hover);
  79.   -webkit-border-color: var(--hover);
  80.   color: #fff;
  81.   background: var(--color);
  82.   -webkit-background: var(--color);
  83. }
  84.  
  85. .info__inner--online {
  86.   background: white;
  87. }
  88.  
  89. .info__inner--online:hover,
  90. .info__inner--online:focus {
  91.   border-color: var(--hover);
  92.   -webkit-border-color: var(--hover);
  93.   color: #fff;
  94.   background: var(--color);
  95.   -webkit-background: var(--color);
  96. }
  97.  
  98. .info__h1 {
  99.   font-size: 2vw;
  100. }
  101.  
  102. .info__h2 {
  103.   font-size: 1.75vw;
  104.   margin-top: 10px;
  105. }
  106.  
  107. @media screen and (max-width: 48em) {
  108.   .info__h1 {
  109.     font-size: 2vw;
  110.   }
  111.  
  112.   .info__h2 {
  113.     font-size: 1.75vw;
  114.   }
  115. }
  116.  
  117. @media screen and (max-width: 35.5em) {
  118.   .info__h1 {
  119.     font-size: 3vw;
  120.   }
  121.  
  122.   .info__h2 {
  123.     font-size: 2.75vw;
  124.   }
  125. }
  126.  
  127. .items {
  128.   position: absolute;
  129.   bottom: 0;
  130.   left: 0;
  131. }
  132.  
  133. .items__item {
  134.   background: darken(#4a4e51, 15%);
  135.   text-align: center;
  136.   font-size: 2vw;
  137.   padding: 4vh 0;
  138.   transition: .25s ease-in-out;
  139.   text-decoration: none;
  140.   color: var(--color);
  141.   --color: white;
  142.   --hover: #ffdc7f;
  143.  
  144.  
  145.  
  146. }
  147.  
  148. .items__item:hover,
  149. .items__item:active,
  150. .items__item:focus {
  151.   border-color: var(--hover);
  152.   -webkit-border-color: var(--hover);
  153.   color: var(--hover);
  154.   box-shadow: 0 0.5em 0em -0.4em var(--hover);
  155.   transform: translateY(-0.25em);
  156. }
  157.  
  158. @media screen and (max-width: 48em) {
  159.   .items__item {
  160.     font-size: 3vw;
  161.   }
  162. }
  163.  
  164. @media screen and (max-width: 35.5em) {
  165.   .items__item {
  166.     font-size: 3.5vw;
  167.   }
  168. }
  169.  
  170. .items__item--disabled {
  171.   pointer-events: none;
  172.   color: #4a4e51;
  173.   background: darken(#4a4e51, 15%);
  174. }
  175.  
  176. .items__item--disabled:hover,
  177. .items__item--disabled:focus,
  178. .items__item--disabled:active {
  179.   color: #4a4e51;
  180. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×