7+ HTML hr with CSS Examples

This post contains a total of 7+ HTML <hr> with CSS Examples with Source Code. All these <hr> Examples are made using Html & CSS.

You can use the source code of these examples with credits to the original owner.

12+ CSS Timeline Examples

8+ CSS Divider Examples

Html <hr> with CSS Examples

1. By Gabriele Romanato

Made by Gabriele Romanato. Simple dotted Hr Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 2em auto;
  max-width: 40em;
  line-height: 1.5;
}

hr {
  margin: 1.5em 0;
  text-align: center;
  border: none;
}

hr:before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #eee;
  margin: 0 0.4em;
}

hr:after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #eee;
  margin: 0 0.4em;
}
</style>
</head>
<body>
  <p>Lorem ipsum</p>
<hr/>
<p>Lorem ipsum</p>
</body>
</html>

2. By Jonathan Freeman

Made by Jonathan Freeman. Subtle hr. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montez);
@import url(https://fonts.googleapis.com/css?family=Jacques+Francois);

body {
  padding: 0.25rem;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Jacques Francois';
  color: #333;
  background: #eee;
  font-size: 1.1em;
}

hr {
  border: 1px solid transparent;
  height: 1em;
  width: 15%;
  position: relative;
}

hr:before, hr:after {
  content: ' V ';
  color: #fff;
  font-family: Montez;
  position: absolute;
}

hr:before {
  left: 0;    
  text-shadow: -1px 0px #ccc;
  -webkit-transform: scaleX(15) scaleY(2) rotate(-90deg);
   -moz-transform: scaleX(15) scaleY(2) rotate(-90deg);
  -ms-transform: scaleX(15) scaleY(2) rotate(-90deg);
  -o-transform: scaleX(15) scaleY(2) rotate(-90deg);
  transform: scaleX(15) scaleY(2) rotate(-90deg);
}
hr:after {
  right: 0;
    text-shadow: 1px 0px #ccc;
  -webkit-transform: scaleX(15) scaleY(2) rotate(90deg);
   -moz-transform: scaleX(15) scaleY(2) rotate(90deg);
  -ms-transform: scaleX(15) scaleY(2) rotate(90deg);
  -o-transform: scaleX(15) scaleY(2) rotate(90deg);
  transform: scaleX(15) scaleY(2) rotate(90deg);
}
</style>
</head>
<body>
<p>Text</p>
<hr>
<p>Text</p>
<hr>
<p>Text</p>
</body>
</html>

3. By James Delibas

Made by James Delibas. Animated <hr>. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
  font-family: 'Ubuntu Mono', sans-serif;
  padding: 0.25rem;
  max-width: 500px;
  margin:0 auto;
  background-color:#180E15;
}

h2{
  color:#FF476A;
  text-align:center;
}

p{
  color:#4A3247;
  text-align:center;
}

hr{
  display:block;
  margin:0 auto;
  height:15px;
  width:105px;
  border:none;
  border-radius: 3px;
  border-left:15px solid #f00000;
  border-right:15px solid #300000;
  animation: KITTAnim 1s infinite ease-in-out alternate;
}

hr:before{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #c00000;
  border-right:15px solid #600000;
  animation: KITTAnimBefore 1s infinite ease-in-out alternate;
}

hr:after{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #300000;
  background-color:#300000;
  border-right:15px solid #300000;
  animation: KITTAnimAfter 1s infinite ease-in-out alternate;
}

hr:nth-child(even)
{
  animation: KARRAnim 1s infinite ease-in-out alternate;
}

hr:nth-child(even):after
{
  animation: KARRAnimAfter 1s infinite ease-in-out alternate;
}

hr:nth-child(even):before
{
  animation: KARRAnimBefore 1s infinite ease-in-out alternate;
}

/**
    Keyframes
Do not try at home

**/


