Timeline into my HTML website doesn't show up - html

Question

The timeline starts here and ends when the CSS title starts, the timeline should have a line and bubbles going on both sides, but instead it's just plain text. It should look like this photo (from https://codyhouse.co/gem/vertical-timeline/):
HTML
<div class="container">
<h1>Garfields Life</h1>
<div class="timeline">
<h2>1978-1980</h2>
<ul>
<li>
<h4>Garfield</h4>
<p>A look at the revolutional story of the iconic comic strip</p>
<time>August 1978</time>
</li>
<li>
<h4>Garfields First Comic</h4>
<p>The Garfield comic strip, drawn by cartoonist Jim Davis, starts in 41 U.S. newspapers.</p>
<time>June 1978</time>
</li>
<li>
<h4>His Popularity Grows</h4>
<p>The popularity of the Garfield comic strip spreads like his waistline. It has now spread to over 100 newspapers.</p>
<time>June 1979</time>
</li>
<li>
<h4>Garfields First Book</h4>
<p>Garfield at Large, his first book, hits #1 on The New York Times bestsellers list and stays there for nearly two years</p>
<time>Febuary 21,1980</time>
</li>
</ul>
<h2>1981-1982</h2>
<ul>
<li>
<h4>Bestsellers List</h4>
<p>Three Garfield books appear simultaneously on The New York Times bestsellers list. "Garfield at large,Garfield gains weight,Garfield bigger then life"</p>
<time>December 1981</time>
</li>
<li>
<h3>Paws Inc was established</h3>
<p>1981 Jim Davis starts Paws, Inc., a creative studio to handle the writing, drawing, and design for all Garfield products. The company is housed in a simple ranch house near Muncie, Indiana.</p>
<time>May 1982</time>
</li>
</ul>
<h2>1982-1983</h2>
<ul>
<li>
<h4>1000 Newspapers</h4>
<p>The Garfield comic strip now appears in 1,000 newspapers.</p>
<time>January 1982</time>
</li>
<li>
<h4>First TV Special</h4>
<p>Garfield’s first animated television special, "Here Comes Garfield", airs on October 25, 1982. At the animation studio, Jim Davis was having trouble animatating Garfield dancing on tiny cat feet. Charles Schulz, creator of Peanuts, who happened to be working in the same studio, solved Jim's problem by suggesting that Garfield stand upright on bigger feet</p>
<time>January 1982</time>
</li>
<li>
<h4>Bestsellers List Again.</h4>
<p>Seven Garfield books appear simultaneously on The New York Times bestsellers list the record has still never been reached</p>
<time> November 1982</time>
</li>
<li>
<h4>Peoples Magazine Cover</h4>
<p>Garfield makes the cover of People magazine as America’s #1 personality and announces the debut of his first television special.</p>
<time>November 1982</time>
</li>
<li>
<h4>Garfield Goes Worldwide</h4>
<p>The comic strip now appears in over 1,400 newspapers in 22 countries and is translated into seven languages.</p>
<time>January-December 1983</time>
</li>
</ul>
<h2>1984-1986</h2>
<ul>
<li>
<h4>First TV Commercial</h4>
<p>Garfield and Jim Davis star in the humorous American Express "Do You Know Me?" TV commercial.</p>
<time>January 1984</time>
</li>
<li>
<h4>Garfield Wins Emmy</h4>
<p>The second animated television special, Garfield on the Town, garners Jim Davis his first of four Emmy Awards.</p>
<time> May 1984</time>
</li>
<li>
<h4>Macy's Thanksgiving Day Parade</h4>
<p>Garfield gets a big head as the giant Garfield helium balloon makes its first appearance in the Macy’s Annual Thanksgiving Day Parade.</p>
<time>November 1984</time>
</li>
<li>
<h4>Garfield's Second Emmy!</h4>
<p>The third animated television special, Garfield in the Rough, wins an Emmy Award for Outstanding Animated Program.</p>
<time>September 1985</time>
</li>
<li>
<h4>Fastest-Growing Comic Strip</h4>
<p>The comic strip now appears in 1,800 newspapers and is called "the fastest-growing comic strip in history.</p>
<time>January 1986</time>
</li>
<li>
<h4>Garfield in Paradise</h4>
<p>His fifth television special, Garfield in Paradise, airs on CBS primetime. "This is my favorite Garfield special." - Jim Davis </p>
<time>May 1986</time>
</li>
</ul>
<h2>1986-1989</h2>
<ul>
<li>
<h4>Another Year, Another Emmy!</h4>
<p>Garfield takes home his third Emmy Award for his fourth television special, Garfield’s Halloween Adventure. </p>
<time>September 1986</time>
</li>
<li>
<h4>Stuck on You: The Phenomenon</h4>
<p>The grinning orange cat suction-cupped to a car window was a best seller, showing up in cars, buses, trains and planes all over the world. More than just a fad, the "Stuck on You" Garfield craze was a full-blown phenomenon, and tens of millions were sold between 1987 and 1989.</p>
<time>November 1987</time>
</li>
<li>
<h4>Garfield in the Rose Bowl Parade</h4>
<p>A new marigold was developed by Burpee to honor the 10th birthday of the popular comic character Garfield on June 19. The exclusive hybrid, which matches Garfield's exact shade of orange, was introduced at the Tournament of Roses Parade in Pasadena on Jan. 1, 1988. More than 100,000 of the flowers were used to decorate the feline's float in the parade. </p>
<time> January 1988</time>
</li>
<li>
<h4>Happy Birthday, Garfield</h4>
<p>Happy Birthday, Garfield is an hour-long television special on CBS celebrating the tenth anniversary of the Garfield comic strip. This behind-the-scenes special is hosted by Garfield creator, Jim Davis.</p>
<time>May 1988</time>
</li>
<li>
<h4>Garfield and Friends Debuts</h4>
<p>Garfield and Friends, an animated television show starring Garfield, debuts on CBS Saturday mornings. Each half-hour episode contains two Garfield cartoons and one U.S. Acres cartoon. Most shows also featured a number of "Garfield Quickies," which were super-short comedy vignettes that acted as info between the stories. </p>
<time> October 1988</time>
</li>
<li>
<h4>Garfield's Fourth Emmy!</h4>
<p>Garfield’s Babes & Bullets wins yet another Emmy Award for Outstanding Animated Program, closing out a decade of domination. Created in the style of classic film noir, Babes & Bullets featured Garfield as Sam Spayed, a tough-talking private eye beset with babes and bruisers as he tries to solve a murder case.</p>
<time>September 1989</time>
</li>
</ul>
<h2>1992-1997</h2>
<ul>
<li>
<h4>Garfield Goes Green</h4>
<p>Reflecting Jim Davis' avid concern for the environment, the orange cat goes green. Jim and Garfield campaign for wetlands restoration and also work with the National Wildlife Federation to create "schoolyard habitats" where students can learn about nature.</p>
<time>January 1992</time>
</li>
<li>
<h4>Mrs. Bush's Story Time</h4>
<p>Garfield joins First Lady Barbara Bush as a guest on the ABC national radio program, Mrs. Bush's Story Time. One million children and their parents listen to Mrs. Bush and Garfield read some of the nation's best-loved children's books.</p>
<time>March 1993</time>
</li>
<li>
<h4>Garfield Bookmobile</h4>
<p>Garfield hitches a ride on the Muncie Public Library Bookmobile. The first of many libraries on wheels to use the image of Garfield to promote reading.</p>
<time>April 1994</time>
</li>
<li>
<h4>"Cool Cat"</h4>
<p>In Germany, Garfield’s music CD, "Cool Cat," tops the charts. An animated music video is produced featuring Garfield as a dancing rock star and record-spinning DJ with various other cats as backup singers.</p>
<time>March-May 1995</time>
</li>
<li>
<h4>Orange Bowl Parade</h4>
<p>A dapper and large Garfield balloon heads south to appear in his first Orange Bowl parade.</p>
<time>January 1996</time>
</li>
<li>
<h4>Indianapolis 500 Parade</h4>
<p>Garfield and Jim Davis rev up for fun as Grand Marshals for the Indianapolis 500 Parade. The auto race, held in Jim's home state of Indiana, is one of the premiere motorsports events in the world.</p>
<time>May 1996</time>
</li>
<li>
<h4>Big, Fat, Hairy Website</h4>
<p>Garfield's first website, www.garfield.com, makes its worldwide debu</p>
<time> December 1996</time>
</li>
<li>
<h4>So Much Stuff...So Little Time</h4>
<p>The fat cat launches his first catalog, Garfield STUFF®! Shopping...it's not just for Christmas anymore!</p>
<time>1997-2016</time>
</li>
</ul>
<h2>2000</h2>
<ul>
<li>
<h4>Theme park</h4>
<p>The Garfield and Odie mascots find cool new summer hangouts at two amusement parks: Kennywood Park in Pennsylvania and Lake Compounce in Connecticut.</p>
<time>April 2000</time>
</li>
<li>
<h4>Garfield Games</h4>
<p>Garfield plays around on his new game website www.garfieldgames.com.</p>
<time> 2001-Now</time>
</li>
<li>
<h4>Garfield Sets a World Record</h4>
<p>"Garfield: Most Widely Syndicated Comic Strip in the World," declares the Guinness Book of World Records.</p>
<time>January 2002</time>
</li>
<li>
<h4>Garfield Turns 25</h4>
<p>Garfield celebrates a quarter-century of cattitude with a 12-city book tour to debut a new book, Garfield at 25: In Dog Years I’d Be Dead. There's also a week-long birthday cruise for fans and a three-day "Fan Birthday Bash" in Muncie, Indiana that includes a Fur Ball, a parade, and an exhibit of 25 Garfield statues designed and decorated by local artisans.</p>
<time>June 2003</time>
</li>
</ul>
<h2>2004-2012</h2>
<ul>
<li>
<h4>Garfield: The Movie</h4>
<p>Garfield: The Movie is the first-ever full-length, live-action/CGI feature film that stars the fat cat and a dimwitted dog named Odie! The movie appears in theaters worldwide and features a cast that includes Breckin Meyer as Jon Arbuckle; Jennifer Love Hewitt as Liz, the veterinarian; and Bill Murray as the voice of Garfield.</p>
<time>June 2004</time>
</li>
<li>
<h4>Garfield: A Tail of Two Kitties<h4>
<p>The sequel to Garfield: The Movie debuts. It’s Garfield: A Tail of Two Kitties. Together, the two films gross over $340 million at the box office. In fact, A Tail of Two Kitties becomes the most popular animated feature EVER released in China!</p>
<time>June 2006</time>
</li>
<li>
<h4>Garfield Gets Real is Released</h4>
<p>Jim Davis serves as writer and producer of a new direct-to-video movie, Garfield Gets Real. This is the first of three DTV movies to be produced by Davis.</p>
<time>September 2007</time>
</li>
<li>
<h4>Voilà! A New TV Show!</h4>
<p>Garfield celebrates his 30th birthday with a brand-new animated television show, Garfield et Cie (The Garfield Show), which debuts on the France 3 network. The fully-animated half-hour show is a production of Paws, Inc. and Dargaud Media, a Paris-based animation and publishing company.</p>
<time>November 2008</time>
</li>
<li>
<h4>Voted the Best!</h4>
<p>People magazine names The Garfield Show one of the best new kids' shows for 2009! </p>
<time>
December 2009</time>
</li>
<li>
<h4>The Garfield Show in Japan</h4>
<p>Cartoon Network launches The Garfield Show in Japan and Asia.</p>
<time>2012-Present</time>
</li>
</ul>
<h2>2012-Present</h2>
<ul>
<li>
<h4>A Classic Is Back<h4>
<p>The classic animated TV show from the '80s and '90s, Garfield and Friends, is released digitally to an eager audience on the video service website HULU.</p>
<time> May 2012</time>
</li>
<li>
<h4>Facebook</h4>
<p>Garfield surpasses the 10 million fan mark on Facebook. It’s clear the world really Likes Garfield!</p>
<time>July 2013</time>
</li>
<li>
<h4>35 Years of Fat Cat Fun!</h4>
<p>Garfield celebrates his 35th birthday in style with a brand-new book: a special collection of Sunday comics, handpicked and annotated by creator Jim Davis.</p>
<time>November 2013</time>
IM DYING OMG I HAVE TO ADD MORE WRITNG TO POST THIS UHGHGHG
</div>
</div>
CSS
The key reason why this isn't working I suspect is the import compass/css3 code isn't working
#import "compass/css3";
$gray: #dddddd;
h1, h2, h3 {
font-weight: 300;
}
.container {
padding: 1em;
}
.timeline {
position: relative;
overflow: auto;
&:before {
content: '';
position: absolute;
height: 100%;
width: 5px;
background: $gray;
left: 0;
}
h2 {
background: $gray;
max-width: 6em;
margin: 0 auto 1em;
padding: 0.5em;
text-align: center;
position: relative;
clear: both;
}
ul {
list-style: none;
padding: 0 0 0 1em;
z-index: 1;
}
li {
background: $gray;
padding: 1em;
margin-bottom: 1em;
position: relative;
&:before {
content: '';
width: 0;
height: 0;
border-top: 1em solid $gray;
border-left: 1em solid transparent;
position: absolute;
left: -1em;
top: 0;
}
}
h3 {
margin-top: 0;
}
time {
font-style: italic;
}
}
#media screen and (min-width: 40em) {
.container {
max-width: 1000px;
margin: 0 auto;
}
.timeline {
&:before {
left: 50%;
}
ul {
padding-left: 0;
max-width: 700px;
margin: 0 auto;
}
li {
width: 42%;
}
li:nth-child(even) {
float: right;
margin-top: 2em;
}
li:nth-child(odd) {
float: left;
&:before {
border-top: 1em solid $gray;
border-right: 1em solid transparent;
right: -1em;
left: auto;
}
}
li:nth-of-type(2n+1) {
clear: both;
}
}
}

Answer 1

CSS
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #999999;
margin-left: -1.5px;
}
Vertical timeline is done, just add bubbles or icons to each event in timeline.

Answer 2

CSS:
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #999999;
margin-left: -1.5px;
}
.timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 30px;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
HTML:
<div class="timeline-badge"></div>
add this line before the main heading (year heading)
Alignment is not done, position your bubble as you like.!!!