code-boxx/0-CSS-TIMELINE.MD

## 0-CSS-TIMELINE.MD

      
    Raw
  

              0-CSS-TIMELINE.MD
            
          
    HTML CSS RESPONSIVE VERTICAL TIMELINE


https://code-boxx.com/simple-pure-css-timeline/
https://www.youtube.com/watch?v=GNHGTmCQ9ss

LICENSE

Copyright by Code Boxx
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 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.

  
## alt-vertical-timeline.css
/* (A) CONTAINER & SHARED */
.alt-vtl, .alt-vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.alt-vtl {
  margin: 0 auto; /* horizontally centered */
  max-width: 600px; /* optional */
}
.alt-vtl, .alt-event { position: relative; } /* required for absolute position to work properly */
.alt-vtl::before, .alt-event::before, .alt-event::after { position: absolute; }

/* (B) VERTICAL LINE */
.alt-vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;

  /* (B2) POSITION IN THE MIDDLE */
  top: 0; bottom: 0; left: 50%;
}

/* (C) EVENTS */
.alt-event {
  width: 45%;
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #296eb5;
}
.alt-event:nth-child(even) { left: 55%; } /* alternate right */
.alt-event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }

/* (D) CIRCLE ON VERTICAL LINE */
.alt-event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #296eb5;
  background: #fff;

  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: 107%;
}
.alt-event:nth-child(even)::after { left: -15%; } /* alternate */

/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.alt-event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent;
  border-left-color: #296eb5;
  border-right: 0;

  /* (E2) POSITION TO THE RIGHT */
  top: 20%; left: 100%;
}

/* (E3) ALTERNATE */
.alt-event:nth-child(even)::before {
  border-right: 10px solid #296eb5;
  border-left: 0;
  left: auto; right: 100%;
}

## alt-vertical-timeline.html
<!DOCTYPE html>
<html>
  <head>
    <title>Alternate Vertical Timeline Demo</title>
    <link href="alt-vertical-timeline.css" rel="stylesheet">
  </head>
  <body>
    <div class="alt-vtl">
      <div class="alt-event">
        <p class="date">11 Mar 2237 12:34</p>
        <p class="txt">Evil Cates invaded planet Doge.</p>
      </div>
      <div class="alt-event">
        <p class="date">12 Mar 2237 14:23</p>
        <p class="txt">Cates ate Doge food.</p>
      </div>
      <div class="alt-event">
        <p class="date">13 Mar 2237 20:12</p>
        <p class="txt">Cates took over the Doge beds.</p>
      </div>
      <div class="alt-event">
        <p class="date">14 Mar 2237 08:11</p>
        <p class="txt">Hoomans to the rescue.</p>
      </div>
      <div class="alt-event">
        <p class="date">15 Mar 2237 14:27</p>
        <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
      </div>
    </div>
  </body>
</html>

## vertical-timeline.css
/* (A) CONTAINER & SHARED */
.vtl, .vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.vtl {
  padding-left: 50px; /* "reserve space" for vertical line */
  max-width: 600px; /* optional */
}
.vtl, .event { position: relative; } /* required for absolute position to work properly */
.vtl::before, .event::before, .event::after { position: absolute; }

/* (B) VERTICAL LINE */
.vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;

  /* (B2) POSITION TO THE LEFT */
  top: 0; bottom: 0; left: 15px;
}

/* (C) EVENTS */
.event {
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #b52929;
}
.event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }

/* (D) CIRCLE ON VERTICAL LINE */
.event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #b52929;
  background: #fff;

  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: -44px;
}

/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent;
  border-right-color: #b52929;
  border-left: 0;

  /* (E2) POSITION TO THE LEFT */
  top: 20%; left: -10px;
}

## vertical-timeline.html
<!DOCTYPE html>
<html>
  <head>
    <title>Pure CSS Vertical Timeline Demo</title>
    <link href="vertical-timeline.css" rel="stylesheet">
  </head>
  <body>
    <div class="vtl">
      <div class="event">
        <p class="date">11 Mar 2237 12:34</strong>
        <p class="txt">Evil Cates invaded planet Doge.</p>
      </div>
      <div class="event">
        <p class="date">12 Mar 2237 14:23</strong>
        <p class="txt">Cates ate Doge food.</p>
      </div>
      <div class="event">
        <p class="date">13 Mar 2237 20:12</strong>
        <p class="txt">Cates took over the Doge beds.</p>
      </div>
      <div class="event">
        <p class="date">14 Mar 2237 08:11</strong>
        <p class="txt">Hoomans to the rescue.</p>
      </div>
      <div class="event">
        <p class="date">15 Mar 2237 14:27</strong>
        <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
      </div>
    </div>
  </body>
