Add throwback site

src/Throwback/Throwback.js

@@ -1,5 +1,111 @@
 import React from "react";
+import construction from "./construction.gif";
+import styled from "styled-components";
+import rainbow from "./rainbow_stars.gif";
+import smiley from "./smiley.gif";
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-image: url(${rainbow});
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+`;
+
+const Item = styled.div`
+  margin: 1rem auto;
+
+  @media screen and (max-width: 594px) {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+`;
+
+const ConstructionImage = styled.img`
+  margin: 0 auto;
+  width: 100vw;
+
+  max-width: 1000px;
+`;
+
+const WordArtContainer = styled(Item)`
+  font-family: Arial, sans-serif;
+  font-size: 4em;
+  font-weight: bold;
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  transform: skew(0, -10deg) scale(1, 1.5);
+  -webkit-transform: skew(0, -10deg) scale(1, 1.5);
+  -moz-transform: skew(0, -10deg) scale(1, 1.5);
+  -o-transform: skew(0, -10deg) scale(1, 1.5);
+  -ms-transform: skew(0, -10deg) scale(1, 1.5);
+`;
+
+const WordArtText = styled.span`
+  letter-spacing: -0.01em;
+  font-family: Impact;
+  background: #4222be;
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
+  background: -moz-linear-gradient(top, #4222be 0%, #a62cc1 73%);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #4222be),
+    color-stop(73%, #a62cc1)
+  );
+  background: -webkit-linear-gradient(top, #4222be 0%, #a62cc1 73%);
+  background: -o-linear-gradient(top, #4222be 0%, #a62cc1 73%);
+  background: -ms-linear-gradient(top, #4222be 0%, #a62cc1 73%);
+  background: linear-gradient(to bottom, #4222be 0%, #a62cc1 73%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4222be', endColorstr='#a62cc1', GradientType=0);
+  -webkit-text-stroke: 0.01em #b28ffd;
+  filter: progid:DXImageTransform.Microsoft.Glow(Color=#b28ffd, Strength=1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+const WordArt = (props) => {
+  return (
+    <WordArtContainer>
+      <WordArtText>{props.children}</WordArtText>
+    </WordArtContainer>
+  );
+};
+
+const WhiteMarquee = styled.marquee`
+  color: white;
+`;
+
+const Text = styled(Item)`
+  color: white;
+`;
 
 export default function Throwback() {
-  return <h1>Welcome to the 80s!</h1>;
+  return (
+    <Container>
+      <Item>
+        <span>
+          <img src={smiley}></img>
+        </span>
+        <span>
+          <WordArt>Welcome!</WordArt>
+        </span>
+        <span>
+          <img src={smiley}></img>
+        </span>
+      </Item>
+      <ConstructionImage src={construction}></ConstructionImage>
+      <WhiteMarquee>You are the 79812th visitor!</WhiteMarquee>
+      <Text>Copyright 1998 (c) Garrit Franke</Text>
+    </Container>
+  );
 }