Difference between revisions of "Team:Marburg"

Line 3: Line 3:
 
<html>
 
<html>
 
   <style>
 
   <style>
−
.glitch-wrapper {
 
−
  height: 100%;
 
−
  display: flex;
 
−
  justify-content: center;
 
−
  align-items: center;
 
−
}
 
 
.glitch {
 
.glitch {
 +
  position: relative;
 
   color: white;
 
   color: white;
−
   font-size: 150px;
+
   letter-spacing: .3em;
−
   text-transform: upercase;
+
   /* Animation provies a slight random skew. Check bottom of doc
−
   position: relative;
+
   for more information on how to random skew. */
−
   display: inline-block;
+
   animation: glitch-skew 1s infinite linear alternate-reverse;
 
}
 
}
−
.glitch::before,
+
.glitch::before {
−
.glitch::after {
+
 
   content: attr(data-text);
 
   content: attr(data-text);
 
   position: absolute;
 
   position: absolute;
Line 24: Line 18:
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
−
  background: black;
 
−
}
 
−
.glitch::before {
 
 
   left: 2px;
 
   left: 2px;
−
   text-shadow: -2px 0 #49fc00;
+
   text-shadow: -2px 0 #ff00c1;
−
   clip: rect(24px, 550px, 90px, 0);
+
  /* Creates an initial clip for our glitch. This works in
−
   animation: glitch-anim-2 3s infinite linear alternate-reverse;
+
  a typical top,right,bottom,left fashion and creates a mask
 +
  to only show a certain part of the glitch at a time. */
 +
   clip: rect(44px, 450px, 56px, 0);
 +
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
 +
  with an alternating animation to keep things fresh. */
 +
   animation: glitch-anim 5s infinite linear alternate-reverse;
 
}
 
}
 
.glitch::after {
 
.glitch::after {
 +
  content: attr(data-text);
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 
   left: -2px;
 
   left: -2px;
−
   text-shadow: -2px 0 #b300fc;
+
   text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
−
  clip: rect(85px, 550px, 140px, 0);
+
   animation: glitch-anim2 1s infinite linear alternate-reverse;
−
   animation: glitch-anim 2.5s infinite linear alternate-reverse;
+
 
}
 
}
−
@-webkit-keyframes glitch-anim {
+
 
 +
/* Creates an animation with 20 steaps. For each step, it calculates
 +
a percentage for the specific step. It then generates a random clip
 +
box to be used for the random glitch effect. Also adds a very subtle
 +
skew to change the 'thickness' of the glitch.*/
 +
@keyframes glitch-anim {
 
   0% {
 
   0% {
−
     clip: rect(29px, 9999px, 26px, 0);
+
     clip: rect(43px, 9999px, 85px, 0);
 +
    transform: skew(0.57deg);
 
   }
 
   }
−
   4.166666666666666% {
+
   5% {
−
     clip: rect(75px, 9999px, 116px, 0);
+
     clip: rect(77px, 9999px, 66px, 0);
 +
    transform: skew(0.15deg);
 
   }
 
   }
−
   8.333333333333332% {
+
   10% {
−
     clip: rect(99px, 9999px, 97px, 0);
+
     clip: rect(47px, 9999px, 42px, 0);
 +
    transform: skew(0.88deg);
 
   }
 
   }
−
   12.5% {
+
   15% {
−
     clip: rect(76px, 9999px, 129px, 0);
+
     clip: rect(91px, 9999px, 73px, 0);
 +
    transform: skew(0.3deg);
 
   }
 
   }
−
   16.666666666666664% {
+
   20% {
−
     clip: rect(47px, 9999px, 69px, 0);
+
     clip: rect(72px, 9999px, 52px, 0);
−
  }
+
     transform: skew(0.46deg);
−
  20.833333333333336% {
+
−
     clip: rect(90px, 9999px, 148px, 0);
+
 
   }
 
   }
 
   25% {
 
   25% {
−
     clip: rect(10px, 9999px, 101px, 0);
+
     clip: rect(7px, 9999px, 90px, 0);
 +
    transform: skew(0.11deg);
 
   }
 
   }
−
   29.166666666666668% {
+
   30% {
−
     clip: rect(4px, 9999px, 73px, 0);
+
     clip: rect(13px, 9999px, 58px, 0);
 +
    transform: skew(0.11deg);
 
   }
 
   }
−
   33.33333333333333% {
+
   35% {
−
     clip: rect(114px, 9999px, 66px, 0);
+
     clip: rect(36px, 9999px, 19px, 0);
 +
    transform: skew(0.57deg);
 
   }
 
   }
−
   37.5% {
+
   40% {
−
     clip: rect(52px, 9999px, 31px, 0);
+
     clip: rect(47px, 9999px, 25px, 0);
−
  }
+
     transform: skew(0.92deg);
−
  41.66666666666667% {
+
−
     clip: rect(81px, 9999px, 58px, 0);
+
 
   }
 
   }
−
   45.83333333333333% {
+
   45% {
−
     clip: rect(118px, 9999px, 59px, 0);
+
     clip: rect(40px, 9999px, 47px, 0);
 +
    transform: skew(0.39deg);
 
   }
 
   }
 
   50% {
 
   50% {
−
     clip: rect(4px, 9999px, 84px, 0);
+
     clip: rect(14px, 9999px, 72px, 0);
 +
    transform: skew(0.94deg);
 
   }
 
   }
−
   54.166666666666664% {
+
   55% {
−
     clip: rect(68px, 9999px, 25px, 0);
+
     clip: rect(27px, 9999px, 13px, 0);
 +
    transform: skew(0.5deg);
 
   }
 
   }
−
   58.333333333333336% {
+
   60% {
−
     clip: rect(132px, 9999px, 63px, 0);
+
     clip: rect(96px, 9999px, 71px, 0);
 +
    transform: skew(0.83deg);
 
   }
 
   }
−
   62.5% {
+
   65% {
−
     clip: rect(148px, 9999px, 64px, 0);
+
     clip: rect(67px, 9999px, 39px, 0);
 +
    transform: skew(0.24deg);
 
   }
 
   }
−
   66.66666666666666% {
+
   70% {
−
     clip: rect(136px, 9999px, 55px, 0);
+
     clip: rect(8px, 9999px, 22px, 0);
−
  }
+
     transform: skew(0.52deg);
−
  70.83333333333334% {
+
−
     clip: rect(138px, 9999px, 31px, 0);
+
 
   }
 
   }
 
   75% {
 
   75% {
−
     clip: rect(19px, 9999px, 74px, 0);
+
     clip: rect(83px, 9999px, 41px, 0);
 +
    transform: skew(0.6deg);
 
   }
 
   }
−
   79.16666666666666% {
+
   80% {
−
     clip: rect(75px, 9999px, 114px, 0);
+
     clip: rect(28px, 9999px, 92px, 0);
 +
    transform: skew(0.89deg);
 
   }
 
   }
−
   83.33333333333334% {
+
   85% {
−
     clip: rect(22px, 9999px, 59px, 0);
+
     clip: rect(29px, 9999px, 23px, 0);
 +
    transform: skew(0.7deg);
 
   }
 
   }
−
   87.5% {
+
   90% {
−
     clip: rect(32px, 9999px, 64px, 0);
+
     clip: rect(90px, 9999px, 26px, 0);
−
  }
+
     transform: skew(0.75deg);
−
  91.66666666666666% {
+
−
     clip: rect(65px, 9999px, 104px, 0);
+
 
   }
 
   }
−
   95.83333333333334% {
+
   95% {
−
     clip: rect(91px, 9999px, 28px, 0);
+
     clip: rect(73px, 9999px, 35px, 0);
 +
    transform: skew(0.29deg);
 
   }
 
   }
 
   100% {
 
   100% {
−
     clip: rect(6px, 9999px, 73px, 0);
+
     clip: rect(74px, 9999px, 39px, 0);
 +
    transform: skew(1deg);
 
   }
 
   }
 
}
 
}
−
@keyframes glitch-anim {
+
@keyframes glitch-anim2 {
 
   0% {
 
   0% {
−
     clip: rect(29px, 9999px, 26px, 0);
+
     clip: rect(98px, 9999px, 61px, 0);
 +
    transform: skew(0.63deg);
 
   }
 
   }
−
   4.166666666666666% {
+
   5% {
−
    clip: rect(75px, 9999px, 116px, 0);
+
     clip: rect(78px, 9999px, 5px, 0);
−
  }
+
     transform: skew(0.78deg);
−
  8.333333333333332% {
+
−
    clip: rect(99px, 9999px, 97px, 0);
+
−
  }
+
−
  12.5% {
+
−
     clip: rect(76px, 9999px, 129px, 0);
+
−
  }
+
−
  16.666666666666664% {
+
−
     clip: rect(47px, 9999px, 69px, 0);
+
−
  }
+
−
  20.833333333333336% {
+
−
    clip: rect(90px, 9999px, 148px, 0);
+
−
  }
+
−
  25% {
+
−
    clip: rect(10px, 9999px, 101px, 0);
+
−
  }
+
−
  29.166666666666668% {
+
−
    clip: rect(4px, 9999px, 73px, 0);
+
−
  }
+
−
  33.33333333333333% {
+
−
    clip: rect(114px, 9999px, 66px, 0);
+
−
  }
+
−
  37.5% {
+
−
    clip: rect(52px, 9999px, 31px, 0);
+
−
  }
+
−
  41.66666666666667% {
+
−
    clip: rect(81px, 9999px, 58px, 0);
+
−
  }
+
−
  45.83333333333333% {
+
−
    clip: rect(118px, 9999px, 59px, 0);
+
−
  }
+
−
  50% {
+
−
    clip: rect(4px, 9999px, 84px, 0);
+
−
  }
+
−
  54.166666666666664% {
+
−
    clip: rect(68px, 9999px, 25px, 0);
+
−
  }
+
−
  58.333333333333336% {
+
−
    clip: rect(132px, 9999px, 63px, 0);
+
−
  }
+
−
  62.5% {
+
−
    clip: rect(148px, 9999px, 64px, 0);
+
−
  }
+
−
  66.66666666666666% {
+
−
    clip: rect(136px, 9999px, 55px, 0);
+
−
  }
+
−
  70.83333333333334% {
+
−
    clip: rect(138px, 9999px, 31px, 0);
+
−
  }
+
−
  75% {
+
−
    clip: rect(19px, 9999px, 74px, 0);
+
−
  }
+
−
  79.16666666666666% {
+
−
    clip: rect(75px, 9999px, 114px, 0);
+
−
  }
+
−
  83.33333333333334% {
+
−
    clip: rect(22px, 9999px, 59px, 0);
+
−
  }
+
−
  87.5% {
+
−
    clip: rect(32px, 9999px, 64px, 0);
+
−
  }
+
−
  91.66666666666666% {
+
−
    clip: rect(65px, 9999px, 104px, 0);
+
−
  }
+
−
  95.83333333333334% {
+
−
    clip: rect(91px, 9999px, 28px, 0);
+
−
  }
+
−
  100% {
+
−
    clip: rect(6px, 9999px, 73px, 0);
+
−
  }
+
−
}
+
−
@-webkit-keyframes glitch-anim-2 {
+
−
  6.666666666666667% {
+
−
    clip: rect(19px, 9999px, 56px, 0);
+
 
   }
 
   }
 
   10% {
 
   10% {
−
     clip: rect(16px, 9999px, 54px, 0);
+
     clip: rect(67px, 9999px, 67px, 0);
 +
    transform: skew(0.19deg);
 
   }
 
   }
−
   13.333333333333334% {
+
   15% {
−
     clip: rect(118px, 9999px, 14px, 0);
+
     clip: rect(61px, 9999px, 86px, 0);
−
  }
+
     transform: skew(0.76deg);
−
  16.666666666666664% {
+
−
     clip: rect(103px, 9999px, 91px, 0);
+
 
   }
 
   }
 
   20% {
 
   20% {
−
     clip: rect(106px, 9999px, 76px, 0);
+
     clip: rect(70px, 9999px, 12px, 0);
 +
    transform: skew(0.22deg);
 
   }
 
   }
−
   23.333333333333332% {
+
   25% {
−
     clip: rect(97px, 9999px, 144px, 0);
+
     clip: rect(14px, 9999px, 36px, 0);
−
  }
+
     transform: skew(0.83deg);
−
  26.666666666666668% {
+
−
     clip: rect(4px, 9999px, 134px, 0);
+
 
   }
 
   }
 
   30% {
 
   30% {
−
     clip: rect(65px, 9999px, 111px, 0);
+
     clip: rect(32px, 9999px, 99px, 0);
 +
    transform: skew(0.96deg);
 
   }
 
   }
−
   33.33333333333333% {
+
   35% {
−
     clip: rect(51px, 9999px, 106px, 0);
+
     clip: rect(58px, 9999px, 60px, 0);
−
  }
+
     transform: skew(0.39deg);
−
  36.666666666666664% {
+
−
     clip: rect(131px, 9999px, 24px, 0);
+
 
   }
 
   }
 
   40% {
 
   40% {
−
     clip: rect(54px, 9999px, 32px, 0);
+
     clip: rect(47px, 9999px, 41px, 0);
 +
    transform: skew(0.45deg);
 
   }
 
   }
−
   43.333333333333336% {
+
   45% {
−
     clip: rect(70px, 9999px, 113px, 0);
+
     clip: rect(40px, 9999px, 8px, 0);
−
  }
+
     transform: skew(0.76deg);
−
  46.666666666666664% {
+
−
     clip: rect(94px, 9999px, 111px, 0);
+
 
   }
 
   }
 
   50% {
 
   50% {
−
     clip: rect(5px, 9999px, 58px, 0);
+
     clip: rect(60px, 9999px, 62px, 0);
 +
    transform: skew(0.47deg);
 
   }
 
   }
−
   53.333333333333336% {
+
   55% {
−
     clip: rect(123px, 9999px, 4px, 0);
+
     clip: rect(86px, 9999px, 86px, 0);
−
  }
+
     transform: skew(0.1deg);
−
  56.666666666666664% {
+
−
     clip: rect(32px, 9999px, 149px, 0);
+
 
   }
 
   }
 
   60% {
 
   60% {
−
     clip: rect(9px, 9999px, 46px, 0);
+
     clip: rect(98px, 9999px, 34px, 0);
 +
    transform: skew(0.2deg);
 
   }
 
   }
−
   63.33333333333333% {
+
   65% {
−
     clip: rect(66px, 9999px, 13px, 0);
+
     clip: rect(38px, 9999px, 31px, 0);
−
  }
+
     transform: skew(0.66deg);
−
  66.66666666666666% {
+
−
     clip: rect(35px, 9999px, 40px, 0);
+
 
   }
 
   }
 
   70% {
 
   70% {
−
     clip: rect(65px, 9999px, 31px, 0);
+
     clip: rect(5px, 9999px, 1px, 0);
 +
    transform: skew(0.22deg);
 
   }
 
   }
−
   73.33333333333333% {
+
   75% {
−
     clip: rect(17px, 9999px, 110px, 0);
+
     clip: rect(26px, 9999px, 45px, 0);
−
  }
+
     transform: skew(0.04deg);
−
  76.66666666666667% {
+
−
     clip: rect(55px, 9999px, 106px, 0);
+
 
   }
 
   }
 
   80% {
 
   80% {
−
     clip: rect(132px, 9999px, 42px, 0);
+
     clip: rect(1px, 9999px, 56px, 0);
 +
    transform: skew(0.45deg);
 
   }
 
   }
−
   83.33333333333334% {
+
   85% {
−
     clip: rect(34px, 9999px, 29px, 0);
+
     clip: rect(51px, 9999px, 31px, 0);
−
  }
+
     transform: skew(0.7deg);
−
  86.66666666666667% {
+
−
     clip: rect(111px, 9999px, 86px, 0);
+
 
   }
 
   }
 
   90% {
 
   90% {
−
     clip: rect(72px, 9999px, 138px, 0);
+
     clip: rect(30px, 9999px, 6px, 0);
 +
    transform: skew(0.95deg);
 
   }
 
   }
−
   93.33333333333333% {
+
   95% {
−
     clip: rect(121px, 9999px, 117px, 0);
+
     clip: rect(57px, 9999px, 97px, 0);
−
  }
+
     transform: skew(0.01deg);
−
  96.66666666666667% {
+
−
     clip: rect(129px, 9999px, 63px, 0);
+
 
   }
 
   }
 
   100% {
 
   100% {
−
     clip: rect(126px, 9999px, 119px, 0);
+
     clip: rect(80px, 9999px, 54px, 0);
 +
    transform: skew(0.97deg);
 
   }
 
   }
 
}
 
}
−
@keyframes glitch-anim-2 {
+
@keyframes glitch-skew {
−
   6.666666666666667% {
+
   0% {
−
     clip: rect(19px, 9999px, 56px, 0);
+
     transform: skew(-4deg);
 
   }
 
   }
 
   10% {
 
   10% {
−
     clip: rect(16px, 9999px, 54px, 0);
+
     transform: skew(4deg);
−
  }
+
−
  13.333333333333334% {
+
−
    clip: rect(118px, 9999px, 14px, 0);
+
−
  }
+
−
  16.666666666666664% {
+
−
    clip: rect(103px, 9999px, 91px, 0);
+
 
   }
 
   }
 
   20% {
 
   20% {
−
     clip: rect(106px, 9999px, 76px, 0);
+
     transform: skew(0deg);
−
  }
+
−
  23.333333333333332% {
+
−
    clip: rect(97px, 9999px, 144px, 0);
+
−
  }
+
−
  26.666666666666668% {
+
−
    clip: rect(4px, 9999px, 134px, 0);
+
 
   }
 
   }
 
   30% {
 
   30% {
−
     clip: rect(65px, 9999px, 111px, 0);
+
     transform: skew(-4deg);
−
  }
+
−
  33.33333333333333% {
+
−
    clip: rect(51px, 9999px, 106px, 0);
+
−
  }
+
−
  36.666666666666664% {
+
−
    clip: rect(131px, 9999px, 24px, 0);
+
 
   }
 
   }
 
   40% {
 
   40% {
−
     clip: rect(54px, 9999px, 32px, 0);
+
     transform: skew(4deg);
−
  }
+
−
  43.333333333333336% {
+
−
    clip: rect(70px, 9999px, 113px, 0);
+
−
  }
+
−
  46.666666666666664% {
+
−
    clip: rect(94px, 9999px, 111px, 0);
+
 
   }
 
   }
 
   50% {
 
   50% {
−
     clip: rect(5px, 9999px, 58px, 0);
+
     transform: skew(3deg);
−
  }
+
−
  53.333333333333336% {
+
−
    clip: rect(123px, 9999px, 4px, 0);
+
−
  }
+
−
  56.666666666666664% {
+
−
    clip: rect(32px, 9999px, 149px, 0);
+
 
   }
 
   }
 
   60% {
 
   60% {
−
     clip: rect(9px, 9999px, 46px, 0);
+
     transform: skew(0deg);
−
  }
+
−
  63.33333333333333% {
+
−
    clip: rect(66px, 9999px, 13px, 0);
+
−
  }
+
−
  66.66666666666666% {
+
−
    clip: rect(35px, 9999px, 40px, 0);
+
 
   }
 
   }
 
   70% {
 
   70% {
−
     clip: rect(65px, 9999px, 31px, 0);
+
     transform: skew(5deg);
−
  }
+
−
  73.33333333333333% {
+
−
    clip: rect(17px, 9999px, 110px, 0);
+
−
  }
+
−
  76.66666666666667% {
+
−
    clip: rect(55px, 9999px, 106px, 0);
+
 
   }
 
   }
 
   80% {
 
   80% {
−
     clip: rect(132px, 9999px, 42px, 0);
+
     transform: skew(1deg);
−
  }
+
−
  83.33333333333334% {
+
−
    clip: rect(34px, 9999px, 29px, 0);
+
−
  }
+
−
  86.66666666666667% {
+
−
    clip: rect(111px, 9999px, 86px, 0);
+
 
   }
 
   }
 
   90% {
 
   90% {
−
     clip: rect(72px, 9999px, 138px, 0);
+
     transform: skew(5deg);
−
  }
+
−
  93.33333333333333% {
+
−
    clip: rect(121px, 9999px, 117px, 0);
+
−
  }
+
−
  96.66666666666667% {
+
−
    clip: rect(129px, 9999px, 63px, 0);
+
 
   }
 
   }
 
   100% {
 
   100% {
−
     clip: rect(126px, 9999px, 119px, 0);
+
     transform: skew(3deg);
 
   }
 
   }
 
}
 
}
Line 632: Line 513:
 
               <div class="column"></div>
 
               <div class="column"></div>
 
               <div class="column" style="color: white; display: flex; align-items: center;">
 
               <div class="column" style="color: white; display: flex; align-items: center;">
−
                 <div class="glitch-wrapper">
+
                 <div>
 
                   <p class="glitch" data-text="Fastest." style="font-size: 4em; line-height: 1em;">Fastest.</p>
 
                   <p class="glitch" data-text="Fastest." style="font-size: 4em; line-height: 1em;">Fastest.</p>
 
                   <p class="glitch" data-text="Phototrophic." style="font-size: 4em; line-height: 1em;">Phototrophic.</p>
 
                   <p class="glitch" data-text="Phototrophic." style="font-size: 4em; line-height: 1em;">Phototrophic.</p>

Revision as of 16:40, 4 September 2019

Fastest.

Phototrophic.

Organism.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.