FreesideWeb/internal/history/index.njk

---
layout: layouts/default
title: History
---

<div class="container bg-white mx-auto w-full h-full">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%"></div>
    
    <!-- 2021 --> 
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2021</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>
        <!-- 2020 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2020</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2019 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2019</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>
     
         <!-- 2018 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2018</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2017 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2017</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>
     
     
        <!-- 2016 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2016</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2015 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2015</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>
    
    <!-- 2014 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2014</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2013 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2013</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2012 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2012</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2011 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2011</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2010 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2010</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2009 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2009</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2008 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2008</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2007 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2007</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>
    
    <!-- 2006 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2006</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2005 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2005</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2004 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2004</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2003 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2003</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2002 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2002</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 2001 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">2001</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 2000 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">2000</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 1999 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">1999</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Some history here</p>
      </div>
    </div>

        <!-- 1998 -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 text-xl">1998</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Some history here</p>
      </div>
    </div>

    <!-- 1997 -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full">
      </div>
      <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-white text-xl">1997</h3>
        <p class="text-sm font-medium leading-snug tracking-wide text-white text-opacity-100">Start of Freeside</p>
      </div>
    </div>
  </div>
</div>