@keyframes KITTAnim {
   0% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   10% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   20% {
      background-color:#300000;
      border-left:15px solid #c00000;
      border-right:15px solid #300000;
   }
   30% {
      background-color:#300000;
      border-left:15px solid #a00000;
      border-right:15px solid #300000;
   }
   40% {
      background-color:#300000;
      border-left:15px solid #600000;
      border-right:15px solid #300000;
   }
   50% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   60% {
      background-color:#a00000;
      border-left:15px solid #300000;
      border-right:15px solid #600000;
   }
   70% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   80% {
      background-color:#f00000;
      border-left:15px solid #300000;
      border-right:15px solid #c00000;
   }
   90% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #f00000;
   }
   100% {
      background-color:#c00000;
      border-left:15px solid #300000;
      border-right:15px solid #f00000;
   }
}

@keyframes KITTAnimBefore {
   0% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   10% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   20% {
      background-color:#c00000;
      border-left:15px solid #f00000;
      border-right:15px solid #a00000;
   }
   30% {
      background-color:#f00000;
      border-left:15px solid #c00000;
      border-right:15px solid #c00000;
   }
   40% {
      background-color:#c00000;
      border-left:15px solid #a00000;
      border-right:15px solid #f00000;
   }
   50% {
      background-color:#a00000;
      border-left:15px solid #600000;
      border-right:15px solid #c00000;
   }
   60% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   70% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #600000;
   }
   80% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   90% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   100% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
}

@keyframes KITTAnimAfter {
   0% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   10% {
      background-color:#300000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   20% {
      background-color:#300000;
      border-left:15px solid #600000;
      border-right:15px solid #300000;
   }
   30% {
      background-color:#600000;
      border-left:15px solid #a00000;
      border-right:15px solid #300000;
   }
   40% {
      background-color:#a00000;
      border-left:15px solid #c00000;
      border-right:15px solid #600000;
   }
   50% {
      background-color:#c00000;
      border-left:15px solid #f00000;
      border-right:15px solid #a00000;
   }
   60% {
      background-color:#f00000;
      border-left:15px solid #c00000;
      border-right:15px solid #c00000;
   }
   70% {
      background-color:#c00000;
      border-left:15px solid #a00000;
      border-right:15px solid #f00000;
   }
   80% {
      background-color:#a00000;
      border-left:15px solid #600000;
      border-right:15px solid #c00000;
   }
   90% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
   100% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #a00000;
   }
}
@keyframes KARRAnim {
   0% {
      background-color:#333300;
      border-left:15px solid #ffff00;
      border-right:15px solid #333300;
   }
   10% {
      background-color:#333300;
      border-left:15px solid #ffff00;
      border-right:15px solid #333300;
   }
   20% {
      background-color:#333300;
      border-left:15px solid #cccc00;
      border-right:15px solid #333300;
   }
   30% {
      background-color:#333300;
      border-left:15px solid #808000;
      border-right:15px solid #333300;
   }
   40% {
      background-color:#333300;
      border-left:15px solid #4c4c00;
      border-right:15px solid #333300;
   }
   50% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   60% {
      background-color:#808000;
      border-left:15px solid #333300;
      border-right:15px solid #4c4c00;
   }
   70% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   80% {
      background-color:#ffff00;
      border-left:15px solid #333300;
      border-right:15px solid #cccc00;
   }
   90% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #ffff00;
   }
   100% {
      background-color:#cccc00;
      border-left:15px solid #333300;
      border-right:15px solid #ffff00;
   }
}

@keyframes KARRAnimBefore {
   0% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   10% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   20% {
      background-color:#cccc00;
      border-left:15px solid #ffff00;
      border-right:15px solid #808000;
   }
   30% {
      background-color:#ffff00;
      border-left:15px solid #cccc00;
      border-right:15px solid #cccc00;
   }
   40% {
      background-color:#cccc00;
      border-left:15px solid #808000;
      border-right:15px solid #ffff00;
   }
   50% {
      background-color:#808000;
      border-left:15px solid #4c4c00;
      border-right:15px solid #cccc00;
   }
   60% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   70% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #4c4c00;
   }
   80% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   90% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   100% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
}

