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 |
Responsive Admin Panel | 4,254 Kb |
Next Game Widget | 7,025 Kb |
Pure CSS Radial Graph | 2,363 Kb |
Upcoming Event Stream | 5,355 Kb |
Animated Chart | 5,214 Kb |
A Pen by Christian Naths | 2,563 Kb |
CSS-Only Inputs | 4,678 Kb |
Animated Open Mentorship Logo | 2,710 Kb |
Checkbox Switch | 4,665 Kb |
MicroHero Logo Animation | 5,290 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 |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Animated css matrix type | NielsOeltjen | 3,484 Kb |
Mini Profile | Frytyler | 3,828 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
CSS Clip and Shape Module clearly | Pestov | 2,640 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
404 Page | Saransh | 2,666 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!