How To Create a Vertical Timeline Using HTML & CSS

[Music] so hello everybody today we are going to create these timeline as you can see that in the screen so this is a vertical timeline as you can see that here which have a nice little hover effect and also you can see the layout which is looking good and also it's a fully responsive as you can see that that's the tablet view and that's what it will look like in that tablet device and if you go to the mobile device as you can see that it is also looking good in our mobile device so it is perfectly responsive design as you can see and in this video we are going to create this and if you are new to my channel please do subscribe and no more talk let's dive into the video [Music] so here you can see that this is my HTML and this is my CSS file and all our empty so in the HTML file let's create a boilerplate and let's give it a title of particle timeline and also here let's link our stand sheet so this will be the standard CSS so we linked our style sheet and here in the body let's get a deal with a class of container and in this deal we will have an outer live which will have a class of timeline so this will be our timeline and here we will have unordered list and in this list we will have our list item which is basically the content for our timeline so for each list item we will have a div which will have a class of Emlyn content so here we will have our content so let's say that for the first one we will have a h1 so heading 1 and also we will have a prayer drop let's say that lorem 20 and that's for our first item so let's also make some more item so we will have now for item as you can see in list item so let's make it 2 heading 2 and the yields will be heading 3 and this will be heading 4 so that we can recognize that and after that that's it for our HTML and let's open it with our life server and here as you can see that our life server and here is our content h1 and this paragraph and I have four of them so let's come to our style and here let's say that for the universal selector the margin will be zero and the padding will be zero and also say that box sizing will be border box now as you can see that there are no extra gap so after that let's go to our google fonts and grab a font so come here fonts google.com and we will use monserrate for this video so let's come here and search for Montserrat and this is the monstered font and we will use 300 and also we will use 500 font weight so let's copy the import tag from here and close this tab and paste the import tag in the top of our style dot synthesis perfect so now we can use monserrate fonts in our project or in this timeline so here first of all in the HTML let us apply our font so let's say that font family will be Montserrat and also give it a fallback font family of sans serif now let's go to our container and here let's say that mean height will be 100 VH and who it will be hundred percent and display flex and a line items Center and justify contents Center now as you can see that that's our content which is now in center perfect so let's also have a background color so come here and say that background cover will be Chan 1010 so this will be a black background color so we can't see our heading or this text so let us come to our HTML and that color will be white now as you can see that we can see our content fine so after that come to our timeline D here let's say that week will be 80% so H will be 8% width and height will be let's say that OTO and also max width will be 800 pixels and margin:0 auto so that it stay in the center and also make sure that position is relative so as you can see that now our width of this timeline having only 80% of the full width as you can see no matter where we will go it will keep the max weight of 800 as you can see that here we can come to our UL so Tam line ul and let's say that list style will be none so we will remove this bullet point if I save as you can see that so now we don't have any bullet punch and after that let's come to our timeline and ul alive so for the list item we will have a padding of 20 pixel and also let's give it a background color of something let me copy the color so as you can see that that's our background color so also let's give it a color of white and also give it a border radius of 10 pixel so as you can see that now we have this border areas here after that let's give it a margin bottom so that we have some space between this item as you can see that we have now some space so we have now margin bottom for each of the element but we do not need any margin bottom for the last element because we don't have any item after these last heading or last item so what I can say that we can select this last item so let's say that last giant and say that margin will be margin bottom only margin bottom will be zero as you can see that's perfect so we will not have any margin bottom for the last one and all of other item will have this margin bottom as you can see so that we can have some gap between those item so after that let's style our content so as you can see that for the content we have a class which is stem line content so we can select it very easily timeline content and here what I can do is let's say that for the first one which is the h1 we will have a font size of something like 25 pixel which is looking good and font weight will be about 500 and also say that font size a is 25 408 509 height let's give it some line height of 30 pixel looking good and let's give it a margin bottom so that we can have some room between this heading and per crop perfect so after that let's go to our program and tell it so font size will be 16 pixel and font height will mean sorry line hatch with me not fun height line height will be about 3-0 ping Zi means 30 victim and font weight will be the light weight 300 so this will be the red crop as you can see looking good so this is looking good for our mobile as you can see that we will make these timeline responsive which means each will be good for our mobile device also so for the mobile it will be like this regular deep as you can see but whenever we will go to the desktop or the tablet view we will have our timeline back so for this reason what we can do is we can add media query let's say that media only screen and min width 768 pixel so which means whenever we will go to the desktop or tablet view we will have our M line so here in our media Corinne first of all let's create our timeline here so first of all let's create the timeline shape which is the 50% of the width so here first of all let's grab our UL Ally and let's say that which will be 50% as you consider the ally is now 50% width of our full timeline width so that's fine and also say that margin bottom will be about 50 pixel which is greater than now as you can see that we have now more space in the bottom which is looking fine and also let's say that the position will be the relative and that's fine so the next thing is we need to separate these even or odd item means the first one will be in the left the second one which is the even number of item will be in the right side so we need to position them so let's come here and select the even list item so let's come here in the timeline UL and Li what you can do is and child it will be one column and and child and first of all let's grab the odd one and say that flawed will be left now as you can see that we can't see our odd item so so after that let's also give it the even here so it should be flawed right now as you can see that we can see our all four atoms now if you can notice that our even which is this two and four is now position in the right side and the odd number which is the one and three is position in the left side perfect so the next thing what we need is we need to clear so for the odd what we need to do is we need to clear so as you can see that the position of the float is left so we need to clear this right side so let's say that they are right and for the event what we need is we need to clear on the left side because our float is right so now as you can see that for this heading one which is our odd number is float left which means it is positioned in the left and the clear which is this part is now have no floor element here as you can see this is not clear and for the event we don't have any item float item in the left side as you can see so that's looking fine so the next thing we need a line in the center of this time line so we can create this line with a Soto elements of our time line so create this 10 line and after not after we can use before and let's say that content will be nothing and position will be absolute and also say that height will be 100% and the width will be about 2 pixel and we will make it color so let's give it a color of gray and that's it not color actually we need to make it a background color so as you can see that that's our line which is perfectly but we need to position it in the center but to make it Center what I can do is I can say that left will be 50% so it will make it in the center but if you can notice that here it is not perfectly in center so for that what I can do is I can make sure about transform translate x minus 50% which will make sure that it is now in perfectly its center as you can see so that's fine this is our time line so the next thing is we want some gap between this line and this item so in a lie so whenever we have this odd item we need the space in the right side of the item but whenever we have the even item we need the space in the left side so let's come here in our odd item we can say that transform translate X will be 30 pixel so as you can see that now it is going this side so if I give it a negative 30 which you will move in the opposite side as you can see so let's also give it for our even and it will be opposite of our previous one so as you can see that now we have this gap between this item and this line perfect so the next thing is we need something circular for to indicate the item so to make the circular thing what I can do is we can create this with the sword element of this alive so let's come here and say that maybe after this one select this Ally and create a after and let's say that content we'll be nothing and we will have a position of absolute and let's give me the height of 20 pixel and width of 20 pixel and the background color of grain also and we concede because we don't have this gray now as you can see that that's our circular thing but it is not circle so let's make it circle by giving it a border radius so border radius will be 50 percent which will make it circle as you can see so we need to position it in the line so first of all let's give it a top zero so that as you can see that this circle is now in the top so as you can see that this is the even item and this is doc sorry this is the odd item and this is the even item and for those item we need to position this dot differently as you can see for this even sorry for this odd we need to position it in the right side but for the even we need to position it in the left side of itself so what I can do is we need to select these even an odd separately so timeline ul and Al I am child and let's select this odd and say that after so and let's say that we need to position it in the right side let's give it right 0 let's see what happened as you can see that for the only odd item which is 1 & 3 the position of the dot is now in the right corner because we have a top 0 and right 0 which basically means the right corner but we don't want it in the right corner we want it in the top of the line as you can see so for that what I need to do is I need to make sure about transform so let's give it a transform translate and give it a 50% and also 50% so high number I will give as you can see that it is now in this side but for the odd we want the second blue which is the translate y- now as you can see that it is now perfectly in the corner so perfect so the next thing is we need to move it into the line so before that as you can see that we have a translate X which is minus 30 pixel so that's why this is the cap as you can see here so we need to move also 30 pixel here because we want it in the line so what I can do is in our right we can make a 30 pixel as you can see we need to make minus 30 pixel as you can see now it is perfectly in centre and also in our top of the line as you can see that so this number which is the minus 30 pixel for the odd as you can see each should be the same if I give it a minus 50 pixel as you can see that the gap of the amount of gap as you can see it is increased also as you can see that the dot is now is not in position so we need to make sure that those mark are similar as you can see we need to make sure that these two are similar for the art here so let's get back to 30 so also let's make sure about this our even dot so it will be simple and also the same so we can duplicate the left value or this odd value and make it even and what I can do is I need to make sure also we have a minus in this translate here so it will be minus 50% and minus 50% and also make sure that it is now a positive 30 pixel because if you consider we have a even 30 pixel perfect sorry here we need to make sure that it is in the left not right so if I give it left so as you can see that we need to make sure that each should be go in the opposite side so we need to make sure that there will be - so as you can see that now our each dot have position in the line in the top of the line as you can see so perfect which is looking good and if I go to here and check the responsiveness as you can see that it is fully responsive which is looking good and also let's give it a top padding so in our container maybe here so let's give it a padding for the top and bottom 100 pizza so we will have a hundred pixel gap in the top and bottom so as you can see that whenever we will have something like a small device we will have this cap so which is looking good so the next thing is we need to add a hover effect so let's say that whenever I will hover these item we want to change the color of the dot so for that let's come to our here in our media query because we will have this timeline in only our video query which means only in our tablet or desktop device so we will not have this in our mobile device so make sure that we will change or we will have a media query here so let's come here and say that timeline dot UL li Y number I will have our a li which is the list item and I want to change the after which is basically the dot and I want to change the background color of it and make it aqua something like that as you can see that we have known perfectly changed this which is looking good looking good and also what you can do is you can change the border radials something like so let me change it so for the even sorry for the odd let's come here and say that background color which will be now 10 pixel 10 pixel 10 pixel and 10 pixels for the all side as you can see it is not changed because you see it is what we have now sorry we have a typo not background color we want border-radius so as you can see that it there is no change because what we have now is we have a 10 pixel border radius which is basically this one watch we have but we don't want border areas let us say that in this corner which is this one second one so let's say that for the second one we will have 0 pixel so as you can see that we have this shape which is looking good and if you want you can make the bottle ready as increase it something like 20 pixel which will also look good as you can see so as you can see that for this one also it is looking good and also let's make it for the even item so in the even what I can do is I can copy this and paste it here and also what I need to change is I want need to change the first one which is this one and it will create this effect as you can see it is looking good so all is looking perfect and the last item what we need to add is we need to add let's say that we need to add a time or date so let's give me the date here so in our timeline content let's give it a date so maybe h2 and give it a class of date not that date and let's say that 20 May 2010 something like that so perfect as you can see so let's also give it to all of other item so for the second for the third and for the last one perfect as you can see we have now this date in our every item so first of all let's do the estelle for our mobile so come here out of our media we can say that Tamlyn content this date and let's say that font size will be about something like 13 pick them and also font family not fun family font weight 300 which is looking good perfect as you can see that and also make sure that we have a margin bottom that's give me the margin bottom of 10 pixel so as you can see that we have little gap here and also make a letter spacing here about two pixel so looking good in our mobile device so we need to make sure about our desktop device because we want to show it in the top of our item so let's come our media query here maybe in the end of our media query so let's come here and make a selection of our timeline content and date and what I need is I need to make sure the position is absolute now as you can see that the position of this gate is now absolute and what I can do is I can position it by top let's say that - 20 pixel not equally to - 1 pixel as you can see that we have now it is perfectly in position - 20 pixel maybe - 30 which is looking also good as you can see that we have now at date here which is looking pretty awesome perfect now we have a cool looking timeline here as you can see if you want you can increase it so let's say that I want to increase it let's add another one maybe another one here maybe - and let's come here and say that it will be 5 and it will be 6th and now as you can see that you here we have our fifth one and here is our number see item so whenever you want you can increase the limit so whenever you want you can add your item here so this is looking perfect and it is also responsive as you can see that for that tablet it will be like that and for the mobile it will be like this one pretty amazing so if you like this video please give it a thumbs up and don't forget to subscribe my channel if you want to see more video like this one and that's it for this video I stay home as to save and my name is orphan I will see you in the next video till then bye bye could the office [Music]

Channel: WEB CIFAR

Views: 21,148

Keywords: pure css timeline, vertical timeline, css timeline, html css timeline, create a Vertical Timeline With CSS, how to create a CSS Timeline with HTML 5 and CSS3, create vertical timeline using html and css, simple timeline design, Vertical html timeline, timeline desing, vertical css timeline, dark timeline, dark only css timeline, html and css timeline, responsive timeline, material design timeline, html, css, how to, html5 tutorial for beginners, html5 tutorial

Id: zNccqv0g6Q4

Length: 28min 59sec (1739 seconds)

Published: Sat Apr 25 2020