@keyframes KARRAnimAfter {
   0% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   10% {
      background-color:#333300;
      border-left:15px solid #333300;
      border-right:15px solid #333300;
   }
   20% {
      background-color:#333300;
      border-left:15px solid #4c4c00;
      border-right:15px solid #333300;
   }
   30% {
      background-color:#4c4c00;
      border-left:15px solid #808000;
      border-right:15px solid #333300;
   }
   40% {
      background-color:#808000;
      border-left:15px solid #cccc00;
      border-right:15px solid #4c4c00;
   }
   50% {
      background-color:#cccc00;
      border-left:15px solid #ffff00;
      border-right:15px solid #808000;
   }
   60% {
      background-color:#ffff00;
      border-left:15px solid #cccc00;
      border-right:15px solid #cccc00;
   }
   70% {
      background-color:#cccc00;
      border-left:15px solid #808000;
      border-right:15px solid #ffff00;
   }
   80% {
      background-color:#808000;
      border-left:15px solid #4c4c00;
      border-right:15px solid #cccc00;
   }
   90% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
   100% {
      background-color:#4c4c00;
      border-left:15px solid #333300;
      border-right:15px solid #808000;
   }
}
</style>
</head>
<body>
  <h2>Heading</h2>

<p>Text </p>

<hr>

<h2>Haeding</h2>

<p>Text</p>

<hr>
</body>
</html>

4. By Amanda

Made by Amanda. Hr with Dotted Style. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Londrina+Shadow);
@import url(https://fonts.googleapis.com/css?family=Enriqueta);

body {
  padding: 0.25rem;
  max-width: 480px;
  margin: 0 auto;
  font-size:18px
}

h1 {
  font-family:'Londrina Shadow', arial, sans-serif;
  font-size:56px;
  color:#77cc33;
}

p {
  font-family:'Enriqueta', georgia, serif;
  font-size:1em;
  line-height:1.5em;
  color:#444444;
}

hr {
  position:relative;
  background-color:none;
  border:none;
  height:1px;
  width:100%;
  margin: 45px auto;
  text-align:center;
}
hr:after {
  position: relative;
  top: -0.8em;
  font-size:5.0em;
  background: none;
  display: inline-block;
  color:#77cc33;
  font-family: "Londrina Shadow";
  line-height: 1;
  content: ". . . . . . .";
}
</style>
</head>
<body>

<p>Text</p>

<hr>

<p>Text</p>

<hr>

<p>Text</p>
</body>
</html>

5. By Delonn

Made by Delonn. Multiple Hr Styles. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
article {
  max-width: 60%;
  margin: 0 auto;
}
p {
  font-size: 20px;
 }
hr.sep-1 {
  position: relative;
  display: block;
  margin-top: 4em;
  margin-bottom: 4em;
  height: 3px;
  border:none;
  background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #00b9ff, #59d941);
  background-size: 1.5rem, 100%;
  transform: rotate(-5deg);
  transform-origin: 50% 0%;
}

hr.sep-1::after {
  font-family: 'FontAwesome';
  content: '\f061     \f1cb     \f060';
  white-space: pre;
  display: block;
  position: absolute;
  top: 1px;
  left: 50%;
  padding-left: 1rem;
  padding-right: 1rem;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;  
  background-image: linear-gradient(to right, #00b9ff, #59d941);
  padding: 0 1em;
  color: transparent;
  -webkit-background-clip: text;
}
hr.sep-1::before {
  content: '';
  width: 5rem;
  height: 1rem;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background-color: white;
}

hr.sep-2 {
  border: 0; 
  height: 1px; 
  background-image: linear-gradient(to right, #f0f0f0, #00b9ff, #59d941, #f0f0f0);
}
hr.sep-3 {
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
}
hr.sep-3::after {
  content: '§';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 1rem;
  background-color: white;
}
</style>
</head>
<body>
  <article>
  <h1>Heading 1</h1>
  <p>Lorem</p>
  <hr class="sep-1"/>
  <h2>Heading 2</h2>
  <p>Lorem</p>
  <hr class="sep-2" />
  <h3>Heading 3</h3>
  <p>Lorem</p>
  <hr class="sep-3" />
</article>
</body>
</html>

6. By Azragh

Made by Azragh. Fullwidth hr’s. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 3rem 0;
  font-family: Roboto;
  font-size: 1.6rem;
  line-height: 3rem;
  background-color: #fff5e4;
  color: #7c4657;
  overflow-x: hidden;
  overflow-y: scroll;
}

h1, h2, p {
  margin: 3rem 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 30px;
}

hr {
  display: block;
  position: relative;
  width: 100vw;
  height: 2px;
  margin: 3rem 0 5rem -50vw;
  left: 50%;
  border: none;
  border-bottom: 2px dashed rgba(124, 70, 87, 0.25);
  float: left;
}
hr ~ * {
  clear: both;
}
</style>
</head>
<body>
  <div class="container">
	<h1>Lorem ipsum</h2>
	<p>Lorem ipsum dolor</p>
	<hr/>
	<h2>Curatibur rhoncus</h2>
	<p>Lorem ipsum dolor</p>
	<hr/>
	<p>Lorem, ipsum dolor</p>
</div>
</body>
</html>

7. By Grienauer

Made by Grienauer. Animated hr element BAM + Modifiers. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  padding: 40px;
}

.separator {
  margin-top: 25px;
  margin-bottom: 80px;
  border: 0;
}

.separator--line {
  border: 0;
  border-bottom: 5px solid #bada55;
  width: 0;
  -webkit-animation: separator-width 1s ease-out forwards;
          animation: separator-width 1s ease-out forwards;
}

@-webkit-keyframes separator-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes separator-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.separator--dots {
  overflow: visible;
  border: 0;
  content: "";
  background-color: #bada55;
  display: block;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  position: relative;
}
.separator--dots:before {
  content: "";
  background-color: #bada55;
  display: block;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  position: absolute;
  left: -32px;
  -webkit-animation: dot-move-left 1s ease-out forwards;
          animation: dot-move-left 1s ease-out forwards;
}
.separator--dots:after {
  content: "";
  background-color: #bada55;
  display: block;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  position: absolute;
  left: 32px;
  -webkit-animation: dot-move-right 1s ease-out forwards;
          animation: dot-move-right 1s ease-out forwards;
}

@-webkit-keyframes dot-move-right {
  0% {
    left: 0;
  }
  100% {
    left: 32px;
  }
}

@keyframes dot-move-right {
  0% {
    left: 0;
  }
  100% {
    left: 32px;
  }
}
@-webkit-keyframes dot-move-left {
  0% {
    left: 0;
  }
  100% {
    left: -32px;
  }
}
@keyframes dot-move-left {
  0% {
    left: 0;
  }
  100% {
    left: -32px;
  }
}
.separator--dotter {
  border: 0;
  border-bottom: 5px dotted #bada55;
  width: 0;
  -webkit-animation: separator-width 1.5s ease-out forwards;
          animation: separator-width 1.5s ease-out forwards;
}
</style>
</head>
<body>
  <hr class="separator" /> <!-- just a spacer by default -->

<hr class="separator separator--line" />

<hr class="separator separator--dots" />

<hr class="separator separator--dotter" />
  
</body>
</html>

8. By Youri

Made by Youri. HR Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
<style>
.Timeline {
  display: flex;
  align-items: center;
  height: 500px;
}

.event1,
.event2, .event3 {
  position: relative;
}

.event1Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 139px;
  height: 60px;
  top: -70px;
  left: -15px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event2Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 139px;
  height: 60px;
  left: -105px;
  top: 33px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event1Bubble:after,
.event1Bubble:before,
.event2Bubble:after,
.event2Bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}

.event1Bubble:before {
  bottom: -10px;
  left: 13px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
}

.event1Bubble:after {
  bottom: -8px;
  left: 13px;
  border-top-color: #F6F6F6;
  border-width: 12px;
}

.event2Bubble:before {
  bottom: 59px;
  left: 103px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.event2Bubble:after {
  bottom: 57px;
  left: 103px;
  border-top-color: #F6F6F6;
  border-width: 12px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.eventTime {
  display: flex;
}

.DayDigit {
  font-size: 27px;
  font-family: "Arial Black", Gadget, sans-serif;
  margin-left: 10px;
  color: #4C4A4A;
}

.Day {
  font-size: 11px;
  margin-left: 5px;
  font-weight: bold;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #4C4A4A;
}

.MonthYear {
  font-weight: 600;
  line-height: 10px;
  color: #9E9E9E;
  font-size: 9px;
}

.eventTitle {
  font-family: "Arial Black", Gadget, sans-serif;
  color: #a71930;
  font-size: 11px;
  text-transform: uppercase;
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 12px;
  margin-top: -2px;
}

.time {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  width: 50px;
  font-size: 8px;
  margin-top: -3px;
  margin-left: -5px;
  color: #9E9E9E;
}

.eventAuthor {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  color: #9E9E9E;
  font-size: 8px;
  width: 100px;
  top: -8px;
  left: 63px;
}

.event2Author {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  color: #9E9E9E;
  font-size: 8px;
  width: 100px;
  top: 96px;
  left: -32px;
}

.time2{
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  width: 50px;
  font-size: 8px;
  margin-top: -31px;
  margin-left: -5px;
  color: #9E9E9E;
}

.now{
     background-color: #004165;
    color: white;
    border-radius: 7px;
    margin: 5px;
    padding: 4px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid white;
    font-weight: bold;
    box-shadow: 0 0 0 2px #004165
}

.futureGray{
     filter: grayscale(1);
    -webkit-filter: grayscale(1);
  
}

.futureOpacity{
  -webkit-filter: opacity(.3);
  filter: opacity(.3);
  
}
</style>
</head>
<body>
  <div class="Timeline">

  <svg height="5" width="200">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:#004165;stroke-width:5" />
  Sorry, your browser does not support inline SVG.
</svg>

  <div class="event1">
    
    <div class="event1Bubble">
      <div class="eventTime">
        <div class="DayDigit">02</div>
        <div class="Day">
           Wednesday
          <div class="MonthYear">february 2016</div>
        </div>
      </div>
      <div class="eventTitle">Profile Created</div>
    </div>
    <div class="eventAuthor">by Youri Nelson</div>
    <svg height="20" width="20">
       <circle cx="10" cy="11" r="5" fill="#004165" />
     </svg>
    <div class="time">9 : 27 AM</div>
    
  </div>
  
  <svg height="5" width="300">
  <line x1="0" y1="0" x2="300" y2="0" style="stroke:#004165;stroke-width:5" />
  Sorry, your browser does not support inline SVG.
</svg>

  <div class="event2">
    
    <div class="event2Bubble">
      <div class="eventTime">
        <div class="DayDigit">17</div>
        <div class="Day">
           Thursday
          <div class="MonthYear">April 2016</div>
        </div>
      </div>
      <div class="eventTitle">Phone Interview</div>
    </div>
    <div class="event2Author">by Tom Eggleston</div>
      <svg height="20" width="20">
    <circle cx="10" cy="11" r="5" fill="#004165" />
    </svg>
    <div class="time2">1 : 32 PM</div>
  </div>
  
  <svg height="5" width="50">
  <line x1="0" y1="0" x2="50" y2="0" style="stroke:#004165;stroke-width:5" />
  Sorry, your browser does not support inline SVG.
</svg>

  <div class="now">
    NOW
  </div>  
    
  
  <svg height="5" width="150">
  <line x1="0" y1="0" x2="150" y2="0" style="stroke:rgba(162, 164, 163, 0.37);stroke-width:5" />
  Sorry, your browser does not support inline SVG.
</svg>
  <div class="event3 futureGray ">
    <div class="event1Bubble futureOpacity">
      <div class="eventTime">
        <div class="DayDigit">05</div>
        <div class="Day">
           Tuesday
          <div class="MonthYear">May 2016</div>
        </div>
      </div>
      <div class="eventTitle">Anticipated Hire</div>
    </div>
      <svg height="20" width="20">
    <circle cx="10" cy="11" r="5" fill="rgba(162, 164, 163, 0.37)" />
    </svg>
  </div>
<svg height="5" width="50">
<line x1="0" y1="0" x2="50" y2="0" style="stroke:#004165;stroke-width:5" /> 
</svg>
<svg height="20" width="42">
<line x1="1" y1="0" x2="1" y2="20" style="stroke:#004165;stroke-width:2" /> 
<circle cx="11" cy="10" r="3" fill="#004165" />  
<circle cx="21" cy="10" r="3" fill="#004165" />  
<circle cx="31" cy="10" r="3" fill="#004165" />    
<line x1="41" y1="0" x2="41" y2="20" style="stroke:#004165;stroke-width:2" /> 
</svg>  
  
</div>
</body>
</html>

Related Posts