</html>
	/* (A) CONTAINER & SHARED */
	.alt-vtl, .alt-vtl * {
	font-family: 'Courier New', Courier, monospace;
	box-sizing: border-box;
	}
	.alt-vtl {
	margin: 0 auto; /* horizontally centered */
	max-width: 600px; /* optional */
	}
	.alt-vtl, .alt-event { position: relative; } /* required for absolute position to work properly */
	.alt-vtl::before, .alt-event::before, .alt-event::after { position: absolute; }

	/* (B) VERTICAL LINE */
	.alt-vtl::before {
	/* (B1) DRAW VERTICAL LINE */
	content: ""; width: 5px;
	background: #a9a9a9;

	/* (B2) POSITION IN THE MIDDLE */
	top: 0; bottom: 0; left: 50%;
	}

	/* (C) EVENTS */
	.alt-event {
	width: 45%;
	padding: 20px; margin-bottom: 10px; border-radius: 5px;
	background: #296eb5;
	}
	.alt-event:nth-child(even) { left: 55%; } /* alternate right */
	.alt-event p {
	padding: 0; margin: 0;
	color: #fff;
	}
	p.date { font-size: 1.1em; font-weight: 700; }
	p.txt { font-size: 0.9em; }

	/* (D) CIRCLE ON VERTICAL LINE */
	.alt-event::after {
	/* (D1) DRAW CIRCLE */
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 4px solid #296eb5;
	background: #fff;

	/* (D2) POSITION ON VERTICAL LINE */
	top: 20%; left: 107%;
	}
	.alt-event:nth-child(even)::after { left: -15%; } /* alternate */

	/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
	.alt-event::before {
	/* (E1) DRAW TRIANGLE */
	content: "";
	border: 10px solid transparent;
	border-left-color: #296eb5;
	border-right: 0;

	/* (E2) POSITION TO THE RIGHT */
	top: 20%; left: 100%;
	}

	/* (E3) ALTERNATE */
	.alt-event:nth-child(even)::before {
	border-right: 10px solid #296eb5;
	border-left: 0;
	left: auto; right: 100%;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Alternate Vertical Timeline Demo</title>
	<link href="alt-vertical-timeline.css" rel="stylesheet">
	</head>
	<body>
	<div class="alt-vtl">
	<div class="alt-event">
	<p class="date">11 Mar 2237 12:34</p>
	<p class="txt">Evil Cates invaded planet Doge.</p>
	</div>
	<div class="alt-event">
	<p class="date">12 Mar 2237 14:23</p>
	<p class="txt">Cates ate Doge food.</p>
	</div>
	<div class="alt-event">
	<p class="date">13 Mar 2237 20:12</p>
	<p class="txt">Cates took over the Doge beds.</p>
	</div>
	<div class="alt-event">
	<p class="date">14 Mar 2237 08:11</p>
	<p class="txt">Hoomans to the rescue.</p>
	</div>
	<div class="alt-event">
	<p class="date">15 Mar 2237 14:27</p>
	<p class="txt">Evil cates gone. Victory for good boys and girls.</p>
	</div>
	</div>
	</body>
	</html>
	/* (A) CONTAINER & SHARED */
	.vtl, .vtl * {
	font-family: 'Courier New', Courier, monospace;
	box-sizing: border-box;
	}
	.vtl {
	padding-left: 50px; /* "reserve space" for vertical line */
	max-width: 600px; /* optional */
	}
	.vtl, .event { position: relative; } /* required for absolute position to work properly */
	.vtl::before, .event::before, .event::after { position: absolute; }

	/* (B) VERTICAL LINE */
	.vtl::before {
	/* (B1) DRAW VERTICAL LINE */
	content: ""; width: 5px;
	background: #a9a9a9;

	/* (B2) POSITION TO THE LEFT */
	top: 0; bottom: 0; left: 15px;
	}

	/* (C) EVENTS */
	.event {
	padding: 20px; margin-bottom: 10px; border-radius: 5px;
	background: #b52929;
	}
	.event p {
	padding: 0; margin: 0;
	color: #fff;
	}
	p.date { font-size: 1.1em; font-weight: 700; }
	p.txt { font-size: 0.9em; }

	/* (D) CIRCLE ON VERTICAL LINE */
	.event::after {
	/* (D1) DRAW CIRCLE */
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 4px solid #b52929;
	background: #fff;

	/* (D2) POSITION ON VERTICAL LINE */
	top: 20%; left: -44px;
	}

	/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
	.event::before {
	/* (E1) DRAW TRIANGLE */
	content: "";
	border: 10px solid transparent;
	border-right-color: #b52929;
	border-left: 0;

	/* (E2) POSITION TO THE LEFT */
	top: 20%; left: -10px;
	}