Responsive HTML Timeline
How do I make an responsive html timeline?
Inspired by the talented Dave Rupert (http://daverupert.com/about.html). Heck, it's pretty much his responsive timeline. I just wanted to give it a go.. What is a responsive html timeline? How do you make a responsive html timeline? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.
Responsive HTML Timeline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive HTML Timeline</title> <meta name="viewport" content="width=device-width"> <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> <div class="container"> <h1>Responsive HTML Timeline</h1> <p><em>Inspired by the talented <a href="http://daverupert.com/about.html">Dave Rupert</a>.</em></p> <div class="timeline"> <h2>2013</h2> <ul> <li> <h3>Quit my Job</h3> <p>One day, my boss came up to me and asked, "Are you ready, Joe?" Pretty much decided I wasn't ready.</p> <time>August 2013</time> </li> <li> <h3>Started New Job</h3> <p>Began work at the Button Factory. This was probably the best time of my life. I had a wife, a dog, and a family.</p> <time>July 2013</time> </li> <li> <h3>Changed my name to Joe</h3> <p>I was just sick of Josh</p> <time>June 2013</time> </li> <li> <h3>Moved to Iowa</h3> <p>I moved to <a href="#">Ames, Iowa</a> and settled down into my new life.</p> <time>February 2013</time> </li> </ul> <h2>2012</h2> <ul> <li> <h3>Graduated College</h3> <p>It only took, like, two years.</p> <time>December 2012</time> </li> <li> <h3>Graduated Community College</h3> <p>Studying Aerospace Engineering.</p> <time>May 2012</time> </li> </ul> </div>
</div>
</body>
</html>Responsive HTML Timeline - Script Codes CSS Codes
h1, h2, h3 { font-weight: 300;
}
.container { padding: 1em;
}
.timeline { position: relative; overflow: auto;
}
.timeline:before { content: ''; position: absolute; height: 100%; width: 5px; background: #dddddd; left: 0;
}
.timeline h2 { background: #dddddd; max-width: 6em; margin: 0 auto 1em; padding: 0.5em; text-align: center; position: relative; clear: both;
}
.timeline ul { list-style: none; padding: 0 0 0 1em; z-index: 1;
}
.timeline li { background: #dddddd; padding: 1em; margin-bottom: 1em; position: relative;
}
.timeline li:before { content: ''; width: 0; height: 0; border-top: 1em solid #dddddd; border-left: 1em solid transparent; position: absolute; left: -1em; top: 0;
}
.timeline h3 { margin-top: 0;
}
.timeline time { font-style: italic;
}
@media screen and (min-width: 40em) { .container { max-width: 1000px; margin: 0 auto; } .timeline:before { left: 50%; } .timeline ul { padding-left: 0; max-width: 700px; margin: 0 auto; } .timeline li { width: 42%; } .timeline li:nth-child(even) { float: right; margin-top: 2em; } .timeline li:nth-child(odd) { float: left; } .timeline li:nth-child(odd):before { border-top: 1em solid #dddddd; border-right: 1em solid transparent; right: -1em; left: auto; } .timeline li:nth-of-type(2n+1) { clear: both; }
}
| Developer | Joshua P. Larson |
| Username | jplhomer |
| Uploaded | July 23, 2022 |
| Rating | 4.5 |
| Size | 3,137 Kb |
| Views | 64,768 |
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 |
| Seamless Scrolling Background | 2,535 Kb |
| Populate Native HTML Datalist with AJAX | 2,763 Kb |
| Lightweight Quiz Widget | 4,596 Kb |
| CSS-Only Art Direction | 4,086 Kb |
| Webkit Text Masking | 1,975 Kb |
| Hey React | 3,959 Kb |
| Animated Donut Chart | 3,808 Kb |
| Fixed Nav HoverIntent Example | 4,444 Kb |
| Displaying a Google Street View of your current location | 2,275 Kb |
| JS Geolocator | 2,653 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 |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| Countdown with Rings | Ewganoel | 2,490 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| Javascript Welcome | Peterlewicki | 1,573 Kb |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Blog Concept 2 | JGallardo | 2,994 Kb |
| Rainbow Drops | Csbarnes | 2,365 Kb |
| Hexagons | Ashmind | 4,360 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!