rhays/timeline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Rick Hays
2019-08-31 13:44:12 -05:00
commit f097d7ed0c
11 changed files with 988 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
prepros-6.config
.idea

21
LICENSE Normal file
View File

@@ -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.

3
README.md Normal file
View File

@@ -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.

1
css/timeline-min.css vendored Normal file
View File

@@ -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}}

307
css/timeline.css Normal file
View File

@@ -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; } }

412
index.html Normal file
View File

@@ -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>

15
scss/_circle.scss Normal file
View File

@@ -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;
}

12
scss/_color.scss Normal file
View File

@@ -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;

1
scss/_font.scss Normal file
View File

@@ -0,0 +1 @@
$font-stack: 'Arial', sans-serif;

5
scss/_line.scss Normal file
View File

@@ -0,0 +1,5 @@
@mixin line($width, $color, $type, $zindex: 0)
{
border-left: $width $type $color;
z-index: $zindex;
}

209
scss/timeline.scss Normal file
View File

@@ -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; }
}