diff --git a/static/src/js/lot_hero.js b/static/src/js/lot_hero.js
new file mode 100644
index 0000000000000000000000000000000000000000..adafda01eb8b9ee049dcdadb9d355fe9ca2380d0
--- /dev/null
+++ b/static/src/js/lot_hero.js
@@ -0,0 +1,171 @@
+function hero() {
+  var timeouts = new Array(3);
+  let green = "#0F7C11";
+  let radius = 7;
+  let windowWidth;
+  let breakPoint = 768;
+  
+  var loeWrapper = document.getElementById("loe-wrapper");
+  var loeOf = document.getElementById("of");
+  var canvas = document.getElementById("hero");
+  var bottomWrapper = document.getElementById("bottom-wrapper");
+  var registerLink = document.getElementById("register-link");
+  var thingsHeading = document.getElementById("things-heading");
+  
+  var ctx = canvas.getContext("2d");
+  var canvasPadding = 10;
+  
+  function positionRegisterLink() {
+    registerLink.style.position = 'static';
+    registerLink.style.float = 'none'; 
+    var offset = registerLink.offsetTop - loeOf.offsetTop - 0.25 * loeOf.offsetHeight;
+    if (window.innerWidth >= breakPoint) {
+      registerLink.style.top = -1 * offset + 'px';
+      registerLink.style.position = 'relative';
+      registerLink.style.float = 'right'; 
+    }
+  }
+  
+  function getCanvasPos() {
+    var canvasRatio = window.innerWidth < 576 ? 1.1 : 2.5;
+    var width = loeWrapper.offsetWidth - loeOf.offsetWidth - (2 * canvasPadding);
+    var minHeight = 180;
+    if (window.innerWidth >= breakPoint) {
+      width -= registerLink.offsetWidth;
+      minHeight = 260;
+    }
+    
+    return {
+      width: width,
+      height: Math.max(width / canvasRatio, minHeight),
+      left: loeOf.offsetWidth + canvasPadding,
+      top: -1.25 * loeOf.offsetHeight,
+    }
+  }
+  
+  function sizeCanvas(pos) {
+    var c = canvas;
+    c.width = pos.width;
+    c.height = pos.height;
+    c.style.width = pos.width + 'px';
+    c.style.height = pos.height + 'px';
+    c.style.position = 'relative';
+    c.style.left = pos.left + 'px';
+    c.style.top = pos.top + 'px';
+    c.style.marginBottom = c.style.top;
+  }
+  
+  function positionThingsHeading() {
+    thingsHeading.style.position = 'relative';
+    thingsHeading.style.display = 'inline-block';
+    var left = canvas.offsetWidth - thingsHeading.offsetWidth
+    if(window.innerWidth >= breakPoint) {
+      left += registerLink.offsetWidth;
+    }
+    thingsHeading.style.left = left + 'px';
+    thingsHeading.style.top = -0.7 * thingsHeading.offsetHeight + 'px';
+    thingsHeading.style.marginBottom = thingsHeading.style.top;
+  }
+  
+  function positionDate() {
+    bottomWrapper.style.position = 'static';
+    bottomWrapper.style.marginBottom = 0;
+    var offs = -0.7 * thingsHeading.offsetHeight;
+    offs -= bottomWrapper.offsetHeight * 0.8;
+    if (window.innerWidth >= 576) {
+      bottomWrapper.style.position = 'relative';
+      bottomWrapper.style.top = offs + 'px';
+      bottomWrapper.style.marginBottom = offs + 20 + 'px';
+    }
+  }
+  
+  let drawLine = (ind, context, startX, startY, endX, endY, color) => {
+    let dx = startX - endX;
+    let dy = startY - endY;
+    
+    let theta = Math.atan2(dy, dx);
+    var x = startX - 15 * Math.cos(theta);
+    var y = startY - 15 * Math.sin(theta);
+    
+    endX = endX + 30 * Math.cos(theta);
+    endY = endY + 30 * Math.sin(theta)
+    let delay = 8;
+    let increments = 2080 / delay;
+    let xAdjust = (endX - startX) / increments;
+    let yAdjust = (endY - startY) / increments;
+    let counter = 1;
+    
+    let line = () => {
+      context.beginPath();
+      context.lineWidth = 1.9;
+      context.moveTo(x, y);
+      x = x + xAdjust;
+      y = y + yAdjust;
+      context.lineTo(x, y);
+      context.strokeStyle = color;
+      context.stroke();
+      counter++;
+      if (counter <= increments) {
+        timeouts[ind] = window.setTimeout(line, delay);
+      }
+    };
+    timeouts[ind] = window.setTimeout(line, delay);
+  }
+  
+  let drawCircle = (context, x, y, radius, color) => {
+    context.beginPath();
+    context.fillStyle = color;
+    context.arc(x, y, radius, 0, 2 * Math.PI);
+    context.fill();
+  }
+  
+  function windowResize() {
+    if(window.innerWidth === windowWidth) {
+      // Catch mobile scroll event, as this can hide/unhide the address
+      // bar and fire a resize event.
+      return;
+    } else {
+      windowWidth = window.innerWidth;
+    }
+    for(var i = 0; i < 3; i++) {
+      window.clearTimeout(timeouts[i]);
+    }
+    var canvasPos = getCanvasPos();
+    sizeCanvas(canvasPos)
+    positionThingsHeading();
+    positionDate();
+    
+    function getLowestPoint() {
+      var pos = thingsHeading.offsetLeft - canvas.offsetLeft - 20;
+      if(pos < 10) {
+        pos = thingsHeading.offsetLeft + 0.5 * thingsHeading.offsetWidth;
+      }
+      return pos
+    }
+    
+    let points = [
+      [10, 10],
+      [canvasPos.width - 10, 10],
+      [
+        getLowestPoint(),
+        canvasPos.height -10
+      ]
+    ];
+    
+    positionRegisterLink();
+    
+    drawCircle(ctx, points[0][0], points[0][1], radius, green);
+    drawCircle(ctx, points[1][0], points[1][1], radius, green);
+    drawCircle(ctx, points[2][0], points[2][1], radius, green);
+    
+    drawLine(0, ctx, points[0][0], points[0][1], points[2][0], points[2][1], green);
+    drawLine(1, ctx, points[2][0], points[2][1], points[1][0], points[1][1], green);
+    drawLine(2, ctx, points[1][0], points[1][1], points[0][0], points[0][1], green);
+    
+  }
+  
+  windowResize();
+  window.addEventListener('resize', windowResize, false);
+}
+
+hero();
\ No newline at end of file