API tools faq
paste
Advertisement
Garey

Laravel Welcome

Garey
May 4th, 2019
501
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.76 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7.         <title>PSA-BG</title>
  8.  
  9.         <!-- Fonts -->
  10.         <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
  11.         <style>
  12.             html, body {
  13.                 color: #fff;
  14.                 font-family: 'Nunito', sans-serif;
  15.                 font-weight: 200;
  16.                 height: 100vh;
  17.                 margin: 0;
  18.             }
  19.  
  20.             .full-height {
  21.                 height: 100vh;
  22.             }
  23.  
  24.             .flex-center {
  25.                 align-items: center;
  26.                 display: flex;
  27.                 justify-content: center;
  28.             }
  29.  
  30.             .position-ref {
  31.                 position: relative;
  32.             }
  33.  
  34.             .top-right {
  35.                 position: absolute;
  36.                 right: 10px;
  37.                 top: 18px;
  38.             }
  39.  
  40.             .content {
  41.                 text-align: center;
  42.             }
  43.  
  44.             .title {
  45.                 font-size: 84px;
  46.             }
  47.  
  48.             .links > a {
  49.                 color: #fff;
  50.                 padding: 0 25px;
  51.                 font-size: 13px;
  52.                 font-weight: 600;
  53.                 letter-spacing: .1rem;
  54.                 text-decoration: none;
  55.                 text-transform: uppercase;
  56.             }
  57.  
  58.             .m-b-md {
  59.                 margin-bottom: 30px;
  60.             }
  61.  
  62.             body {
  63.                 margin: 0;
  64.                 overflow: hidden;
  65.             }
  66.  
  67.             .background {
  68.                 width: 100vw;
  69.                 height: 100vh;
  70.                 background: #3E1E68;
  71.             }
  72.  
  73.             .background span {
  74.                 width: 20vmin;
  75.                 height: 20vmin;
  76.                 border-radius: 20vmin;
  77.                 backface-visibility: hidden;
  78.                 position: absolute;
  79.                 animation-name: move;
  80.                 animation-duration: 6s;
  81.                 animation-timing-function: linear;
  82.                 animation-iteration-count: infinite;
  83.             }
  84.             .background span:nth-child(1) {
  85.                 color: #E45A84;
  86.                 top: 81%;
  87.                 left: 44%;
  88.                 animation-duration: 13.1s;
  89.                 animation-delay: -1.6s;
  90.                 transform-origin: 12vw -14vh;
  91.                 box-shadow: 40vmin 0 7.9898716583vmin currentColor;
  92.             }
  93.             .background span:nth-child(2) {
  94.                 color: #FFACAC;
  95.                 top: 14%;
  96.                 left: 2%;
  97.                 animation-duration: 14.6s;
  98.                 animation-delay: -0.2s;
  99.                 transform-origin: 20vw 12vh;
  100.                 box-shadow: 40vmin 0 10.7165746179vmin currentColor;
  101.             }
  102.             .background span:nth-child(3) {
  103.                 color: #FFACAC;
  104.                 top: 68%;
  105.                 left: 73%;
  106.                 animation-duration: 13.1s;
  107.                 animation-delay: -14.6s;
  108.                 transform-origin: -17vw -5vh;
  109.                 box-shadow: -40vmin 0 8.5037418108vmin currentColor;
  110.             }
  111.             .background span:nth-child(4) {
  112.                 color: #E45A84;
  113.                 top: 44%;
  114.                 left: 60%;
  115.                 animation-duration: 15.8s;
  116.                 animation-delay: -2.3s;
  117.                 transform-origin: 20vw 11vh;
  118.                 box-shadow: 40vmin 0 14.8638380953vmin currentColor;
  119.             }
  120.             .background span:nth-child(5) {
  121.                 color: #FFACAC;
  122.                 top: 36%;
  123.                 left: 33%;
  124.                 animation-duration: 11.2s;
  125.                 animation-delay: -7.4s;
  126.                 transform-origin: -14vw 21vh;
  127.                 box-shadow: -40vmin 0 11.0236732428vmin currentColor;
  128.             }
  129.             .background span:nth-child(6) {
  130.                 color: #583C87;
  131.                 top: 78%;
  132.                 left: 68%;
  133.                 animation-duration: 12.9s;
  134.                 animation-delay: -0.3s;
  135.                 transform-origin: 23vw -15vh;
  136.                 box-shadow: 40vmin 0 9.774568986vmin currentColor;
  137.             }
  138.             .background span:nth-child(7) {
  139.                 color: #FFACAC;
  140.                 top: 20%;
  141.                 left: 24%;
  142.                 animation-duration: 13s;
  143.                 animation-delay: -8.4s;
  144.                 transform-origin: -10vw 15vh;
  145.                 box-shadow: -40vmin 0 12.38612605vmin currentColor;
  146.             }
  147.             .background span:nth-child(8) {
  148.                 color: #FFACAC;
  149.                 top: 43%;
  150.                 left: 33%;
  151.                 animation-duration: 13.7s;
  152.                 animation-delay: -12.8s;
  153.                 transform-origin: 2vw 2vh;
  154.                 box-shadow: 40vmin 0 9.083099782vmin currentColor;
  155.             }
  156.             .background span:nth-child(9) {
  157.                 color: #583C87;
  158.                 top: 52%;
  159.                 left: 43%;
  160.                 animation-duration: 10.9s;
  161.                 animation-delay: -6.5s;
  162.                 transform-origin: 8vw 4vh;
  163.                 box-shadow: -40vmin 0 8.4793704022vmin currentColor;
  164.             }
  165.             .background span:nth-child(10) {
  166.                 color: #FFACAC;
  167.                 top: 32%;
  168.                 left: 90%;
  169.                 animation-duration: 10.9s;
  170.                 animation-delay: -9.2s;
  171.                 transform-origin: -17vw -9vh;
  172.                 box-shadow: 40vmin 0 11.9632566713vmin currentColor;
  173.             }
  174.             .background span:nth-child(11) {
  175.                 color: #E45A84;
  176.                 top: 44%;
  177.                 left: 53%;
  178.                 animation-duration: 11.1s;
  179.                 animation-delay: -0.2s;
  180.                 transform-origin: 5vw -11vh;
  181.                 box-shadow: -40vmin 0 11.5346830601vmin currentColor;
  182.             }
  183.             .background span:nth-child(12) {
  184.                 color: #583C87;
  185.                 top: 32%;
  186.                 left: 97%;
  187.                 animation-duration: 13.4s;
  188.                 animation-delay: -1.6s;
  189.                 transform-origin: -1vw 24vh;
  190.                 box-shadow: 40vmin 0 14.8885974002vmin currentColor;
  191.             }
  192.             .background span:nth-child(13) {
  193.                 color: #583C87;
  194.                 top: 4%;
  195.                 left: 36%;
  196.                 animation-duration: 13s;
  197.                 animation-delay: -10.3s;
  198.                 transform-origin: 14vw -12vh;
  199.                 box-shadow: -40vmin 0 13.1345147561vmin currentColor;
  200.             }
  201.             .background span:nth-child(14) {
  202.                 color: #E45A84;
  203.                 top: 1%;
  204.                 left: 42%;
  205.                 animation-duration: 16s;
  206.                 animation-delay: -7.9s;
  207.                 transform-origin: -2vw -1vh;
  208.                 box-shadow: -40vmin 0 9.3854517603vmin currentColor;
  209.             }
  210.             .background span:nth-child(15) {
  211.                 color: #583C87;
  212.                 top: 21%;
  213.                 left: 46%;
  214.                 animation-duration: 13.4s;
  215.                 animation-delay: -13.8s;
  216.                 transform-origin: 21vw -11vh;
  217.                 box-shadow: 40vmin 0 5.6402006355vmin currentColor;
  218.             }
  219.             .background span:nth-child(16) {
  220.                 color: #583C87;
  221.                 top: 82%;
  222.                 left: 19%;
  223.                 animation-duration: 15.3s;
  224.                 animation-delay: -15.8s;
  225.                 transform-origin: -3vw -21vh;
  226.                 box-shadow: 40vmin 0 14.2519429913vmin currentColor;
  227.             }
  228.             .background span:nth-child(17) {
  229.                 color: #E45A84;
  230.                 top: 70%;
  231.                 left: 1%;
  232.                 animation-duration: 13s;
  233.                 animation-delay: -15.2s;
  234.                 transform-origin: 17vw 13vh;
  235.                 box-shadow: 40vmin 0 7.6004084516vmin currentColor;
  236.             }
  237.             .background span:nth-child(18) {
  238.                 color: #583C87;
  239.                 top: 75%;
  240.                 left: 12%;
  241.                 animation-duration: 12.7s;
  242.                 animation-delay: -11.8s;
  243.                 transform-origin: -3vw 21vh;
  244.                 box-shadow: -40vmin 0 13.4012301205vmin currentColor;
  245.             }
  246.             .background span:nth-child(19) {
  247.                 color: #583C87;
  248.                 top: 20%;
  249.                 left: 47%;
  250.                 animation-duration: 11.3s;
  251.                 animation-delay: -12.8s;
  252.                 transform-origin: -1vw 19vh;
  253.                 box-shadow: -40vmin 0 5.4320356213vmin currentColor;
  254.             }
  255.             .background span:nth-child(20) {
  256.                 color: #E45A84;
  257.                 top: 49%;
  258.                 left: 24%;
  259.                 animation-duration: 15.3s;
  260.                 animation-delay: -13.1s;
  261.                 transform-origin: -24vw 15vh;
  262.                 box-shadow: 40vmin 0 11.6803656978vmin currentColor;
  263.             }
  264.  
  265.             @keyframes move {
  266.                 100% {
  267.                     transform: translate3d(0, 0, 1px) rotate(360deg);
  268.                 }
  269.             }
  270.  
  271.         </style>
  272.     </head>
  273.     <body>
  274.         <div class="flex-center position-ref full-height background">
  275.  
  276.  
  277.                 <div class="top-right links">
  278.                         <a href="/login">Login</a>
  279.                         <a href="/register">Register</a>
  280.                 </div>
  281.             <div class="content">
  282.                 <div class="title m-b-md">
  283.                     PSA-Bulgaria
  284.                 </div>
  285.  
  286.                 <div class="links">
  287.                     <a href="https://amxx-bg.info">AMXX-BG</a>
  288.                     <a href="https://discord.gg/RmbzdP">Discord</a>
  289.                     <a href="https://laravel-news.com">News</a>
  290.                     <a href="https://blog.laravel.com">Blog</a>
  291.                     <a href="https://nova.laravel.com">Nova</a>
  292.                     <a href="https://forge.laravel.com">Forge</a>
  293.                     <a href="https://github.com/laravel/laravel">GitHub</a>
  294.                 </div>
  295.  
  296.            
  297.                 <span></span>
  298.                 <span></span>
  299.                 <span></span>
  300.                 <span></span>
  301.                 <span></span>
  302.                 <span></span>
  303.                 <span></span>
  304.                 <span></span>
  305.                 <span></span>
  306.                 <span></span>
  307.                 <span></span>
  308.                 <span></span>
  309.                 <span></span>
  310.                 <span></span>
  311.                 <span></span>
  312.                 <span></span>
  313.                 <span></span>
  314.                 <span></span>
  315.                 <span></span>
  316.                 <span></span>
  317.             </div>
  318.         </div>
  319.     </body>
  320. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!