let’s look at that how to create a responsive timeline in HTML and CSS, When you will display the previous details such as experiences or education details inside your website you need to use vertical timeline.
recently, I’ve made complete tutorial on it, so, I’m going to share with you how you can do that using HTML and CSS3. It’s simple project, but it’s very helpful to improve you HTML and CSS logics.
Responsive design is a key component of modern web development, and it is essential to ensure that websites display properly on all devices, regardless of their screen size or orientation. One popular way to display information in a responsive manner is through the use of a vertical timeline.
A vertical timeline is a visual representation of a sequence of events or milestones, arranged in chronological order from top to bottom. It can be a powerful tool for storytelling, especially when paired with engaging visuals and succinct descriptions.
In this article, we will explore create a responsive timeline in HTML and CSS. This timeline will be easy to customize and will adapt to various screen sizes and orientations.
Step 1: Setting up the HTML structure
To start, we need to create the basic HTML structure for the timeline. We will use an unordered list with the class “timeline” to create our timeline. Each timeline item will be an “li” element.
Inside each “timeline”, we will create child elements div to hold the text content. This structure will allow us to keep the text and visual content separate, making it easier to style each component individually.
<!-- ----------------Main header start------------------- -->
<header id="main_header">
<div class="container">
<h1><i class="fa-solid fa-trophy"></i>Responsive Timeline</h1>
</div>
</header>
<!-- ----------------Main header close------------------- -->
<!-- ----------------Timeline start--------------------- -->
<section id="timeline">
<ul>
<li>
<div>
<h3>2013: Data Entry Operator</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2014: Investment Online Compnies</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2015: Online Ad Postings</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2016: HTML & CSS</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2017: JavaScript & C Programming</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2018: SQL Server</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2019: C# Programming</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2020: Windows 10 Apps</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2021: Php Programming</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
<li>
<div>
<h3>2022: Blogging</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia
quod officia ab cum odio, vero praesentium nam laborum fugiat
debitis aspernatur dolorum ipsum. Ea deserunt voluptatum esse
quaerat necessitatibus beatae!
</p>
</div>
</li>
</ul>
</section>
<!-- ----------------Timeline close--------------------- -->Step 2: Adding the CSS styles
Next, we need to style our timeline using CSS. We will start by setting the overall styling for the “timeline” class, including the background color, padding, and font size.
To ensure that the timeline is responsive, we will use media queries to adjust the styling at different breakpoints. For example, we might want to change the font size or padding on smaller screens to make the timeline more readable.
We will also style the “li” class, setting the width, height, and margin for each item. Additionally, we will add a border to each item to create a visual separation between the timeline entries.
Inside each “timeline” div, we will add styles for the text content, including the font family, size, and color. We can also adjust the margin and padding to create a more readable layout.
Finally, inside the “timeline-image” div, we will add styles for any visual content, such as images or icons. We can adjust the size and position of the image to create a visually appealing timeline.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
:root {
--primary-color: #1b2631;
--secondary_color: #283747;
--max-width: 1440px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
}
body {
/* background: var(--primary-color); */
background: #ddd;
color: #000;
overflow-x: hidden;
padding-bottom: 50px;
}
#main_header {
/* background: var(--secondary_color); */
padding: 4rem 0;
text-align: center;
}
#main_header h1 {
font-size: 2.5rem;
}
#main_header i {
padding: 0 1rem;
}
#timeline ul {
/* background: var(--primary-color); */
padding: 50px 0;
}
/* create a line */
#timeline ul li {
list-style: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #e74c3c;
}
/* boxes */
#timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 1rem;
/* background: var(--secondary_color); */
background: #fff;
transition: all 0.5s ease-in-out;
border-radius: 5px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
/* rightside */
#timeline ul li:nth-child(odd) div {
left: 40px;
}
/* leftside */
#timeline ul li:nth-child(even) div {
left: -434px;
}
/* dots */
#timeline ul li:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 25px;
height: 25px;
/* background: var(--secondary_color); */
background: #cb4335;
transform: translateX(-50%);
border-radius: 50%;
}
/* Arrow Base */
#timeline div:before {
content: "";
position: absolute;
bottom: 5px;
width: 0;
right: 0;
border-style: solid;
}
/* rightside arrow */
#timeline ul li:nth-child(odd) div:before {
left: -15px;
border-width: 8px 16px 8px 0px;
border-color: transparent #fff;
}
/* left side arraow */
#timeline ul li:nth-child(even) div:before {
right: -15px;
border-width: 8px 0px 8px 16px;
border-color: transparent #fff;
}
@media (max-width: 900px) {
#timeline ul li div {
width: 350px;
}
/* rightside */
#timeline ul li:nth-child(odd) div {
left: 40px;
}
/* leftside */
#timeline ul li:nth-child(even) div {
left: -380px;
}
}
@media (max-width: 768px) {
#timeline ul li {
margin-left: 30px;
}
#timeline ul li div {
width: calc(100vw - 90px);
}
/* leftside */
#timeline ul li:nth-child(even) div {
left: 40px;
}
/* rightside arrow */
#timeline ul li:nth-child(even) div:before {
left: -15px;
border-width: 8px 16px 8px 0px;
border-color: transparent #fff;
}
}
Step 3: Testing and tweaking
Once we have created our HTML and CSS, we can test our timeline on different devices and screen sizes to ensure that it is responsive and displays correctly. We may need to make adjustments to the CSS styles to ensure that the timeline looks good on all devices.
You May Also Like:
- Responsive Sidebar Menu in HTML CSS and JavaScript
- How to Make Responsive Navbar in HTML CSS
- Responsive Login and Registration Form in HTML and CSS
- Responsive Contact Us Page In HTML and CSS
- How to Upload HTML Website on Cpanel
One way to test the timeline is to use a tool like Chrome DevTools to simulate different screen sizes and orientations. We can also test the timeline on physical devices, such as smartphones and tablets, to see how it looks in real-world conditions.
Create a Responsive Timeline in HTML and CSS
here is a video tutorial about how to create a responsive timeline in HTML and CSS from scratch. It’s the vertical responsive timeline. hope this tutorial is helpful and beneficial for you.
Hope this tutorial is helpful and beneficial for you, recently, I made another tutorial that is related to the vertical timeline. Inside that, you will learn how to use JS to display the content on a scroll animation.
Create a Vertical Timeline Using HTML and CSS
Basically, timelines are important for dividing the content, So, let’s look at that how to create it from scratch with scroll animation. When you scroll down on your website, you will able to see the timeline content otherwise you can’t see the content. The Default content have appeared when you’ve opened the website.
Conclusion
In conclusion, a responsive vertical timeline is a powerful tool for visual storytelling on the web. By using HTML and CSS, we can create a timeline that adapts to different devices and screen sizes, making it easy for users to engage with our content.
By following the steps outlined in this article, we can create a customizable and responsive timeline that is visually appealing and easy to use. With a little bit of creativity and experimentation, we can create timelines that truly stand out and engage our audience.
