fwi timeline

by mrjordy

HTML

<!-- The Timeline -->

<ul class="timeline">

  <!-- Item 97 -->
  <li class="tlItem1">
    <div class="direction-l">
      <div class="flag-wrapper">
        <span class="flag">USFF</span>
        <span class="time-wrapper"><span class="time">AUG 2018</span></span>
      </div>
      <div class="desc">Falconwood, Inc. has been awarded a one (1) Base year contract with (4) one (1) year option periods in support of the U.S. Fleet Forces Command (USFF). Falconwood, Inc. will provide support services for the management and processing of Assessment and Authorization (A&amp;A) of systems and applications used and operated by USFF Communications and Information Systems Division (N6) and various Echelon III commands. Support task include but not limited to the processing, planning, execution and management of A&amp;A packages within the Risk Management Framework (RMF) system.</div>
    </div>
  </li>

  <!-- Item 98 -->
  <li class="tlItem2">
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">SPAWAR</span>
        <span class="time-wrapper"><span class="time">MAR 2018</span></span>
      </div>
      <div class="desc">Falconwood, Inc. was authorized to restart work on a one (1) Base year contract with (4) one (1) year option periods in support of the Department of the Navy (DON) Space and Naval Warfare Systems Command (SPAWAR) for professional and technical Engineering and Logistics (E&amp;L) support services for the SPAWAR Program Executive Office for Enterprise Information Systems (PEO-EIS) and its associated Program Management Offices (PMOs), including the Naval Enterprise Network (NEN) (Program Manager - Warfare (PMW) 205), Navy Enterprise Business Solutions (NAVEBS) (PMW-220), Global Combat Support System Marine Corps (GCSS-MC) (PMW- 9 230), the Sea Warrior Program (SWP) (PMW-240), DON Enterprise Software Licensing (ESL) 10 (PMM-110), Data Center and Application Optimization, and Security Cooperation Enterprise 11 Solutions...

CSS

body {
  margin: 0;
  padding: 0;
  background: #454d51;
  color: rgb(50, 50, 50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 50vw;
  margin-left: calc(50vw - 20px);
  margin-top: 20px;
  list-style-type: none;
  padding-inline-start: 0;
}

.timeline:before {
  position: absolute;
  top: 0;
  content: ' ';
  display: block;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent 0%, white 8%, white 92%, transparent 100%);
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 80%;
  float: right;
  text-align: right;
  margin-right: calc(29px + 50vw);
}

.direction-r {
  position: relative;
  width: 80%;
  margin-left: 30px;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248, 248, 248);
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-r .flag {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-l .flag::before,
.direction-r .flag::before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255, 80, 80);
  z-index: 10;
}

.direction-r .flag::before {
  left: -40px;
}

.direction-l .flag::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgb(248, 248, 248);
  pointer-events: none;
  width: 26px;
}

.direction-r...

JavaScript

// 173f5f
// 20639b
// 3caea3
// f6d55c
// ed553b