Activity Timeline

Size
5,624 Kb
Views
18,216

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 Previews

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);
Activity Timeline - Script Codes
Activity Timeline - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 3
Size 5,624 Kb
Views 18,216
Do you need developer help for Activity 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!

Christian Naths (christiannaths) Script Codes
Create amazing video scripts 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!