Activity Timeline
How do I make an activity timeline?
What is a activity timeline? How do you make a activity timeline? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.
Activity Timeline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Activity Timeline</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
@import url("https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic");
@import url("https://fonts.googleapis.com/css?family=Bitter");
* { box-sizing: border-box;
}
.container { margin: 0 auto; max-width: 640px;
}
a { font-weight: bold; color: inherit; text-decoration: none;
}
body { overflow-x: hidden; padding: 20px; font-family: "Montserrat", helvetica, arial, sans-serif; font-size: 100%; line-height: 1.25; color: #637d99; background-color: #F3F3F3;
}
[class*="activity--"] { border-left: 2px solid #637d99; padding: 0.75em 0 1px 0; margin: 0;
}
.activity__title { position: relative; display: block; padding-bottom: 0.75em; left: -0.8em;
}
.activity__title::before { width: 1.75em; height: 1.75em; margin-right: 0.5em; text-align: center; font-size: 0.875em; line-height: 1.875; color: #F3F3F3; background: #637d99; border-radius: 100%;
}
.activity--create-event .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--comment .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--update-event-starts-at .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--update-event-duration .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity__content { position: relative; background: white; margin-left: 1.5em; margin-bottom: 1.5em; padding: 0.75em 2em; border-radius: 3px; font-family: "Karla"; font-family: "Courier New";
}
.activity__content p + p { margin-top: 0.75em;
}
.activity__content::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity__content::before { position: absolute; left: 0.5em; top: 0.5em; color: #E2E5E5; z-index: 1;
}
.activity__content::after { font-family: "Ionicons"; content: ""; position: absolute; right: 0.5em; bottom: 0.5em; transform: rotate(180deg); color: #E2E5E5; z-index: 3;
}
.timeline::before,
.timeline::after { content: ""; border-left: 2px dotted #637d99;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='container'> <section class='timeline'> <article class='activity--create-event'> <h1 class='activity__title'> Event added to the schedule <time class='activity__created-at'>2 months ago</time> </h1> </article> <article class='activity--comment'> <h1 class='activity__title'> <cite class='activity__author'>Julia LD</cite> commented <time class='activity__created-at'>2 months ago</time> </h1> <div class='activity__content'> <p>I'll be there!</p> </div> </article> <article class='activity--comment'> <h1 class='activity__title'> <cite class='activity__author'>Jason Alexander</cite> commented <time class='activity__created-at'>2 months ago</time> </h1> <div class='activity__content'> <p>I don't think I can make it to this one. Hopefully we'll have enough players at the game and we can pull out a much needed win!</p> <p>Best of luck everyone.</p> </div> </article> <article class='activity--update-event-starts-at'> <h1 class='activity__title'> Start time updated from <time>August 30</time> to <time>August 31</time> <time class='activity__created-at'>1 month ago</time> </h1> </article> <article class='activity--update-event-duration'> <h1 class='activity__title'> Duration updated from <time>60 minutes</time> to <time>120 minutes</time> <time class='activity__created-at'>1 month ago</time> </h1> </article> <article class='activity--comment'> <h1 class='activity__title'> <cite class='activity__author'>Newman</cite> commented <time class='activity__created-at'>1 month ago</time> </h1> <div class='activity__content'> <p>Wups, sorry guys. Somehow I got the times wrong. I just updated it with the correct info.</p> </div> </article> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Activity Timeline - Script Codes CSS Codes
@charset "UTF-8";
@import url("https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic");
@import url("https://fonts.googleapis.com/css?family=Bitter");
* { box-sizing: border-box;
}
.container { margin: 0 auto; max-width: 640px;
}
a { font-weight: bold; color: inherit; text-decoration: none;
}
body { overflow-x: hidden; padding: 20px; font-family: "Montserrat", helvetica, arial, sans-serif; font-size: 100%; line-height: 1.25; color: #637d99; background-color: #F3F3F3;
}
[class*="activity--"] { border-left: 2px solid #637d99; padding: 0.75em 0 1px 0; margin: 0;
}
.activity__title { position: relative; display: block; padding-bottom: 0.75em; left: -0.8em;
}
.activity__title::before { width: 1.75em; height: 1.75em; margin-right: 0.5em; text-align: center; font-size: 0.875em; line-height: 1.875; color: #F3F3F3; background: #637d99; border-radius: 100%;
}
.activity--create-event .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--comment .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--update-event-starts-at .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity--update-event-duration .activity__title::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity__content { position: relative; background: white; margin-left: 1.5em; margin-bottom: 1.5em; padding: 0.75em 2em; border-radius: 3px; font-family: "Karla"; font-family: "Courier New";
}
.activity__content p + p { margin-top: 0.75em;
}
.activity__content::before { content: ""; display: inline-block; font-family: "Ionicons";
}
.activity__content::before { position: absolute; left: 0.5em; top: 0.5em; color: #E2E5E5; z-index: 1;
}
.activity__content::after { font-family: "Ionicons"; content: ""; position: absolute; right: 0.5em; bottom: 0.5em; transform: rotate(180deg); color: #E2E5E5; z-index: 3;
}
.timeline::before,
.timeline::after { content: ""; border-left: 2px dotted #637d99;
}
Activity Timeline - Script Codes JS Codes
(function() {
}).call(this);
Developer | Christian Naths |
Username | christiannaths |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,624 Kb |
Views | 18,216 |
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!
Name | Size |
Animated Chart | 5,214 Kb |
Responsive App Layout | 5,661 Kb |
Next Game Widget | 7,025 Kb |
Responsive Admin Panel 2 | 7,677 Kb |
Upcoming Event Stream | 5,355 Kb |
MicroHero Logo Animation | 5,290 Kb |
A Pen by Christian Naths | 2,563 Kb |
Off-Canvas Responsive Layout | 52,985 Kb |
Animated Open Mentorship Logo | 2,710 Kb |
CSS-Only Inputs | 4,678 Kb |
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!
Name | Username | Size |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
After America | Jonathangarner | 2,686 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Under construction | GhostRider | 1,642 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!