we.type ⬢ write share code are
<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : LA_falling-letters.html               |
|                   Label : Playground                            |
|                  Author : Leonard Anders                        |
|                    Size : 3.944 bytes                           |
|                 Created : 12. February 2024 at 12:20            |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>shuffle</title>
    <style>
      @font-face {
        font-family: Konsole;
        src: url(../_fonts/Konsolev1.1-VF.ttf);
      }
      body{
        font-family: Konsole;
        font-size: 10vh;
        text-align: center;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      /* the parent class for the whole page */
      .parent-class {
        /* defines the position of the parent class */
        position: relative;
        top: 50vh;
        Left: 50vw;
      }
      .class {
        /* defines the position of the child class */
        position: absolute;
        /* defines the duration and the repeats for animation */
        animation: change-class 10s linear infinite;
      }
      /* defines the position of all the child classes */
      .div-class-1{ position: absolute; top: 0%; left: -3em;}
      .div-class-2{ position: absolute; top: 0%; left: -2.3em;}
      .div-class-3{ position: absolute; top: 0%; left: -1.5em;}
      .div-class-4{ position: absolute; top: 0%; left: -0.7em;}
      .div-class-5{ position: absolute; top: 0%; left: -0.1em;}
      .div-class-6{ position: absolute; top: 0%; left: 0.6em;}
      .div-class-7{ position: absolute; top: 0%; left: 1.2em;}
      /* defines the animation changes for the first letter/ child class */
      @keyframes change-class {
        0%, 20% { opacity: 0; }
        20.05%, 21.2% { opacity: 1; }
        21.25%, 100% { opacity: 0; }
      }
      @keyframes change-class1 {
        0%, 20% { opacity: 0; }
        20.01%, 90.5% { opacity: 1; }
        90.51%, 100% { opacity: 0; }
      }
      @keyframes change-class2 {
        0%, 20% { opacity: 0; }
        20.01%, 81.2% { opacity: 1; }
        81.21%, 100% { opacity: 0; }
      }
      @keyframes change-class3 {
        0%, 20% { opacity: 0; }
        20.01%, 72% { opacity: 1; }
        72.01%, 100% { opacity: 0; }
      }
      @keyframes change-class4 {
        0%, 20% { opacity: 0; }
        20.01%, 63% { opacity: 1; }
        63.01%, 100% { opacity: 0; }
      }
      @keyframes change-class5 {
        0%, 20% { opacity: 0; }
        20.01%, 53% { opacity: 1; }
        53.01%, 100% { opacity: 0; }
      }
      @keyframes change-class6 {
        0%, 20% { opacity: 0; }
        20.01%, 43% { opacity: 1; }
        43.01%, 100% { opacity: 0; }
      }
      @keyframes change-class7 {
        0%, 20% { opacity: 0; }
        20.01%, 33% { opacity: 1; }
        33.01%, 100% { opacity: 0; }
      }
      /* defines the animation duration and repeats for the letters */
      .a10{animation: change-class1 10s linear infinite;}
      .b18 {animation: change-class2 10s linear infinite;}
      .c26 {animation: change-class3 10s linear infinite;}
      .d34 {animation: change-class4 10s linear infinite;}
      .e42 {animation: change-class5 10s linear infinite;}
      .f50 {animation: change-class6 10s linear infinite;}
      .g58 {animation: change-class7 10s linear infinite;}
      /* defines the animation delay and shuffle mode for the letters, so it looks random */
      .a1 {opacity: 0; animation-delay: 0s;}
      .a2 {opacity: 0; animation-delay: 0.12s;}
      .a3 {opacity: 0; animation-delay: 0.24s;}
      .a4 {opacity: 0; animation-delay: 0.36s;}
      .a5 {opacity: 0; animation-delay: 0.48s;}
      .a6 {opacity: 0; animation-delay: 0.6s;}
      .a7 {opacity: 0; animation-delay: 0.72s;}
      .a8 {opacity: 0; animation-delay: 0.84s;}
      .a9 {opacity: 0; animation-delay: 0.96s;}
      .a10 {opacity: 0; animation-delay: 1.08s;}

      .b2 {opacity: 0; animation-delay: 0.12s;}
      .b3 {opacity: 0; animation-delay: 0.24s;}
      .b4 {opacity: 0; animation-delay: 0.36s;}
      .b5 {opacity: 0; animation-delay: 0.48s;}
      .b6 {opacity: 0; animation-delay: 0.6s;}
      .b7 {opacity: 0; animation-delay: 0.72s;}
      .b8 {opacity: 0; animation-delay: 0.84s;}
      .b9 {opacity: 0; animation-delay: 0.96s;}
      .b10 {opacity: 0; animation-delay: 1.08s;}
      .b11 {opacity: 0; animation-delay: 1.2s;}
      .b12 {opacity: 0; animation-delay: 1.32s;}
      .b13 {opacity: 0; animation-delay: 1.44s;}
      .b14 {opacity: 0; animation-delay: 1.56s;}
      .b15 {opacity: 0; animation-delay: 1.68s;}
      .b16 {opacity: 0; animation-delay: 1.8s;}
      .b17 {opacity: 0; animation-delay: 1.92s;}
      .b18 {opacity: 0; animation-delay: 2.04s;}

      .c3 {opacity: 0; animation-delay: 0.24s;}
      .c4 {opacity: 0; animation-delay: 0.36s;}
      .c5 {opacity: 0; animation-delay: 0.48s;}
      .c6 {opacity: 0; animation-delay: 0.6s;}
      .c7 {opacity: 0; animation-delay: 0.72s;}
      .c8 {opacity: 0; animation-delay: 0.84s;}
      .c9 {opacity: 0; animation-delay: 0.96s;}
      .c10 {opacity: 0; animation-delay: 1.08s;}
      .c11 {opacity: 0; animation-delay: 1.2s;}
      .c12 {opacity: 0; animation-delay: 1.32s;}
      .c13 {opacity: 0; animation-delay: 1.44s;}
      .c14 {opacity: 0; animation-delay: 1.56s;}
      .c15 {opacity: 0; animation-delay: 1.68s;}
      .c16 {opacity: 0; animation-delay: 1.8s;}
      .c17 {opacity: 0; animation-delay: 1.92s;}
      .c18 {opacity: 0; animation-delay: 2.04s;}
      .c19 {opacity: 0; animation-delay: 2.16s;}
      .c20 {opacity: 0; animation-delay: 2.28s;}
      .c21 {opacity: 0; animation-delay: 2.4s;}
      .c22 {opacity: 0; animation-delay: 2.52s;}
      .c23 {opacity: 0; animation-delay: 2.64s;}
      .c24 {opacity: 0; animation-delay: 2.76s;}
      .c25 {opacity: 0; animation-delay: 2.88s;}
      .c26 {opacity: 0; animation-delay: 3s;}

      .d4 {opacity: 0; animation-delay: 0.36s;}
      .d5 {opacity: 0; animation-delay: 0.48s;}
      .d6 {opacity: 0; animation-delay: 0.6s;}
      .d7 {opacity: 0; animation-delay: 0.72s;}
      .d8 {opacity: 0; animation-delay: 0.84s;}
      .d9 {opacity: 0; animation-delay: 0.96s;}
      .d10 {opacity: 0; animation-delay: 1.08s;}
      .d11 {opacity: 0; animation-delay: 1.2s;}
      .d12 {opacity: 0; animation-delay: 1.32s;}
      .d13 {opacity: 0; animation-delay: 1.44s;}
      .d14 {opacity: 0; animation-delay: 1.56s;}
      .d15 {opacity: 0; animation-delay: 1.68s;}
      .d16 {opacity: 0; animation-delay: 1.8s;}
      .d17 {opacity: 0; animation-delay: 1.92s;}
      .d18 {opacity: 0; animation-delay: 2.04s;}
      .d19 {opacity: 0; animation-delay: 2.16s;}
      .d20 {opacity: 0; animation-delay: 2.28s;}
      .d21 {opacity: 0; animation-delay: 2.4s;}
      .d22 {opacity: 0; animation-delay: 2.52s;}
      .d23 {opacity: 0; animation-delay: 2.64s;}
      .d24 {opacity: 0; animation-delay: 2.76s;}
      .d25 {opacity: 0; animation-delay: 2.88s;}
      .d26 {opacity: 0; animation-delay: 3s;}
      .d27 {opacity: 0; animation-delay: 3.12s;}
      .d28 {opacity: 0; animation-delay: 3.24s;}
      .d29 {opacity: 0; animation-delay: 3.36s;}
      .d30 {opacity: 0; animation-delay: 3.48s;}
      .d31 {opacity: 0; animation-delay: 3.6s;}
      .d32 {opacity: 0; animation-delay: 3.72s;}
      .d33 {opacity: 0; animation-delay: 3.84s;}
      .d34 {opacity: 0; animation-delay: 3.96s;}
    
      .e5 {opacity: 0; animation-delay: 0.48s;}
      .e6 {opacity: 0; animation-delay: 0.6s;}
      .e7 {opacity: 0; animation-delay: 0.72s;}
      .e8 {opacity: 0; animation-delay: 0.84s;}
      .e9 {opacity: 0; animation-delay: 0.96s;}
      .e10 {opacity: 0; animation-delay: 1.08s;}
      .e11 {opacity: 0; animation-delay: 1.2s;}
      .e12 {opacity: 0; animation-delay: 1.32s;}
      .e13 {opacity: 0; animation-delay: 1.44s;}
      .e14 {opacity: 0; animation-delay: 1.56s;}
      .e15 {opacity: 0; animation-delay: 1.68s;}
      .e16 {opacity: 0; animation-delay: 1.8s;}
      .e17 {opacity: 0; animation-delay: 1.92s;}
      .e18 {opacity: 0; animation-delay: 2.04s;}
      .e19 {opacity: 0; animation-delay: 2.16s;}
      .e20 {opacity: 0; animation-delay: 2.28s;}
      .e21 {opacity: 0; animation-delay: 2.4s;}
      .e22 {opacity: 0; animation-delay: 2.52s;}
      .e23 {opacity: 0; animation-delay: 2.64s;}
      .e24 {opacity: 0; animation-delay: 2.76s;}
      .e25 {opacity: 0; animation-delay: 2.88s;}
      .e26 {opacity: 0; animation-delay: 3s;}
      .e27 {opacity: 0; animation-delay: 3.12s;}
      .e28 {opacity: 0; animation-delay: 3.24s;}
      .e29 {opacity: 0; animation-delay: 3.36s;}
      .e30 {opacity: 0; animation-delay: 3.48s;}
      .e31 {opacity: 0; animation-delay: 3.6s;}
      .e32 {opacity: 0; animation-delay: 3.72s;}
      .e33 {opacity: 0; animation-delay: 3.84s;}
      .e34 {opacity: 0; animation-delay: 3.96s;}
      .e35 {opacity: 0; animation-delay: 4.08s;}
      .e36 {opacity: 0; animation-delay: 4.2s;}
      .e37 {opacity: 0; animation-delay: 4.32s;}
      .e38 {opacity: 0; animation-delay: 4.44s;}
      .e39 {opacity: 0; animation-delay: 4.56s;}
      .e40 {opacity: 0; animation-delay: 4.68s;}
      .e41 {opacity: 0; animation-delay: 4.8s;}
      .e42 {opacity: 0; animation-delay: 4.92s;}

      .f6 {opacity: 0; animation-delay: 0.6s;}
      .f7 {opacity: 0; animation-delay: 0.72s;}
      .f8 {opacity: 0; animation-delay: 0.84s;}
      .f9 {opacity: 0; animation-delay: 0.96s;}
      .f10 {opacity: 0; animation-delay: 1.08s;}
      .f11 {opacity: 0; animation-delay: 1.2s;}
      .f12 {opacity: 0; animation-delay: 1.32s;}
      .f13 {opacity: 0; animation-delay: 1.44s;}
      .f14 {opacity: 0; animation-delay: 1.56s;}
      .f15 {opacity: 0; animation-delay: 1.68s;}
      .f16 {opacity: 0; animation-delay: 1.8s;}
      .f17 {opacity: 0; animation-delay: 1.92s;}
      .f18 {opacity: 0; animation-delay: 2.04s;}
      .f19 {opacity: 0; animation-delay: 2.16s;}
      .f20 {opacity: 0; animation-delay: 2.28s;}
      .f21 {opacity: 0; animation-delay: 2.4s;}
      .f22 {opacity: 0; animation-delay: 2.52s;}
      .f23 {opacity: 0; animation-delay: 2.64s;}
      .f24 {opacity: 0; animation-delay: 2.76s;}
      .f25 {opacity: 0; animation-delay: 2.88s;}
      .f26 {opacity: 0; animation-delay: 3s;}
      .f27 {opacity: 0; animation-delay: 3.12s;}
      .f28 {opacity: 0; animation-delay: 3.24s;}
      .f29 {opacity: 0; animation-delay: 3.36s;}
      .f30 {opacity: 0; animation-delay: 3.48s;}
      .f31 {opacity: 0; animation-delay: 3.6s;}
      .f32 {opacity: 0; animation-delay: 3.72s;}
      .f33 {opacity: 0; animation-delay: 3.84s;}
      .f34 {opacity: 0; animation-delay: 3.96s;}
      .f35 {opacity: 0; animation-delay: 4.08s;}
      .f36 {opacity: 0; animation-delay: 4.2s;}
      .f37 {opacity: 0; animation-delay: 4.32s;}
      .f38 {opacity: 0; animation-delay: 4.44s;}
      .f39 {opacity: 0; animation-delay: 4.56s;}
      .f40 {opacity: 0; animation-delay: 4.68s;}
      .f41 {opacity: 0; animation-delay: 4.8s;}
      .f42 {opacity: 0; animation-delay: 4.92s;}
      .f43 {opacity: 0; animation-delay: 5.04s;}
      .f44 {opacity: 0; animation-delay: 5.16s;}
      .f45 {opacity: 0; animation-delay: 5.28s;}
      .f46 {opacity: 0; animation-delay: 5.4s;}
      .f47 {opacity: 0; animation-delay: 5.52s;}
      .f48 {opacity: 0; animation-delay: 5.64s;}
      .f49 {opacity: 0; animation-delay: 5.76s;}
      .f50 {opacity: 0; animation-delay: 5.88s;}

      .g7 {opacity: 0; animation-delay: 0.72s;}
      .g8 {opacity: 0; animation-delay: 0.84s;}
      .g9 {opacity: 0; animation-delay: 0.96s;}
      .g10 {opacity: 0; animation-delay: 1.08s;}
      .g11 {opacity: 0; animation-delay: 1.2s;}
      .g12 {opacity: 0; animation-delay: 1.32s;}
      .g13 {opacity: 0; animation-delay: 1.44s;}
      .g14 {opacity: 0; animation-delay: 1.56s;}
      .g15 {opacity: 0; animation-delay: 1.68s;}
      .g16 {opacity: 0; animation-delay: 1.8s;}
      .g17 {opacity: 0; animation-delay: 1.92s;}
      .g18 {opacity: 0; animation-delay: 2.04s;}
      .g19 {opacity: 0; animation-delay: 2.16s;}
      .g20 {opacity: 0; animation-delay: 2.28s;}
      .g21 {opacity: 0; animation-delay: 2.4s;}
      .g22 {opacity: 0; animation-delay: 2.52s;}
      .g23 {opacity: 0; animation-delay: 2.64s;}
      .g24 {opacity: 0; animation-delay: 2.76s;}
      .g25 {opacity: 0; animation-delay: 2.88s;}
      .g26 {opacity: 0; animation-delay: 3s;}
      .g27 {opacity: 0; animation-delay: 3.12s;}
      .g28 {opacity: 0; animation-delay: 3.24s;}
      .g29 {opacity: 0; animation-delay: 3.36s;}
      .g30 {opacity: 0; animation-delay: 3.48s;}
      .g31 {opacity: 0; animation-delay: 3.6s;}
      .g32 {opacity: 0; animation-delay: 3.72s;}
      .g33 {opacity: 0; animation-delay: 3.84s;}
      .g34 {opacity: 0; animation-delay: 3.96s;}
      .g35 {opacity: 0; animation-delay: 4.08s;}
      .g36 {opacity: 0; animation-delay: 4.2s;}
      .g37 {opacity: 0; animation-delay: 4.32s;}
      .g38 {opacity: 0; animation-delay: 4.44s;}
      .g39 {opacity: 0; animation-delay: 4.56s;}
      .g40 {opacity: 0; animation-delay: 4.68s;}
      .g41 {opacity: 0; animation-delay: 4.8s;}
      .g42 {opacity: 0; animation-delay: 4.92s;}
      .g43 {opacity: 0; animation-delay: 5.04s;}
      .g44 {opacity: 0; animation-delay: 5.16s;}
      .g45 {opacity: 0; animation-delay: 5.28s;}
      .g46 {opacity: 0; animation-delay: 5.4s;}
      .g47 {opacity: 0; animation-delay: 5.52s;}
      .g48 {opacity: 0; animation-delay: 5.64s;}
      .g49 {opacity: 0; animation-delay: 5.76s;}
      .g50 {opacity: 0; animation-delay: 5.88s;}
      .g51 {opacity: 0; animation-delay: 6s;}
      .g52 {opacity: 0; animation-delay: 6.12s;}
      .g53 {opacity: 0; animation-delay: 6.24s;}
      .g54 {opacity: 0; animation-delay: 6.36s;}
      .g55 {opacity: 0; animation-delay: 6.48s;}
      .g56 {opacity: 0; animation-delay: 6.6s;}
      .g57 {opacity: 0; animation-delay: 6.72s;}
      .g58 {opacity: 0; animation-delay: 6.84s;}
    </style>
  </head>

  <body>
  <div class="parent-class">
    <div class="div-class-1">
      <span class="class a1">d</span>
      <span class="class a2">e</span>
      <span class="class a3">f</span>
      <span class="class a4">g</span>
      <span class="class a5">h</span>
      <span class="class a6">i</span>
      <span class="class a7">j</span>
      <span class="class a8">k</span>
      <span class="class a9">l</span>
      <span class="a10">s</span>
    </div>

    <div class="div-class-2">
      <span class="class b2">d</span>
      <span class="class b3">e</span>
      <span class="class b4">f</span>
      <span class="class b5">g</span>
      <span class="class b6">h</span>
      <span class="class b7">i</span>
      <span class="class b8">j</span>
      <span class="class b9">k</span>
      <span class="class b10">l</span>
      <span class="class b11">s</span>
      <span class="class b12">n</span>
      <span class="class b13">o</span>
      <span class="class b14">p</span>
      <span class="class b15">q</span>
      <span class="class b16">r</span>
      <span class="class b17">s</span>
      <span class="b18">h</span>
    </div>
    
    <div class="div-class-3">
      <span class="class c3">d</span>
      <span class="class c4">e</span>
      <span class="class c5">f</span>
      <span class="class c6">g</span>
      <span class="class c7">h</span>
      <span class="class c8">i</span>
      <span class="class c9">j</span>
      <span class="class c10">k</span>
      <span class="class c11">l</span>
      <span class="class c12">s</span>
      <span class="class c13">n</span>
      <span class="class c14">o</span>
      <span class="class c15">p</span>
      <span class="class c16">q</span>
      <span class="class c17">r</span>
      <span class="class c18">s</span>
      <span class="class c19">h</span>
      <span class="class c20">w</span>
      <span class="class c21">x</span>
      <span class="class c22">y</span>
      <span class="class c23">z</span>
      <span class="class c24">a</span>
      <span class="class c25">b</span>
      <span class="c26">u</span>
    </div> 

    <div class="div-class-4">
      <span class="class d4">d</span>
      <span class="class d5">e</span>
      <span class="class d6">f</span>
      <span class="class d7">g</span>
      <span class="class d8">h</span>
      <span class="class d9">i</span>
      <span class="class d10">j</span>
      <span class="class d11">k</span>
      <span class="class d12">l</span>
      <span class="class d13">s</span>
      <span class="class d14">n</span>
      <span class="class d15">o</span>
      <span class="class d16">p</span>
      <span class="class d17">q</span>
      <span class="class d18">r</span>
      <span class="class d19">s</span>
      <span class="class d20">h</span>
      <span class="class d21">w</span>
      <span class="class d22">x</span>
      <span class="class d23">y</span>
      <span class="class d24">z</span>
      <span class="class d25">a</span>
      <span class="class d26">b</span>
      <span class="class d27">u</span>
      <span class="class d28">l</span>
      <span class="class d29">g</span>
      <span class="class d30">h</span>
      <span class="class d31">i</span>
      <span class="class d32">j</span>
      <span class="class d33">k</span>
      <span class="d34">f</span>
    </div> 

    <div class="div-class-5">
      <span class="class e5">d</span>
      <span class="class e6">e</span>
      <span class="class e7">f</span>
      <span class="class e8">g</span>
      <span class="class e9">h</span>
      <span class="class e10">i</span>
      <span class="class e11">j</span>
      <span class="class e12">k</span>
      <span class="class e13">l</span>
      <span class="class e14">s</span>
      <span class="class e15">n</span>
      <span class="class e16">o</span>
      <span class="class e17">p</span>
      <span class="class e18">q</span>
      <span class="class e19">r</span>
      <span class="class e20">s</span>
      <span class="class e21">h</span>
      <span class="class e22">w</span>
      <span class="class e23">x</span>
      <span class="class e24">y</span>
      <span class="class e25">z</span>
      <span class="class e26">a</span>
      <span class="class e27">b</span>
      <span class="class e28">u</span>
      <span class="class e29">l</span>
      <span class="class e30">g</span>
      <span class="class e31">h</span>
      <span class="class e32">i</span>
      <span class="class e33">j</span>
      <span class="class e34">k</span>
      <span class="class e35">f</span>
      <span class="class e36">o</span>
      <span class="class e37">p</span>
      <span class="class e38">q</span>
      <span class="class e39">r</span>
      <span class="class e40">s</span>
      <span class="class e41">t</span>
      <span class="e42">f</span>
    </div> 

    <div class="div-class-6">
      <span class="class f6">d</span>
      <span class="class f7">e</span>
      <span class="class f8">f</span>
      <span class="class f9">g</span>
      <span class="class f10">h</span>
      <span class="class f11">i</span>
      <span class="class f12">j</span>
      <span class="class f13">k</span>
      <span class="class f14">l</span>
      <span class="class f15">s</span>
      <span class="class f16">n</span>
      <span class="class f17">o</span>
      <span class="class f18">p</span>
      <span class="class f19">q</span>
      <span class="class f20">r</span>
      <span class="class f21">s</span>
      <span class="class f22">h</span>
      <span class="class f23">w</span>
      <span class="class f24">x</span>
      <span class="class f25">y</span>
      <span class="class f26">z</span>
      <span class="class f27">a</span>
      <span class="class f28">b</span>
      <span class="class f29">u</span>
      <span class="class f30">f</span>
      <span class="class f31">g</span>
      <span class="class f32">h</span>
      <span class="class f33">i</span>
      <span class="class f34">j</span>
      <span class="class f35">k</span>
      <span class="class f36">f</span>
      <span class="class f37">o</span>
      <span class="class f38">p</span>
      <span class="class f39">q</span>
      <span class="class f40">r</span>
      <span class="class f41">s</span>
      <span class="class f42">t</span>
      <span class="class f43">f</span>
      <span class="class f44">x</span>
      <span class="class f45">y</span>
      <span class="class f46">z</span>
      <span class="class f47">a</span>
      <span class="class f48">b</span>
      <span class="class f49">c</span>
      <span class="f50">l</span>
    </div>

    <div class="div-class-7">
      <span class="class g7">d</span>
      <span class="class g8">e</span>
      <span class="class g9">f</span>
      <span class="class g10">g</span>
      <span class="class g11">h</span>
      <span class="class g12">i</span>
      <span class="class g13">j</span>
      <span class="class g14">k</span>
      <span class="class g15">l</span>
      <span class="class g16">s</span>
      <span class="class g17">n</span>
      <span class="class g18">o</span>
      <span class="class g19">p</span>
      <span class="class g20">q</span>
      <span class="class g21">r</span>
      <span class="class g22">s</span>
      <span class="class g23">h</span>
      <span class="class g24">w</span>
      <span class="class g25">x</span>
      <span class="class g26">y</span>
      <span class="class g27">z</span>
      <span class="class g28">a</span>
      <span class="class g29">b</span>
      <span class="class g30">u</span>
      <span class="class g31">f</span>
      <span class="class g32">g</span>
      <span class="class g33">h</span>
      <span class="class g34">i</span>
      <span class="class g35">j</span>
      <span class="class g36">k</span>
      <span class="class g37">f</span>
      <span class="class g38">o</span>
      <span class="class g39">p</span>
      <span class="class g40">q</span>
      <span class="class g41">r</span>
      <span class="class g42">s</span>
      <span class="class g43">t</span>
      <span class="class g44">f</span>
      <span class="class g45">x</span>
      <span class="class g46">y</span>
      <span class="class g47">z</span>
      <span class="class g48">a</span>
      <span class="class g49">b</span>
      <span class="class g50">c</span>
      <span class="class g51">l</span>
      <span class="class g52">g</span>
      <span class="class g53">h</span>
      <span class="class g54">i</span>
      <span class="class g55">j</span>
      <span class="class g56">k</span>
      <span class="class g57">l</span>
      <span class="g58">e</span>
    </div> 
  </div>
 </body>
</html>        
animated html/css playground
we.type ©2024 Legal Notice FH-Potsdam Logo