80s Typography

https://codepen.io/bsacheri/pen/qBOxMxL

by Ben

HTML

<div id="wrapper">
  <BR>  
  <h1 class="chrome">ToolTime</h1>
  <h3 class="dreams"></h3>
  <BR>  <BR>

  <h1 class="chrome">ToolTime</h1>
  <h3 class="dreams">TPOC</h3>
  <BR>  <BR>  <BR>
  <BR>
  <BR>
  <BR>
  <h1 class="chrome">ToolTime</h1>
  <h3 class="dreams">Controls</h3>
  <BR>
  
  
  <h1 class="vectro"><span class="vectro-body">ToolTime</span><span class="vectro-red">I</span><span class="vectro-green">I</span><span class="vectro-blue">I</span></h1>
  <div class="street-machine">
  <h1 class="street">ToolTime</h1>
  <h3 class="machine">TPOC</h3>
  </div>
  <h1 class="victory"><span class="victory-v">T</span>oolTime</h1>
  <div class="future-cop">
  <h3 class="future">ToolTime</h3>
  <h1 class="cop">TPOC</h1>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://fonts.googleapis.com/css?family=Candal);

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);

@import url(https://fonts.googleapis.com/css?family=Monoton);


body { background: #000; color: #fff; position: relative;}

.chrome {
  position: relative;
  background-image: -webkit-linear-gradient(#378DBC 0%, #B6E8F1 46%, #ffffff 50%, #32120E 54%, #FFC488 58%, #582C11 90%, #EC9B4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px #f5f5f5;
  font-size: 200px;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  margin: 0;
  line-height: 1;
}

.chrome:before {
  content: 'CHROME';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position:-680px 0;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0;
  padding-right: 300px;
  -webkit-animation-name: chrome_effect;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

.dreams {
  position: absolute;
  margin: 0px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 160px;
  color: #F975F7 ;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); /* IE 9 */
  -webkit-transform:rotate(-15deg); /* Safari and Chrome */
  margin-left: 400px;
  margin-top: -120px;
  -webkit-text-stroke: 1px #f008b7;
  -webkit-filter: drop-shadow(2px 2px 20px #f008b7);
  z-index: 20;
}

.windows .dreams {
  -webkit-text-stroke: 4px #f008b7;
}

.vectro {
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.1px #f1f1f1;
  font-family: 'Righteous',...

JavaScript

if ( navigator.platform.indexOf('Win') != -1 ) {
  window.document.getElementById("wrapper").setAttribute("class", "windows");
} else if ( navigator.platform.indexOf('Mac') != -1 ) {
  window.document.getElementById("wrapper").setAttribute("class", "mac");
}