<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Dark Timeline</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<body>
<div class="container">
<div class="timeline">
<div class="timeline-container primary">
<div class="timeline-icon">
<i class="far fa-grin-wink"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Primary</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">1 Hours Ago</p>
</div>
</div>
<div class="timeline-container danger">
<div class="timeline-icon">
<i class="far fa-grin-hearts"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Danger</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">2 Hours Ago</p>
</div>
</div>
<div class="timeline-container success">
<div class="timeline-icon">
<i class="far fa-grin-tears"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Success</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">6 Hours Ago</p>
</div>
</div>
<div class="timeline-container warning">
<div class="timeline-icon">
<i class="far fa-grimace"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Warning</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">1 Day Ago</p>
</div>
</div>
<div class="timeline-container">
<div class="timeline-icon">
<i class="far fa-grin-beam-sweat"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Secondary</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">3 Days Ago</p>
</div>
</div>
<div class="timeline-container info">
<div class="timeline-icon">
<i class="far fa-grin"></i>
</div>
<div class="timeline-body">
<h4 class="timeline-title"><span class="badge">Info</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit, officiis repudiandae, eum recusandae neque dignissimos. Cum fugit laboriosam culpa, repellendus esse commodi deserunt.</p>
<p class="timeline-subtitle">4 Days Ago</p>
</div>
</div>
</div>
</div>
</body>
<section class="author">
<p>Created by: <a href="https://responsivemart.com" target="_blank" title="ResponsiveMart">ResponsiveMart</a></p>
<a href="https://responsivemart.com/product/vertical-dark-timeline/" target="_blank" class="btn">Download Source Code</a>
</section>
@import url('https://fonts.googleapis.com/css?family=Niramit:300,300i,700');
// reset some browser default styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// colors
$primary: #1d8cf8;
$secondary: #4f537b;
$info: #11cdef;
$success: #00bf9a;
$warning: #ff8d72;
$danger: #fd5d93;
// timeline variables
$body-bg: #1e1e2f;
$timeline-before-bg : #222a42;
$timeline-body-bg: #27293d;
$timeline-body-round: 3px;
$timeline-body-shadow: 1px 3px 9px rgba(0,0,0, .1);
body {
font-family: 'K2D', sans-serif;
background: $body-bg;
letter-spacing: 1px;
}
// page container
.container {
max-width: 650px;
margin: 50px auto;
}
// typography
p {
font-weight: 300;
line-height: 1.5;
font-size: 14px;
opacity: .8;
}
// timeline style
.timeline {
position: relative;
padding-left: 4rem;
margin: 0 0 0 30px;
color: white;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: $timeline-body-bg;
}
.timeline-container {
position: relative;
margin-bottom: 2.5rem;;
.timeline-icon {
position: absolute;
left: -88px;
top: 4px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
font-size: 2rem;
background: $secondary;
i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.timeline-body {
background: $timeline-body-bg;
border-radius: $timeline-body-round;
padding: 20px 20px 15px;
box-shadow: $timeline-body-shadow;
&:before {
content: '';
background: inherit;
width: 20px;
height: 20px;
display: block;
position: absolute;
left: -10px;
transform: rotate(45deg);
border-radius: 0 0 0 2px;
}
.timeline-title {
margin-bottom: 1.4rem;
.badge {
background: $secondary;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
}
}
.timeline-subtitle {
font-weight: 300;
font-style: italic;
opacity: .4;
margin-top: 16px;
font-size: 11px;
}
}
// Primary Timeline
&.primary {
.badge,
.timeline-icon {
background: $primary !important;
}
}
// Info Timeline
&.info {
.badge,
.timeline-icon {
background: $info !important;
}
}
// Success Timeline
&.success {
.badge,
.timeline-icon {
background: $success !important;
}
}
// Warning Timeline
&.warning {
.badge,
.timeline-icon {
background: $warning !important;
}
}
// Dnager Timeline
&.danger {
.badge,
.timeline-icon {
background: $danger !important;
}
}
}
}
.author{
font-family: inherit;
padding: 3em;
text-align: center;
width: 100%;
color: white;
a:link,
a:visited{
color: white;
&:hover{
text-decoration: none;
}
}
.btn:link,
.btn:visited{
margin-top: 1em;
text-decoration: none;
display: inline-block;
font-family: inherit;
font-weight: 100;
color: white;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: black;
padding: 1.5em 2rem;
border-radius: 1em;
transition: .5s all;
&:hover,
&:focus,
&:active{
background-color: lighten(black, 10%);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.