Timeline sample
How do I make an timeline sample?
What is a timeline sample? How do you make a timeline sample? This script and codes were developed by Tommy on 30 December 2022, Friday.
Timeline sample - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline sample</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="timeline"> <li> <p class="timeline-date">Aug 2014</p> <div class="timeline-content"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> </li> <li> <p class="timeline-date">Feb 2012</p> <div class="timeline-content"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> </li> <li> <p class="timeline-date">Sep 2011</p> <div class="timeline-content"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> </li>
</ul>
</body>
</html>
Timeline sample - Script Codes CSS Codes
* { margin: 0; padding: 0; box-sizing: border-box;
}
.timeline { list-style: none;
}
.timeline > li { margin-bottom: 60px;
}
h2 { margin: 16px 0 20px;
}
@media (min-width: 640px) { .timeline { list-style: none; width: 600px; margin: 10px auto; } .timeline > li { overflow: hidden; position: relative; padding: 0 10px; margin: 0; } .timeline-date { float: left; width: 20%; margin-top: 22px; } .timeline-content { float: left; border-left: 3px solid #ddd; width: 80%; padding: 0 24px; } .timeline-content:before { content: ''; width: 10px; height: 10px; background: #00BBDD; position: absolute; top: 26px; left: 122px; border-radius: 100%; }
}
| Developer | Tommy |
| Username | hoehoe |
| Uploaded | December 30, 2022 |
| Rating | 3 |
| Size | 2,263 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 |
| Check box in Bootstrap Drop down list | 2,170 Kb |
| AngularJS | 2,264 Kb |
| Parallax with only css | 3,096 Kb |
| Materialize css | 3,074 Kb |
| CSS animation | 2,194 Kb |
| Customise Scroll Bar with css | 2,853 Kb |
| A Pen by Tommy | 1,738 Kb |
| Get Form value with jQuery | 1,931 Kb |
| Custom checbox with css | 2,825 Kb |
| Adding FontAwsome icon via CSS pseudo vs fa class | 2,614 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 |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| A bit of elegance | Hackthevoid | 9,095 Kb |
| Filter inputs | Rowinf | 1,721 Kb |
| Side Sliding Menu CSS | EduardL | 4,388 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| Flying Bee | Pwsm50 | 3,711 Kb |
| Navcube | Wbarlow | 4,775 Kb |
| Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
| RollOver Effect 2 | Lmack90 | 2,162 Kb |
| My Starter Kit For Codepen | Dkdesign | 2,012 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!