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.
Related Posts
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>