How to Make Responsive Vertical Timeline Design using only HTML and CSS ?
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.
HTML
<!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 >Beginner for Beginner</ 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" 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 = "https://media.w3wiki.net/wp-content/uploads/20240218121513/gfg2.jpg" alt = "React Project Image" > </ div > </ div > </ div > </ main > </ body > </ html > |
CSS
: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: