bGrMYNw

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
     <div class="boxone">
     </div>
     <div class="boxtwo">
     </div>
        <h1>I HAVE NOT
    <i>FAILED</i> I´VE JUST FOUND 10000
    WAYS THAT<i>DON`T WORK</i>.</h1>
    </body>

index.html

body{
    background: rgb(66,255,60);
    }
    h1{
    padding: 0;
    margin:0;
    top:0;
    position:fixed;
    font-family: Krona One;
    color: rgb(66,255,60);
    font-size: 11vW;
    text-align: left;
    line-height:1.05;
    letter-spacing:3px;

    }

    @keyframes example {
      0%   {left:0px; top:0px;}
      25%  { left:400px; top:0px;}
      50%  { left:400px; top:400px;}
      75%  { left:0px; top:400px;}
      100% {left:0px; top:0px;}
    }
    @keyframes exampletwo {
      0%   {left:0px; top:0px;}
      25%  { left:0px; top:-300px;}
      50%  { left:400px; top:-300px;}
      75%  { left:400px; top:0px;}
      100% {left:0px; top:0px;}
    }
    div {
      width: 60vW;
      height: 50vH;
      position: relative;
      background: black;
      opacity: .3;
      box-shadow: 0px 0px 20px 20px black;
    }

    .boxone{
      animation-name: example;
      animation-duration: 6s;
      animation-iteration-count: 3;
    }

    .boxtwo{
      animation-name: exampletwo;
      animation-duration: 6s;
      animation-iteration-count: 3;
    }

index.html

style.css