commit f097d7ed0ce8127f3e86780901a360e8569855a0
Author: Rick Hays <rhays@haysgang.com>
Date:   Sat Aug 31 13:44:12 2019 -0500

    First Commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..34302ab
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+prepros-6.config
+.idea
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..d449d3e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) <year> <copyright holders>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next
+paragraph) shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
+OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3bb05fe
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# Timeline
+
+Example of a Responsive Timeline, uses HTML and CSS only,  no images so that colors and position is easy to change.
\ No newline at end of file
diff --git a/css/timeline-min.css b/css/timeline-min.css
new file mode 100644
index 0000000..7ddabf3
--- /dev/null
+++ b/css/timeline-min.css
@@ -0,0 +1 @@
+@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");*{margin:0;padding:0}body,html{min-height:100%;min-width:100%}body{background:#ccc;font-family:"Arial", sans-serif}p{margin:10px 0}ul{display:table}ul>li{display:table-row}ul>li:before{content:"\21D2";display:table-cell;padding:5px 5px 0 0;text-align:right}#time-line{border-left:5px solid purple;z-index:-100;display:inline-block;height:100%;margin-left:49.75%;margin-top:70px;min-height:100%;position:absolute}.container{margin:auto;min-width:480px;overflow:hidden;position:relative;width:940px}header{background:#5e6482;color:white;height:70px;text-align:center}#timeline{height:100%;min-height:700px;margin:20px 0}.cube{margin-bottom:20px;min-height:100px;width:100%}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:10;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:auto;text-align:center}.year div{color:white;display:block;font-size:18px;font-weight:bold;margin-top:20px;text-align:center}.event{margin:auto;overflow:hidden;visibility:visible;width:90%}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:26px}.event div.left{float:left;position:relative;width:45%;-webkit-animation:fade;-webkit-animation-duration:2s}.event div.left span{color:white;float:right;font-size:46px;position:relative;top:-10px}.event div.left div{background:white;border-radius:10px;margin-right:30px;padding:15px}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:407px}.event div.right{float:right;position:relative;width:45%;-webkit-animation:fade;-webkit-animation-duration:2s}.event div.right span{color:white;float:left;font-size:46px;position:relative;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right div{background:white;border-radius:10px;margin-left:30px;padding:15px}.event time{background:SlateBlue;color:white;font-size:12px;padding:5px;border-radius:5px}footer{background:#5e6482;bottom:0;color:white;height:40px;text-align:center}@media screen and (max-width:940px){.container{min-width:720px;width:800px}header{height:60px}h1{font-size:23px}#time-line{margin:25px 214px}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:0;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:0 180px;text-align:left}.event div{position:relative;width:340px}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:160px}.event div.left{float:right;margin-right:180px;width:330px}.event div.left span{color:white;float:left;font-size:46px;position:relative;top:0;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right{margin-right:190px;width:320px}.event div.left div{margin-left:30px;margin-right:0}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:160px}}@media screen and (max-width:720px){.container{min-width:300px;width:480px}header{height:60px}h1{font-size:23px}#time-line{margin:25px 63px}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:0;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:0 30px;text-align:left}.event div{position:relative;width:300px}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:24px}.event div.left{margin-right:50px;width:320px}.event div.left span{color:white;float:left;font-size:46px;position:relative;top:0;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right{margin-right:50px;width:320px}.event div.left div{margin-left:30px;margin-right:0}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:24px}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}
\ No newline at end of file
diff --git a/css/timeline.css b/css/timeline.css
new file mode 100644
index 0000000..5044db9
--- /dev/null
+++ b/css/timeline.css
@@ -0,0 +1,307 @@
+/* Example: .circle { @include circle(200px, #999); } */
+@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
+* {
+  margin: 0;
+  padding: 0; }
+
+body, html {
+  min-height: 100%;
+  min-width: 100%; }
+
+body {
+  background: #ccc;
+  font-family: "Arial", sans-serif; }
+
+p {
+  margin: 10px 0; }
+
+ul {
+  display: table; }
+
+ul > li {
+  display: table-row; }
+
+ul > li::before {
+  content: "\21D2";
+  display: table-cell;
+  padding: 5px 5px 0 0;
+  text-align: right; }
+
+#time-line {
+  border-left: 5px solid purple;
+  z-index: -100;
+  display: inline-block;
+  height: 100%;
+  margin-left: 49.75%;
+  margin-top: 70px;
+  min-height: 100%;
+  position: absolute; }
+
+.container {
+  margin: auto;
+  min-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 940px; }
+
+header {
+  background: #5e6482;
+  color: white;
+  height: 70px;
+  text-align: center; }
+
+#timeline {
+  height: 100%;
+  min-height: 700px;
+  margin: 20px 0; }
+
+.cube {
+  margin-bottom: 20px;
+  min-height: 100px;
+  width: 100%; }
+
+.year {
+  background: purple;
+  display: block;
+  height: 70px;
+  line-height: 70px;
+  width: 70px;
+  z-index: 10;
+  border-radius: 35px;
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  margin: auto;
+  text-align: center; }
+
+.year div {
+  color: white;
+  display: block;
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  text-align: center; }
+
+.event {
+  margin: auto;
+  overflow: hidden;
+  visibility: visible;
+  width: 90%; }
+
+.event div.circle-left {
+  background: purple;
+  display: inline-block;
+  height: 33px;
+  line-height: 33px;
+  width: 33px;
+  z-index: 10;
+  border-radius: 16.5px;
+  -webkit-border-radius: 16.5px;
+  -moz-border-radius: 16.5px;
+  margin-left: 26px; }
+
+.event div.left {
+  float: left;
+  position: relative;
+  width: 45%;
+  -webkit-animation: fade;
+  -webkit-animation-duration: 2s; }
+
+.event div.left span {
+  color: white;
+  float: right;
+  font-size: 46px;
+  position: relative;
+  top: -10px; }
+
+.event div.left div {
+  background: white;
+  border-radius: 10px;
+  margin-right: 30px;
+  padding: 15px; }
+
+.event div.circle-right {
+  background: purple;
+  display: inline-block;
+  height: 33px;
+  line-height: 33px;
+  width: 33px;
+  z-index: 10;
+  border-radius: 16.5px;
+  -webkit-border-radius: 16.5px;
+  -moz-border-radius: 16.5px;
+  margin-left: 407px; }
+
+.event div.right {
+  float: right;
+  position: relative;
+  width: 45%;
+  -webkit-animation: fade;
+  -webkit-animation-duration: 2s; }
+
+.event div.right span {
+  color: white;
+  float: left;
+  font-size: 46px;
+  position: relative;
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg); }
+
+.event div.right div {
+  background: white;
+  border-radius: 10px;
+  margin-left: 30px;
+  padding: 15px; }
+
+.event time {
+  background: SlateBlue;
+  color: white;
+  font-size: 12px;
+  padding: 5px;
+  border-radius: 5px; }
+
+footer {
+  background: #5e6482;
+  bottom: 0;
+  color: white;
+  height: 40px;
+  text-align: center; }
+
+@media screen and (max-width: 940px) {
+  .container {
+    min-width: 720px;
+    width: 800px; }
+  header {
+    height: 60px; }
+  h1 {
+    font-size: 23px; }
+  #time-line {
+    margin: 25px 214px; }
+  .year {
+    background: purple;
+    display: block;
+    height: 70px;
+    line-height: 70px;
+    width: 70px;
+    z-index: 0;
+    border-radius: 35px;
+    -webkit-border-radius: 35px;
+    -moz-border-radius: 35px;
+    margin: 0 180px;
+    text-align: left; }
+  .event div {
+    position: relative;
+    width: 340px; }
+  .event div.circle-left {
+    background: purple;
+    display: inline-block;
+    height: 33px;
+    line-height: 33px;
+    width: 33px;
+    z-index: 10;
+    border-radius: 16.5px;
+    -webkit-border-radius: 16.5px;
+    -moz-border-radius: 16.5px;
+    margin-left: 160px; }
+  .event div.left {
+    float: right;
+    margin-right: 180px;
+    width: 330px; }
+  .event div.left span {
+    color: white;
+    float: left;
+    font-size: 46px;
+    position: relative;
+    top: 0;
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg); }
+  .event div.right {
+    margin-right: 190px;
+    width: 320px; }
+  .event div.left div {
+    margin-left: 30px;
+    margin-right: 0; }
+  .event div.circle-right {
+    background: purple;
+    display: inline-block;
+    height: 33px;
+    line-height: 33px;
+    width: 33px;
+    z-index: 10;
+    border-radius: 16.5px;
+    -webkit-border-radius: 16.5px;
+    -moz-border-radius: 16.5px;
+    margin-left: 160px; } }
+
+@media screen and (max-width: 720px) {
+  .container {
+    min-width: 300px;
+    width: 480px; }
+  header {
+    height: 60px; }
+  h1 {
+    font-size: 23px; }
+  #time-line {
+    margin: 25px 63px; }
+  .year {
+    background: purple;
+    display: block;
+    height: 70px;
+    line-height: 70px;
+    width: 70px;
+    z-index: 0;
+    border-radius: 35px;
+    -webkit-border-radius: 35px;
+    -moz-border-radius: 35px;
+    margin: 0 30px;
+    text-align: left; }
+  .event div {
+    position: relative;
+    width: 300px; }
+  .event div.circle-left {
+    background: purple;
+    display: inline-block;
+    height: 33px;
+    line-height: 33px;
+    width: 33px;
+    z-index: 10;
+    border-radius: 16.5px;
+    -webkit-border-radius: 16.5px;
+    -moz-border-radius: 16.5px;
+    margin-left: 24px; }
+  .event div.left {
+    margin-right: 50px;
+    width: 320px; }
+  .event div.left span {
+    color: white;
+    float: left;
+    font-size: 46px;
+    position: relative;
+    top: 0;
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg); }
+  .event div.right {
+    margin-right: 50px;
+    width: 320px; }
+  .event div.left div {
+    margin-left: 30px;
+    margin-right: 0; }
+  .event div.circle-right {
+    background: purple;
+    display: inline-block;
+    height: 33px;
+    line-height: 33px;
+    width: 33px;
+    z-index: 10;
+    border-radius: 16.5px;
+    -webkit-border-radius: 16.5px;
+    -moz-border-radius: 16.5px;
+    margin-left: 24px; } }
+
+@-webkit-keyframes fade {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1c8ccd2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+        <title>Time Line</title>
+        <link rel="stylesheet" href="css/timeline-min.css" type="text/css" />
+    </head>
+    <body>
+        <header>
+            <div class="container">
+                <h1> Work History </h1>
+            </div>
+        </header>
+        <section>
+            <div class="container">
+                <div id="timeline">
+                    <div id="time-line"></div>  <!-- time-line -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>2018</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="2018-10-01 00:00">Oct 2018</time>
+                                        Software Engineer
+                                    </h3>
+                                    <p>
+                                        MSTS<br/>
+                                        Oct 2018 &ndash; May 2019<br/>
+                                        Duration: 8 mos<br/>
+                                        Location: Overland Park, KS<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Full Stack Developer</li>
+                                        <li>Agile development enviorment.</li>
+                                        <li>Maintained client software using Ruby, Ruby on Rails, Perl, Javascript, HTML, CSS and Oracle DB</li>
+                                        <li>Developed code fixes and enhancements for inclusion in future code releases and patches.</li>
+                                        <li>Performed regression and system-level testing to verify software quality and function before it was released.</li>
+                                        <li>Debugged and modified software components.</li>
+                                        <li>Tools used: Rubymine, VS Code, Vi, Jira, Git</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>2001</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="2001-03-01 00:00">Mar 2001</time>
+                                        System Admin / Programmer
+                                    </h3>
+                                    <p>
+                                        Creative Marketing Programs Kansas City<br/>
+                                        Mar 2001 &ndash; May 2018<br/>
+                                        Duration: 17 yrs 3 mos<br/>
+                                        Location: Kansas City, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Full-Stack Development, Interactive Web Sites, Frameworks</li>
+                                        <li>Evaluate, recommend, purchase, configure, and set up new IT equipment and software applications</li>
+                                        <li>Evaluated, and recommended new hires.</li>
+                                        <li>Maintain and troubleshoot 6 servers, 30 PC's and laptops, 8 printers, switches, SonicWall firewall</li>
+                                        <li>Development of eBRC (electronic business reply card) system using ASP and SQL Server</li>
+                                        <li>Development of a fully dynamic company website using PHP, Javascript, jQuery, CSS, MySQL, and CodeIgniter framework, C# backend work.</li>
+                                        <li>Development of PURL (personalized URL) system with mapping using PHP, Javascript, CSS, MySQL, and CodeIgniter</li>
+                                        <li>Built a fully dynamic email system that tracked and reported if the email was opened and attachments opened, using PHP, MySQL, Building on current API (Application Programming Interfaces).</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>2000</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="2000-06-01 00:00">Jun 2000</time>
+                                        Programmer III
+                                    </h3>
+                                    <p>
+                                        Clay County Government department of Information Services<br/>
+                                        Jun 2000 &ndash; Mar 2001<br/>
+                                        Duration: 10 mos<br/>
+                                        Location: Liberty, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Development of the county Intranet and Internet websites. Maintenance of existing systems</li>
+                                        <li>Development of an Intranet Helpdesk system using ASP, Microsoft Access, and SQL 7.0</li>
+                                        <li>Development an on-line phone directory for county employees using ASP and MS Access</li>
+                                        <li>Assisted the web developer on Internet layout and design using Javascript, ASP, and HTML</li>
+                                        <li>Maintenance of county taxation and budgeting systems using PL/B</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1997</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1997-10-01 00:00">Oct 1997</time>
+                                        Programmer / Analyst
+                                    </h3>
+                                    <p>
+                                        Harte Hanks<br/>
+                                        Oct 1997 &ndash; May 2000<br/>
+                                        Duration: 2 yrs 8 mos<br/>
+                                        Location: Lenexa, KS<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Full project life cycle design and development</li>
+                                        <li>Team Lead on a pharmacy sample, fulfillment and tracking system meeting FDA &amp; client specs</li>
+                                        <li>Used Visual Basic 6.0 with RDO connectivity to Oracle and DB2 databases</li>
+                                        <li>Re-design of Oracle database system and re-write of COBOL programs into Visual Basic utilizing OLE</li>
+                                        <li>Build all front-end screens connecting to a VSE/DB2 DB system using Visual Basic 5.0 with RDO</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1995</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1995-02-01 00:00">Feb 1995</time>
+                                        Programmer / Analyst
+                                    </h3>
+                                    <p>
+                                        Professional Telemarketing Inc.<br/>
+                                        Feb 1995 &ndash; Sep 1997<br/>
+                                        Duration: 2 yrs 8 mos<br/>
+                                        Location: Raytown, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Design, layout and programming of client projects</li>
+                                        <li>IVR development including voice recording and setup utilizing Wygant Archietalk IVR language/script</li>
+                                        <li>System administration of LAN and client computers, operating NT and the Alpha Micro 3000 servers</li>
+                                        <li>Hardware/software installation and maintenance of computers, printers, fax systems, and modems</li>
+                                        <li>Participated in the design of the company Website</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1992</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1992-11-01 00:00">Nov 1992</time>
+                                        Computer Programmer
+                                    </h3>
+                                    <p>
+                                        Emergency System Services<br/>
+                                        Nov 1992 &ndash; Feb 1995<br/>
+                                        Duration: 2 yrs 4 mos<br/>
+                                        Location: Kansas City, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Modified and Expanded the CAD (Computer Aided Dispatch) Ambulance Dispatching Software on Unix</li>
+                                        <li>Provided customer service, 24-hour system support, training, setup and testing of hardware /software</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1989</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1989-02-01 00:00">Feb 1989</time>
+                                        Mechanic (Electronics)
+                                    </h3>
+                                    <p>
+                                        TWA<br/>
+                                        Feb 1989 &ndash; Oct 1992<br/>
+                                        Duration: 3 yrs 9 mos<br/>
+                                        Location: Kansas City, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Test and repair of various flight panel gauges and instruments</li>
+                                        <li>Work in the Automated Test Equipment dept. on auto-pilot systems and navigational equipment</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1988</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1988-07-01 00:00">Jul 1988</time>
+                                        Owner
+                                    </h3>
+                                    <p>
+                                        Repair Emporium<br/>
+                                        Jul 1988 &ndash; Feb 1989<br/>
+                                        Duration: 8 mos<br/>
+                                        Location: North Kansas City, MO<br/>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1985</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1985-12-01 00:00">Dec 1985</time>
+                                        Technical Engineer
+                                    </h3>
+                                    <p>
+                                        Butler National Corporation<br/>
+                                        Dec 1985 &ndash; Jul 1988<br/>
+                                        Duration: 2 yrs 8 mos<br/>
+                                        Location: Lenexa, KS<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Testing and repair of automatic dialing alarm systems</li>
+                                        <li>Provided customer service, training, on-site repairs, and assistance to several internal departments</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1984</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1984-01-01 00:00">Jan 1984</time>
+                                        Electronic Technician
+                                    </h3>
+                                    <p>
+                                        CPS<br/>
+                                        Jan 1984 &ndash; Dec 1985<br/>
+                                        Duration: 2 yrs<br/>
+                                        Location: Kansas City, MO<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Troubleshoot, repair, and install car stereo equipment</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="year">
+                            <div>1982</div>
+                        </div>  <!-- year -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-right"></div>
+                            <div class="right">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1982-08-01 00:00">Aug 1982</time>
+                                        Bio-medical Technician
+                                    </h3>
+                                    <p>
+                                        American Monitor Corporation<br/>
+                                        Aug 1982 &ndash; Nov 1983<br/>
+                                        Duration: 1 yrs 4 mos<br/>
+                                        Location: Indianapolis, IN<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Troubleshoot and repair of medical equipment inside hospital laboratories</li>
+                                        <li>I covered the Midwest region: MO, IL, AR, TN</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+
+                    <div class="cube">
+                        <div class="event">
+                            <div class="circle-left"></div>
+                            <div class="left">
+                                <span class="glyphicon glyphicon-play"></span>
+                                <div>
+                                    <h3>
+                                        <time datetime="1982-06-21 00:00">Jun 1982</time>
+                                        Electronics Institue
+                                    </h3>
+                                    <p>
+                                        Electronics Institute<br/>
+                                        Degree: Communications and Digital Technology<br/>
+                                        Field Of Study: Electronics<br/>
+                                        Grade: 3.7<br/>
+                                        Dates attended or expected graduation 1981 &ndash; 1982<br/>
+                                    </p>
+                                    <ul>
+                                        <li>Graduated 06/21/1982</li>
+                                        <li>Diploma in Communications and Digital Technology</li>
+                                        <li>Award - Outstanding Achievement</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>  <!-- event -->
+                    </div>  <!-- cube -->
+                </div>  <!-- timeline -->
+            </div>  <!-- container -->
+        </section>
+
+        <footer>
+            <div class="container">
+                <p>Copyright &copy; 2019, Rick Hays</p>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/scss/_circle.scss b/scss/_circle.scss
new file mode 100644
index 0000000..051afd5
--- /dev/null
+++ b/scss/_circle.scss
@@ -0,0 +1,15 @@
+/* Example: .circle { @include circle(200px, #999); } */
+
+@mixin circle($size, $color, $display, $zindex: 0)
+{
+  background: $color;
+  display: $display;
+  height: $size;
+  line-height: $size;
+  width: $size;
+  z-index: $zindex;
+
+  border-radius: $size/2;
+  -webkit-border-radius: $size/2;
+  -moz-border-radius: $size/2;
+}
diff --git a/scss/_color.scss b/scss/_color.scss
new file mode 100644
index 0000000..5f81692
--- /dev/null
+++ b/scss/_color.scss
@@ -0,0 +1,12 @@
+$background-color: #ccc;
+$big-circle-color-bg: purple;
+$big-circle-color-fg: white;
+$event-color: white;
+$event-date-color: SlateBlue;
+$event-arrow-color: white;
+$footer-background-color: #5e6482;
+$footer-color: white;
+$header-background-color: #5e6482;
+$header-color: white;
+$line-color: purple;
+$little-circle-color: purple;
diff --git a/scss/_font.scss b/scss/_font.scss
new file mode 100644
index 0000000..36aeb35
--- /dev/null
+++ b/scss/_font.scss
@@ -0,0 +1 @@
+$font-stack: 'Arial', sans-serif;
diff --git a/scss/_line.scss b/scss/_line.scss
new file mode 100644
index 0000000..2a7b0fe
--- /dev/null
+++ b/scss/_line.scss
@@ -0,0 +1,5 @@
+@mixin line($width, $color, $type, $zindex: 0)
+{
+  border-left: $width $type $color;
+  z-index: $zindex;
+}
diff --git a/scss/timeline.scss b/scss/timeline.scss
new file mode 100644
index 0000000..2f50e08
--- /dev/null
+++ b/scss/timeline.scss
@@ -0,0 +1,209 @@
+@import "color.scss";
+@import "font.scss";
+@import "circle.scss";
+@import "line.scss";
+@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
+
+* { margin: 0; padding: 0; }
+
+body, html { min-height: 100%; min-width: 100%}
+
+body
+{
+    background: $background-color;
+    font-family: $font-stack;
+}
+
+p { margin: 10px 0; }
+
+ul { display: table}
+ul>li { display: table-row; }
+ul>li::before { content: "\21D2"; display: table-cell;  padding: 5px 5px 0 0; text-align: right }
+
+#time-line
+{
+    @include line(5px, $line-color, solid, -100);
+    display:  inline-block;
+    height: 100%;
+    margin-left: 49.75%;
+    margin-top: 70px;
+    min-height: 100%;
+    position: absolute;
+}
+
+.container
+{
+    margin: auto;
+    min-width: 480px;
+    overflow: hidden;
+    position: relative;
+    width: 940px;
+}
+
+header
+{
+    background: $header-background-color;
+    color: $header-color;
+    height: 70px;
+    text-align: center;
+}
+
+#timeline
+{
+    height: 100%;
+    min-height: 700px;
+    margin: 20px 0;
+}
+
+.cube
+{
+    margin-bottom: 20px;
+    min-height: 100px;
+    width: 100%;
+}
+
+.year
+{
+    @include circle(70px, $big-circle-color-bg, block, 10);
+    margin: auto;
+    text-align: center;
+}
+
+.year div
+{
+    color: $big-circle-color-fg;
+    display: block;
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.event
+{
+    margin: auto;
+    overflow: hidden;
+    visibility: visible;
+    width: 90%;
+}
+
+.event div.circle-left
+{
+    @include circle(33px, $little-circle-color, inline-block, 10);
+    margin-left: 26px;
+}
+
+.event div.left
+{
+    float: left;
+    position: relative;
+    width: 45%;
+    -webkit-animation: fade;
+    -webkit-animation-duration: 2s;
+}
+
+.event div.left span
+{
+  color: $event-arrow-color;
+  float: right;
+  font-size: 46px;
+  position: relative;
+  top: -10px;
+}
+
+.event div.left div
+{
+    background: $event-color;
+    border-radius: 10px;
+    margin-right: 30px;
+    padding: 15px;
+}
+
+.event div.circle-right
+{
+    @include circle(33px, $little-circle-color, inline-block, 10);
+    margin-left: 407px;
+}
+
+.event div.right
+{
+    float: right;
+    position: relative;
+    width: 45%;
+    -webkit-animation: fade;
+    -webkit-animation-duration: 2s;
+}
+
+.event div.right span
+{
+  color: $event-arrow-color;
+  float: left;
+  font-size: 46px;
+  position: relative;
+  transform: rotate(180deg);
+}
+
+
+.event div.right div
+{
+    background: $event-color;
+    border-radius: 10px;
+    margin-left: 30px;
+    padding: 15px;
+}
+
+.event time
+{
+    background: $event-date-color;
+    color: white;
+    font-size: 12px;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+footer
+{
+    background: $footer-background-color;
+    bottom: 0;
+    color: $footer-color;
+    height: 40px;
+    text-align: center;
+}
+
+@media screen and (max-width: 940px)
+{
+    .container { min-width: 720px; width: 800px; }
+    header { height: 60px; }
+    h1{ font-size: 23px; }
+    #time-line { margin: 25px 214px; }
+    .year { @include circle(70px, $big-circle-color-bg, block); margin: 0 180px; text-align: left; }
+    .event div { position: relative; width: 340px}
+    .event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
+    .event div.left { float: right; margin-right: 180px; width: 330px}
+    .event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
+    .event div.right { margin-right: 190px; width: 320px}
+    .event div.left div { margin-left: 30px; margin-right: 0 }
+    .event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
+}
+
+@media screen and (max-width: 720px)
+{
+  .container { min-width: 300px; width: 480px; }
+  header { height: 60px;}
+  h1{ font-size: 23px; }
+  #time-line { margin: 25px 63px; }
+  .year { @include circle(70px, $big-circle-color-bg, block); margin: 0 30px; text-align: left; }
+  .event div { position: relative; width: 300px}
+  .event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
+  .event div.left { margin-right: 50px; width: 320px}
+  .event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
+  .event div.right { margin-right: 50px; width: 320px}
+  .event div.left div { margin-left: 30px; margin-right: 0 }
+  .event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
+}
+
+@-webkit-keyframes fade
+{
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}