 Today, we're going to create this Apex Legends page by using HTML, CSS and JavaScript. The data will come from a simple JSON file that I've put together, which you can also fork on GitHub and change if you wish. My name is Roddy and I make web development and design related tutorials. If you're interested in learning how to do this, consider sticking around, like the video, consider subscribing and now let's get started. Hey, welcome everybody and let's get started. I've already created a new project folder called Apex Legends, and inside here is where we're going to be creating the project files. So this folder is already open inside Visual Studio Code. Inside the Explorer here, you will see that I have the Apex Legends folder opened. In order to do this, you create your folder, you go to File, Open folder, and then you should be good to go. The first thing that I'm going to mention is that I'm going to be using one extension called Live Server from here. You can install this and essentially this is going to create a local server and it's going to listen for changes. So every time I make a change on the website that we're developing today, it's going to refresh the browser first, which is great, it's going to save us a lot of time. So let's close this and let's go back to the Explorer and let's start creating some of the files and folders that we need. So let's start with creating a CSS folder and this is going to hold our style sheet. I'm only going to have one and it's going to be cool style and this is going to be style.css. The next folder that I'm going to create is going to be the images folder and this is essentially going to hold all of the media. If we decide that we need some images such as logos, this is what's going to go in there. And in fact, I'm going to be using a video for the background today and so I'm going to drag that in and potentially I'm going to drag an Apex Legends logo as well just in case. So I've dragged a video that I've already edited and made it to loop and then I've got a logo. The next folder that I'm going to create is going to be the script folder. So JS for JavaScript and then inside here, I'm going to put script.js like so and we should be good to go. The next thing that we need to do is create our homepage and for this, I'm going to create a new file called index.html and that's pretty much it. Let's close everything and let's focus on the index.html. So we start type HTML. We get the image abbreviation tool and I can click on the HTML5 in here. This creates a very basic HTML5 document for us and we can start by changing the title in here. So let's do Apex Legends like so and save. Now inside the header, we're going to link the style sheet, which is inside the CSS folder. And in order to do this, we can do link CSS and this is basically creating a link, row, style sheet, href equals and then we need to go to the CSS folder and slash style.css like so, save this. And then the next thing that we need to do is link the JavaScript file, which is going to be script and then with this one here, the second one with the source. So we have script source equals and this is going to be JS because we're going into the JS folder and then slash script.js like so. And also we can do this as a deferred script and essentially what this does is executes the script only when the page has finished passing. So instead of putting this at the bottom of our HTML here, we can just add in here with the deferred option here and say the last thing that I need to include in here is going to be the actual font that we're going to be using today. And we can actually get this font from all font.net download slash agency dash FB. This is the only font that I found that looks very similar to the original Apex Legends font. It looks pretty cool. And the two options, of course, you can potentially download this and include it in your project. But what I'm going to do is I'm going to use the standard way in here and get this link from here, copy it, go back and include this in here as well. And then I'm going to go back and just have a look at this font family. I'm going to grab this as well. And as you can see, they have a sample code which says that you need to put the font family inside the body, which we'll do in a second. Let's go back. In fact, let's close this and let's go back. And I'm going to view and then we'll wrap. So you can see absolutely everything here. Add a little bit of text. Let's just try an H1 and let's say Apex Legends like so and save. Now let's start this with the live server. And I can click here at the bottom, go live. And this will take a second. And it's going to create a service. Here it is. We have the Apex Legends. And if I put something else 123 save, this will automatically refresh the page for me, which is great. That's exactly what I want. As we have our style sheet linked, let's open in from explorer css style.css. And let's start adding some of the basic styling that we need for this page. So for the body, I'm going to reset all the margin. Let's do a few basic styles. And then I'm going to set the font family to the agency FB one that we just grabbed. If this doesn't work, it's going to default to aerial. And then this is going to be a sans serif font like so. Go back. You will see that we have a very similar font to the original Apex Legends, which is great. I'm going to zoom out and that's it. Now the next thing that I'm going to do is convert the body background to a dark one. So background color to something like even black will do in this case, because the video that I'm going to be included for the background, it's very dark. So I don't want it to kind of like go from white to black if he needs to load a little bit. And also I don't want to mention that the video is quite large, but we just having fun here. So I'm going to use it. There might be a way of making it a little bit smaller than it is. And I want to mention that if you wish to add an image instead, you can add it in here instead of a background color and position it the way you want. And this will be a lot faster than obviously loading a large video. The next thing I want to do is make sure that all of the images fully responsive today. So I'm going to do IMG. And then inside Calibra gets max weight of 100% and then height of auto. And sometimes we get a little bit of a gap between the images at the bottom. So I'm going to do display block just in case and save this. Okay, we should be good to go. Now the first thing that we can do is get the video background to work. So I'm going to remove this and let's start by adding the video. You can use the HTML video tag. And this is going to have a class of full screen video. And then this is going to be auto play. And then the auto play is going to be set to auto play like so. We need to mute it because most browsers will not are auto player if it's not muted. And then the last thing that I want to do is make sure that this video loops all the time. So I'm just going to put loop like so. Inside here is where we put the sources of the video. And normally it's best to have different sources like different extensions just so the video plays on all browsers. But today I only have one source and this is going to be source. And it's going to be equal. So inside images is where I paste it. And this is equals apex dash background dash loop dot mp4. So I don't have any other ones but mp4 should be okay. If the browser does not support this video tag, I'm just going to say your browser. Your browser does not support the video tag. Save this and let's go back. As you can see we have the video working but there are a few problems. So the video is quite large and it's actually adding a little bit of a scroll. And it's probably as you can see it's not staying in the center. So we just have the full video rendered and it's not responsive at all. Let's make this responsive. So in order to do this I'm going to grab the full screen video class and go back to star.tss. And inside here I'm going to do dot which is a class and then full screen video. This is going to be a little bit of a trickery here but essentially I want to position it on the home page. And to do this I'm going to position it as fixed. And then I want to set any overflow to hidden. I want to make sure that the top is set to 50 percent and this is what's going to make it always center aligned. And I want to do the same thing. So left is going to be set to 50 percent. And then I'm going to do the minimum width to be 100 percent. So it's always full screen and minimal height 100 percent. And then the width I'm going to set to auto height to auto. And then in order to push this video to be in the middle we can do translate. This is essentially a transform X and Y. So I'm going to do for the X I'm going to do minus 50 percent. And for the Y I'm going to do minus 50 percent as well. Let's say go back. You will see that we are getting no scroll anywhere. The video is full screen. This is right in the middle. And if I put the browser down like so sorry if I scroll the browser into mobile you'll see that it it in the middle. Perfect. But the last thing that I just remembered is that for the full screen we might need to put a Z index of something like minus one or whatever. Just so we have everything else above it and we should be good to go. Okay. So the next section will be to actually get some of the data and then we can style it. So in order to do this I'm going to wrap everything inside the container purely for styling purposes. So deep with a class name of container. And this is going to help us style everything later on. And for the first thing that I'm going to do is inside here this is going to be this is where we're going to create a detailed view of a legend. So this is going to be deep with the idea of a legend. And this is where we're going to display the big image and some of the information about each legend. Now the next one will be the list of all legends. So the icons of them. And in order to do this I'm going to put them inside a UL which is an ordered list with the idea of legends like so. And inside this unordered list is where we're going to be creating all the lists for every single legend. And when we press and when we click on the legend we'll display the information in here. That's pretty much it. And the reason I've done it this way starting with the legend first and then the legend is because we are going to be styling everything from mobile first and going up. If we go back now you won't be able to see anything just yet. But what we can do maybe for the legends just so we see the information maybe for the legends we can make the text white. So what I'm going to do is hash legends. And then inside here I'm going to do color of 123 f's which is white. And I think that we should be good to go in here. So of course you're not going to see anything just yet. This is because we need to add the JavaScript. So for the JavaScript these are going to be very important and I'm going to show you how we can link them. So we've already included the JavaScript in here and I'm going to do control and press on the script here. And this is going to open the script.js file inside a new tab. And the other way is just going inside the JS file and clicking on script.js. If you wish to check whether this is working you can do something like console.log or alert whatever. And then apex legends. If I save this and if I go back to the browser right click inspect. And then if I click on console you will see that we have apex legends here which means that our script is linked and we can start using it. Let's remove this and let's start setting up everything. So let's do everything step by step. And the first thing that we can do is grab the data. So I'm going to do a const of URL. And then inside here is where I'm going to put the URL to the API that I created. It's pretty much a JSON file that I created and published on GitHub. And the reason for this is because I did create a photo on API but I'm struggling to find a hosting platform to put it on. So for now I'm just going to have this. And if you want to go and look at the actual GitHub page you can go to my URL here which is right the brand.github.io slash apex legends. And the actual file that we're going to be using today is called data.json. Like so if I show you this in the browser super quickly this will return a lot of data that I've scraped from the official website manually. I didn't realize that the 22 characters and actually prepared it to work with MongoDB. But unfortunately I'm struggling to find a free hosting that I can host the full API on. But this will be good enough anyway. So we have things such as the nickname quote type description which is has some HTML characters. And that's going to make it easier on us. We have the name age home thumbnails and I've done all the thumbnails. I've actually done manually. So I had to manually scrape them and then edit them in Photoshop. We have the abilities with the type title description icon and an image obviously here. And then I also have the official trailers in here. So if I was to click on the large image you will see that this is a fairly large image. And in fact this should be gone now because I just edited a few hours ago because I edited everything again earlier and improved them. So I removed the shadow because it looked a little bit odd as you can see. But I'll have a look into this. Now let's start creating the get legends function which is going to grab the data from here. So to do this this is going to be an asynchronous function. And it's going to be function and we can call it get legends. Like so. And then inside curly bracket is where we do the logic because this is an asynchronous function. We can do a try catch. So if you want to catch any errors and inside here you can do console log log and log the errors like so. Okay. And inside the try is where we're going to do the main logic to grab the data. So to do this I'm going to create a new const which is going to be called response. And then this is going to be equals await. And then we're going to be using fetch in this case. So I'm going to do fetch and then I'm just going to do URL. So we are fetching this URL. And in fact you can copy and paste in here. If you wish that would be absolutely fine. The next thing that we need to do is to wait for the response and save the data inside a const of data. So const data and this is going to be equals await. And then we're going to do response in dot json format like so and then that's it. And now if we get the data what we can do is for example console log it. So let's do a console dot log and we can console log the data like so. So let's go back to the browser, right click inspect and inside console here I'm going to zoom in quite a bit. So you can see whoops and I'm going to refresh now and we're not getting anything and this is purely because the function actually didn't run and this is because I didn't run the function anywhere. So we need to get the legends and run the function somewhere here. So get legends and run it like so. Okay, so we'll save this now go back and as you can see straight away the browser refreshed. I'm going to refresh one more time and we get the legends in here and every legend has ability, age, description, home name, nickname, quote thumbnails and so much more. Now that we get the data we can look into how we can do a pretty cool loader. So the loader is just nice to half a guess. So what I'm going to do inside the HTML in here and maybe just below the video, I'm going to create a new div. So div with the ID and this is going to be called loading like so. And inside this div, I'm going to be styling this a little bit. So I'm just going to do div with the ID of loading frame. So on inside here, I'm just going to do let's say loading. So and if you go back, you can't even see it. Oh, you can it's here but because the text is black, you probably won't be able to see. All right, let's start this up a little bit. So what I'm going to do grab the loading. Let's go to start dot CSS. And inside here, we can do hash and then loading because this is an ID. So for the loading, I'm going to make sure this is full screen. So let's do background color. And this is going to be RGB A and then inside we do zero, zero, zero, zero. And then point six, which is the alpha. So we have three zeros RGB and then a for alpha, which is going to make their background slightly opaque. It's going to put a little bit of opacity. And then let's put a Z index to this of something like two that will be fine. And then position this as fixed like so. Then let's put it at top zero, right zero, bottom zero, left zero. And then if you want to display everything inside in the center, maybe we can just display as display as grid or flex, whatever you wish. And then I'm just going to justify the content to the center and then align content to the center as well. And that's going to put everything in the center. And then let's just change the color to be white. So three f's like so. And then the font size, I'm just going to put something like to RAM or use pixels, whatever you wish. We just haven't fun in here. So if I go back, you will see that we're getting loading. But I also want to style the frame a little bit, which is this deep here. So this is also an ID. I'm going to grab it. And then inside here, I'm going to hash it in loading frame. And for the loading frame, I'm just going to do border top of two pixels solid white. And I'm going to copy this. So all shift down and I'm going to do border bottom of two pixels solid and white. Let's add a little bit of padding as well, maybe of one ram and two ram. So there'll be a little bit more padding to the left and right, then the top and bottom. This is how it looks. So it's a little bit simple, but I think it's going to look cool anyway. All right. So what we need to achieve now, if we go back to index.html, we need to grab this with JavaScript and tell it to hide when we load the data. So what I'm going to do, maybe inside here, we can do const loader equals, and we need to select that div with the ID of loading. So document dot get element by ID, because this is an ID. And the ID is just called loading like so. And now that we have this const, we can actually add classes to it and whatnot. So what I'm going to do inside here is when we grab the data and the way we can check for this is potentially we can do if, yeah, if we get a response, we can grab the loader. So and then we can give it a style and then this is going to be display of equals none. So this is essentially giving the loader a style of display when we have a response. If we don't have a response, then maybe we can put an error or something like this. So what I'm going to do, save this. And if I go back, as you can see, the loader is gone. If I refresh, yeah, you might be able to, you might be able to see here. Or the other way to do it is right click inspect. And then if you go to network, and then if you click here on no throttling, if you click on slow 3G, hopefully this will be, this will slow the page down. So I'm going to refresh, as you can see, this is much slower now. And okay, yeah, it's kind of hard to see because it loads the data quite fast, but the loading is there and then it disappears, which is the important bit. So no throttling. Okay, cool. Refresh this and say we could potentially change this from loading to something like error. So what I'm going to do is if we catch an error instead of console login here, we could do the same thing as here. So I'm going to do the loader and then we can do dot inner HTML. This time is because I want to change the HTML of it. And this time this is going to be called something like error, error like so, and the like that. So of course, we probably won't see it now because we're getting the data. But let's say we were not getting the data and I'm just going to put JSON123. So as you can see, we refresh and we get error. This is actually removing the, this is actually removing this loading frame as well, which is fine. I mean, what we can do is create another, we can select the loading frame ID, just like I have it in here and replace it if you wish to. So exactly the same thing and loading frame, I'm going to do anyway. So we're going to do get element by the loading dash frame. And this is going to be loading frame. I didn't want to do this, but let's just do anyway. So instead of loader, we do loading frame in HTML error. Okay. Now we have the lines in here. And if we refresh, we have the error. Cool. That's absolutely fine. Let's remove the 123 in here because we do want the data and save it. We could potentially start by listing some of the data. So the first thing that we could do is list the legends. And for listing the legends, as I mentioned earlier in this tutorial, we're going to be creating lists inside this unordered list. And this unordered list has an ID of legends. So let's grab that. Let's go back to script.js. And let's say we do it inside here. So I'm going to do const and we want to select kind of like the URL or you can put legends, whatever you wish. And then this is going to be equals to document dot get element by ID, like so. And we are getting the legends. Cool. And inside here, I want to actually create a document fragment. And the reason for this is because when a fragment of data is ready, we'll be able to display all the data with a single render. In order to do this, I'm going to do const list. And then this is going to be because document and then dot create document fragment and the document and we just close it like so. So let's create a new function. And this is going to be called list legends. We can go down here and maybe we can just make a little space like so. So let's do function. And then this is going to be called list legends like so. And inside here is where we're going to pass some data. So this data is actually going to come from this function here. What I want to do is grab this function list legends and put it somewhere inside here. So list legends and I want to pass the data, grab data and pass it. So essentially we are triggering this function here and we are passing the data. And now we can actually grab that data and we can loop for it. In order to do this inside here is where we can do data. So we're grabbing that data that we passed and we can do map. And inside the map this is going to be a function. And then maybe we can call each element a legend for example. And then inside here we open and close curly brackets like so. This is going to be a little bit tricky but essentially let's create a very simple example. So for example we can do cons and let's say legend text. And this is going to be equals in let's say single quotes legend like so. That's absolutely fine. And the many ways of doing this but I want to show you a cool way that it's going to make it a little bit easier for us to understand what we are adding. And what we need to do now is create an element, a list element that we want to insert. So I'm going to do const item equals document. And then dot create element, create element like so. And inside here we do a list. This is the element that I want to create. And then I want to say item dot inner HTML just like we did earlier equals. And then we do the legend dot text. So we're creating a list and inside this list we're essentially inserting some HTML from here which is just legend at the moment. And we actually need to append this. So we can do list which is the fragment here that we created the document fragment. So I'm doing the list and we are pending everything inside. So dot append child. And then inside here we append the item. This is going to make a lot of sense in a second. But the last thing that we need to do is make sure that we're actually appending all this data inside this URL here. And to do this we can go just outside the map and we can do URL because we selected the earlier inside here document get element by ID which is the legend. So I'm saying URL dot append child and then we append the list. So if I save this potentially we should be able to see 22 legends. Okay. Yeah. So we're getting 22 legends. And this is because I mean I could have made the text a little bigger. I'll zoom in. This is because we have 22 items as you can see inspect. And then in the console we have an array of 22 legends in here. And that's why we're getting legend 22 times. Now of course we can start adding some of the data. And in this case I'm going to be using the thumbnail here and I'm going to be using the default one. And then I'm going to be selecting the nickname as well. Let me show you how we can do this. So if we go back instead of a legend here and instead of single quotes we can do in the slanted single quotes. And this is because I want to be able to use template literals. So this is going to allow us to essentially kind of like grab the data inside here kind of like it will look like HTML in a sense. So what I'm going to do is let's start with a let's start with the nickname actually. So div with a class equals and let's say this is called legend legend nickname. Okay. Make sure that you close this div. We need to close this div like so. And inside here is where we can get the data. So to do this dollar sign curly brackets are open and close curly brackets. And we can use the legend keyword here. Put it inside here and then we can start grabbing the data by doing the dot notation. And then for example, nickname and like so save it. All right. If I go back, you should be able to see Ash and all the other legends inside here listed. So the same goes to the picture. Essentially, I can create an image inside here. And this is going to be IMG source. And this is going to be equals. And then dollar sign inside here, curly bracket and then legend. And then dot thumbnail. Because we're going down the tree, we have thumbnail and then we have dot default like so. And then we can close this. And of course, you might want to have an old text like so. And we can just say, maybe we can just grab the legend nickname inside here and close the image. Like so to go back, you'll see that we're getting all the images. They are very small images. And they are small on purpose because I mean, they don't look small. The images are pretty small. And the reason for this is because obviously I want to, I wanted to optimize them as much as I can without losing much quality. Now, the next thing that we could do, let me zoom out first of all. Okay. Now that we have all the legends here, the next thing that we can do is display the actual legend that will be able to select and display the information. Now, first of all, as a default, I want to display the first legend. In order to do this, let's start by writing another function. So I'm going to tidy this up super quickly. And below this function here, below the list legends, we're going to create one more. So if you remember earlier in this tutorial, we created this diff with the idea of legend. This is where we're going to insert the detailed view of a legend. So I'm going to grab this and I'm going to do it inside here. So let's do a const of legend. And this is going to be because a document dot get element by ID. And inside here, we can do legend like so. Perfect. We can move this to the top in a second. It's not a problem. And then we can create the function. So the photo function, I'm going to call a view detail. And we need to pass some data. So I'm going to do curly brackets and show you how we can pass the data. When we load some of the data from here from get legends, not only I want to list the legends, but I also want to pass the data to the view detail, like so, but I only want to pass the first element, which, which starts with zero, like so. So we're essentially triggering this function and we're passing the first legend. Now we can use this data, this legend to display. Now I'm going to do something different here. I'm actually just going to insert an HTML and every time we press on the legend, this is just going to override the existing HTML is inside here. I'm going to do let result. And this is going to be cool. And again, slanted curly bracket, just because I want to write template literal. And inside here, we can start with the image for the image. We potentially could grab this one here, copy, paste. And this is going to be image source of a legend. Now this won't work. We can either call, we can either call this legend or we can just swap it with data, whatever you wish. You can just name it whatever you like. So I'm going to put data dot thumbnail. And then instead of default, we can do something like, I think we had three options. Medium is what I'm going to do. And I'm going to set the old to the nickname one more time. So we can start with this, start simple, and then we'll build and then we'll build it up. Close this, by the way. And now let's see how we can render it. Now the reason I grabbed this element here with the idea of legend is because I want to insert the HTML inside here. We've already done it once, I think above. So what I'm going to do is legend dot inner HTML. And then we insert the results inside like so. Oops. No, no, no, no. This is going to be equals and then inside here, the result. Okay. Legend dot inner HTML equals result. Save this. Let's go back. And as you can see, we actually have an ash, which is the first character. And then we have the list. Obviously the styling is not very good at the moment. But we'll sort this in a second. And the next thing I want to do is when I click on the legend, any of them, I want to actually replace the information in here. And let me show you how we can actually add a little bit more information. So for example, if you wish to add the nickname, you already know how to do this. You copy this in here, for example. And maybe we can do a div with the class of legend data and inside here, we can style this nicely later on. So I'm going to do another div and then this is going to be, let's say, a nickname. Let's say name, something different. And then inside here with the dollar sign data dot name. And then we close the div like so. And if we save, if you go back, you'll see that it does say name doctor Ashley, as you can see here. By the way, sometimes you might see that the legends are not cut properly. Just like here. Just realized that this is because I had to do all the cropping manually of all the images. But I'll include the Photoshop files. If you wish to contribute to it and edit them a little bit better than I did. But most of them should be fine. Anyways, now the next thing that we need to do is make sure that every time we click on the legend, that this actually changes. And in order to do this, we can go here to list legends. And we can do something super quick in here under pretty much everything. We can actually add an on click event listener to each item. So in order to do this, we can do item dot on click. And by the way, there are many methods of doing this, but I'm just going to do a simple one. So function and then inside here, we do, for example, view detail, which is the function that I want to trigger. So view detail, and I want to pass the new data, the data that we're clicking on now. So we're essentially mapping through each legend. And each learning is going to have its own on click. And every time we click on a specific legend, we want to pass this data to the view detail. And then we insert here, we pass the legend in this case. So and then so we trigger this function, we pass the data in here, and then we display the data. Save this. So if I go down and click on this one here, you will see that the legend changed. And if I do this one here, you will see that the legend changed. And so on. And this is how we can change the information. Now let's start styling and make it look a little bit more presentable, starting from mobile. So I'm going to move this to the right. The first thing that I'm going to try target is the list of legends, which is this one here can do, we can start in here. Okay, legends list. Inside here, we start with hash legends. And let's do a little bit of styling. So because this is a node list, I'm going to reset everything. Margin zero. Adding zero. List style type to be none. I'm going to convert this into a display. Lex just because I want all of the legends to be in one line. As you can see, let's give him a little bit of a gap of 10 pixels for the scroll. I'm going to do overflow X to be scroll. So we're getting a little bit of a scroll here, which is great. And then I'm going to do a height for this, which is going to be 100 pixels. I'm going to do width to be 100%. Let's do padding left to be around 20 pixels. So we have a little space, padding dash bottom of 10 pixels. And also I want to position this at the bottom. So position fixed. And then bottom of zero left of zero right of zero. Perfect. And now we actually need to do the list. So if we inspect this, you will see that in the unordered list, here it is in another list, we actually have the list, which we created earlier. So ID of legends in here. And then we target the list inside by doing a lie like so. All right. Let's start with the border. Two pixel solid RGBA, because I want to give a little bit of an alpha value. So one, one, nine, one, one, eight, six, one, 90, and then 0.6. Save this. This gives it a little bit of a border display inline in our flex in this case, and then flex direction can be column. Then we're going to do the width for each character to be around 90 pixels. Flex shrink is going to be set to zero because I don't want them to shrink like so. What else do we need? I'm going to put a background. So background, and this is going to be a linear gradient. And for the gradient, I'm going to put 180 degrees. And then we're going to start with RGB. RGBA. And this is going to be zero, zero. And then 0.6 is the first starting from zero percent. And then comma, and then for the rest is going to be RGBA. And then again, zero, zero, zero. And then this time is going to be fully black. So one and two hundred percent. So this is going to create a nice gradient. As you can see, it has a little bit of gradient in there, which is cool. I want to make it look a little bit more like apex legend. So all right. And for this, I'm going to use the transform tool and I'm going to use Q to the X. And then this is going to be minus 25 degrees. Okay. This lands the everything inside. And I'm going to do overflow healing. So we can crop the images like so, as you can see. And then I'm going to do maybe cursor. We can set to pointer and then position to be relative because I'm going to be adding the names underneath them. But also I want to fix the images. So in order to do this, I'm going to grab the legend list. And I'm going to say legend list image like so. And in order to fix the images, all I can do is revert the transform skew. So I'm going to copy this transform skew to 20 degrees, I think. Yep. That's absolutely fine. That's looking good. And now let's have a look at the actual nickname. I believe that I added a class name of nickname to it. So yep. Legend nickname. Oh, and this is a class. So I'm going to grab it and I'm going to say inside the styles. I'm going to say legends, legends. And if we have a class name of legend nickname, we want to start this with the background color to be something gray. So E0E2E1. I want the text to be in the center. I want the position to be absolute to the relative, which is this one here. And I want to, I want to position this to the bottom. The, let's have a look. Yep. The name is coming up already, which is good. And potentially somewhere I've put text as white. And I think this is what's messing up. So, okay. Legends white, we put this earlier and so I'm going to remove this. And the default is going to be, the text is going to be black and now we can continue. So legend nickname, bottom right. I'm going to have to do minus five pixels because of the transform that we've added. And the same for the left. Let's do minus five pixels. Yep. That's already looking good. A little bit of padding to make it look a little bit more presentable. Z index potentially one. Yep. That's looking good. And do we need to, we can transform this as well because I don't like the way it looks. So skew. And this is going to be skew to the X of 25 degrees. Yep. Looking good. And in font, we can change it to size to 0.9 or something like this. This doesn't look good. It's because I didn't close the transform. Okay. So this is looking cool. Don't know if I've zoomed in. No, that's, that's okay. Of course the mobile, you won't be able to see this, a gliss crowbar, but and we can also modify if you wish. We'll do that in second. And we should be good to go. All right. Now, if we go on desktop, you will see that this is still stuck at the bottom. So we're going to have to put it here in the middle and make sure that everything is kind of like nicely aligned in order to do this. Let's, let's create a media query. So I'm going to create this somewhere here at the bottom and I'm going to do at media. And this is going to be min with, and then I'm going to say seven, seven, six, eight pixels like so. And inside here, we can target the legends and we can convert this to a flex. First of all, it's going to be flex one, one, zero. So it takes half of the space available. I'll show you in a second. This is going to be turning into position to relative. Yeah. This is going to be position is relative for now. The overflow X will be set reset to auto. We can have the flex wrap reset to wrap. So we want the, the legends wrap. The height can be auto. And then we can align and then we can align the content inside to center. And then we can align items to center is one. Okay. As you can see, this is, it has a little scroll, but I think that it should be fine when we create the container in a second. Maybe we should do that now. We can add it pretty much anywhere. So for the container, let's do container and then display. And then we're going to do margin of zero, zero auto because I want it to be in the middle. And then I'm going to give everything a gap in between the two elements. And then I'm going to say a max width and you can modify this further to your liking. So I'm going to say one, seven, eight, zero. And on the left and right, I'm going to add a little bit of padding to zero to zero and one REM. And the height, I'm going to set 200 V H or mobile. So let's have a look. Okay. So mobile, this is going to be first year mobile, as you can see. And then this is second. When we go up on desktop, I want to kind of like flip them around. So what we can do is create a media query. So let's grab the media and inside here, we can do container. And then we can do flex direction and then roll reverse. And we should be good to go. Perfect. Now we have the legends here. If I click on one of them, as you can see, some of them are not loaded. And because they're loading and they don't have a specific height, sometimes the scroll jumps, but we can fix this. So don't worry, we'll fix this in a second. But everything else is working as it should. So the next thing that we can do is actually fix this, fix the actual legend. Okay. So for the single legend, we can go down here and we can sell single legend. And this is just, this is just legend. And we can do max height to be 600 pixels for mobile display flex. And this is just because we can justify the content in the center. And when we go up, I want this to take to be, to have the same size, like we have here on the left side, I want this to take the same size of this column here. So that's pretty much it. And then position, position relative like so. The next thing that I'm going to do is add another media query for the legend. So inside here, I'm going to grab the legend and let's reset some of the things. So for example, we can align items center and we can do the max height to be 100%. Okay, this is looking good. But we also have in a little bit of an issue with the legend because it's kind of like taking a lot of space. So what I can do is grab the legend here. And as a default, I can say legend image. And then we can say max height to be 100%. Because the actual height is bigger than the width, we're going to do max height. If you go back, as you can see, no scroll now, it fits. And if I click on any of them, we don't get the annoying scroll. And that's pretty cool. And we do get the information somewhere. It's hiding at the moment. Don't know where it is. Oh, here it is. But we can start this as well. Okay, one thing that I just noticed is that none of these have a hover effect or selected effect. But what I'm going to do for now is just have a hover effect for them. So let's go back and let's find the legends and the list here. So legend list is what I need. And for them and for the legend list, we can do a hover effect like so. And we can just change the border. So border of two pixels, solid and then RGB and then zero and then 133 and then 199. That would be it. That's like a blueish color. And then for the nickname, let's do that as well. So I'm going to copy this and say legend list hover. And then when we hover on this, we want to do legend, nickname and change the background color. So ground color and then we set it to, actually, we set it to this one here. And we get, so if I go back, you'll see that we're getting a hover bird. The actual font, one, it looks a little bit small. So potentially I can make it a little bit bigger. Two, I'm going to change the color to be white. Color, 123. Okay. But these are improvements that you can always do. The last thing that I'm going to do is style this box here, the information box. And let's see what we could do. So if I go to scripts.js, we call that JSON data. And this is a class name. So install.css somewhere at the bottom, we can do that legend data. And I'm going to start with a border. Two pixel solid RGBA, one on one. And it's actually uncopy in the one from the other legends. So this is going to be the one. And then I'm going to put the color to be actually white. So three Fs. And then I'm going to make the backdrop to be blurry. So backdrop filter. And this is going to be blur, blur. And then this is going to be close to 10 pixels. And then I'm going to position this as absolute. So I can position it at the bottom. So absolute. And this is why position the actual legend as relative earlier, if you noticed. And so this is going to be absolute. And I'm going to do left to be zero. Bottom to be 90 pixels. And then we can do padding to be 10 pixels. Max height to be 300 pixels. And then if we have an overflow of information, we can have all the floats auto so we get a scroll bar. So here it is at the moment doesn't look very good. But what I could do is I could either put it from the left side to the right side. Or we could put some more information. So let's add some more data. I'm going to go back to script.js. And inside here, I'm going to copy this a couple of times. So let's say we have the name age, home type and description. So we have eight age. This is going to be age. This is going to be the home. This is going to be the home home. This is going to be the type. And then this is going to be the type. And then let's do the description as last. And for the description, I think I'll just call the desk for short. Save this. And now we get much more information. And this is looking pretty cool. The text is definitely a little bit smaller than I would like it to be. So maybe we can change it from here font size to be 1.2 rem. That's a little bit better, I guess. I mean, I think the actual text is a little bit hard to read, maybe. But yeah, this is looking pretty cool. And the last thing that we could do potentially is maybe just fix the scrolls a little bit. I'm not sure whether this is going to work on all browsers, but let's do anyway. It's going to work on WebKit at least. So dot dot. And then I'm going to do WebKit and then dash scroll bar. Nope, this one here, scroll bar. And then for the scroll bar, I'm going to say width of 10 pixels like so. The next thing that we can do is scroll bar track. So I'm going to copy this and put scroll bar dash track. And then for the track, I'm just going to put a background color. So this is going to be background color. And this is going to be RGB 48, 48 of 48. And then like this, RGB or 40, 40, 40. And the last thing that I'm going to change is the term. So I'm going to do WebKit, scroll bar, term. And this is going to be something like apex legend color. So something like EF4718 and close this. Save it. And now we have a very cool apex legend, the scroll bar. I mean, and now if I click on any of the legends, we have it in here. And the last thing that we could do, which I didn't actually intend, is to up to animate it super quickly. Okay, if we go here, here we go, we've got the CDN link here. So I'm going to grab this, let's go back to the index.html. And I'm going to, I'm going to just do this super quickly here at the bottom. So above the body, I'm going to do script. And then I'm going to do source. And I'm going to paste the gpsas source and insert here. We need to close the script as well. And now we can potentially use gsap as well. So let's do a script super quickly and close it. So we could potentially do a timeline with gsap. So we can do const timeline. And this is going to be called gsap timeline likes. So to initialize a new timeline. And now we can do timeline dot two. And then we can target different areas. So for example, we could do the legends ul. So we can do a hash legends. And then we can change the position of this. So let's say the position of this is y of zero. And then the duration can be 0.6. And then the, and then we can change the pasty to one something super simple. And now in order to make this work, we need to go to legends somewhere around here and put the opacity as zero because we want to start from zero. And then we can do transform. And then maybe do a transform here. No. Okay. We can do transform translate y. And then we can do minus 200 pixels. I think this is, yeah, translate one minus 200 pixels. I think I'm using the old version of transform, which is fine. So now if we go back and refresh, we get this nice animation. And we can potentially do the same thing for the rest. So let's see what the legend is called. The legend is called idea of legend. So on the timeline here, we can do, so we can close this and do another line all shifting down. And we can do hash legend. And from Y zero, we can do the same thing. Duration of 0.6 and then opacity of one. That would be fine. Let's just see how this goes. So I'm actually going to copy this and find the legend. So single legend. We add the stuff in here and let's see what happens. Okay. This is looking pretty cool. But yeah, the problem is that this diff contains this diff. And that's why, but what I can do is put the same stuff on the legend's data and then animate this later on. So we can do another line. Yeah, I wasn't ready for this, but why not? Why not do it on the edge? So legend data, maybe the duration can be the same, but we can stagger this one. Yeah, potentially when this finishes, so let's stagger it. We can stagger it for 0.2 seconds. Let's see if this can work. It did not. Thing here is not appearing because it's actually not created yet, I believe. And I didn't plan for this, but what you can do is potentially move this code inside the script. And maybe when you created the data, you do the timeline. So you could do this outside potentially and say, well, let's have a look. Yeah, this is a potential thing. And now if you click on something, you will animate them every time. Yeah, and that's pretty much if we go on mobile, we have the same thing here. Maybe this needs to be positioned a little bit better, but it seems to work anyway. So that's pretty much it. So that's going to be pretty much everything from this tutorial. There was a lot more that I could have done, but grabbing all the data, making the API, cutting all the 32 characters, saving them in four different formats, making the video loop. It's been kind of like a crazy thing to do. So if you appreciate the effort, please like this video, consider subscribing for more tutorials like this. And I will see you in the next one. Bye.