 Hi everybody, welcome to another video tutorial with me, Raddy, and you're watching my channel, Raddy the Brand. Today, I've got a very exciting video for you. I want to show you how to recreate the Battle.net UI using HTML and CSS in the browser. I understand that this video is not for everybody, but if you're aspiring front-end web developer, there is a lot to learn from recreating complex user interfaces, just like the one we're doing today. As always, all the source files will be linked in the description below. And if you like videos just like this, please consider subscribing to my channel, smash the like button and comment below to let me know what you want to see next, or if you have any questions. Now let's jump into the computer and get started. Welcome everybody, let's get started. So this is the original Battle.net UI, which we'll be coding today. And because this is a Windows application, it's hard to zoom in and measure some of the elements. So what I've done is I've taken a screenshot and I've pasted the screenshot in Photoshop so we can zoom in and out and move around and figure out how much spacing we need between elements, the height of elements, and so on. So I'm going to close the real application now and we'll just focus on the Photoshop file when we need it. First of all, let's quickly go through the project folder. And to start with, as usual, we have index.html, which contains our HTML file. Then we have images folder, which contains all the assets that we're going to need for this project. And then last but not least, we have the CSS. And for the CSS, I'm using SCSS. So as you can see here in the HTML, I've linked the star sheet, which is main.css. And the way it works, the SCSS is compiled to the main.css file. And this is how it works. Anyways, let's get started by building this project. So I'm going to close the explorer. I'm going to switch, watch SAS, and I'm just going to go live so I don't have to refresh every time I make changes. As you can see, we have a blank page now. And let's start building some of the UI elements. Before we begin with this, I wanted to mention that I couldn't find exactly the same images here. But what I've done, I found a very similar one on the Buttonnet website, which is here, which is this one. And then I edited it slightly in Photoshop to make it look similar on the real application. And this is the result. It looks very similar. And I think that this will be perfect for the job. So let's close this and focus on the layout. First of all, we need to figure out how we're going to make the layout. We have a header, we have a sidebar, and we have a main section. Grid makes this very easy to do. We can basically make two columns. This is going to be our first column, and this is going to be our second column. And we can make two rows. Let me show you how this works. But before we do this, let's create some of the elements in our HTML. So first of all, because we'll be using Grid, I think it would be nice to wrap everything in a div with a class of wrapper. So let's do that. And inside this wrapper is where we'll be adding all of our elements. The first one being the header. So let's add a header. And I'm just going to put a class name for this header. And then inside here, let's add something like, let's add some dummy text. So header like this. And then let's do the sidebar now. So for the sidebar, we can do a side. And the class name can be sidebar. Let's add some demo text as well. The last element that we need to create is the main element where all the content is going to go. So let's do main with the class of main. And inside here, we can do main content just like this. Let's save this, go back to the web page, and let's have a look. So we're getting all the elements, but obviously we need to start styling the page. Let's do that. Let's jump back, open the main.scss on another tab in here, and let's close the Explorer. I've obviously zoomed in quite a lot so you can see a little bit better if you're mobile or a tablet. Let's start by styling our body tag. So let's open body. And inside here, what I want to do is research the margin to zero. Then I want to set the font family to be aerial, halvatica sans serif. And I think this font fairly close to what the font on the original application is. I know it's not exactly the same, but I feel like it's going to do the job. Now let's add the background image. And the URL for this background image will be images and then sforhero desktop bg1.jpeg for me. And we can do dot, dot in here is just like this. And then I want to make sure that the background image covers the full width and height of the layout. And to do this, let's make sure we put the background size to cover, which would cover the whole page. Let's have a look at what we get now. As you can see, the image is coming up now. But on the original design, the image is slightly moved to the right of the screen. So let's do that super quickly. I'm not going to be super precise with the numbers, but I'll do my best to just mimic the UI as much as possible. So let's move the background image by doing background position. And I'm just going to move the image 150 pixels from the left to the right. And then I want to make sure that the image stays zero at the top. Let's save this and have a look. As you can see, the image has moved slightly to the right now. And I think this is perfect. Let's now focus on creating the actual layout. Let's go back. And for this, we created the wrapper div. So let's use that. And we need to convert this into a grid. So let's do display grid. And to do this grid is actually fairly simple. What we have to what we can do is set grid template areas and the areas. We can name whatever we like, but I'm just going to keep a simple. So first of all, I want the header, which is this bit of the website to take the full screen. And I know that we're going to have two columns underneath. So what I can do is put header header, which will take the full screen. I'll show you in a second. And then on the next line, we can put the sidebar. And then we can put the content on the right side, just like this. So to make this work, we actually need to do great template columns. And first of all, we need to find out the size of the column on the left side for the sidebar. So let's quickly zoom in and just drag like this in Photoshop. This is 220, maybe minus the borders. I'll say 218, something like this. So let's do 218 pixels. And then let's make sure that the rest, this section here, which we called main, takes the rest of the screen. And to do this, we can use the fraction measurement. We can literally do one fraction of the screen. Save this. Now we need to do something similar for the rows. So for the rows, we need to do grid template rows. Now we need to make sure that the row, we can set the top row to be, let's have a look quickly. If we zoom in, we'll know that the top row is roughly 80 pixels. And we can set this to 80 pixels, just like this. And then for the second row, which is this one here, we wanted to take the rest of the available space on the screen. To do this, again, we can do one fraction. Let's save this. And at this point, if we go back, you'll see that things are starting to work, but obviously they're not in the correct place. And if I inspect everything, let's have a look. I'm using, by the way, I am using Firefox. And with Firefox, you can actually click on the div that we displayed as grid. And there is this grid icon on here on the right side. I'll zoom in a little bit more so you can see just like this. We can actually display the line numbers and the area names. So if I click on the grid here, you'll see that we're getting some lines. And if I display the grid area, you'll see that we get in the names as well, but they're all mixed up. So to fix this, by the way, first of all, the image is not taking the full screen. To do this, we might want to make the wrapper full screen in a first place. So let's do that. So for the wrapper, we can do height or 100 VH, which is vertical height of the screen. Let's save this. And as you can see, the image is now fixed. You can kind of see that all grid is fixed as well a little bit. You can see that the header is actually taking the full width. I know it's saying sidebar for now. And then you can see that the sidebar is taking the 218 pixels and then the content is taking the rest of the available space. So let's now fix the positioning of the elements. To do this, we actually need to give each HTML element. So for example, the header, the sidebar, and the main grid area name. Let me show you. So for example, for the header, we actually named the header grid template area to be called header, but you can call it whatever you like. So let's do grid area and the grid area obviously will be header now. Let's save this and let's copy this down here and paste it twice. And now let's copy and now we need to do this. The same thing for the sidebar and for the main. So for the sidebar, we can do sidebar and then for the sidebar, I decided to use the same grid name and we can just use sidebar just like this. But as I said, you can't give them different names. They don't have to be the same as the class names in here. And for the last element will be content. So let's copy and paste them. Let's go back to the browser and have a look. As you can see now, the header is displaying correctly. We get the header text. The sidebar is displaying correctly because we're getting the sidebar text. And the content, the main content is displaying correctly because we're getting the main text. And this is brilliant. Let me remove the display area names now because they just get in a way. Let's put this at the bottom as well. Maybe it would be slightly easier to see because we'll be focusing on the header to start with. Let's go back to the Photoshop and let's have a look. So for the header, we have a few elements. We have the logo with this little icon here. I don't know if you can see with this icon. Then we have the main navigation bar here. And then we have this username account section on the right side. Also, we need to think about how we can add some of the details like this line above. And some of them can be a little bit tricky. And of course, we're getting the blurry background, which is really cool, which we'll need to do and so on. So let's start building some of those things. First of all, we can do the blurry background and then we can do this line on top. Let's see how we can do that. Let's go back to the CSS. To do a blurry background is actually fairly easy. So I think it will work on most browsers, but I don't think that Firefox is working yet. But I'll show you the trick how to make it work on your browser so you can develop. To do this, we can do a backdrop filter. And the backdrop filter is called blur. Then we need to set a number of how much we want to blur it. For now, I'm just going to give it a guess and go with 10 pixels. Let's save this refresh. And as you can see, the background is quite blurry now. And if I was to inspect the header and move the number down, you will see that we can try to make the blurriness similar to the one in here. And this is fairly blurry. So let's have a look. So maybe six will be good enough. Let's go with six. And if you want to know how to do the prefixes for other browsers, just in case it doesn't work for WebKit, we can do WebKit backdrop filter. And then we can just copy the value that we just done like this. And for Mozilla Firefox, which we're using right now, we can do moss and then backdrop dash filter. And then just paste the value. Now some of you might experience that this backdrop filter does not work on Firefox. And let me quickly go to can I use. So basically, can I use will tell you whether you can use certain features in the browser. The one that we are looking for is the backdrop filter. And as you can see, the backdrop filter works on the majority of the browsers. But for example, for some reason, it's still not working on Firefox, but you can actually make it work. And they give you some instructions in here. Basically, basically, what you have to do is go to about config on your browser and enable the layout dot CSS backdrop filter. Let me show you. So inside the browser. Just like this. And this will say proceed with caution. You have to click. Yes, I accept the risks. And the filter that we need to look is layer dot CSS dot. And let's have a look at what it was dot backdrop backdrop filter enabled. And if you set this to true, this will work. And if you set this to false, let's set it to false for a second and refresh. You'll see that is no longer working. So this is something that you might have to look after. So let's enable this because I do want it to work in this browser. And let's go back refresh and we get the blurry background. Now the second step that I wanted to do is try to figure out how I can create this little tilted line, which is pretty cool. So let's have a look at how we can recreate it. So let's go back. And what I'm thinking of doing is instead of adding another development, I'm just going to create a pseudo element, which we can then use to display the line and give it a background color and so on. Let me show you. So for the header, let's do before and inside here, we're going to have to do content. We're going to have to leave the content empty. So this creates kind of like a virtual difference. We're going to have to set this as absolute. But before we do this, we need to set the header to be relative. So let's do position relative for the header and let's do position absolute for this sediment. Then we need to give this a width and a height maybe. So let's go back and have a look. So the height of this will be roughly around eight pixels without the border. So let's do height eight pixels and we can do left. And I don't know how much from the left to do. Let's have a look. I kind of want to use percentages. So I'll probably just figure out by I maybe maybe that would be around 10%. We'll have a look maybe less. I think. So let's say left will be 10%. Let's set right to be 10%. And let's set the top position of this to be equal zero. First of all, we probably won't get anything just yet. And this is because we're going to have to add some sort of a background. So let's add a background dash color of something like, I don't know, something great like this. Save it and have a look. As you can see, we're getting this line and maybe we need to do it less. So maybe like it needs to go to 6% or 8%. Let's have a look. We can do 6, 6 like this. And I think this would be almost close. Maybe we measure it later when we add the logo as well. Now to do those angles is a little bit tricky. But luckily we can use the transform perspective CSS property. And let me show you how we can do that. So let's do transform. And we need to change the perspective of this. And to do this, we can do perspective like this and then put a number. So for this, let's go with 200 pixels. And let's have a look at what happens before we continue. So nothing has happened yet. And this is because we actually need to rotate this as well. Let's have a look. So we can do rotate X, rotate X, and then we can put the angle that we want to rotate it. And for this, I'm going to go with 20 degrees. And let's have a look. And as you can see, this has done the job. And it's rotated the element and it's also given it a perspective. So if we select this particular element, which I created as before. And if I change this value of 200 pixels, let's have a look if you can see the difference. I don't know if you can see the difference. Maybe I need to like zoom in quite a little. Let's have a look. Okay. Okay, I've zoomed in so much so you can see the difference now. So this is how the perspective of the box is changing as you can see. And maybe we need to go, I don't know, I'm zoomed in quite a lot now, but maybe we can go 130. And then if we check out the degrees, this also gives it a little bit of an angle. So let's use this 20 and 130. Let's have a look at how it looks at full screen, actually. So I'm not actually convinced yet. So maybe I don't think that this is changing much, but maybe we can change the degrees. Let's have a look. And this looks similar to the design here. Yeah, I think this would do the job. So 216. So let's go 216. Obviously I can spend a little bit more time measuring all this, but I don't think that it has to be, but it doesn't have to be super perfect. So let's save this. And something that I forgot to mention is that those backdrop filters can actually be very heavy for performance. So just watch out when you add many of them. Let's save this. And now instead of having this gray background color, let's change the background color to something with opacity. So instead of gray, let's do RGBA. And we can do, let's have a look at this. Technically we could do white and just dim it down. Let's have a look at 255, 255, 255. And then we can dim it down to 0.3 opacity. Save this and let's have a look. I'm not convinced with this. I think the numbers will need to change, maybe like 939. This is a little bit better, I believe. So let's go with something like this actually. So let's paste this 139139139. The next bit that we need to add now, I'm not sure why it's doing this. Semicolon. Yeah, I'm not sure exactly why it is doing this, but I'm pretty sure that this is fine. And now let's do the border. If we zoom in, you can see that there is a very slight border in here. It's 1 pixel and it's slightly lighter. So let's have a look at how we can do that. We need to add this border to the left, bottom and right. To do this, we can do border left. And the border that I want to add is going to be 1 pixel, solid RGBA. Let's go with white. So 255, 255, 255. We can add a little bit of space between them just like this. And let's put 0.4 of opacity. Save this. And this is the left side. So let's duplicate this two more times. So for the right, I need to be the same 1 pixels. And for the bottom, we need one as well. So let's have a look at what we get. Oh, I see what's happening now. I've missed the semicolon here that's why. Okay, save this and go back to the browser. And as you can see, we're getting this line, which is looking cool. It's similar to the design. Obviously we can mess around with the color a little bit more. Maybe it needs to be less. I don't know. We'll have a look later. And when we look at the design, I have the feeling that we are going to be using this for a few more sections like here and here. So we might as well create this color as a variable so we can reuse and change it later if we don't like it. So to do this at the top, actually, let's copy, let's copy this. And to do this, I'm going to go at the top on top of the body. And inside here, I'm going to do, let's say, I know this is very generic, but I'm going to go with border color just like this and paste the RGB value. So now I can use this variable in here instead, just like this border color and just copy it two more times like this. And hopefully, obviously I need to put the semicolons in here like this, save it and it should work as expected. Now this is getting there. I think this is fairly similar to the one here. This looks, what is the amount, this looks a little bit better, I think. I wonder whether the color needs to be changed or it needs to be made slightly bigger, but these are small changes that we can make later. So for the header, let's focus on the rest of the stuff. First of all, instead of adding all the elements, so I'm going to do everything one by one, all the elements, because it's just going to be easier to work with and it will be less confusing. So first of all, let's focus on adding the logo. To add the logo, we can go to the HTML and inside the header, let's make some space so we can just focus on the header. And for the logo, I'm going to do a div with the class name of header, underscore underscore logo, just like this. And inside here, we're going to add an image source and the image source will be img slash blizzard.png. Give it an old text, so bottleneck or something like this. Close this and also we need to add one of them arrows. And to make things easy, I'm actually going to include font awesome in this project. And to do this, let's go back to the browser and Google font awesome. Google font awesome CDN and the link that I'm looking for is the font awesome.com customizing WordPress snippets. We obviously not working with WordPress, but this is the URL. And if we go down, I'm just going to use the first CDN that I see it doesn't matter too much. So let's use this one and hope that it works. I'm going to copy this and paste it underneath the link here. View toggle will wrap so we can see a little bit better. Save this and let's find an icon for this here. Let's go to font awesome and let's search for Chevron or whatever it's called. I'm going to use the Chevron Dan copy the little HTML from here and paste it in your project here. Save this and let's have a look if we're getting the icon. As you can see, we have the icon here, which is great. Now, the first thing I see in here is that we're going to have to create some padding around for the header. And let's have a look at how much we need. Actually, first of all, before we add any padding to this, let's make sure that all of the layouts are centered in the middle. And to do this, we can do it with flex very easily. And for the header, which is here, we can do display flex and we can do align items center just like this. Let's save this and have a look. As you can see, the Blizzard logo is now centered, but I would assume that we need to move it slightly down. So maybe we can give this header a little bit of padding at the top. So let's try padding dash top of 10 pixels like this. And I think this works. So let's make it less 1, 2. I don't know. This looks in the middle, so I'm going to go for padding 8 just right here. Save this and for the left and right, maybe we can do... So we have 27 on the left and we're probably going to have 27 on the right, I believe. Oh, no, we don't, which is weird. So we have nearly 12 on the right and 27 on the left. Oh, that's nearly 30. Okay, let's make it 30. So let's do that. So top we have 8, then the right we can have 12, then bottom we'll have 0. And this is pixels, by the way. And then the left side, we can have something like 30 for now. Let's have a look. And obviously I need to change padding top to be just padding now, just like this. And let's have a look. Okay, this is working fine. The little chevron icon needs to be centered, but we'll do this in second. And one thing that I forgot on the header is to do the border bottom, actually. So let's add this detail as well. Border, bottom, one pixel solid. And we can use the border color that we created earlier. Let's have a look. This is looking nice. Maybe I can remove this grid so we don't have to look at it all the time. And this is looking nice so far, actually. I can definitely measure whether the distance between those two elements is equal, but let's not waste too much time and continue. For the Blizzard logo and the little chevron, we're going to have to turn this into blue, I believe. Let's have a look. Yep, we're going to have to turn this into some sort of a dark blue, I believe here. And we're going to have to center a line here as well with the logo. What we can do with SAS, because we're inside the header, because we named this underscore, underscore logo as an element, we can literally do inside here, we can do ampersand underscore underscore logo and style or logo. So first of all, I want to make sure that the color of the icon is set to the blue one. And I'm just going to use hex. It doesn't matter. Then I want to display this as flex. Flex. Let's make sure that this is displayed as flex direction row. So the icon will be easier to put in the middle, just like this. And then we can align items to be centered. Let's have a look. Yeah, as you can see, the icon is now blue. It's next to the Blizzard thing. And one thing that we can do is just give a little bit of margin on the logo to push this icon. So let's do on the logo here, we can do margin right, something like 10 pixels will do. Save this and have a look. That didn't seem to work. Oh, okay. I'm actually doing the margin on the actual diff instead of the image. So we're going to have to, unfortunately, we're going to have to add image in here. So another one, we're going deep. So image margin, right, 10 pixels. And as you can see, now this is pushed to the right. And I think this would be okay if we exact the spaces around seven pixels. So I could be very precise and do seven like this. So let's now focus on the second bit of this. And this would be the navigation bar. So for the navigation bar, we have games, social shop news and the three dots. Let's have a look at how we can build this inside or index dot HTML and inside the header. We're going to create another element. And this element is going to be cool. Let's say class name of header as this is an element of the header and underscore underscore nav maybe. And this will be a diff nav. And inside here, we can just create an unordered list with a few list elements and a few links just like this. Obviously, let's keep the links like this. Let's make sure that this is called games. Then let's just duplicate this a few more times. And on Visual Studio Code, as you might know, you can do old shift and down. And we need one more. So the second one was social. The third one was shop. Then we had news. And then we had the middle dots, which we can do, which we can do with the amp, the amp assigned and then meet dot like this. Copy this as we need to fill them. Make some space just like this and save. So let's go back and have a look. Obviously, we can't see it because the colors are the default and we can change this now in a second. If you wanted to change the colors globally, we can obviously go to the CSS and add a in here, which is anchor color, set to white, maybe just like this. And then remove the text declaration to none if you wanted to. Okay, this is looking a little bit better, but obviously we need to style it. So it's next to the logo and it's looking the same as this. So first of all, because I am using Ariel, I can kind of guess the font size. And normally I would use obviously m's or m's. But for now, let's just keep it simple and I'm just going to use pixels and let's have a look. So I know that the font isn't the same. So it might be the regular one. Is this changed to the regular? No, it's still narrow. So let's change to regular. This is actually very similar. And let's change it down to the font that we need. Actually, this might be Ariel. I might be right. And we can change this to roughly, I would say roughly 20. And obviously there is a little bit of a line that we can space that we can move around and so on, just like this. And this is almost perfect actually. So this is going to be 20 pixels and we can do the space between the letters if you wanted to. Let's go back. And now we can do the same thing as the logo, but we can do it for the nav, which we could underscore, underscore nav. So let's do that. And score, underscore nav. The first thing I'm going to do is set the font size to be 20, I believe I said. Then the color, I know the color is white. Actually, we don't need to set the color anymore because we made the global links color white. Then let's transform all of the letters to uppercase just in case. So we can do transform uppercase. Actually, it's tech transform instead, just like this. And because the header is displayed as flex, we can make sure that this nav is going to the left side next to the logo. With justify self. And the justify self will be start. And this will be actually helpful in a second when we create the other element. So let's have a look at what we get, so far. Okay, everything is looking good. This is obviously an unordered list. So we need to remove the bullet points. We need to make some space between them. And we need to add the glowing effect as well. So let's have a look at how we can do that. Go back inside the nav. I know that we're going to be going deep here with the URL and the list and maybe links. Usually, you'd probably want to give your links, class names and so on. But I'm just going to be lazy now and do it inside here just like this with the URL. And let's reset the margins and paddings first of all. Then let's now display the list as inline block. This is basically going to make the list play next to each other. So every item of display next to each other. Inline block. Obviously, we can use flexbox for this. And then inside the list, let's style the a, which is the link. And for the ace, let's have a look. First of all, we'll probably need to add some some padding between them. So let's have a look quickly. Let's zoom out. Let's have a look at how much padding do we have? So we roughly have padding of 30. So we could do 15 on left and right. Let's do that. So zero top and bottom and 15 left and right. Just like this. Save it. And as you can see, we're getting all the space. I'm not exactly sure whether this space is equal as well to. Yeah, it's roughly 30. So yeah, it's roughly the space is exactly the same. So we can actually leave it. And the next thing that we need to do is add this glow. In fact, to do this, we can do tech shadow. So on the actual link, we can do text shadow. And what I like to do is I usually like to set up something like zero pixels, zero pixels. And then let's put a zero pixels for now. And let's set the color to RGBA. And obviously we want to set this to be to white. So this is 255, 255, 255. And then we can set as one. So we didn't have to do a GBA. We could have just done RGB. Save this. And I know that this is not going to make any difference now if we refresh. But what I wanted to do is let's inspect one of them links. And actually let's zoom in a little bit. It might break, but it's fine. So inspect this, go to the tech shadow. And what I like doing is I like messing around with the numbers in here because it's a little bit more visual. So I can just go up. And as you can see, this is doing already the tech shadow that we need. But because we're zooming in so much, I don't know how much we should actually add. So let me zoom out. Not of this. Let me zoom out of the browser to 100%. And kind of try to guess it. So I don't know. This looks reasonable to me. 12. Okay. So let's set it to 12. But one thing that I notice is on the original design, only the first one is glowing because this is the active. Basically we're on the games tab, I guess. And because we're on the games tab, this is the only active element and that's why it's glowing. So maybe they will glow on hover and when they're active. Let's see at how we can do this. So we're going to have to remove this, cut this and do inside here, we can do hover just like this. And then we can paste the text decoration, save it. And also let's do a link class. Sorry. Let's do a link with the class of active. And let's make sure that every single link with the class of active has the same text shadow. So for example, in this case, if I go back to the index, the active one would be maybe games. And we can do class active just like this, save it, go back. And as you can see, the games is active. And one thing that bothers me, it looks like the spacing of the first two element is not the same. So let's have a look. We could take a screenshot and paste it in here and just like have a look like this, put the opacity down and have a look. And yes, we could, I think this icon is far too big and that's why, but we could push this a little bit to the right. Maybe like a few pixels if you want it to be exact. So let's go and do that on the actual logo. We can just say margin, right, seven pixels or whatever. That looks a little bit better, I believe. Maybe we can do even more. Let's put S10. Save this. And let's have a look at what else do we need to do. So on hover, we're getting that effect, which is awesome. Let's have a look at the design now. We can look around and actually we are pretty much done with this section now. And now let's focus on this section on the right side. I'm not exactly sure what to call this. Let's call it tools maybe. And we're going to have an image. So we're going to have an image with this online or offline indicator. Then we're going to have the username with a little arrow, the bell, the user's icon and a number. Let's have a look. Let's jump back to index.html. Just next to the header nav, we're going to create another one. And let's call this one maybe header underscore underscore tools. Just like this. And inside here, let's create the avatar div. This is getting a little bit deeper. So maybe we can do another div in here with the class of header tools. Underscore underscore tools dash and then dash avatar. We'll see how this works. And then inside here, we're obviously going to want to, we obviously want to add or avatar image. And for this, I've prepared my logo. So image source. And then this will be images and then avatar. Then for the old text, I can just put my username right in the brand. And we're done with the image. Maybe we can put this, maybe we can put this on one line so it doesn't take too much space. Just like this. Save it. Now let's create the next section, which was this username with the Chevron icon, which we can actually copy from above here. Let's copy this. Let's first of all create another div with the header underscore underscore username. No, sorry, underscore underscore tools dash username. And then inside here is where we're going to be adding the username and the Chevron icon like this. Then let's create the next bit, which was the bell icon. So for this, we can do another header tools class just like this. And then we'll do notifications. And then we'll insert the bell icon in here in a second. We'll have to search for one. And then also let's copy this and just change this to users just like this. So let's find a notification bell icon and use this. The one that I'm going to use is this one here. Copy the HTML pasted in here. Then let's go back and look for users. And for users, we could get away with this one here. So let's copy the HTML and go back. All right. As you can see, this is a little bit messy now. It needs styling. And also we need to move this section to the right side of the screen. Let's do that first of all. So go back to main and we are going to be let's make a little bit of space. And this is usually back practice going so deep in the tree. It's usually a lot more to process. And that's why you usually give your links a specific class name and you style the links kind of like outside. But for this, because we're doing a small project, I don't think it's going to make any difference whatsoever. But I just wanted to mention it anyway. And let's have a look at the next class. So we created header underscore tools. So let's grab this and do an present tools. And inside here, we need to first of all push this section to the right side of the screen. And hopefully we'll be able to do this by doing margin left auto save this. And as you can see, this has worked, which is great. And now we can focus on the details. So this section is actually going to be a little bit tricky. First of all, let's measure the height of this section. I would say this would be without the border would be roughly 30 pixels. So let's add this height will be 30 pixels. I believe that we need border top, bottom and right. And we'll probably leave the left one or actually we can add. Let's add border everywhere. So border one pixel solid. And we can use a variable name, but a killer save it. Then let's have a look at what we get. We can't really see because of the image, I think. And for the image, we could quickly style it in here. It was under and percent underscore underscore avatar. And this would be, let's have a look roughly. So this would be 40 pixels height and width. So width will be set to 40. Height will be set to 40. And we need to do border radius or 50% and overflow hidden to hide the overflow stuff. So if you refresh, nothing is happening. And I wonder why. So let's go back. And this is because we actually have tools dash avatar this time. So we'll be just dash avatar. I don't know if this is a good idea, but we can just do dash avatar. Or potentially or technically we could do two underscores. But no, I think this is fine because it's not a modifier. It's one dash. And if it was a modifier, we'll put usually two dashes. So let's ignore this. Let's go back. And as you can see, we are getting the circle now, which is great. But the image isn't actually fitting in here. And I wonder whether I need to like make all the images on this layout responsive. Maybe we can do this at the top image. We can do width or maybe max width to be 100% and hide to be auto. Let's have a look at how this works. All right. This actually worked, which is great. And we can now focus on the rest of the stuff. Let's go back. Scroll down. Now, first of all, as you can notice the older colors in here are black. And we need to change them to this kind of white color. But it's not so white. We can use the RGB if we want to be exact. So let me make a note of this. 174, 179, 173. Yeah, we can do this. Or we could set as white and put the opacity down. Whatever is easier. So let's go in here and set color. And to be honest, I would normally do RGBA and just change the RGBA to something like six like this. But if it doesn't work, then we'll change it. Let's have a look. Okay. I think this is okay. It looks very similar. First of all, let's enter all of the elements in the middle. And to do this, we can do align items center. Just like this. Have a look. Obviously it's not making any difference at the moment. Maybe we actually need to... Sorry, we actually need to display this as flex. So first of all, let's do that. Display flex. Then we can align the items to the center. And let's have a look. And as you can see, everything is now aligned in a row, which is good. And we can start with the image. First of all, we can look at moving the image. And to do this, we can use the transform tool. So for the avatar, we can literally do transform. Translate X, which is the left and right axis. And this will be around minus eight pixels. I would assume. Save this. Go back. And this is covering the border color, which I'm happy with. And now we can concentrate on the username, which has a little bit of space around. So maybe we can add a padding between... Seems to be 10 pixels padding. So let's do that. So for the username, we have username here. And we can copy the same thing like this username. Let's do padding. Top and bottom will be zero. And left and right will be around eight, did I say? I think I said around eight. And as you can see, this is giving it quite a lot of space. Maybe we don't need so much here. But for the right side, it's fine. In fact, let's change it a little bit. Let's do top zero, right. Let's do 10 pixels. So this is right. Bottom zero and right zero. Let's have a look. This looks a little bit better. I think, if I go back, the only thing that will change is maybe the icon color. And to do this, I can get this color from Photoshop. And just under username, we can do I and then do color. And set the color to the one that we just copied. Like this. Save it. Look back. As you can see, this is cool. The icon itself could be a little bit smaller, I guess. But it's fine. Then for the notification here, we'll need to... Let me see if I can zoom in a little bit so you can see a little bit better. I think this is actually working. So for the... You see what happens when you don't use SVG as well. I've used PNG instead of SVG, which is fine. I couldn't find the Blizzard logo with SVG. I'm sure there is one out there. But let's focus on this now. For the notification, we need to add another border on the left side. So let's do this. So we have username. And let's find out notifications. Like this. We can do notifications. We can do border left. One pixel. Solid. And then we can use the border color. Save it. Like this. And we're having a little bit of a problem here. Maybe we can add a little bit of padding to the actual icon. Sorry. To the actual div. So let's do padding. And let's make it work somehow. So let's say five pixels. Maybe six pixels. Okay. Six pixels seems to work here. And then let's do another 10 pixels to the right. Okay. I think this worked. I think I have zoomed in quite a lot. So that's why it's breaking as well. Let's do that. I did a copy. Copy. Paste. Save. Okay. Let's zoom out ever so slightly. Okay. This seems to be working. So I can actually do the same thing for the users. Let's do that. So inside here we can do and user or users. I can't remember. We have users. Then we can do the border left. Let's copy it from here. So we don't waste time. And let's try to copy this pattern, which could potentially work. Okay. This is actually what this has worked real, really well. Obviously, we could make this icon smaller, as I said earlier. And we could add the number, but let's ignore it for now. It's no need for it, I guess. Let's zoom out a little bit now and have a look. One thing that we are missing from here is the icons at the top. But these are actually only useful on the Windows applications. So I'm not going to create them. But you could technically position them maybe as absolute. And yeah. Another thing that I notice is that on the header we have this border as well, which we can add. So we could go back to the header and add border top. One pixel solid and then border color. But I don't know if this will be visible. As you can see, it's hardly visible in the browser. Maybe it will be in other browsers. So let's leave it. As you can see, your head is actually pretty much done now. Let's do a quick last inspection here. I am pretty happy with the results so far. But one thing that I forgot is actually this, the online status icon. Let's have a look at how we can do that. So for the online status, it's going to be tricky to add it to the image. So let's add it to the username. But we've already got an icon here. Let's add it as a span maybe. And we'll see how it goes. So we can target this span now inside the username, which is down here. We can do another one, span. And I would like to position the span as absolute. But in this case, we have to do position on the username as relative. And now position as absolute. So it's inside this container. Then we're obviously going to have to give this span a color, which will be this color. Let's copy it. So let's say background color just like this. Then unfortunately we're going to have to fake this border a little bit. So I'm just going to copy this color from here like this and fake it a little bit. So we can do border, two pixels, solid, and then the color. And of course we want to make this to be a circle. So I'm going to have to do border radius. And this will be 50%. Again, save. And because this is a span, we're going to have to give it a width and a height. Otherwise, it's just not going to be displayed. And let's do that. Let's say width and the width of this will be 17. And the thing is 10. Okay, I think 10 will do. So let's say width, sorry, 10 pixels. And let's set the height to 10 pixels because it's a circle. Let's save this and let's see what happens. Okay, we're actually getting the little dot, but we just need to position it somewhere. And to do this, I'm going to do it with the inspector here. So we have position absolute. We just need to move it to the left, 0. Maybe minus 20 looks good. And bottom we can do 0. But it's going to be minus. Something like this, let's have a look at the design. Yes, something like this seem to be working well. I think this would do. And then move this to the right. Actually, I'm quite happy with this, 18 and 13. So let's copy those values and paste them in here. All right, I'm fairly happy with this now. Let's save this. And we should be done with the top section now. Let's now focus on the sidebar. The sidebar itself should be fairly easy and straightforward to do. Let's remove this. Actually, we can use this to measure the rest of the text. I believe that this is going to be around 14 maybe. Yeah, this is around 14. And obviously we need to change the text color and so on. And this would be the same, but the color is going to be just white. So for the sidebar, I'm not exactly sure whether this has a blur effect as well. But it's definitely slightly darker. Maybe we could add a little bit of blur. Or we can just make the container itself darker. We can try both, I guess. Let's try with blur. But first of all, before we do any styles, first of all, let's make sure that we add all the items and the icons, which should take a few minutes to do. So let's go back to the index and inside the sidebar in here, we're going to add the menu. To do this nicely, I'm going to wrap the titles in a span. Of course, you can wrap them in H1, H2, whatever is good for you. But because this is just a demo application, I think span will do. So let's say the first one was Blizzard. Let's now create a URL for the list. And inside here, obviously we're going to have to create the list. So technically we should wrap them in links and let's do that. Href and let's keep those links empty. And inside the link, we're obviously going to have a little icon, just like this, and then the title of the game. So the first one was Warcraft. So let's add an image. And the image I need to add is under images and then Warcraft.png. Let's add the order to something like World of Warcraft. And let's add the title to World of Warcraft as well. So I can just copy this inside here. Save this. And this will be our first link. Let's have a look. As you can see, the icon is fairly large and we need to style all this. But before we style anything, let's add the rest of the stuff. And I'll probably put this section up because it's literally just adding the images and the names, which should take a while. Alright, I'm actually done with this section. Let's refresh. And as you can see, we have a lot of icons and so on, which we'll have to style in a second. But first of all, one thing that I forgot to do is add class names for the URL. And to do this, let's do cyber underscore underscore menu. And I'm going to do the same for the second one here. And also I missed to add the title for this one. And the title for this one is called partner games. Just like this. Save it. And let's start styling this. The main class name of the side is sidebar. And then we have menu. This should be easy. Okay. In the sidebar. So for the dark end background, we could either do blur or we can just darken it just like on the picture here. I think it's just darkened. So let's do background color. And we can just do let's set any RGB color and see whether we can change ever so slightly. So I'm going to do something darker like this, but then change the opacity to be slightly low. And let's have a look at how this works. Okay, this isn't too bad from a first try. It's this one is a little bit more green, I would say. So maybe we should just copy this, which is 47, 55, 44, 47, 55 and 44. Maybe we can just put this at 6. And I think this is slightly closer now. So let's leave it. The next thing let's do the border to the right. One pixel solid and then border color. Save this. Let's have a look. That seems to work. Let's just add a little bit of padding from the top, which will be roughly 30 pixels. So top will be 30 pixels and maybe we can set top and bottom to be 30 pixels. And left and right we will need to set to zero. Save this. This seems to be moving. Then we can start the actual title of this. And we need to move this from the left with roughly 20 pixels by the Luxuver. So let's do span padding and then actually let's just do padding left. And this will be 20 pixels. We need to display the span as a block just in case. So it's on its own. So it's on one line. Maybe we need to add a little bit of a margin to the bottom. So it will be roughly maybe less than 14 or 13 pixels. So let's do margin bottom 14 pixels. Save. This pushes it down. Obviously, most of the colors inside here will be white. So let's set the whole sidebar to have a color of white just like this. But for the links, we'll reset it manually. And now we can actually focus on the menu. First of all, let's create the menu CSS element and then scale down the images because they're too big and this kind of annoying. So inside here, we can do ant underscore menu. And then inside here, let's target the images. For the images, we can do, let's have a look. Roughly 28 pixels. So let's say max width to be set to 28 pixels. We'll probably add some padding and so on. But for now, as you can see, they're so much smaller now. We obviously need to reset the list style and so on. So let's do that actually. So inside menu, we can do, first of all, let's do display flex. So we can align the elements in the middle and make them as columns. So let's do display flex. Then we can do flex direction as columns. Then we can vertical align the elements to the middle just like this. Save this. Let's have a look. And we might actually have to do the vertical align middle to the actual image. Let's have a look if I paste it in here. Okay. This has worked now to the image when I added it. So I'm not exactly sure whether we need it here, but we probably do. Now we don't. Okay. So we don't need the vertical line in here. We just need it on the image. And because this is a URL, we obviously want to reset any padding in margin, padding zero. Then we need to set the list style to none to remove the bullet points. And we'll probably need to add some margin now. So let's have a look. Yep. So the margin will be like this around 15 pixels margin, I would say. Maybe more. Let's add 15. Let's go and refresh. They still seem very close to each other. Maybe we can do, maybe when we space them out, we'll see. I don't know. Yeah. They still seem to be very close to each other. And I'm not sure why. So I actually put the margin on the URL, which is stupid. That should be going to the list itself. So we can do list and we can do margin bottom 15. And that will space them out. Because these are links, let's move the links from the left. And we can do this inside the list in here. So we can do padding left of, let's have a look. I think it was 20 pixels. Yeah. Around 20 pixels we'll do. And then we need to add some padding around each element itself, I believe. Because they're quite small so far. So maybe we can do padding of 6 pixels or 4 pixels and then 0. So I want the padding top and bottom to be a little bit bigger. But then I want the left to be around 20 pixels like this. But I don't want the right. So we can do top bottom, then sorry, top right, bottom and then left. I think this should do the job. So let's copy this and add padding here. Just like this. Save this. And here's if the storm seems to have a broken image. Let's fix this quickly. Heroes, PNG. Save it. And now maybe we can do the image. It's a little bit of padding to push the text itself. Because the text is not wrapped in anything. So if we target the image we can do padding. And then we can set top and bottom to be 0. Right to be maybe 10 pixels, bottom to be 0. And then left to be 0. I think this would work quite nicely. Let's go and change the list. And actually images here. Let's do that. Save it. Let's have a look at what else do we need to do. On the design the colors for the text is a little bit darker. So we could do it with RGB or we simply could copy this like that. And give the link, excuse me, give this link a color. Save it. Have a look. We can change the pointer to be cursor context dash menu. Context dash menu. Like this. So the cursor won't change. Shouldn't change. Or maybe we can just do this for the link like this. And now the cursor won't change. But obviously we need to add the hover effect. Each we can have a look on the button at the top. The colors changes ever so slightly. So let's take a screenshot of this pasting it here and let's have a look. The color just goes slightly whiter I guess. So we could go back at a hover on the image inside here just like this. Hover. And then we can do background color. In the background color we can set to RGBA. And then that would be, excuse me, that would be 255, 255, 255. And let's set it to something like 1.2 or 1.1. Let's have a look. Go back to the browser. And as you can see, we're having a little bit of a problem here. This is because I think we need to display the images maybe as block or make them full width. So let's have a look. So width 100% doesn't fix it. But display block fixes it. But also the padding didn't seem to be working well earlier. So this actually fixed some of the padding and it looks so much nicer now. Maybe the padding is a little bit too much now but we'll have a look. So for the links, let's do display block and sort out some of the padding. And this padding might be because we don't have box sizing. So let's put box sizing as border box. And now the padding should be added to the width and height of the container. Okay, actually I'm fairly happy with this. The spacing between the elements could be less I guess. Let's have a look in the original. So on the list, I think I have margin, bottom, quite a lot. Maybe we can have it as 10. I think this seems a little bit closer to the original. Of course I could have measured this but let's leave it now. At the bottom of the list, we're actually going to have to push the second list. Let me actually put this on the right side so we can see a little better. That's much better. So to push the UL, we can do margin bottom. The margin will be roughly around let's say 30 pixels, 35 pixels. Let's say 36 pixels. Margin bottom, 36 pixels. Just like this. This is looking good. The links are looking good. Everything is looking good. Frankly speaking, we could consider the menu as done. We could add this icon to the bottom but I don't know if we're going to find one. So let's have a look. Arrow. I'm not able to find the same arrow. For the arrow, we can just use maybe this one. I know it's not the same. Let's copy it and go back to the HTML. And under here, we can actually add our icon. And we could just target this as actually let's give it a class name of sidebar underscore underscore icon. And we use the icon to position it as absolute. But we need to make sure that the sidebar is positioned relative. So let's do position relative like this. And then maybe at the bottom here, after the menu, we can add the icon with the ampersand underscore underscore icon. And then we can do position absolute bottom. I don't know how many pixels we need from the bottom. So the left will be roughly 20 and then the bottom will be roughly 27. So let's do that. 27 pixels left. 20, sorry. Save this. And technically speaking, we'll see the arrow in here. It is a little bit too bright. So maybe we could copy the color of here and be precise and change it to color this. Refresh. And as you can see, we're getting the arrow. Obviously this arrow can be linked and so on, but we're not going to be actually doing any JavaScript in here. We're just focusing on the CSS. Also, another thing that I noticed is that as you can see, everything is looking quite responsive as well, which is great. And now the last section that we need to focus is the main section. One thing that I just noticed as I was looking at the details is that the font here is actually a lot smaller than the one I've chosen. And this is because I actually forgot to reset the font. So this font is, if I remember, 14 pixels. So let's change the font for the menu to be font size 14 pixels. And that should look a lot better now. As you can see, this looks so much better now. Again, the spacing between the elements can be put down a little bit now. I should have measured there in the first place. So this could be, I don't know, this looks a lot more natural. Let's have a look. I'm not convinced that this is 14. I think this is fine. So this is around margin bottom two now. Sorry, margin bottom two on this list. In fact, we can just remove it. Okay, this, I'm not convinced again. We can add this. And I'm just going to add four. Okay, this seems a lot better now with the font smaller. And this one needs to be smaller as well. So I'm going to have to go. In fact, I can do the font globally. So instead of giving it to the menu only, I'll just do it globally for everything just like this. Let's tidy up, save. And now everything is looking much closer to the original design. Let's close this and focus on the next bit. Inside here, we have the logo. We have a menu which we'll have to recreate. We have those cards which we can recreate. But for the top ones, what I'm thinking is, I'm actually just going to create them with background color, sorry, background images. And for the bottom ones, I will recreate them exactly the same as they are in here. And then we'll create the button and so on. So let's get going by creating this section. So first of all, let's measure the padding, which is going to be roughly 50 pixels, let's say. And then from the top, we'll probably need... Let's have a look. If I remember, 30 pixels. 50 and 30 pixels. So this is the main section. Let's go down and inside here. And for some reason, I have content. And this is actually wrong. Sorry, this is actually wrong. So we need to put this as main. Let's have a look at the layout. Everything is working because we actually positioned the header and the sidebar correctly. So the only thing that was left was the main content and that's why everything was working. So this is good. So padding on the left side will be 50. So at the top, we have 28. On the right side, we have zero. On the bottom, we'll have zero. And on the left, we'll have 50 pixels of padding. Just like this. And... Okay, the padding isn't working because I missed pixels. Let's go back and as you can see, the content is now pushed and we can start by adding some of the elements now. So first of all, let's create this element here, which will be kind of like the title of the game, I guess. And then we have some options. Let's start by building this. Let's go back and inside here, we can create a div with the class name of main, underscore underscore title. Inside the title, I'm actually going to add the image here. So IMG, source, and the source for this is for me, IMG, modern warfare, title.png. And then I can just put old, modern warfare, just like this. And then let's do the options, which were just below. And for this, I can do another div with the class name of main underscore underscore title. And then I will do dash options, like this. And inside here, we're going to have the three options that we have here. Option, redeem code, and shop call of duty. And we're also going to have to find those icons. So let's get started with the first one. And I'm just going to wrap them inside links. So href, this is going to be an empty link. The first one was options. Let's copy this. The second one was redeem a code. And the last one was shop call of duty, just like this. And now let's find the icons for them. Let's go back to Font Awesome. And let's search for cog. The one that I like is this one. Copy the HTML, paste it in here. For the redeem a code, we can do something like a tick box. So maybe check. And I think this should do the job. It's not exactly the same. Let's put it in here. And for shop, we can just put a card. Maybe this one will do the job. Copy the card, paste it in here. And we should be good to go. So let's go back to our website and have a look. We're getting all the icons. They're all nicely spaced out in here. Obviously we'll do the rest. Before we add any more elements, let's style those two first. To do this, I'm actually going to create three main rows. So basically what I want to achieve now is section those elements into three. So this will be one row. This will be another row. This will be another row. So first of all, let's measure how big this row will be from here to roughly here without the margin at the bottom. So that will be roughly 150 pixels. Then we can set this as one fraction of the screen, whatever is left. For the next bit, we'll probably set it to 130. So let's go back and try to remember those numbers. Let's display this as a grid to start with. Just like this. Then we can do grid template rows. And as I said, the first section will be 150 pixels. Then we want the second section to take as much space there is available on the screen. And then the last section will be roughly around 130 pixels like this. Save this. Go back to the browser and have a look. Of course, if I enable the grid in here, you will see the sections. One, two, three. The first thing I notice is that the font is far too big again. So we can set the font size to 14. And we could have done this globally to be honest, but it's kind of too late now. And then let's make sure that this image is displayed as block. And we add some margin at the bottom, maybe roughly around 20, 30 pixels. 35 pixels looks good. So let's do that. I'm presenting the score title, dash image. And then inside here, we can display block maybe. And then we can do margin bottom to be a camera and what I said, around 30 pixels. Save this. This hasn't worked. Let's have a look why. This is because it would be nice to add a class name to this image. So let's do that. So we can do class equals main underscore title. I was thinking I actually added the class name. And then we can do dash image just like this. And now we have it in here. We can save, go back. And as you can see, this has pushed or little menu below. So we actually done with this image. It's fine. Obviously, if you have a big image, you might want to restrict the size of it and so on. But let's focus on this menu now. This menu has on the text, it has a text shadow. Also the cogs are blue, but they have a little bit of gradient which we can replicate as well. So let's have a look at how we can do this. First of all, let me actually copy this color just so we have it. And inside here, we can do and underscore underscore title options. We need to set the background color to the one that I just copied now. Obviously, we could do it as RGB as well. And I think that would be probably the best option. Let's have a look. Yes, I think RGB would be the best option. We need to go back and find out the RGB color. So this would be 70, 82, 68. RGBA, 70, 32, 58, I believe. Let's paste them out. And then for the opacity, I'm just going to do six. Hopefully this will work. Well, this looks totally different. So maybe I have 70, 82, 68. 70, 82, 68. I totally messed this one up. So okay, this looks a lot better now. As you can see, this diff element is actually set as a block. So we need to actually change this to an inline element. So it doesn't go full width. Let's do that. So we can do display, inline block, just like this. Save, go back. And this restricts it now. Obviously, we're going to have to add a little bit of padding. And I'm just going to eyeball this. It looks like around 10 pixels to speed up the process. So padding, 10 pixels. And also one thing that I noticed is that I'm not sure whether there is a border radius or not, but I'm not too sure. My screens are quite bad, so I don't know. Maybe there is border radius. And I just set it to two pixels or something like this. And let's have a look. Okay, this seems okay. For the links, let's just add a little bit of padding between them, but not the last child because he's going to push the container too much. So let's do that. And we could have added a little bit more padding on the left side and on the right side. So we could do 10% top and bottom and maybe 14% left and right. And then let's add the padding to the links. So A, but not last child. Padding, right will be 10 pixels like this and save. So as you can see, they're spaced out nicely and there is no padding on the right side because I used that not element, which is awesome. Now let's focus on the text shadow which we need to recreate. To do this, I usually use the same thing as I showed you earlier. So let's do text dash shadow. On the text shadow, we can set to zero pixels, zero pixels, zero pixels. And then we can do RGB and we can set this to let's say black, just like this. This is solid black. And now if we go back and inspect the uncle links and let's mess around with the numbers a little bit. So I don't know if you can see, but maybe something like this would do. The issue here is that the text shadow is no longer working on this element, which is a little bit annoying. So let's copy this and fix it. I think this which is two pixels. And I'm going to have to do another link, which is really annoying now, but that's just the way it is. And let's just remove this spacing that we don't need to say this. And hopefully if we go back, all of the text has a little bit of shadow now, which mimics the original. And now we need to do the color for the cogs. But to save time, I'm just going to do a solid color for this. And let's just copy this, go back. And these are the eye elements because they're from font awesome. So we can just literally do eye and then color. And then we can set the value of the color here, just like this. Go back. And as you can see, we have the icons and everything. They have the shadow. And one thing that I noticed is that options has this Chevron icon, but I'm just going to skip this one. There is no need to add it now. It's very easy. We can just copy this one to be honest and just style it separately if we needed to. And let's focus now on the next bit. Let's create some of the boxes or cards in this case. So we have one, two, three, four, five, six, seven, eight. But ideally we want those five to be at the top and those three to be at the bottom. Let's do that. Let's go back to HTML and we can add them inside here. So let's do another diff with the main underscore underscore. Then we can do cards this time like this. On the inside here, we're going to display every element as a card. So let's do class name of card like this because I am going to be adding background images to each individual card. I'm going to do something lazy here. And I'm just going to do cards dash one as a modifier. And then I'm going to do the same for the rest. So one, two, three, four, five, six, seven, eight is what we need. But the last three are going to be on another row. So just so I know I'm going to space them out, but obviously let's change the numbers now. Two, three, four, five, six, seven, eight. And for the last ones, they have a little bit of text in here, which I can quickly pose and copy and paste. So don't waste your time. All right. So I've added a diff inside each card. Well, the last three cards where we'll be doing this background killer. And inside the diff, I'll just put H4 for the title and a paragraph for the text. So that's everything we need to know. And obviously normally you'd probably have text in those cards as well. But it's not a good thing to have empty diffs like this. So normally usually you'd have some videos or images and so on. But to make it easier, I'm just going to keep it like this. And now let's have a look at how we can make them work. And first of all, let's go to the browser and see how they look. So that's how they look at the moment. Let's close down and let's use a little bit of grid to style them. Below here we can do and cards. And for the cards, let's first of all add this margin at the top a little bit. Like five or six pixels, six pixels. Then let's display this as a grid. And this is going to be a tricky one. So we can do grid template columns. And this time I'm going to use the repeated. And then I'm going to say auto fill. And now we need to measure how big those cards are. So for example, this card is going to be roughly 230 pixels. So I want to make sure that every card is at least 350 pixels. And obviously we could use mean and max, but I'm just going to keep them solid size. And for the rows, I want to do grid template rows. And then I can do one for each row, which we have two rows. Well, we want to display two rows, one fraction each. And all this is going to be ever so slightly different than the original. Because technically speaking on the browser, we have a little bit more faces taken from the top of the browser. This bit here, the URL and the tabs. So this takes quite a lot of space. So we have to have this in mind as well. So the boxes are not going to be exactly the same size. But yeah, but we'll go from here. As you can see, some of those boxes already taken place. But obviously we need to give them background colors and so on. So let's have a look. First of all, let's add a little bit of gap between them just like in here. And this gap will be roughly 20 pixels. So let's do gap 20 pixels. That should push everything to the side, but we won't be able to see it right now. And then let's start styling the cards inside here. So we can do, let's have a look. We can do cards. Maybe we could have done cards and then dash card, but oh well, let's just go with it. So card and then for each individual card, I want to make sure that the text inside is set to color white. I believe. So the main color of the cards will be white. But then inside we're going to have another one, which will be slightly gray. If we zoom in, if we zoom in, you'll see that those cards have like an outline of black outline. And then they have this really nice line inside it, which makes the card so much nicer. So to do this, we can actually do outline. And for this, we can do one pixel solid and the outline was black. So let's do black like this, three zeros and for the border, we can do one pixel solid. And we can potentially do the border color that we had created at the top. Let's have a look if it looks good. I don't know if you can see, but we clearly have the black border and the white border, which is awesome. It already creates the cards. They're already looking pretty cool, to be honest. And maybe we just need a little bit of spacing on the top as well. So this was the margin, let's say 10. Okay, maybe a little bit more. Now the difficult bit in here is that we want the first card to be bigger than the rest. So I want this card to take double the size of those cards. To do this, we can simply target the first card, which is card number one. Okay, we actually missed a column here. But we're not yet done with the cards. They are looking cool now. But also let's make sure that we add the shadow that is in design. So I'm going to try to guess it super quickly. Box shadow. And the box shadow we can set to zero pixels, zero pixels, zero pixels, zero pixels, and then we can do RGBA, RGBA. And I want to make sure that this is like a black color. So we can do 0.0.0. And then let's do something like, and let's just do seven. All right. Save this. Obviously there won't be any shadow now. But if you inspect it, I'm going to use my method, which I always use to create the shadow. And you just mess around with the pointing here. And as you can see, it's already creating this nice shadow. It's kind of hard to tell which one it is. Maybe let's just go with this. Zero, two pixels, ten pixels, zero pixels. It doesn't have to be exact. Just like this. Save it. And just like this, we have the shadows done. It might be a good practice to just put a background color maybe. So let's do that. For the background color, let's use this one instead. Just like this. Actually, it might be a good idea to put background color. But let's just ignore it because we'll be putting images anyway. And now let's focus on fixing the first card. Basically, the first card needs to take a little bit more space than the rest. And what I can use is I can tell the first card to take double the space as the other ones. So let me show you. We can go here. And if you remember, I added those modifiers of card one, two, three, four, five. So I can target card one inside here, just like this, card dash one. And then I can do great column. And I can say span between two spaces. So let's have a look. That didn't work. And this is because we have card with two dashes in here. So let's save it. Go back. And as you can see, this card is now spanning between two spaces. And then we have the layout. And now the layout is very similar to the original. Let's just add some content now just to make it slightly better. And this spacing needs to be fixed as well again. For the first card, let's add a background image. And this image will be a row and then dot dot slash images. And this will be called card one. And then I can set the background color, sorry, background size to be cover. And that's it. Let's have a look. As you can see, this is looking pretty cool. Then let's do the rest. I think the image is kind of like colliding white with white. And that's why it's happening. But obviously, if you put the correct image, it will work fairly nicely. So let's do the rest of the images super quickly, exactly the same way. And I'm just going to copy this, paste it here, just like this, this, paste it in here. And I'm just going to duplicate this a couple of times and just change the numbers quickly. So we have, I think, eight cards. So let's put two, one, two. So we have one, two, three, four, five, six, seven, eight. And then we can do three, four, five, six, seven, eight. And then we can do the same here, three, four, five, six, seven, eight. And I don't know what's happening now. Oh, I've put three here. So I need that two, three, four, five, six, seven, and then eight. Save this. And these are looking nice, but I probably didn't save enough images I assume. So let's maybe like, I don't know, let's reuse this one in here. This is image two. Okay. And that would do. And we'll definitely need a little bit more space for the buttons. And the images could be set to cover as well. So they covered absolutely everything. They don't, they don't look like this. But for now, let's focus on creating the bottom cards, just like here. So we need this background color. First of all, copy. Let's go back. We can literally style it, maybe just outside here. And if you remember, we created div. And for this diff, we're going to have to position this diff inside the card as absolute position absolute. So we need to make sure that the card is actually positioned as relative. So let's add position relative, save it, go back. Then let's make sure that this diff starts from the bottom of zero, starts from the left of zero, right, zero. But the top, we need to make sure that is like, I don't know what this is, a little bit more than around just above 50%, I would say. So let's say top needs to be around 40% or whatever. Let's, let's try it out. And don't forget to add the background color. So background color, the one that we just copied, just like this, save. And as you can see, this is working, but we are getting white on white border here. And because our border has a lot of is opaque, then the white is actually appearing quite badly. So what I'm going to have to do is copy the actual color from here and add it as a solid color. So on cards, we're going to have to do border. And instead of the border color, we'll just add it as a solid color like this. And hopefully that should serve a problem. Yes, as you can see, the cards look a lot sharper now actually. But I must have broken something because there is a lot of space. Maybe I added this space earlier and because of the relative stuff. Okay, I definitely messed up here is because the diff, I'm actually starting outside all the cards. And this diff is actually needs to be inside the car, which was something to do. So we need to change this background color to the solid one from here, just like this. Okay, this is working. And the reason this is not working is because I went backwards and I need to add background color of this. So let's add this background color here, background color and set it as this color that we just copied. All right, as you can see, this is getting shaped now. The only thing that will left is to do the padding. And let's just add padding. And this will be roughly, let's see, on the left side, this will be around 14 pixels. So let's just add 40 pixels everywhere, just like this. And as you can see, this is working quite well. And if you were to change the percentages, all right, maybe we need to put this as auto. All right, one thing that I noticed is when I was scaling down the website just now, the boxes after this, obviously now we have three rows and now they're breaking. So we're probably just going to have to do either now put anything or put auto, I would say. Yeah, let's put auto instead. And I think that might fix the issue. Yeah, this is looking okay. And now we need to fix the titles and the text. The titles are slightly bigger, but I think this text is around 12 pixels and it has the text shadow. So let me copy this. And we can do inside the cards and inside the diff, we can do P and we can do color. Set this color that we just copied. And then we can put the font size to be font size 12 pixels. Then for the actual heading, which was H4, we can reset the margin. Zero. And then we can put the font size to be 14 pixels. Just like this. Let's have a look. And this is looking a little bit better, but we can also copy the text shadow from here just to save time. So what was a text shadow black? Let's copy this. And I think I believe the tech shadow is on both. Yep. So let's add tech shadow on the whole diff just like this. And let's scale. And as you can see, the tech shadow is working. Maybe it needs to be a little bit more prominent, but that's absolutely fine. Let's close. And we are now struggling with space a little bit, but we've gone so far. So we might as well just create the button. Maybe we can create the button to be quite small and we'll go from there. So let's create those elements underneath the cards. It's where we'll be creating them. And we can call this something like dot main underscore underscore footer. And then inside here, we can maybe section this into two. Maybe we can just do one section here left. And then we can do another section here to the right. And just ignore this for now just to speed up the process. But if you want to do this as well, it's exactly the same as here. The one with the logo left and one next to it. And then we just do the margin right to auto believe here. So let's do that super quickly. So let's create the two sections. Let's call the first one left maybe. So this will be main underscore underscore footer. And then this will be dash left. And then let's create another one. And we will just call this one right just like this for the first one. Let's add the content. We might as well as we're here. So we can have a label for the label. We can do it for version. And then and then I believe it said version slash region just like this. And then we need to add a select just like this. And inside the select actually we need to give it a name usually. For example, this will be version. And then we need to give it usually an ID if we're going to code this properly. Version and then inside here we need to create two options. Option one can have a value of Europe. And then Europe can be the text and then option two can be maybe USA USA just like this. Save this. Then we need to add the button as well. We can add the button just right here. For this I'm just going to create a normal button and with the class of button. And then let's add a modifier to be something like button slash dash dash play. And then for the button text we'll just say play like this. We should be good to go. And for the right side we need to add those logos here which I've literally cut and pasted but they will do the job. So let's add that. I am G source and the source for this is I'm G slash for the logos and then let's put a note. So it's not empty logos. I don't know what these are called. These are Activision maybe just like this. All right. Save this and let's have a look at what we get. So we are very tight on space here. We could technically make this smaller or make this smaller or make this big actually. In fact we can make this slightly bigger. To do this let's go back to the CSS. And here where was the grid? We have the first row to be 150. The second one is taking all the available space. And the third one let's just make it a little bit bigger. Just like this. I think this will work for now. So let's start this section now. First of all I'm thinking of displaying this section as flex. And I'm going to do this inside here as well. Just make sure that it's not inside the card actually. So this is yeah this is inside the card. So I need to be outside the cards in here. And let's do and underscore underscore footer. And this is the last section that we'll be doing. So this will be display as flex. And then we can do justify content space between content space between. Then we can align the items flex and as well. Items flex and just like this. Let's have a look at what we get. As you can see we have in the left side and the right side which is great. Obviously it could do with some padding and so on. For the left side we probably need to restrict the button to be. We probably need some sort of a restriction. So let's say restriction of 270 pixels. So for the left side we can do and dash left. And we can do maybe let's say max do we do with or max with max width to be 276 pixels. Or let's do let's do just wait. All right. Let's just do it. And then inside here we need to do some stuff for the label which we created. So first of all for the label we're going to have to let's copy this color here. Just to speed up the process. So let's do sorry for the label which I'm looking here. We need to let's copy this color here just to speed things up or actually we can have as RGB and just turn it down. So color RGBA 255 and turn it down to 4 maybe. I think we've got an extra bracket just like this. This is looking good. Then this can be displayed as block so it takes its own line block. And then we need to add a little bit of margin. We don't have to be specific but we can do 10 pixels. So margin bottom 10 pixels just like this and we should be good to go. As you can see this is now working. Now we need to style the input and the play button. So for the select we can do a couple of things. So first of all let's have a look at the select. There is a little bit of border radius. I'm not going to do the little plan for now just to save time but there is a little bit border radius. We probably need to copy the background color and this is probably going to be 12 I assume. Yeah 12. So let's do font size 12 pixels. Let's do background color to be the one that I just copied. Let's do the border to one pixel solid to the border that we used everywhere border color. Let's make sure that the select is 100% width. And last but not least let's make sure that the color of the text is set to white. And let's add a little bit of padding. I'm just going to do four and I think this would do the job. One thing that we forgot is the border radius maybe. And that's probably like two pixels I'm not too sure but it seems to be working okay. Because I don't want to do everything I'm just going to leave as it is. And now we need to start the button. We need to make it a little bit bigger. Obviously this needs to be a little bit bigger as well but let's focus on the button now. For the button let's have a look. We just have play and we have this gradient color. So we can easily go to CSS gradient IO and just copy the colors in here. So first of all let's copy the top color and paste it in here. And then let's copy the bottom color roughly and paste it in here. And now we need to turn the degrees so they start from zero just like this. And let's copy the code output it. And let's copy this to clipboard. And for the button we can literally do dot button. We can literally do button just like in here and do background color. But also we need to make the button slightly bigger. So let's display it as block. Let's make sure that the button is maybe make it bigger with font size 22 pixels. Let's have a look. Okay this is looking good. The text needs to be set to color FFF. Border. Radius needs to be set to two pixels maybe. We need to reset the border to zero as well as there is border as default. So this is looking nice now. But of course we need to make this a lot bigger. So 22 is not enough. 26 maybe. And let's add a lot of padding. So padding 12 pixels everywhere. Like this. For some reason it's not going for width maybe I didn't add that. Let's have a look. No. So let's do width 100%. This is looking a little bit better now. It is close to the bottom so we could give this section a margin I guess. It is quite tight because obviously this was full screen on Windows and we are building it on browser. So for this section we can put a little bit of padding at the bottom. So label. I already done this but it doesn't seem to be done. Okay I need to do it on the section here. So let's do that. Like this. This is looking good. And to be honest this obviously needs to be a little bit bigger but then this will push the cards which is probably okay I guess. That concludes everything for this tutorial. I hope you liked this tutorial. I hope you learned something new. I would appreciate it if you subscribe to my channel. It would help me a lot. Make sure you give this video the thumbs up. Comment below if you want to see more videos just like this. And as always my name is Raddy and you are watching my channel Raddy the Brand. And I will see you in the next video.