Skip to content

Instantly share code, notes, and snippets.

@redblue9771

redblue9771/index.css

Last active December 1, 2019 22:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save redblue9771/4b7649b07ccf3a8c96c29be8de033a7f to your computer and use it in GitHub Desktop.
Save redblue9771/4b7649b07ccf3a8c96c29be8de033a7f to your computer and use it in GitHub Desktop.
Download ZIP
Awesome Timeline
Raw
index.css
.main-timeline{
overflow: hidden;
position: relative;
padding: 60px 0;
}
.main-timeline:before{
content: "";
width: 1px;
height: 100%;
background: #cfcdcd;
position: absolute;
top: 0;
left: 50%;
}
.main-timeline .timeline{
width: 50%;
clear: both;
position: relative;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
content: "";
display: block;
clear: both;
}
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before{
content: "";
width: 11px;
height: 11px;
background: #cfcdcd;
box-sizing: content-box;
border: 5px solid #fff;
box-shadow: 0 0 0 2px #cfcdcd;
position: absolute;
top: -54px;
right: -11px;
transform: rotate(45deg);
}
.main-timeline .timeline:last-child:before{
top: auto;
bottom: -54px;
}
.main-timeline .timeline:last-child:nth-child(even):before{
right: auto;
left: -11px;
}
.main-timeline .timeline-icon{
width: 24px;
height: 24px;
background: #fff;
border: 1px solid #cfcdcd;
position: absolute;
top: 17px;
right: -13px;
z-index: 1;
transform: rotate(45deg);
}
.main-timeline .timeline-icon:before{
content: "";
display: block;
width: 15px;
height: 15px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background-color 0.2s ease 0s;
}
.main-timeline .timeline:hover .timeline-icon:before{ background: #39b3ff; }
.main-timeline .timeline-content{
width: 85%;
padding: 18px 30px;
background: #fff;
text-align: right;
float: left;
border: 1px solid transparent;
position: relative;
transition: all 0.3s ease 0s;
}
.main-timeline .timeline:hover .timeline-content{
border: 1px solid #cfcdcd;
}
.main-timeline .timeline-content:before{
content: "";
display: block;
width: 14px;
height: 14px;
background: #fff;
border: 1px solid #cfcdcd;
position: absolute;
top: 21px;
right: -7.3px;
transform: rotate(45deg);
transition: all 0.2s ease 0s;
}
.main-timeline .timeline:hover .timeline-content:before{
background: #39b3ff;
border-color: #39b3ff;
}
.main-timeline .timeline-content:after{
content: "";
width: 11%;
height: 1px;
background: #cfcdcd;
position: absolute;
top: 28px;
right: -14%;
}
.main-timeline .date{
display: block;
font-size: 15px;
font-weight: 600;
color: #39b3ff;
margin: 0 0 8px;
transition: all 0.3s ease 0s;
}
.main-timeline .timeline:hover .date{ color: #444; }
.main-timeline .title{
font-size: 18px;
color: #444;
margin-top: 0;
transition: all 0.3s ease 0s;
}
.main-timeline .timeline:hover .title{ color: #39b3ff; }
.main-timeline .description{
font-size: 16px;
color: #777;
line-height: 28px;
margin-top: 8px;
}
.main-timeline .timeline:nth-child(2n),
.main-timeline .timeline:nth-child(2n) .timeline-content{
float: right;
text-align: left;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
right: 0;
left: -12px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ left: -7.3px; }
.main-timeline .timeline:nth-child(2n) .timeline-content:after{ left: -14%; }
@media only screen and (max-width: 767px){
.main-timeline{ padding-left: 20px; }
.main-timeline:before{ left: 20px; }
.main-timeline .timeline{ width: 100%; }
.main-timeline .timeline,
.main-timeline .timeline-content{
float: right;
text-align: left;
}
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:nth-child(odd):before{
right: auto;
left: -11px;
}
.main-timeline .timeline-icon{
right: 0;
left: -12px;
}
.main-timeline .timeline-content:before{ left: -7.3px; }
.main-timeline .timeline-content:after{ left: -14%; }
}
Raw
index.html
<html>
<head>
<title>Awesome Timeline</title>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/redblue9771/4b7649b07ccf3a8c96c29be8de033a7f/raw/0b65aa2c9c134a2be6a50566ba70820b65b48161/index.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="main-timeline">
<div class="timeline">
<div class="timeline-icon"></div>
<div class="timeline-content">
<span class="date">Apr 2013 - Mar 2014</span>
<h5 class="title">Web Desginer</h5>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class="timeline">
<div class="timeline-icon"></div>
<div class="timeline-content">
<span class="date">Apr 2014 - Mar 2015</span>
<h5 class="title">Web Developer</h5>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
</div>
</div>
</div>
</bod>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment