A Timeline is a list of events according to the order of dates which is used to get an overview of various tasks and their expected timing. Crafting a responsive vertical timeline design using only HTML and CSS involves making a visually pleasing layout that arranges content chronologically in a vertical manner. To make it responsive for small devices using media queries. This design improves user experience by showing information in a clear and easy-to-follow way and also ensures it looks good on different screen sizes.
Output Preview: Let us have a look at how the final output will look like.
Approach
- Firstly, create the main container containing each card with its respective image in the HTML file.
- Position the container at the center with the appropriate width. Also, position the line to the center with the appropriate height.
- Separate the cards in the left and right part of the line using left and right properties in the left and right class names of the respective cards.
- Move the image to the center of the line and create the card arrow using the ::after selector.
- The ‘:root’ defines CSS variables that can be used throughout the stylesheet.
- For responsiveness use media queries to move the cards in the vertical order to the right of the line. The ‘@media screen and (max-width:790px)’ defines styles for smaller screens using media queries, ensuring the layout remains responsive and readable on different devices.
Example: Create an HTML file named index.html and a CSS file named style.css and paste the following code.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Responsive Vertical Timeline Design</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< header >
< h1 >Geeks for Geeks</ h1 >
< p >Make Responsive Vertical Timeline
Design using only HTML and CSS
</ p >
</ header >
< main >
< div class = "main-container" >
< div class = "line" >
< a href = "#" >Top</ a >
</ div >
< div class = "card left" >
< h1 > Oct 2023</ h1 >
< p >React Tutorial: This free React tutorial is designed
for people who prefer to learn by doing.
</ p >
< div class = "thumbnail" >
< img src =
alt = "React Tutorial Image" >
</ div >
</ div >
< div class = "card right" >
< h1 > Nov 2023</ h1 >
< p >React is one of the most popular, efficient,
and powerful open-source JavaScript libraries for
building dynamic and interactive user interfaces.
</ p >
< div class = "thumbnail" >
< img src =
alt = "React Image" >
</ div >
</ div >
< div class = "card left" >
< h1 > Dec 2023</ h1 >
< p >ReactJS is famous for its component-based architecture
and virtual DOM which makes it highly efficient in
rendering user interface and ensuring optimal performance.
</ p >
< div class = "thumbnail" >
< img src =
alt = "ReactJS Image" >
</ div >
</ div >
< div class = "card right" >
< h1 > Jan 2024</ h1 >
< p >It is very helpful in the efficient development
and maintenance of large-scale applications.
</ p >
< div class = "thumbnail" >
< img src =
alt = "React Development Image" >
</ div >
</ div >
< div class = "card left" >
< h1 > Feb 2024</ h1 >
< p >Here are the ReactJS important topics
that come under in this tutorial.
</ p >
< div class = "thumbnail" >
< img src =
alt = "ReactJS Topics Image" >
</ div >
</ div >
< div class = "card right" >
< h1 >Mar 2024</ h1 >
< p >A Project will always help you to be confident
in your learning path, so we recommend you to
follow the below-mentioned articles after you
clear your fundamentals of React our React Basics
section
</ p >
< div class = "thumbnail" >
< img src =
alt = "React Project Image" >
</ div >
</ div >
</ div >
</ main >
</ body >
</ html >
|
:root { scroll-behavior: smooth;
} * { margin : 0 ;
padding : 0 ;
box-sizing: border-box;
} body { display : flex;
flex- direction : column;
justify- content : center ;
align-items: center ;
background-color : rgb ( 170 , 230 , 189 );
} header { display : flex;
flex- direction : column;
align-items: center ;
row-gap: 20px ;
margin-top : 10px ;
} header h 1 {
background-color : #fff ;
padding : . 2em . 5em ;
border-radius: 1em ;
color : green ;
font-size : 1.5 rem;
} header p { font-size : 1.25 rem;
} .main-container { margin-top : 20px ;
width : 800px ;
display : flex;
flex- direction : column;
align-items: center ;
} .line { position : absolute ;
left : 50% ;
height : 1000px ;
width : 10px ;
display : flex;
align-items: center ;
justify- content : center ;
border-radius: 100px ;
transform: translateX( -50% );
background-color : blue ;
} .line a { text-decoration : none ;
display : flex;
align-items: center ;
justify- content : center ;
position : absolute ;
bottom : 0 ;
width : 50px ;
height : 50px ;
font-weight : bold ;
color : rgb ( 55 , 131 , 65 );
background-color : #fff ;
border-radius: 50% ;
cursor : pointer ;
overflow : hidden ;
} .card { font-size : . 8 rem;
width : 200px ;
height : 150px ;
border-radius: 10px ;
background-color : white ;
margin-bottom : 10px ;
} . left {
position : relative ;
left : -150px ;
} . right {
position : relative ;
left : 150px ;
} . left ::after,
. right ::after {
content : '' ;
position : absolute ;
width : 35px ;
height : 35px ;
background-color : rgb ( 18 , 113 , 48 );
border-radius: 0px 10px ;
transform: rotate( -45 deg);
z-index : -1 ;
} . left ::after {
top : 5px ;
right : -10px ;
} . right ::after {
top : 5px ;
left : -10px ;
} .card h 1 {
padding : 5px ;
display : flex;
justify- content : center ;
border-radius: 10px 10px 0 0 ;
color : white ;
background-color : rgb ( 18 , 113 , 48 );
} .card p { padding : 10px ;
} .thumbnail { position : absolute ;
top : 0 ;
width : 50px ;
height : 50px ;
border-radius: 50% ;
overflow : hidden ;
} .thumbnail img { width : 100% ;
height : 100% ;
} . left .thumbnail {
left : 113% ;
} . right .thumbnail {
right : 225px ;
} @media screen and ( max-width : 790px ) {
body {
text-align : center ;
padding : 0 10px ;
}
.main-container {
width : auto ;
}
.line {
height : 1550px ;
}
.card {
top : 70px ;
margin-bottom : 100px ;
}
. left ::after,
. right ::after {
visibility : hidden ;
}
. left {
left : auto ;
}
. right {
left : auto ;
}
. left .thumbnail {
top : -70px ;
left : 75px ;
}
. right .thumbnail {
top : -70px ;
left : 75px ;
}
} |
Output: