Movie credits

by B D

HTML

<div class='wrapper'>
  <div class='movie'>Another Robot Platform Standup</div>
  <div class='job'>directed by</div>
  <div class='name'>Bryan Gamble</div>
  <div class='job'>produced by</div>
  <div class='name'>Amani Ibrahim</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div class='name'>michael bay</div>
  <div class='job'>director of photography</div>
  <div class='name'>wolfgang petersen</div>
  <div class='job'>story</div>
  <div class='name'>david fincher</div>
  <div class='job'>visual effects supervisor</div>
  <div class='name'>jerry bruckheimer</div>
  <div class='job'>cast supervisor</div>
  <div class='name'>john doe</div>
  <div class='job'>directed by</div>
  <div class='name'>christopher nolan</div>
  <div class='job'>produced by</div>
  <div class='name'>steven spielberg</div>
  <div class='job'>screenplay by</div>
  <div...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  /* background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%); */
  background: #00ff00;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  font: 300 35px/1 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  animation: 60s credits linear infinite;
}

.movie {
  margin-bottom: 50px;
  font-size: 50px;
}

.job {
  margin-bottom: 5px;
  font-size: 20px;
}

.name {
  margin-bottom: 50px;
  font-size: 35px;
}

@keyframes credits {
  0% {
    top: 100%;
  }

  100% {
    top: -400%;
  }
}