{"id":3719,"date":"2020-01-21T09:27:00","date_gmt":"2020-01-21T09:27:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3719"},"modified":"2020-01-27T09:44:47","modified_gmt":"2020-01-27T09:44:47","slug":"responsive-vertical-timeline-in-pure-css","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/development\/responsive-vertical-timeline-in-pure-css\/","title":{"rendered":"Responsive Vertical Timeline In Pure CSS"},"content":{"rendered":"\n

A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list.<\/p>\n\n\n\n

01. How to use it:<\/h3>\n\n\n\n
<div class=\"timeline\">\n  <ul>\n    <li>\n      <div class=\"content\">\n        <h3>Event 1<\/h3>\n        <p>Event 1 Description<\/p>\n      <\/div>\n      <div class=\"point\"><\/div>\n      <div class=\"date\">\n        <h4>January 2020<\/h4>\n      <\/div>\n    <\/li>\n    <li>\n      <div class=\"content\">\n        <h3>Event 2<\/h3>\n        <p>Event 2 Description<\/p>\n      <\/div>\n      <div class=\"point\"><\/div>\n      <div class=\"date\">\n        <h4>July 2019<\/h4>\n      <\/div>\n    <\/li>\n    <li>\n      <div class=\"content\">\n        <h3>Event 3<\/h3>\n        <p>Event 3 Description<\/p>\n      <\/div>\n      <div class=\"point\"><\/div>\n      <div class=\"date\">\n        <h4>March 2019<\/h4>\n      <\/div>\n    <\/li>\n    ...\n  <\/ul>\n<\/div><\/pre>\n\n\n\n
02. The main CSS styles for the timeline:<\/h3>\n\n\n\n
.timeline {\n    position: relative;\n    margin: 0 auto;\n    width: 90%;\n    \n}\n\n.timeline ul li {\n    margin-bottom: 50px;\n    list-style-type: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n}\n\n.point {\n    min-width: 20px;\n    height: 20px;\n    background-color: #be9fe1;\n    border-radius: 100%;\n    z-index: 2;\n    border: 3px #333333 solid;\n    position: relative;\n    left: 1px;\n}\n\n.timeline ul li .content {\n    width: 50%;\n    padding: 0 20px;\n}\n\n.timeline ul li:nth-child(odd) .content {\n    padding-left: 0;\n}\n\n.timeline ul li:nth-child(odd) .date {\n    padding-right: 0;\n}\n\n.timeline ul li:nth-child(even) .content {\n    padding-right: 0;\n}\n\n.timeline ul li:nth-child(even) .date {\n    padding-left: 0;\n}\n\n.timeline ul li .date {\n    width: 50%;\n    padding: 0 20px;\n    font-weight: normal;\n}\n\n.timeline ul li .date h4 {\n    background-color: #e1ccec;\n    width: 100px;\n    text-align: center;\n    padding: 5px 10px;\n    border-radius: 10px;\n}\n\n.timeline ul li .content h3 {\n    padding: 10px 20px;\n    background-color: #be9fe1;\n    margin-bottom: 0;\n    text-align: center;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n}\n\n.timeline ul li .content p {\n    padding: 10px 20px;\n    background-color: #e1d9ec;\n    margin-top: 0;\n    text-align: center;\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n}\n\n.timeline ul li:nth-child(even) {\n    flex-direction: row-reverse;\n}\n\n.timeline ul li:nth-child(even) .date h4 {\n    float: right\n}\n\n.timeline::before {\n    content: \"\";\n    position: absolute;\n    height: 100%;\n    width: 3px;\n    left: 50%;\n    background-color: #333333;\n}<\/pre>\n\n\n\n
03.  Make the timeline fully responsive:<\/h3>\n\n\n\n
@media (max-width: 800px) {\n    .point {\n        min-width: 15px;\n        height: 15px;\n    }\n\n    html, body {\n        font-size: 15px;\n    }\n\n}\n\n@media (max-width: 650px) {\n    html, body {\n        font-size: 14px;\n    }\n    \n    .point {\n        min-width: 12px;\n        height: 12px;\n    }\n\n}\n\n@media (max-width: 450px) {\n    html, body {\n        font-size: 10px;\n    }\n\n    p {\n        padding: 10px !important;\n    }\n}<\/pre>\n\n\n\n
Demo<\/strong>: Link<\/a><\/p>
Download<\/strong>: Link<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list. 01. How to use it: <div class=”timeline”> <ul> <li> <div class=”content”> <h3>Event 1<\/h3> <p>Event 1 Description<\/p> <\/div> <div class=”point”><\/div> <div class=”date”> <h4>January 2020<\/h4> <\/div> <\/li> <li> <div class=”content”> <h3>Event 2<\/h3> <p>Event 2 Description<\/p> <\/div> <div class=”point”><\/div> <div class=”date”> <h4>July 2019<\/h4> <\/div> <\/li> […]<\/p>\n","protected":false},"author":2,"featured_media":3720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[145],"tags":[56,94,146,116],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/01\/Responsive-Vertical-Timeline-In-Pure-CSS.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-XZ","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3719"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3719"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3719\/revisions"}],"predecessor-version":[{"id":3722,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3719\/revisions\/3722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3720"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}