Here's a clean and responsive vertical timeline using HTML, CSS, and Bootstrap icons:
HTML Code
Modern Vertical Timeline
Modern Vertical Timeline
Step 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Step 2
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Step 3
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Step 4
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
CSS Code
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
color: #343a40;
}
.timeline {
position: relative;
margin: 0 auto;
padding: 0;
width: 90%;
max-width: 800px;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 30px;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #007bff, #6610f2, #e83e8c);
}
.timeline-item {
position: relative;
margin-bottom: 40px;
padding-left: 60px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-icon {
position: absolute;
top: 0;
left: 10px;
width: 40px;
height: 40px;
background-color: #fff;
border: 4px solid #007bff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #007bff;
font-size: 18px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.timeline-icon:hover {
background-color: #007bff;
color: #fff;
transform: scale(1.1);
}
.timeline-content {
padding: 10px 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.timeline-content h4 {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.timeline-content p {
font-size: 15px;
margin: 0;
}
@media (max-width: 768px) {
.timeline::before {
left: 20px;
}
.timeline-item {
padding-left: 50px;
}
.timeline-icon {
left: 0;
}
}
Features
Responsive Design: Adjusts to smaller screen sizes.
Bootstrap Icons: Adds modern and consistent icons.
Colorful Timeline Line: Gradient effect for an eye-catching vertical line.
Interactive Icons: Slight hover animation for the timeline icons.
Feel free to modify the colors, icons, and text to fit your needs!
Merci de laisser votre commentaire sur mon blog je vais le lire avec joie