Timeline

Developer
Event Horizon
Size
3,162 Kb
Views
36,432
  1. Timeline Previews
  2. Timeline HTML Codes
  3. Timeline CSS Codes

How do I make an timeline?

Simple Vertical Timeline, no JS. What is a timeline? How do you make a timeline? This script and codes were developed by Event Horizon on 30 July 2022, Saturday.

Timeline Previews
IQ Test

Timeline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Work History</h1>
<div class="timeline v"> <div class="item" data-yearmark="2012"><span class="date">01/01/12</span><span class="company">Company</span><span class="position">Position</span><span class="text">Your text here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </span></div> <div class="item"><span class="date">01/01/12</span><span class="company">Company</span><span class="position">Position</span><span class="text">Your text here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </span></div> <div class="item" data-yearmark="2014"><span class="date">01/01/14</span><span class="company">Company</span><span class="position">Position</span><span class="text">Your text here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </span></div> <div class="item" data-yearmark="2015"> <span class="date">01/01/15</span><span class="company">Company</span><span class="position">Position</span><span class="text">Your text here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </span></div>
</div>
</body>
</html>

Timeline - Script Codes CSS Codes

*{ box-sizing:border-box;
}
h1{ font-size:1.5em; font-weight:bold; margin:32px 16px;
}
.timeline.v{ position:relative; padding-left:64px; padding-right:32px;
}
.timeline.v:before{ position:absolute; display:block; content:""; top:16px; left:54px; border:1px solid #0ae; height:100%; z-index:1;
}
.timeline.v .item{ position:relative; left:0px; padding:8px; margin:8px; background-color:#eee; margin-top:-100%; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-name: slidein; animation-name: slidein; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; box-shadow:4px 2px 4px 1px #666; -webkit-transition:all 100ms; transition:all 100ms;
}
.timeline.v .item:nth-child(n+1){ -webkit-animation-delay: 1s; animation-delay: 1s;
}
.timeline.v .item:hover{ left:32px;
}
.timeline.v .item:before{ position:absolute; content:""; width:22px; height:22px; top:5px; left:-11px; background-color:#eee; -webkit-transform:rotate(45deg); transform:rotate(45deg); z-index:-1;/*this should be relative to parent only, but remember this if your triangle disappears*/ box-shadow:3px 2px 4px 1px #666;
}
.timeline.v .item[data-yearmark]:after{ position:absolute; content:attr(data-yearmark); top:8px; left:-64px; font-weight:bold; -webkit-transition:all 100ms; transition:all 100ms;
}
.timeline.v .item[data-yearmark]:hover:after{ left:-96px;
}
.timeline.v .item .date{ font-weight:bold; margin:0px 8px 0px 0px;
}
.timeline.v .item .company{ font-size:1.1em; margin:0px 8px 0px 0px;
}
.timeline.v .item .company:before{ content:" - ";
}
.timeline.v .item .company:after{ content:" - ";
}
.timeline.v .item .position{ font-style:italic; margin:0px 8px 0px 0px;
}
.timeline.v .item .text{
}
.timeline.v .item .text:before{ content:": "; font-weight:bold;
}
@-webkit-keyframes slidein{ from{ margin-top:-100%; } to{ margin-top:0%; }
}
@keyframes slidein{ from{ margin-top:-100%; } to{ margin-top:0%; }
}
Timeline - Script Codes
Timeline - Script Codes
Home Page Home
Developer Event Horizon
Username Event_Horizon
Uploaded July 30, 2022
Rating 3
Size 3,162 Kb
Views 36,432
Do you need developer help for Timeline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Event Horizon (Event_Horizon) Script Codes
Name
Textbox Memory
List Sections
Content Panels
Character Sheet
KSP altimeter
XLSX and Vuejs
CSS Only Dropdown
Gaming UI
Spinning Loader
Very Animated Loading Bar
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!