 For this project I will be using Visual Studio Code as usual and I've zoomed in a little bit so you can see better and as you can see I've already created a very simple index.html page and in this index.html page I've included my style sheet which is under the folder CSS styles.css and then I've included the font that we'll be using for this project. The font that we'll be using for this project you can find under font.adobe.com and the font is called agencyfb. To include this font to your project you can go to add to a project, give your project a new name and then select regular and bold and any other font weights that you might want to use. Once you do this the create button will be available once you give it a name. Make sure you create a new project and then that will give you a similar link to the one I have inside the head of my HTML page. Paste your link here and then your font should be ready to use. So to test this what I will do is I will create an H1 with something like Apex Legends. Let's save this and also just to let you know for this project I'm using SCSS which is processed to CSS and that's why I've included the styles.css and then I am using the plugin lifestyle compiler as always which watches for any SCSS changes to compiler to CSS and then last but not least I'm using the live server so I don't have to refresh every time I make a change on the page every time I press save. So let's save this go to the page and see what's going on. So we get in the Apex Legends but as you can see the font doesn't work yet so let's deal with that and the first thing as always that we need to do is reset the margin on the body. So let's do body margin 0 and then let's add the font. Font family and the font is called agency FB and then that would be sans serif. Let's save this go back to a page and as you can see the font is now working coming from Adobe Fonts and I will put the description in the description below by the way so it saves you time searching for it and then now the next thing I've done is I've actually went to the game to Apex Legends basically I've taken screenshots from the game inside the game so we can see so we can use it kind of as a template to design the buttons and also if we zoom in I've taken different states of the buttons so this is the active state of this button and then this is the hover over the hover state of the active button and then we've got the normal buttons in here and this is the normal state of the ones that are not currently selected and this is the hover state of this button so we're gonna have to do all of them and I also have saved this image so we can use it as a blueprint to design all buttons so let's go back to a project and minimize this and let's add all blueprint so what I will do is I will add a what or blueprint as a background image and the URL will be for me will be images and then I've called it blueprint.jpeg let's save this and this is the background that we get and I'm not going to do anything else with it I'm just going to position the button close to this when we create the button so we can see whether it matches the design and so on so let's do that next let's go back to the project let's go back to the index.html let's remove the h1 because we won't need it and to start with let's start with a very simple link which maybe let's give it a class name of menu a link and the the href will be empty for now because we are not actually building a full project out there let's keep it empty we don't want it to lead anywhere for this tutorial and then let's add something like play as you can see the the first button is called play so let's do play legends loadout, batterpass, install, we'll add those ones later so first of all let's focus on the ones that are not active and do not have a hover state on top of them let's focus on those ones and then we'll focus on the one that is active so let's go back to styles.scss and what I can do is actually I can move my visual studio code the class name that I gave the link is called menu link so let's go in here and create menu link and I don't know if you were able to see but the link as default is always blue and it's underlined so we'll have to change this of course but first of all let's give or link a height a width a height and a background color so we can see it a little bit better so first of all to give a link a width and a height we need to make sure that this is a block element and to do this to convert it to a block element we need to display it as block or inland block so display in this case let's add it as inland block because we will be having a few buttons that will be next to each other and of course you can use flexbox and so on but this will do the job for now and then the next bit I want to do is let's add a background color of red and then let's give it a width and I know that the width of this is going to be 199 pixels and I know the height that the height will be 120 pixels so if you say this you will see that the height is very similar to this we don't have to have an exact but we'll try to make it as close as possible to this the next thing that we might want to do is remove the text decoration so we don't want the underline and also we want the link to be color white 3s and then let's make the font size a little bigger and I believe font size I believe that the font size will be roughly 27 pixels something similar to this but we also want to change the weight to be font weight to be around 700 so that looks similar of course the font is not exactly the same I couldn't find exactly the same font but this one looks very similar so that would do the job also I think the spacing between can be maybe fixed a little bit so let's do that quickly so we can do that by letter spacing and let's put one pixel that spaces out the letters a little bit more but the next thing that we want to make sure is that this text is always in the middle of the box and we can do this by text align center okay so far so good by the way this button won't be red we effort as I said before we're first of all we are focusing on the normal buttons and then we'll focus on the active buttons first of all we need to create a gradient to work something similar to this and what I've done what I did okay what we can do is select a few colors maybe we can select the color from here with Photoshop or whatever to use in and maybe we can select another one from here and see what the difference is I don't think there is a big difference I think it's a very small difference though but as you can see I think we do have some sort of a gradient so let's let's see if we can mimic it as close as possible and the RGB for this is 46 46 46 which makes it easy for us and to save you some time you can actually use gradient generator and I really like this one it's CSS gradient I know or you can do it manually inside CSS it's actually fairly simple but let me show you how I did the gradient to start with and as I said the let me open this full screen first of all as I said the color that we will be using is 46 46 46 and 46 I can actually copy this and paste it because we're gonna need two three potentially I think this is good also on the first one I want to make sure that the alpha is set somewhere around 80 so this gives the background color a little bit of opacity which we can always change later and I want to make sure that we have this one around let's say 71 and let's make sure that this is also set to 80 and if it doesn't work will change as I said and we need one more and to add one more you can just click on this one and click around here and that should add another one and for the last one I'm thinking that we put this as alpha to zero so the opacity so it's fully opaque the next thing we want to make sure is that this is set to 180 so the gradient start from the top and goes to the bottom so let's copy this generated gradient to our project in here so it would go something like this I hope this is good PTC let's save it and let's move the browser back to the right side of the screen so as you can see we have this very opaque brown color which is perfect and it looks similar but we'll see later on the next thing that we need to do is obviously we need to make this skew effect and CSS makes this super easy so to do this we can actually use the transform property and then we can do skew X now skew X is going to be excuse me skew X is going to be roughly 45 degrees and as you can see the degrees actually very similar and let me position this very close to the other button so just for the example we are going to remove this later on but just for the example let's position this let's say absolute and move this 100 pixels let's see if he moves okay so that's perfect 200 pixels okay as you can see the skew is perfect and if I was to move it the as you can see the color is very similar but we can further adjust it and so on so let me move this to 160 okay so I've moved the next to the red one which is fine and the next thing that we probably want to do is you're probably wondering but how do we fix the play text to be straight and to do this we are actually going to have to add another element inside the link and let's add a span wrap the play button with span and then we're going to style the span inside here but before I do that I wanted to mention that we need to do the browser prefixes for transform it's important to make sure that transform the transform works on all browsers and for example you will probably have let's add them super quickly you'll probably have webkit transform let me copy this so you have webkit transform we'll have Mozilla transform which is Firefox we'll have Microsoft Microsoft transform and what else do we have maybe opera transform and so on this should now work on all browsers and then we can copy this and and paste it inside the span and the trick here is that we reveal we reverse the skill and to do this we're gonna have to do minus 45 degrees let's save this and as you can see there is no difference and this is because again span is not a block element and to do this we're gonna have to make sure that we display the span as something like inline block or block so let's display the span as block and see what happens as you can see we have play in the middle and it's now looking normal and the way should obviously we need to position it to be similar to this one and to do this we can just do we we have to make sure that this is positioned relative inside the link so position relative and then we can just do top 33 pixels and as you can see this is similarly the gap is very similar to the original apex legend button so far so good the next bit that I want to build is the the line that you see here and this will be fairly easy to do we can actually do this with a pseudo element and in inside the menu link we can actually do i'm present after and for this of course because it's a pseudo element we'll have to add a content and the content will be empty and then we'll have to make sure that this pseudo element is positioned relative to the link so we can position it and let's give it a height of 10 pixels and let's make sure that the pseudo element is full width so it takes the full width of the button so width 100% will be perfect and then of course you you're not seeing it yet because we need to give it a color so let's say background color and the background color would be 80 80 80 and the way the way of taking this is if you go back to the screenshot I've just inspected what color this is and as you can see this is 80 80 80 and let's go back and see what's going on let's save this and see what we have as you can see this is not working as well and we are actually gonna have to make sure that this is positioned as display block and oh excuse me so let's move the display block at the top here and as you can see this is now coming up perfectly fine and of course we need to position it after the position relative let's position it from the top we can position it from the top we can position it 42 pixels and you can position it from the bottom as well it doesn't really matter in this case and let's take get rid of this space okay as you can see this is looking fairly similar now to the original buttons I'm fairly happy with this maybe the the actual text let's have a look the actual text is a little bit gray so let's see on hover actually okay so the the text is always gray but the text on the active button is white so let's make sure that we select the gray color from here okay and let's minimize this and basically we can add the color in here instead of fff we can have it b0 b0 b0 save this and this should now look very similar to the original and now the next bit that I want to focus on is the hover effect on this so this is how the hover will look basically all we have to do is change the the gradient color a little bit and I think oh and also as you can see this line is also changing the color and I believe that this is white yep so let's change the gradient color and let's change this to white on hover so that should be fairly simple inside the menu link because we're using scss we can literally maybe after the pseudo element here we can literally do a hover effect so I'm percent hover and for the hover we'll need to change the background color and for this let's see what background color should we use okay for this we can use something like 69 maybe and maybe we can make this more opaque so 69 so basically you can either go back to the gradient website or you can recreate you can copy this and recreate one yourself and it's actually fairly easy to do it to be honest so let's copy this quickly and let's recreate it so for the full background color let's see let's say 69 and then 69 and then 69 perfect number and and now for the gradient we're gonna have to we're gonna have a 180 degrees then we can have it let's have a look so we're gonna have to copy this a few times and I'm sure there is a shortcut for this okay it doesn't matter let's do 69 and then just copy this everywhere just copy all of it but I've committed now it's so good and let's say that the first one is 0.8 percent opacity then the one which is at 71 is again let's say 8 I don't actually do the job and then we'll leave the one at the bottom at 100 let's save this and see whether the hover works so this looks fairly similar to the one here obviously we can spend more time and get it absolutely perfect if you want to see I think this works quite well so far you can't even tell the difference that much so now we need to focus on the active button for the active button we have some we're gonna have to do something very similar where the the color changes slightly on this line and also the gradient changes ever so slightly and let's have a look at how we can do that so first of all let's go back to index.html and make sure we copy this button and create a copy over here just above and in fact let's put the first one the active one will be play and the second one will be called legends so let's rename this to you legends legends save this and now what I want to do is on your website most likely the way to make the active work most likely we're gonna have to add an active class so let's add an active class here and we will just style the active class to make sure that all button looks active and of course the buttons are now on top of each other because they're positioned absolute and we're gonna have to get rid of that now because here we go left and absolute we'll get rid of save and as you can see we have the play button and the normal button here perfect so let's now style the active button and we actually want to make sure that the active button is kind of linked with the menu button so where when we have menu link and active class together then we want to style let's go down and do that so we have menu link and we also have active and that means when those two classes are together like in here we can do some specific styles so the first thing of course we need to change the background color to red and we need to change this line to red as well let me see what it is okay I'll copy this so okay the first thing let's do is background and I already know that the background RGB would for this one will be 163, just to save your time and it would be 6 and it would be 6 but of course you can inspect this with Photoshop and you'll get very similar color and then the gradient let's do background and that gradient will be a linear gradient again and that would be 180 degrees and then we need RGBA and in fact I'm going to do it in here so you can see a little bit better and the RGBA will be 163 then 6 and 6 then 0 then 0.6 for the opacity and then this will be the starting point of the gradient then we need another one which will be exactly the same but this one will be around the 71% I don't know why I have a 71 it could have been 70 and then the next one will be the 100 and also we need to make sure that the middle one is set to 1 and the last one is set to 0 I believe and okay we have a problem okay we actually we don't need this too much JavaScript I think so let's save this okay I've I've added too many numbers and that's why so okay so that should and we don't have the comma at the end and that should fix our problem basically we have 0.6 opacity then 1 then 0 and if you inspect the button closely you will see that it's very opaque to start with then it goes to very red and then it goes down to 0 opacity and the color of this needs to be changed as well so let's do that now but this is looking very similar now to the one that we have there maybe we can mess with the opacity a little bit more but let's add the line first and we'll see and as you know we added the line with a set the element in here under the menu link so we can do exactly the same thing but instead what we have to do is actually change the background color so inside here we can target the pseudo element after and let's just change the background color to be background white color see to type background color and the background color would be would be ff4e1d and that looks I think that looks very similar let's have a look yeah that's that's exactly the same color so we are fine and now we obviously need to do the hover state of the active button and to do this we can initially do and hover and for the hover the gradient will be ever so slightly different um I've already looked at the color it's a little bit more bright so I kind of guessed it to be honest but I think the color is gonna be if you're following along the color is 189 and 10 and then 10 and then I can copy this for the gradient but just to save you time I've already created that so let me copy and paste it and I will just align it like this so you can see a little bit better okay so the gradient is the gradient is almost identical as this one it goes from 0 or past 0.6 opacity to 1 to 0 and the the color is ever so slightly brighter and also we want to make sure that we have okay something's going wrong let's have a look I didn't say that's why so we had the background color there and also we want to make sure that when we hover over the the literal line below changes as well and the color for this line is going to be a little bit brighter it's like this orangey color ff732e if you're following along and to do this we're gonna have to do inside the hover we're gonna have to do after and for the after we have to do is background color and set the background color to this orangey ff732e color so save this and if we hover over you will see that we have this one as active and as hovered that's why it looks very similar to this almost identical but the only the only difference I can see is the text color so we can change this by giving the text color color of white and now it looks super similar to the original one by apex legends now that we have both of the buttons created I can actually go ahead and replicate let's replicate the rest so we have legends, loadouts, battle pass and store let's super quickly create them and open this so what I can do I'm only gonna replicate the ones that are not active so this one and in visual studio code there is a handy shortcut for this alt and shift and then just press the down arrow one two three four and so we have legends loadout and we have the battle pass I don't know if battle pass is one word I think it's two words and then we have the in fact we have too many buttons so let's remove one let's save this go back to the browser and have a look and at the moment you can actually see them because of the image below so let's remove the image quickly and see what we have so far so if you go if you scroll to the top and remove the background image save this go back to the browser oh and it this is super bright now but you can see that we have all the buttons working quite nice and as you can see as you can see the link is actually working when you hover over them so there isn't a conflict between them as you can see the link ends right here on the edge the arrow should change as you can see and that's absolutely perfect now that we have our menu created the next bit would be to make this look a little bit more like the actual page in here and what I'm going to do is I'm going to add the logo and I'm going to add the navigation bar in the middle of the page and I'm also going to add this those icons but instead of me wasting time on the icons I've actually just cut this from the image and I'm just going to use this instead there is no point of me reading the icons and the text let's begin by creating the top navigation and also for those of you that noticed there is a very there is a gradient in here that we have to watch out for which we can create in a little let's focus on creating the navigation now and if you go back to or index.html file what I will do is I'm going to wrap everything into the header html5 element like this and inside the header we'll have three elements the first one will be a diff with something like a class of logo which will hold which will hold our logo of course and then I will write an image in a second then we're gonna have all navigation so links can be wrapped into this nav tag and of course you can add it as a URL with a list but let's not over complicated now I think this should do the job and then the next thing I'm going to do is add those icons here on the right side of the screen so let's create for that let's create another diff with the class I don't know what they are so let's say side icons I'm sure that you can think of a better name if you are a gamer and you know what they mean and I've actually saved cropped image and saved it into my images so I'm just going to include this straight away so images source and the source for me will be images and the I call the icons jpeg yes it's not transparent but it doesn't really matter the moment and the old let's call it icons okay let's save this and see what we have and for this actually let's add the logo okay so we have the logo we have all navigation and we have the icons and before we actually continue let me create the logo super quickly I promise I won't take too much time so what I can do in Photoshop I'm gonna crop this out of course let's let's upgrade the logo and right click I need to be on this layer I think right click fill and let's try the content aware that almost worked and when this doesn't work let's pick brush choose a color very simple nobody can tell perfect absolutely nobody can tell what I've done there it's fine let me now go ahead and improve the logo of apex legends of course and paste this this is a extra bonus oh yeah okay the logo looks for some reason the logo of apex legends looks so much better right now I hope that this is centerline I don't know it looks almost centerline that should do the job and let's change the this to screen now that looks so much better perfect so let's save this super quickly I'm gonna merge those two layers and just literally crop this like that and of course you can use svg and in fact it might be better if you use svg but I'm going to crop this new project save and I'm gonna save it images and I'm gonna save this as a png and I'll just call it apex logo again now that we have our logo created we have everything that we need so let's include the logo and the logo will be again in the images and now apex logo and the old tag will be apex legends yeah let's save this go back to the browser and as you can see we have the logo the menu and the icons um to save us a lot of time what we can do now is use flex to display the element to center them and make sure they're displayed appropriately just like on the layout here okay let's do that so we can target the header in our css right in here at the top header and for the header let's make sure that the header is displayed as flex and then all we have to do is make sure that the content is justified so justify content space between and we can do space around and space between and I can show you the differences and but let's have a look at how this works so as you can see this is already this was this was so easy to make everything is the way it should be this is on the left side this is on the right side and this is perfectly in the middle just the way I actually want it and obviously if you look at the original we have some space here some margin of 48 pixels and we can do this in so many ways we can either have our menu with a max width and center lined let me show you quickly so for example we can have a max width of something like 1 8 to 8 pixels and of course we want to make sure that this is center aligned of the screen and for this we can reset the we can put the margin as zero auto and as you can see this is now in the middle this is one of the tricks that we can do but if you wanted to use if you wanted to add this gradient which I will show you how to do as well we'll probably have to have the navigation for width but anyways let me quickly show you how to do this gradient and you're probably wondering well right how is this going to work because the button is actually taken a lot more width and if we put a gradient then it's going to be right to the bottom and you are correct we are you're kind of correct if this is what you were thinking and let me show you so the the background color for this will be rgb rgb and the red will be 44 green will be 39 and the blue will be 46 okay okay save this and as you can see the gradient is actually taking the full width which is normal because the buttons the buttons have a big have a height number and that's why it's taking the full height of the buttons so a very easy way to do this without adding images with the background images is to use a gradient and I see if you remember let's let me close this if you remember this we had the second gradient up to 71 percent we can actually use this for advantage to do the background gradient in here and to do this the gradient color will be exactly the same so I've already created it to save us some time but let me show you so if I pay this paste this we have the 180 degrees then the background color is exactly the same as this one but I have the opacity set to 0.5 just to like match here I think the background image here is quite dark so like I think that would work quite nicely and then obviously it becomes quite dark as it goes down and then that's why I've got yeah that's why I've got this as 0.8 and this as 0 and let's see how this looks like okay this is very similar it kind of works and the reason it works is because we have this gradient set to 60 and let me show you so if I was to set this to 40 the gradient will cut off around here so because we have those two set at 60 so if I was to set this one at 40 as well the gradient will stop here and the next one is has opacity of zero so the next one will start from here and end at the bottom here to take 100 percent so that's all good that's perfect and let's leave it at 60 I just calculated it super quickly so this is working quite well but of course now the our header is cutting off in here and if I'm completely honest I don't know if I want this background but I can but there's so many ways of fixing it we can remove the max width and we can have a wrapper inside the header or we can simply do margin margin left to be 48 pixels and margin right to be 48 pixels and you can do this the short way as well we can move the margin now and as you can see oh actually sorry this needs to be padding instead okay and as you can see now the back the gradient is full width we have the spacing just like on the original layout in here and everything is looking good one thing that I noticed is that this needs to be moved at the bottom and to do this flex makes it super easy and what I can do inside the header as we are here we can target the side icons right here and all we have to do is make sure that they are aligned self to the center maybe let's have a look at this this actually works quite well the line is like ever so slightly off which is annoying but I was going to take that line off anyway otherwise I have to change the width a little bit and so on I don't know if I like it with the line or without the line I can't the other thing I can't do is add some margin to this maybe like let's see whether this works yeah I think this worked well actually so this will work let's continue with it to finish off this layout and make it look awesome we can add a background image which I've already I went to the apex legends website and I kindly and I borrowed one from there so the URL will be images and bg image as a background image save this and I think I need two dots do I probably let's save this and as you can see this is looking so much better now again this is why I wasn't so sure about this background color let's have a look how it looks we doubt it yeah I prefer this for now I think and we can remove the margin from this as well it doesn't really matter so much and I think this is looking good okay let's uh let's leave the margin back so it's perfectly aligned with everything else so this is looking fairly good the active button looks quite nice and the normal buttons look just like in the game now this image is not so important and that's why it's not responsive but of course you can make a background the background image to cover and make it responsive and so on but I'm not going to do this and the bonus of this video is animating the layout with gsap so to do this let's go back to our project and obviously we're gonna have to include gsap and for this let's go to okay let's go now to a website called cdmgs.com slash libraries and if we put slash gsap you will see that we have a list of links that we can use for gsap and the one that I need is actually this one here at the bottom it's the I think it's the latest version of gsap the green socket animation 3.2.5 and I'm going to copy the minified version copy this and let's include this in our project and I'm going to include this right here at the bottom so let's do link and let's choose actually let's do script and then let's do source and the source will be the link that we just copied and then we can actually write or JavaScript in here just to make things a little bit easier instead of creating another file so let's create a scripts in here tag and say this so now that we have the gsap cdm included we can actually start doing some simple animations gsap makes animations fairly easy to do I will show you how to use the timeline and the the idea here is that we have the logo animated first and then each individual button animated after that staggering after each other and then we can animate the icons at the end and let me show you how easy this is to do and let's use the timeline for this the gsap timeline let's go back and first of all to create the timeline we can do a variable you can have as a let or va or whatever let's call or variable name something like tl it stands for timeline and this is widely used by the gsap community so this is what it means timeline and then we have to do create we have to do gsap dot timeline and then in here we can add all sorts of options later but we probably won't need this to be honest let's just let's just create a timeline for now and we probably let's yeah in fact we won't need this anymore we won't need this so we're basically creating a timeline and to use the timeline we can simply copy the variable name tl and we can just do two so inside the two is where we're going to be having the options first of all we need to target an element and for example the first element that i want to target is the logo so the logo is a class element so we have to do the dot logo and then what i want to do is i want to make sure that the logo comes from the top of the page and slides down and i'm going to do the same for the rest so nothing too fancy and the to do this we need to change the white position of the logo and the white position will be zero because this is the default position of the the logo right now right now the logo is positioned at zero y and x and then let's just to show you let's set a duration and duration can be set to one you can make it faster but put in zero point something but one will be perfect for this example i think and let's close this now the problem with this is that the logo is already set to zero and if i save this and if i refresh nothing is going to happen so we need to make sure that the logo is actually offset from the page and to do this we can we have to go back to styles and inside the header let's add another style logo and we have to do transform and the transform that we're going to do is transform y and the transform y all we have to make sure is that the logo is hidden is off the page so all logo is roughly 150 pixels i would assume so in this case to be safe let's go with 200 pixels and save this if i refresh now you will see that the logo is sliding from the top nicely that's really cool and let me just quickly remove this comment it just to see where the logo is so as you can see the logo is now hidden which is perfect and then when i enable the animation it comes down nicely so that's perfect and also don't forget that we transform we have to do the browser prefixes just like i've done here and if you're good if you're used to scss you can do a mixing to help you out with this so you don't have to rewrite this all the time but other than that you can literally just copy and paste super quickly just to ensure that this works on all browsers so that's perfect as you can see every time i refresh the logo slides nicely and now we need to make sure that the rest of the elements do the same but i want to make sure that those elements come animated one by one and you could copy and paste the code that we just done but there is an easier way and let me show you how so so we need to make sure that so this is the element that we need to target the menu link to be honest we can actually target the nav and every single link inside it as well so let me show you so again we're gonna have to use the timeline variable and then we're gonna have to use two then we're gonna have to do select the the element that we want to animate and i want to basically animate every single link element inside the nav and we can actually do something like this so every single link inside the nav will be animated and then all i want to do is do exactly the same thing as above i'm gonna change the y position to be zero and i want to make sure that the ratio is roughly around one second and let's save this let's see what's happened okay let's refresh now and as you can see nothing is happening and you probably guessed why it's because the a elements are actually not offset yet so let's do that go back to styles and here we're gonna have a little problem so the problem is that we are already transforming the elements and we're gonna have to add the translate y in here so it's not really a problem but just make sure that you don't add another transform property underneath here with the translate y just okay just don't do this don't do this basically we need to make sure that the new one comes right after the skew x or before whatever but make sure that you have it in the same property we're gonna have to copy this again a few times and i think 200 pixels should do the job excuse me so let me copy this quickly and okay let me disable the animation just so we know and as you can see the menu is now hidden let's go back under this save go back to the browser and we have a little problem and the problem that we are having is if you inspect the elements the ace is that g-sap is actually translating the 200 pixels to the left which is not what we want we actually want to only translate this the y position up and down and to do this let me show you how we can fix it so what we actually have to do is we actually inside here we're actually gonna have to set an x position as well and the x position will have to be set to zero so let's do x zero comma and then leave the direction on so let's save this and see what happens okay now this is working perfectly well everything is in the middle but as you can see the animation is not so good the whole menu is coming together and to make sure that every single element is coming out separately we can use the stagger so we the stagger property and after the duration we can literally just say stagger and let's do stagger after every zero point two that would be milliseconds and if we save this we should get this beautiful effect now that every single element is staggering after each other let's refresh again that looks beautiful and obviously you can speed it up and slow it down and whatever now last but not least we're gonna have to do this for the last element in here and we can literally just copy the logo code so we can copy this and we all we have to do is make sure that we change the class name to be this one the slide icons and we don't have to change the x element here or anything like that I believe let's give it a go so let's save this and again this did not animate because we have not changed the y position and let's do that super quickly so under styles that I see it says we can add it under header and actually here it is slide icons so I can literally copy this transform translate y property minus 200 pixels should do the job save go back to the browser see what happens perfect so that looks really good everything is animated nicely and the last thing I wanted to show you is if we inspect this I just wanted to show you how let me close I just want to show you how the flex works so if I select the header I think I'm using the wrong bra yes this browser doesn't have it but basically we are in Firefox now and let me inspect the elements and I want to show you how the flex works if I click on the if I click on this flex element you'll see how the elements are separate and this is because I've used the space between but you can mess around with your layout and maybe do space around and that gives this gives each element space around as you can see space evenly as well works quite well but I think space between works quite well for my situation and so on this is everything from this tutorial I hope that you enjoyed it and you learned something new let me know if you want to see more tutorials like this I'm trying to create unique tutorials that are not out there simply different something a little bit more fun so if you have any ideas let me know I love doing tutorials like this please please subscribe to my channel and that's everything from now I will see you next time and yeah that's it thank you very much for watching