 What is going on everybody, my name is Roddy and you are watching my channel Roddy the Brands. If you are new here, welcome to the channel, I do website design and development videos. Today we are going to develop this website using HTML, CSS and a little bit of JavaScript. It's going to be a very slow but detailed process of building the website so enjoy the process and take regular breaks. If you find this video useful, smash the like button, if you like the channel consider subscribing for more videos just like this and now let's jump on the computer and get started. Today we are going to be building this layout here using HTML, CSS and JavaScript. We are going to start from mobile and work our way up to tablet and desktop. I've already exported all of the assets that we need for this project such as the logo, the images and a few icons. Regarding the content, I'm just going to be copying and pasting everything from here and let's get going with creating our project. Create a new folder. I've already made one called Zoo365 tutorial and in here is where we're going to be creating all of our files and I'm going to open this with Visual Studio Code, by the left shift right click and open PowerShare window here. Then if I type code, this is just going to open the project folder in Visual Studio Code. But feel free to use whatever code editor you wish. And if you want to open your project folder, you just go to file and open folder. That's pretty much it. Now let's create our project structure and then we'll go from there. First of all, let's create a styles folder. So CSS, this is where all of our styles are going to go. We need images folder for short IMG and we need a JavaScript folder for short JS. And last but not least inside here, we need our index.html file, which is basically going to be our homepage. Now inside the CSS, we need to create another file called main.scss, as we'll be using SCSS today. And this is going to be compared to a normal CSS file, which I will show you in a second. But create a main.scss file in here. Then for the images, I'm actually going to reveal this in the file explorer. And I'm going to copy and paste some of the images that I've exported from Adobe XD. As you can see, I've got the logo, the menu, a few images and an icon. Pretty cool. Now that we have the images, let's go to the JS folder and let's create a new file called script.js. And let's leave it as it is. Now, because we're using SCSS, we need to compile this. And there are a couple of ways of doing it. You can do it in Visual Studio Code. You can do it with an extension called LiveSalesCompiler. So if you go here to extensions, just search for LiveSalesCompiler and click install. But if you're using another code editor that doesn't have extensions like this, you can actually go to the SAS website and install their tooling. And then you can do it through the command line. The only bad thing about the command line is that you just can have an extra command line on your tabs. But it's not a big deal. But obviously, it's nice not to have so many windows open, I guess. So that's why I like using this. And the other tool that I'm going to use is the live server. It's created by the same person every weekday. This is basically going to reload the page for us every time we make a change. It's a hot reload server, a local development server, which is pretty good. I strongly recommend you install this. It's a pretty nice tool. There is an alternative for this. If you're not using Visual Studio Code, I think it's good. Live reload or something like that. It's free. You can download it and it does the same job. Now that we got this out of the way, the first thing that we need to do, let's open the Explorer and let me show you how we can, first of all, watch for any SCSS changes. In Visual Studio Code here at the bottom, we have this watch SCSS. If I click this, watch what happens in here in the CSS border. This main.scss file is compiled into this.main.css file. And we're going to be including this file into our index.html, as our browser doesn't really understand what SCSS is, so that's why we need to compile it to a normal CSS file. Now let me show you how we can start the local development server. If you right click on the index.html here, you will see this open with live server. And this should open the browser for me. Here it is. It opened it on my second screen. And as you can see, my website is currently blank. I'm going to toggle this to the right side of my screen like so. And let me just make it a little bit smaller because we're starting with mobile. This might be a good way to have a visual representation of what is going on. And for the output here of the SCSS, we can definitely close this and it will pop up every time we make a mistake, which is a good thing. So let me close this. It will run in the background, which is good. And now we should be able to start building our HTML and CSS. OK, let's close scripts.js as we won't need it just yet. And let's just focus on the index.html and main.scss. I'm going to close the Explorer now. So we have a little bit more space and I've zoomed in quite a bit, I believe just so you can see a little bit better, but it's also not too much. Now, to quickly create an HTML page, we can use the emit abbreviation tool. And all you have to do is start typing HTML. And as you can see, a few options are popping up. And what I'm going to do is just choose HTML5 and we're done. This is a very basic HTML5 and we can start working with this. The first thing that I'm going to do inside the head, I'm going to change the title to Zoo365. Save this and if the page didn't reload the first time, sometimes you have to reload it manually. So let's refresh. And as you can see, the title has changed. Hopefully now every time I save this page and the CSS file, this will reload automatically. So if I save this, you can probably see that it's reloading automatically, which is pretty cool. There are a couple of things that we need to do now. First of all, we need to link our star sheet and also we need to link our script. Let's do that. So to link our star sheet, we can start typing link and then just choose link CSS. And all we need to do, so we have link, row, star sheet, href equals style.css. But we need to remove this star.css as our file is called main.css. So what I'm going to do is go to the folder CSS slash main.css. And this is the file that we want to bring. We're going to have to do something very similar for the script. I'm going to do script and then source. We need to go to JS and then script.js. And we can also defer this script by doing defer, which means that this script is going to load after all HTML has finished loading. And you might sometimes see that script is also put here at the bottom. And it's more or less the same thing, I guess, but I'm going to do it here at the top. The next thing that we might as well do is bring the font that we're going to be using and that is poppins. So I'm going to go and open the browser, go to Google Fonts and search for the font poppins or whatever you prefer. And the weight I'm going to be using today will be regular. So I'm going to select this and I will be using the boat, which is 700. I definitely wouldn't select every single one. Just select the ones that you're going to use. And that might just make it a little bit faster, I guess, in terms of downloading. So there are two ways of including the font. The first one is with link in our HTML and the second one is by importing it into the style sheet. Both work quite well. But I believe that this one, this method is a little bit better. So I'm going to copy this and paste it inside here. Like so. Let me just tidy this up a little bit. And also I'm going to copy this font family poppins Sansarive and paste it inside the main.tss. But I'm just commenting for now just because I'm going to need it a little bit later on. So I'm actually going to close this now as we're done with the font. Now that we have set up a very basic HTML, let's just quickly type something. So let's do H1. Hello and say now what I'm going to do now is start writing some of the reset styles. And as we go along, I'll probably be adding more and I'll be adding different components that we can reuse and so on. So first of all, we need to make sure that all CSS is working. And to do this, you can simply just type something like body and then just change the background color to whatever you like. So let's go with this blurry wood color. As you can see, this changed the background color for me which means that the CSS is working. And if I go to the explorer and click on main.tss, you should see that this has been compiled. Obviously there is not much different at the moment but it has been compiled into the normal.main.css file which is pretty cool. Now, before we start writing any reset styles, I wanna start with organizing my file and I quickly want to show you how you could do that potentially if you're working on a bigger project. What you can do is put a comment here at the top and just maybe do CSS table of contents like so. And then what you can do is, let me close this by the way, this and what you can do is number your content. So for example, 1.0 could be variables. And maybe 2.0 could be your resets. And then what I would do is I would actually make a comment. So inside here, we'll be adding, shortly we'll be adding all variables. So what I would do is make a comment and just put 1.0 and then variables like so. And close. And now as our CSS document gets a little bit bigger, we can actually see we have this table of contents here. We actually have this table of contents in here and I can just grab something and just find this straight away. I mean, it makes it just a little bit easy, not a big deal. I probably won't use it today just to save time, but here it is if you want to use it. And I'm definitely going to be commenting some of my sections, of course, just to make things a little bit easier to understand. But now let's start writing some of our variables that we're going to be reusing throughout the layout. Now I'm going to be using the normal CSS variables instead of using the CSS variables. And the reason for this is because we can actually manipulate them. So let me show you what I mean. If I start creating a few variables, let's start with root. This is how you create a few variables, by the way. Let's call our first color primary color and let's give it a color of black and let's create a secondary color and let's give it a color of white. So three Fs. Also, we can bring our fonts. So let's do font family and then we can do, actually this is what I wanted to do. Copy this and we're done and I don't need this anymore. So we have those three variables in here, but the way you would create a variable inside CSS would be, for example, if you want to create a primary color variable, you do dollar sign primary color and then you do equals and then the color like so. So let me show you the difference. Oops, it's two dots. Let me save and let me show you the difference. If I open this and inspect it, you will see that inside here, the inside the styles, you will see the root colors. So we can always manipulate them with JavaScript if we wish to. Maybe you want to make a light mode and dark mode. So that would be very easy to manipulate, but you can't really see the CSS variable because that has been processed and we can't really change anymore. So this is the difference pretty much. I used to use the CSS variables because they are quite helpful as well. So let me put this on the side and close this and let's see how we can actually use those variables. So now we can potentially start writing some of all reset styles. And to do this, I'm going to grab this comment based in here, changes it to you and I'm going to put reset so and say. Now you can actually download reset styles, pre-made reset styles online and just start using them. But I'm just going to make my own ones. We're not going to cover absolutely everything, but I'm just going to cover a few basic ones. And what reset styles are supposed to do is basically give us this consistency throughout all browsers because different browsers used to render things differently and it was kind of annoying. So that's why we use reset styles. Saying this, most of the good browsers nowadays use Chromium and they all behave fairly similarly, which is a really good thing. But saying this, we still need to reset a couple of things. For example, if we open the page super quickly and inspect them, you will see that the body tag has a random margin of eight, which we definitely don't want. And maybe if we inspect the H1, you will see that the H1 has random margins to the top and the bottom as default. So we'll potentially reset them as well because I don't want them to look this way. So let me close this, put it aside and let start. So what I'm going to start doing now is changing a few things on the HTML and I will explain as I go along. So font size, I'm going to set to 62.5%. And the reason I'm doing this is because I want to be using ms and rems. Now we used to use pixels and again, when I use Adobe XD, I'm working with pixels. What this does for me is I can easily convert pixels into ms or rems. So let me explain this. If I had to reset the body font size for some reason, I would normally go for font size and as a default, usually you have it set to 16, I believe, but what I would have to do is put 18 pixels and leave it as it is. Now what I can do with rems, because I've done this 62.5%, what I can do, I know that 1.8 rem is actually equals 1.8 pixels. So that's why we're pretty much doing this. It's very easy to convert from pixels to rems. But you can read this in a little bit more detail online if you wish to. It's a pretty good trick. The next thing that I want to reset on the HTML is the line height. And this is more of a preference, I believe. So I'm gonna put this as one. And another thing that I want to reset is the scroll behavior. Scroll behavior will allow us to, if you click on an anchor link to scroll down the website or up, it will scroll smoothly. Now it can be a little bit annoying, but I will have an anchor on this website. So it's gonna just make it look a little bit better when we click on it. And now we can actually focus on the body here and reset some of the body styles. As I showed you earlier, we definitely need to reset the margin. So what I'm gonna do is margin set to zero. I'm gonna set the background color to or primary color here, which we set. And to do this, we can use the var keyword and then dash dash primary color like so. And if we save, you will see that it changes. So the next thing that I want to do is set the color of the text to be white as default. So what I'm gonna do is bring the other variable and put it to second color. Just like this, we have white. And I definitely want to reset the font family. So let's do that quickly, font family. And this will be equals var font family as we set it up up here. So that should now change if we zoom in a little bit. And if I save, you'll see that this changes to pop-ins, which is pretty cool. And the next thing that I want to change is the font weight, just in case to be honest. So I'm gonna do, let's do 400. I only have 400 and 700, I believe. 400 and 700. And I want to make sure that the font size is set to 1.6 RAM. Usually it is 1.6 pixels as default. But just in case, I guess I can do that as well. And let me zoom out. And now what I'm thinking is, let's start by building a few things. And I'm definitely going to be adding some more recess styles as we'll build some of the elements. And we'll just work our way up. So if we go back to the HTML, I'm going to start by adding a skip to content link. And this is basically good for accessibility, just because, I mean, when I start making it, you will see what I mean. But just because if you start tabbing on the website, you will probably have to go through the logo. This item, this item, this item, this item, this item. And it will take a lot of tabs to go to the main content. And this is why I'm going to be adding this skip to main content. And this is why I'll be adding this skip to main content. And it's pretty easy to do. So what I'm going to have to do is create a link with the class name of whatever we give it. So let's do skip to content. And let's give it an href of maybe main. And I will have to remember to put this down to our main content later on. And of course, we need to close the link. And inside the link, I'm just going to put skip to content. Like so. And obviously, I don't want this to be visible on the page. So what I'm going to do is a little bit of CSS trickery. So this only appears when people start when they enter the website and they tap on the keyboard. So let's have a look at how we can do that. I will be jumping in and out of the HTML and CSS for now. That's the way it is. Things will never be the same. But yeah, let's go. So class, skip to content. And for this, we need to position it as absolute. I'm going to do top 20 pixels. Let's do padding of six. Just to make it look a little bit better. Background color can be black. So I'm going to use the variable color of primary color. Then border, I'm going to set to one pixel. Solid and just some great color. Let's also change the color. So color of white. And I'm going to bring the variable secondary color. And then let's do box sizing, maybe border box. This means that the padding will be added to the width instead of being at, let's say, 100 pixels plus six on left, right, top, and bottom. So this is what box sizing does. And just in case, I'm going to give it a z-index of two or three, maybe 10. I mean, it has to be a big z-index just in case, I guess. But here it is. Or skip to content button. Obviously, we're zoomed in quite a lot. But here is how it looks like. We also want to move this button on somewhere outside the window on top of it, just because if it's on the left side and if you open it on a really big screen, you might end up seeing it. So that's why it's safe to start from the top. So what I'm going to do is transform. And then we're going to do translate X. And then just put minus 100% or something like that. And then let's do transition. To animate this, our transition will be 0.3 seconds. And this should do the job. So as you can see, it's now gone. And we need to bring it back when we focus on it, when we hit tap. So to do this, because we're using SCSS, we can actually do it inside here. We can actually do ampersand and then focus. And then we can start writing all styles here. And the focus will be basically transform. And then we need to do transform, translate X. And then we just need to bring it back, which could be 14%. And hopefully if we go back to the website and press enter and then press tap, you will see it coming up. And it's actually Y is not X. It's the Y axis, sorry. So that should now work minus 100Y. And then hopefully that should be 0. Okay, maybe that needs to be a little bit more. Okay, that should do the job. So if I do tap now, as you can see, it appears. And then if I hit enter, you will see that it's actually hitting this main anchor, which is a good thing. So let me demonstrate it one more time. So I'm gonna remove this anchor. Let me open the window a little bit bigger. So I've gone to the website, I press enter, I do tap on the keyboard, it appears. And if you hit enter, it will go to this anchor, which we'll create later on. And by the way, it would have been nice if this was kind of like in the middle. So the trick to do that could be that we do it the old school way, where we just go left 50%. And then do we need to, and we probably need to like calculate how big the button is. So it's kind of in the middle. I'm gonna guess it. So margin left minus 50 pixels. This is a pure guess, but that's how you do it. If you wanna center, I guess. So minus half of the size, I mean, I do have a ruler here. So I could just grab it or just do, and see where it is. 134 divided by two is 66, I believe. So we can definitely remove this and go back. So I can do 66, I wasn't too off, I wasn't too far off. And yeah, here we go. It's in the middle, we can press enter, and this will scroll to the bottom. Okay, we are pretty much done with this, but there is one more thing that we need to, but there is one more thing that I need to mention. And this is the print. So we definitely don't want this to appear on print. So what you can do is outside here, we can do add media, print, and then we can do skip the content, and then display, none like so. And hopefully this will not display on print. Not too bad. Let's have a look at the next step. So the next step would be to actually recreate this hero section here, which has the logo, the navigation. We have a heading, a little bit of a paragraph in here, a button and so on. And one thing that I need to mention is that there is a difference between the desktop version here that we have the menu showing like this. And on the mobile and tablet, we have it as a hamburger menu. So we need to take this into consideration and do it properly. So let me show you how we can do that. First of all, let's focus on creating the element. So I'm gonna be writing HTML5, of course, and everybody should be. And I'm gonna try to make everything as usable and I guess as accessible as possible in very short amount of time. So let's start by writing a header. And what I'm gonna do is I'm gonna be using the BEM methodology, which means that we pretty much give every single container a class name. So this one is going to be called header. And the reason for this is that if we decide to actually change this for some reason, we probably won't change this one particularly, but if we decide to change this for some reason and change it to a diff later on for whatever reason, then we still have a class and the styles apply to this class. And this is why it's kind of like a good idea to do this. So let's go back and put this header because we want to have HTML5, of course. And what I'm gonna do is I'm gonna create a container, which means that at some point, when we extend the browser, at some point we're gonna have kind of like a max width because I don't want it to be like full, full screen for everybody because some people have like 4K screens and it would just look ridiculous. So that's why I'm gonna do a container for the content. But the images, actually the images will be full width, I guess, so that's something to test, I guess. But anyways, let's create a diff with the class of container and to do this, there is a shortcut. You can just put dot for class and just do container and press enter and this will create a diff beam. So now that we have this container diff, we need to create our logo and I'm gonna wrap the logo into an H1 type, just like so, give it a class name of, if you use BEM, we should be giving it a class name of header logo. So who minds what I do there? header underscore underscore logo. And then inside here, we're gonna bring a little bit of text, which I'll show you in a second why, but we could do span and let's do zoo365 or something like this. We could do zoo365 for now, then we can create a link, a href and this link, we know that is gonna be going to the homepage, so I can just do slash and then close this link and inside here, we can do an image and then do source image logo dot SVG and we can do old zoo365 and then we could potentially also add the loading lazy, but I don't think that this is super necessarily here and I think that we might get like a little jump of the logo because the loading lazy, so I'm gonna remove this and maybe introduce this a little bit later on for the link, we can potentially give it an area, area label of zoo365 logo or something like this and let me save this and as you can see now, we have an H1 which has zoo365 as text and here is a logo in slightly different font. Now the issue is that I don't really want to see this on my page, but at the same time, I don't really want to leave my header without the title just because the HTML outline out won't like it. As you can see, we have zoo365, but if I was to remove the text from here, save it and reload, there is nothing, there is nothing. So that's why I was adding this text here. Just to say this won't result in errors, but for screen readers, I have seen that it could be quite helpful. So that's pretty much the reason. Let me go back and to solve this problem, there is a really cool trick that I took from Bootstrap. So let's give this span a class name, name of screen reader sr only. So what we can do with this class name, we go back to the main dot says and inside here we can do screen only. And as I said, I've taken this for Bootstrap. I think it's a pretty cool way of doing it, but if you know a better way of doing it, let me know. And we just need to basically hide this. So what I'm gonna do, well, the issue is that if you display this with, if we put display none, it's an easy job, but we kind of do want this text to be displayed on screen readers and so on. So that's why we're gonna be doing this trick. So the first thing that we want to do is to position this absolute and we want to put the width as one pixel, height as one pixel, then we want the padding to be zero. You can probably tell what's going on now. The margin needs to be minus one pixel. We need overflow to be hidden. What else? Clip, we need to be wrecked just like my bank account like so. And then white space needs to be no wrap and border needs to be zero like so. And as you can see now the text is gone, which is a good thing. What we're noticing here though is the behavior of the H1 that has a lot of margin to the top and the bottom. And we're gonna solve this issue in a second. I just need to zoom out. This is how it was gonna look by the way, or mobile is not that big. Okay, now that we've solved this problem, we also need to add a couple of more things. So we have the H1 and now we need to wrap all menus. What I'm gonna do is wrap all of our menus, my mobile menu and the desktop menu in a single div. And let's call this one dot header underscore underscore menu. And then inside here is where we're gonna be adding the mobile menu. So we can maybe do a quick comment, mobile, our navigation start. We can duplicate this by doing wood shifting down. And this could be end. And then inside here, we can add a button. Now the reason we are in a button instead of a div is you probably can guess it that divs are not really clickable and they're bad for usability. You can use divs as a containers and whatnot. And I know that you can do sorts of stuff with JavaScript but they're not so accessibility friendly. And that's why I would either use a link or a button, whatever you can. And now for this button, let's give it a class name or button which we'll have to style later on. For short, you could call it BTN if you wish. But I'm gonna keep a button just so it's easy to understand for now. And also I'm gonna give this button an ID of mobile menu, BTN maybe, and all you can call it toggle, whatever. And we also want to make this as accessible as possible. I keep talking about accessibility today but we do need to make sure that we do as much as we can. So what we're gonna do is introduce a few more area labels attributes. So let me bring them up. The first one will be area label and this will be toggle menu or you can put it as menu, I guess. And then we need to tell the screen readers whether this, whether all menu is expanded or not. So what I'm gonna do is put area, expand it and put this as false because one meal mobile, the menu will be collapsed as default and that's why it's false. And then we need to put area dash controls and then we need to put the ID of all menu which doesn't exist yet but I'm gonna call it, what I'm gonna call it, mobile menu, keep it simple. This is it and for the button inside I'm just gonna go with an image. I know that I can do this with, I can potentially start with CSS. I've done it, I usually do it that way but just to save time, let's just add a very simple image and this will be source equals image menu.sbg Alt, don't forget to give him Alt tag so for BB, this would be, I don't know, mobile menu and could potentially give it a loading of lazy but I don't want it to blink. I mean, it's not too bad but I don't want it to blink in here. It's only a small SVG so I'm gonna leave it and one thing that I just noticed is that I didn't give a width. When I said blink, one thing that I didn't notice is that I didn't put a width and a height for the logo and unfortunately, if I go to logo SVG, oh, 43 by 222, okay, so 43 by 222. So I was gonna say, unfortunately, we can't really tell how big they are unless they're an image. When you click on an image, you can kind of tell the size of the image and the megabyte. This is ridiculously big by the way but yeah, that definitely needs to be optimized. It's too big. Let me close this and the other one will be image menu. So image menu SVG, this is 16 by 11. So let's do width of 16 and height by 11. And to be completely honest, this just helps sometimes with kind of like telling the browser of how big the image is so we don't get this annoying jump sometimes. I mean, it's one of them things that you might not notice or it doesn't even happen sometimes but if you do see that problem, then you just give your images a width and a height and honestly, this is not gonna affect any of our responsive styling at all. I know that it looks weird and it sounds weird but it won't affect any of our styling at all. As long as you give your image a width of whatever and a height of auto in your CSS, you should be absolutely fine. And now let me first of all finish the desktop menu and I'm gonna talk about the this thing here and in fact, we might as well style it to make it work. So okay, let's add the desktop menu super quickly. So I'm gonna copy this just to back so you know. This would be desktop navigation start. Oops, desktop navigation end. And then inside here is where we're gonna be adding the navigation and I'm gonna use HTML5. So what we can do is nav class or desktop menu, everything like this. And then inside here, we're gonna do, we can do the same thing as above actually, potentially. So we can give this every section would have to have kind of like a, would have to have a heading otherwise in the outliner will appear as empty as I said previously. So untitled nav, I mean it's not a big deal and if it's annoying, but let's do anyway, let's do. So let's do H1 and with a class of screen reader dash only. And then we can do main navigation. And inside here is where we're gonna be adding all navigation with an audit list. So to do this, we're gonna do URL and then we're gonna have to stack a few lists. The reason we are doing it with an audit list is because again, this is great for accessibility and you can tap through each element if you're using like a screen reader. So what I'm gonna do is inside the list, actually we can put this on one line. Inside the list, we're gonna have a link HREF. So I'm gonna keep this empty with hashtag just so it's not a bronchi link. In fact, we can definitely give all links a class name. So it's a little bit long, but maybe we can do a class name or desktop menu. And then we can do underscore underscore link. This is one of the problems with BEM. The classes became so long. It's a little bit annoying, but at the same time it's really nice as well because of the specificity that it's creating. So inside here, we can do home. And now we can definitely duplicate this a couple of times by holding shift and down. One, two, three, four, I think. So home, about, we need shop, we need gallery and we need contact, like so. Then another thing that you might want to do is maybe add a class of active, but I'm not gonna be fully making this. So for example, if you are on the about page, you might want to highlight this. So what I would do is create an active class. So the moment we're on the home page, but what I'm gonna do is add a class of active and then move style it later on. So at the moment we don't, let me, oops, let me tidy this up. At the moment, we don't actually need the desktop navigation just yet. So what I'm gonna do is on the nav, I'm just gonna put hidden and then come back to it a little bit later. Now let's actually concentrate on the mobile navigation as this is what we're gonna be building first. And annoyingly, I might have to just put it outside the header. Yeah, let's put it outside the header because I wanted to kind of like fly out a little bit. I haven't designed it, but I'm just gonna design it on the fly and just make it super simple. In fact, we're gonna do something very similar to this. So what I could do is copy all of this. Let's copy the whole bit pasting here. And let's do mobile navigation start, mobile navigation end. Then we can do mobile instead and just replace every single thing. Oops, by doing, I totally forgot the shortcut now. Oh, here it is. It's all shift control and then you use your arrow and then you do mobile. Okay, I'm not gonna do the active or mobile, just remove it, main navigation. I mean, it kind of is main navigation as well. So I'm gonna leave that on. What else do we need? We need one more thing in here and we probably need a close button somewhere because all menu is gonna fly out and we need to be able to close it. I'm not sure whether to do this with a link or a button. Let's try it with a button. I know it's gonna be weird, but I think I'm gonna do it with a button. So button, and this needs to be tested for usability at some point as well. But what I'm gonna do button with the class name of mobile nav close. Something like this, something that is very explanatory. I don't wanna make any shortcuts on this. It's just nice to read and you understand what it is straight away. So that's all good. If I save this, we still have the hidden here, so I'm gonna remove that. And as you can see, we get the button here, which is tiny, tiny, and we get the links, which are pretty cool. So one thing that I said earlier is this area control, that needs to be equals the ID of this mobile menu here. So I'm gonna copy this and give it an ID of mobile menu. And the reason for this is that we need to be able to know that when we click this button, we need to change this from area expanded to true. And we need to tell the browser which area we're expanding. And this is how we're kind of linking it with the ID here. So that's why we have it. And we're gonna have to manipulate this with JavaScript, which will be a fairly straightforward process to do. So don't worry too much, but we've come a long way on the header. So I think that we should start styling it one by one. But let's go back to styles. Let's create some comments. I'm just gonna copy and paste header section with a lot of equal signs. And now we can start styling our header. If you remember, we used the header class. So I can do this. And if you're familiar and with Flexbox, we can style this super quickly. We can literally split this div into two because we definitely have two divs inside, which is the H1 and this header menu. So we can split this section, sorry, the container section into two and push this one to the left and this one to the right. So let me show you how we might be able to do that. Because everything is wrapped in a container, which is a little bit annoying, we're gonna have to do the container. And then we're gonna have to do the display flex. And then we can do justify content and space between. And as you can see now, or logo is here and or menu is here on the right side. If I actually inspect this super quickly, you will see that it's a little bit broken. I mean, it is a little broken at the moment, but we will see that the button is on the right side and this is on the left side. And we're gonna fix whatever is broken in a second anyway. So what I'm gonna do, let's go back, open this. First of all, I want to position the header to be absolute at the top. So I want the header to be always at the top of everything. So we're gonna do position as absolute. And then this could be top of zero, right of zero, left of zero, Z index of one padding top of something like 20 pixels, just to give it a little push and then because we have our logo as an H1, H1s usually have margins as the food. So what I can do is header actually, because we're done with underscore underscore, we can even do it this way, underscore underscore lower and then we can do margin zero because we don't have much more here. I'm gonna put it onto a one line. So if you go back to the browser, you will see that we have no space. And I think that this white thing is actually the button. I could have hidden it for a sec. So where was it? The menu, let's do hidden, so it doesn't get in a way. But as you can see, we have zero, three, six, five here and we have the toggle menu on the right side here, which is a good thing. But I also want to create this container that I was talking about where it keeps everything kind of like in the middle. So this is going to be a global class that I can maybe do. In fact, let's just do it around here. See as a problem. And that would be dot container. And then we can do max width of one, six, two, one pixels. And then I'm gonna do margin of zero or two. I'm gonna do a padding of zero, 20 pixels. So what happens is every time we have a container, the max width over is one, one, six, two, one pixels. The margin is set to zero on the left and right, which kind of pushes it in the middle. Sorry, the margin is set zero on top and bottom. And then on the left and the right side is set to auto, which kind of like pushes the whole container in the middle of the page. And then we just have a little padding of 20 pixels to the left and the right, which kind of like fixes the mobile. Let me show you. We have the container in the middle. And if we were to resize this for mobile, like so we have this nice little gap between because we don't want our content to be right next to the edge, just looks unprofessional. Now the next thing that I'm noticing is that we need to kind of like align everything in the middle and Flex makes this super easy so we can go back to the container and we can do align items of center and this should fix the issue. As you can see, it's all nicely aligned now. One thing that I want to do in here is give this button a little bit of padding just so it's easy to press. So I'm going to have to find what I called it. Unfortunately, so I called it, just gave it the class of better. Okay, I'm just going to use this idea of mobile menu, BTN. I'm going to do a hashtag mobile button, BTN. And then inside here, let's just give it a parting of 10 pixels all around. So it's just a little bit easier to press. And hopefully, yeah, that made it much bigger. And of course, at some point, we're going to be reset in this button and making it look a little bit more professional. Just before we finish with this, we might as well just hide on desktop. So what I'm going to do is when we go towards tablet and desktop obviously, I want this to be hidden. And to do this, we can just put a media career here. So I'm going to do at media and then screen and then screen. And then we're going to do mean with of 600 pixels. And then inside here, we're basically saying when the width goes above 600 pixels, I want you to hide the mobile menu, which is this one here. So I'm going to copy the ID and just say display, just like so. And we need to do the reverse thing for the for the desktop menu. So we could potentially do this now and style it a little bit better. So for the for the desktop menu, here it is. It's here in a moment. Let's remove this. And let me see if it's showing up first of all. Yep, it's showing up. Let's style this super quickly. I'm not going to do anything super fancy. I'm just going to try to copy the design as much as I can. So we have it as desktop dash menu, not a problem. And then we have desktop dash menu link for every single link. Easy peasy. So let's do desktop menu. I definitely need to comment this. So maybe like this. I don't know. And then we can start by doing display none because display none. Because because originally we are starting from mobile and we don't want the desktop menu to be displayed. But when we hit this threshold of minimum with 600 pixels, we want to switch to that. So what I'm going to actually do is I'm going to copy this media query here and just swap things round. So in fact, we don't need any of this. And we just need to change display none to display block potentially. We'll see. But because we are on the desktop menu, we don't have to specify the name again. So hopefully this should work. We go back and let's go down. And as you can see, we get the mobile menu. Let's go up. And as you can see, we get the desktop menu. So let me quickly style this. It shouldn't take too long. What I'm going to do is I'm just going to be a little bit lazy on this. And usually, you probably want to give your, maybe, URL class of something. I mean, it would be nice. But let's be super lazy and do it off URL. And then let's reset the URL defaults of button 0. Margin, oops. Margin 0. Then we can do list style type of none to remove the bullet points. We can display this as flex because we want every single item to be in one line, just like those equal signs, I guess. And then gap is the gap property, which kind of gives gap between every single link on the inside. It doesn't do that on the outside, which is great as well. And now we just need to style some of the links. And to do this, we can do ampersand underscore underscore link. And then let's just give it, give them a little bit of padding of six top and bottom, 10 left and right. Just so they're easier to press. And then we can do text decoration of none. I don't want them to be underlined. That's all. We might as well just make all out a little bit better and do a hover effect. So what I'm going to do, I mean, interactions. Might as well then make the interaction better and do a hover effect. So text decoration underline like so. Let's tidy this up. Save, save. Let's go back. Let me remove this. As you can see, we have the items in here. They're all looking good when we go down, the switches and so on. Pretty cool. Of course, we're going to have to change the links to white and so on. But I'm going to do this as a global thing. So we can definitely do that now if we wish. So let's go maybe around here. We can do all links, color, off, and then secondary color. Does that look good? Yeah. And there is a lot more properties that we can do for the link like focus, hovers. What else? There is quite a few. But I'm just going to keep it to the minimum here and just change the color for now. And as you can see, this is looking fairly nice already. And when we go down and so on, I definitely need to reset the button here. It does look a little bit bad, but I've already got in mind how to do this. So let me style the button a little bit. And to be completely honest, I already know how I want my default styles for the button to be. So once I do this, this is going to help me with the other buttons. And in fact, we might as well just complete the whole button now. So what I'm going to do is somewhere around here, I'm going to copy this and put something like component. And you can have many reasonable components, of course, but I'm going to keep it super simple. We gave or button a class name or button. So what I'm going to do is put button and then start styling. So I want it to be, I want every single button to be positioned relative. And the reason for this is that sometimes sometimes I add icons and they can be positioned absolute inside them, but it's not required. So definitely I want to have it display as in life flex, because it makes things easy when I'm aligning stuff. And then I can just do align items to be positioned as center. I can reset the font size to be 1.4 grams, which is equals 1.4 pixels. In this case, font weight, I want to reset to be 400 line height. I want to reset to 1.5. I want to have text, the creation of none, obviously the buttons. You could create a modifier where we have a button that looks like a link, I guess, with an underline. But that's what I want at the moment. So letter, spacing, I'm going to put one pixel. And the reason for this is just I believe that it makes it look a little bit cooler. Text, align, it's going to be center. And then background, we need to reset to transparent because I don't want any colors to my button, to my default button, because usually they have some sort of like a weird color to them, like a gray color. So I want that removed. And I want everything to be vertically aligned to the middle. And the user select needs to be set to none. And the border of the button needs to be one pixel. Solid, transparent, which basically resets the border to a transparent one. And then I'm just going to give it a little bit of padding, one, one, six, RAM and I've already calculated this, I messed around with it. But of course, I usually just spend some time looking at the design and measuring stuff. So if I go to my this mobile button, we have the class of button there, which is a good thing. And as you can see, the background is now gone and we have the mobile toggle menu here, which is pretty cool. It does look a little bit small, but we can always resize it if we need to. It's looking cool. I gave it a height of 1611, that's all good. The next bit would be to actually pop out the mobile menu and make it look nice super quickly. As I said earlier, I haven't actually designed one, but I'm going to do it on the fly now. Just do something super basic, I guess. And this is called mobile menu. So let's grab that. I removed the hidden bit, so it pops out. So mobile, mobile menu. And what are we going to do it maybe around here? Mobile menu and then we can grab the desktop menu comment pasting here and do our menu. So mobile menu, I can potentially bring this to the right side of the screen. When we start for it's OK when we start for mobile, but it's not so good when we start for desktop. So that's why I keep having switch before mobile. We can now focus on this year. And first of all, we do need to hide at some point. So I'm going to come back to this. First of all, I want to make sure that this looks good. So what I'm going to do is I'm going to position this as fixed. And then I'm going to do top zero, right zero, bottom zero and left zero, just like so. So it takes the full the full height and the weight of the available space in here, which is good. That index, we might have to bring this to, OK, maybe not 100, but something big, we don't want anything over this menu. And now we can actually focus on the UL inside, which is the unordered list. And for this, I could have given it a class name again, but I didn't pure laziness. And let's go for padding of zero to reset the margin of zero. List style type is going to be zero. Then I want the background, the background color to be the primary color. So primary color like so. Then I want to change the position to be absolute. And here what I want to do is position it from the top zero, right zero, bottom, bottom zero. But I want the left to be around 20, 20, I want to say percent of the view width. So it's going to be 20 from the side of here from the so 20, kind of like 20 percent from the view width. And the reason for this is because I'm going to do it like model menus where the menu pops out from here. And then the left side is kind of like or close, but it's a shame that everything else is black underneath. But what I'm going to do is let me quickly change the body color to something else just so we can see a little better. Anything, anything to give it a little bit of contrast. And I'll come back to this to change it. Obviously, that's how this is going to work. So we've reset the list. List style type needs to be set to none, not zero. And we are good. Then we definitely need to style the link. So what I'm going to do is ampersand underscore link. And then for the link, we're going to display them as block. So they're clickable all the way around all the way from the left side to the right side. That's what's going to do display block. And then we can give it a little bit of padding so they're easier to press of 16 pixels and 14 pixels like so. And definitely kind of used ramps in here. So that could have been one point six room. And then that could have been four point zero room. Yeah, I think so. So that's all looking good already. Text decoration, I want to set to none. So we remove the underlines and the text transform. I want to set to uppercase, just so it looks a little bit more modern, I guess. And that's not too bad. Now we have one more thing in here. And this is the actual button that we have in here. I wonder whether I can give this button here a class of button. Let's have a look. OK, it disappears, which is a good thing. And now what I'm going to do is style this button to be underneath here. And this will be kind of like our close button and we'll make it work with JavaScript. So what do they call this mobile? Not close. OK, sounds good to me. So I'm going to do it here. Mobile now close and I'm going to do position as absolute. Top needs to be set to zero. Right needs to be set to zero. Bottom needs to be set to zero. Left did it put zero and then one cool thing that I want to do is make everything underneath the button kind of blurry. So when we have a image later on with the hero image, it's going to look like blurry and it's going to look super nice. And we can definitely do this with CSS by doing a backdrop and then filter. And then we can do blur and then we can set the how much we want to blur. So as you can see, the logo is now blurred. And I know that it doesn't look as good just yet. But trust me on this is going to look super cool as when we do it. And one more thing I want to do is I want to set the background color to red just to test this out. And this is looking cool. I wonder what this is here, this line. Let me open this for it and just check out this line here. We have the button. Is it something to do with? I think I need to give this button a weight of 100 percent. Let's have a look whether this fits. Oh, yeah. It might be that. Yeah. OK, now button is good. There is no problems in here. And now we can close this and just like that. Remove the background, of course. And hopefully, yeah, that works out. The only reason I went for a button is that I was thinking that for usability purposes, it might be a little bit better. But it might be even worth just having the X button in here. And one more thing that I noticed is that all buttons of parts are close to the top. So let's fix this super quickly. And I mean, let's just give it a patting top of for whatever. OK, that would do the job. He's looking good. They can definitely do it a little bit, a little bit of a hover. So on each link you can do and hover and then a background color of. I don't want it to be obviously don't want it to be the same killer. Just choose something quick. OK, that works for me. Super cool. Now we need to hide it because the default position is hidden. So what I'm going to do is I'm going to do a couple of things. First of all, I'm going to put the visibility. Of hidden and we could display none as well. But the animation probably won't work. OK, let's do visibility hidden and let's do it transform. And then let's just do translate X, which would be left and right. This time, so let's do section 20 pixels, something like this. So it's completely gone now, even if I get this. Yeah, it's completely gone now, which is a good thing. And now let's do a transition. And the transition will be transformed of 0.25 seconds. OK, this is all good. And now what I want to achieve is when we present this, the menu to pop out and to do this, I am going to create an extra class called is active. So mobile menu, we can definitely just add it here. I guess we can do and dot is active. And then we can do visibility visible. Yeah, we need transform. That's fine. In fact, let's just copy this transform and that needs to be set to zero now to just like reset there. We don't have to specify pixels anymore, I don't think. And also, do we need transform again? I doubt. OK, let's test it out. So if I add this class to the mobile menu here, as is active, we get this. And I'm not sure whether the animation works. One way to test it out would be to do this. And then where is it? So it's active. If I remove it now, hopefully we'll see it slide out. Yep. Yeah, that worked. And if I add it, it slides in. So that's pretty cool. Let me reset the background color festival and then we'll concentrate on the rest. The background color was to the body. So I don't forget. Where is it? Not so bad. The original state of this is obviously hidden. So here it is. We have our menu. When we go up, everything is working well and so on. So we're going to have to write a little bit of JavaScript to make this work. But to be completely honest, it should be fairly straightforward. So let's jump back to the code editor and I'm going to open the Explorer and I'm going to open JS and script.js by double-clicking. Let's minimize everything else that we don't need. And let's start writing or script. There are a few things that we need to know now. So in all index, in all index dot HTML, we need to know the class name of this or the ID so I could potentially use this mobile menu class or you can use the ID as well. I can show you actually I can show you a bit of both. So this is mobile menu that needs to show and hide. Then we need the button itself, which is the mobile menu button. And that's that self-explanatory. It's an ID of mobile menu button. And we also need the close button, which was oh, it's here. So that has a class. Let's just use the class of mobile nav clothes. All right, that's fairly self-explanatory as well. So we have classes and OK. So this is just going to be commented, by the way, just for me to know what I'm doing. First of all, we need to be able to select this button so we can bind an event listener to it. Every time we click on it, we want something to happen. To do this, we can do a const. We can give it a name of mobile menu BTN, just to say a system. And this will be equals to the element on the page to get the element on the page. We need to do document dot get. So query selector. And then we inside here, we can actually pass an ID or a class name. But in this case, we have an ID. So I'm going to do an ID of mobile menu BTN. Close this. We need to copy this line and do the same thing for this year. So this would be a mobile menu, maybe. And then we can use the class name of mobile menu. I could have kept it consistent, but it doesn't matter. And by the way, this is a class name. Don't get this wrong. It is a class name. And then the last thing that we need to do is the close button, which we can do. We create another line and let's just do. Mobile menu close. BTN. Yeah, that would be. And then we need to copy the class name pasted inside here. And we should be good to go. All right. Now, let's bind an event listener to our mobile button and see whether this works. To do this, we simply grab the name and then we do add event listener. And then inside here, we can do a click event listener. So every time we click, we want something to happen. So we do a function and then open close and then inside this function, we can do actually, this could be another function as well. I don't think that it's going to make any difference. To be completely honest, we can just do this and there's another function. And now inside here, first of all, we need to make sure that we set the is active class here to this to this mobile menu. So it pops up and to do this mobile menu. So we can do, we can grab the mobile menu selector and then we can do class list dot add, which means we are in a class. And then the class that I want to add is active, just like so. And if we save this and go to the browser and we press on the button here, you will see that the menu is flying. I know it's black and black at the moment, but the menu is flying and it's working. You can also test stuff with console log and put some and put some emojis, of course. And every time we go in the browser and press the button, we'll get that emoji as well, which is pretty cool. And now that we have this, another thing that we need to do is every time the button goes to active, we also want to change this area expanded to be true. I'm going to actually grab this name. And what I'm going to do is on the mobile menu button, I'm going to do that set attribute and the attribute that I want to set is area expanded. And we just want to change it to true, I believe. So that's all good. And if we open the browser super quickly, go to mobile view, go to elements and look for the button here, first of all, and look at the area expanded, which is right here. Yeah, whoops. Area expanded is currently equals to false. So now if we click, it should hopefully go to true. As you can see, area expanded true, which is a good thing. And now we need to just do reverse, but we need to do the reverse thing. When we click this invisible button here, it will be visible when we add content. So the invisible button was called mobile close menu. So I'm going to do exactly the same thing as here, but just literally reverse it. So every time we press the mobile menu close button here, we add it, we add an event listener to it. And then on the mobile menu class list, we this time we remove the class of is active. And we also set the attribute of area expanded to be false. It's like, so hopefully if we go back, we should have a fully working menu. And everything is looking good. OK, pretty happy with this. I think that we're pretty much done with the menu now and we can focus on the hero image. OK, we don't need the JavaScript anymore. So we can close this and we can scroll down to the bottom and continue with our mission. Now, everything else that I'm going to be building from now on is going to be inside or a main tag just to be a little bit more just HTML semantics, I guess, but it doesn't have to be in there. So anyways, let's let's start by building our first section. So I'm going to do section and then give this section a class name of hero, just in case we want to change this to something else like a div. And now there are a couple of ways that we can do this. Let me just quickly look at the design. Now, the couple of ways that we can do this, we can either add this image as a background image. And that would be probably the easiest solution. But I'm not sure if it's the best one. I think the best one would be to add it as potentially as an image. And you can do you can have it as lazy loaded and so on, especially. I mean, especially the other ones, they can definitely be images instead of background images and have them as loaded lazy. Just so if they don't show on the screen, they don't load, which means that your website will be faster. And also we can definitely put different versions of this image, smaller ones, bigger ones. But what I'm going to do is I'm going to keep it simple. I'm just going to add one image instead of a background image and do it this way. And also, and let's do this section as a background image instead. So we're going to do this one with an image and the other one with a background. So we have a bit of both. And as you can see, we have a title, description, button, overlay and an image. Let's build this super, super quickly. A resection. So first of all, we need a wrapper for the image. So I'm going to do hero underscore underscore image like so. And inside here, I'm going to just add an image. And this could be of source image hero dot JPEG. Or we can just give it some like lifting heavy, I don't know, obviously be a bit more descriptive of what's on the image. And then if you wish to load in lazy, we can do it. But I'm afraid that it could potentially make a big jump. We'll have a look if it jumps too much with the load in lazy, probably one other. And one thing that we need to check out is the size of this image. So this is the hero image and the hero image is 920 by 1074 with 920 by 1074, excuse me. And that should be good. We obviously make this responsive. Don't worry, it's all good. What else do we need? I'm not missing anything, but that should be it, I guess. And then and then what we can do is create a container for everything else. So I'm going to do dot container. And then this will be or hero container. So I'm going to give it a specific class of hero container. Just so it's easy to style for us. And inside this hero container, I'm going to have a hero rapper, which will kind of push everything in the middle of the screen. So let's do that. So this will be hero dash rapper. And then inside the rapper, we're going to have a couple of things. We're going to have for each one heading. So this will be class hero rapper heading, maybe. Like so. And then I can put like this here, your hero, make this your hero. And then we can do a paragraph and the paragraph will have a class of hero. Rapper and then what is it, body text, something like this. And then I'm going to copy and paste some of the text like so. And then last but not least, we need a button. Now, this button is going to be a link H ref. I'm going to leave a blank with the class of button and then button. Button primary, because this is something that I want to do. I want to create different types of buttons that we can reuse throughout the layout. Maybe we can give it an area, a label, find out more. And then we can close it and fill this with find out more like this. That should be it. I think another thing that we do have on the layout is this scroll button, which we're going to have to do as well. And to do this, I'm going to do it outside the hero rapper diff because that's probably going to be positioned absolute. So let's do a href and this will be equals scroll down. Well, then we need to give this a class name of something like hero in the score, the score, scroll BTM would do. And then inside here, we can do scroll and then we need to add the image. Image source and then image, then arrow down and then give it an old scroll down. OK, so if the image doesn't work, we can just do scroll down. I'm a keyboard. It's not working anymore. I think it's just too old now. I need to smash it harder. OK, so so we got scroll down and I need to get the size of this SVG. I wrote down so 24 by 15 like so. Cut out this is loading lazy. Yeah, I think they'll do. Let me think. Let me see if we're missing anything. So we have the section and I think that's pretty much it. I can do it like format and that's looking good. Now I just need to remember the classes, hero image container. We can definitely start this. So let me have a look at how this is this is kind of working. OK, yeah, it obviously doesn't work very well. But yeah, the text is underneath the images here. So what we can do is potentially I might be able to push this to the side. Nice. OK, we can do this and we can work on that. Let's create a new section. And let's call a hero section, your section like so. And then let's start hero is our main class that wraps everything. And what I want to achieve here is I want this hero section to be always 100 percent of view height. So let's do height, 100, the height. And then let's do position of relative display, flex. Then we can do align items of center, justify content of center. I just want to center pretty much everything. Flex direction needs to be column. So everything is kind of like these are stuck in underneath each other. And then they already are, I guess. And then text align center. OK, this is already looking kind of nice to be completely honest with you. But we can do a lot more. One thing that I want to achieve straight away is that this image needs to be kind of like below the text, obviously. And to do this, I am thinking that we can just do and percent underscore underscore image. And then we can just position this as absolute position. Absolute. And then we can do top zero, right, zero. Bottom zero and left set to zero. Not too bad. I like it. Then we can definitely position this image as object inside the image container here. Where is the image container? And the reason for this is so we can kind of like tell it to contain kind of like sorry, cover the cover a little bit more. So it kind of squishes the image and we can see a lot more over instead of seeing the left side of the image. It's very easy to manipulate with background images, but it won't be too bad actually. So what we can do is I can just select the inside image and just say object, fit and then cover. And then I can do width of 100 percent and height of 100 percent. I think that's fairly important to do and say, as you can see, this is already looking pretty cool. Now the actual container on top, which is this one here that contains all of the text against the content needs to go up. I know it's hard to see, but it does need to go up. It does need to go up so we can do ampersand container and then we can do Z index one display. Flex justify content. OK, that's not too bad at all. The scroll definitely needs fixing. So what we can do with the scroll is the ampersand underscore underscore scroll, B, T, N. Is this what I wonder if this is what I call the probably yet that's what I call them. So scroll, B, T, N position. I want to position this absolute to the whole section and just over here at the bottom and let's do Z index one. And then display needs to be flexed just because I want these two to be stuck in. And I know they are at the moment, but just in case flex and flex direction column, like so, then we need to align items to the center. Font size, I want to change to 1.4 RAM, which is 1.4 pixels. Then text decoration, I want to change to none. I don't want this ugly link. Is this even working? Hero container. I don't think it's working. Hero probably the end. OK, I've missed further. Scroll, B, T, N. I've missed further here. Over the end. OK, now it's working. Absolutely. Z index flex. OK, not bad. That needs to just go to the bottom of. This could be dangerous using percentages, but that works. And because we have an image inside there, I'm just going to go image or SVG. We might as well select both, just in case we put an SVG later on. I mean, it's already an SVG anyway, but better save them. Sorry, I guess with 74 pixels. And then this could be margin top of 1 RAM. It does not look good to me. What is wrong with it? So we have the link. Oh, did I justify it to? No way. OK, I've put I've put margin left on the image. And I was wondering why isn't this margin top? OK, OK, I was wondering why this wasn't working and we just margin left. Anyways, that's actually looking pretty cool. It's linked. We don't need to link it to the next section, but that's absolutely fine. We can do this. And as you can see, we have a little problem here. The text is far too light. And what happened to design is this extra layer is kind of like a gradient. So the two ways of doing this, we can simply just do this with CSS. Or if you're really lazy, I guess, or if you do more complicated stuff, you could try to do an SVG. Let's do it with a pseudo element after and then we can add it as a linear gradient. So what I'm going to do is here we can do ampersand dot dot after. I think the correct way of doing after is with two dots, but one dot. Sorry, one suddenly Colin is still. Is still accurate as well. I mean, still the browser will still render it. It's not a problem, but anyways, a nice thing to know, I guess, or not. OK, content is something that we need to add in order to make this as an actual kind of like a call them kind of like a ghost diffs that they don't exist in the dorm, but we can kind of create them by doing this after and then content. And we just leave it empty. And then we need to set this as an absolute. So it goes from top left, right and bottom. So let's do that position position. Absolute top, zero, right, zero, bottom, zero, left, zero. What else do we need and the background color? Actually, do we need background of black festival? Just kind of like that's white one, two, three. Just kind of like as a as a backup, maybe. Let's let's have a look. Probably not, I would say. And then we'll do backgrounds. Linear gradient and the gradient that I want will be RGB RGB alpha. And then we have black is going to be zero point zero point zero. And then we just put the opacity of zero point twenty three stuff like this. Then we do need to start with zero percent. And then the next one will be a GBA. And then we go for another black color like so. Hope it's comments instead. And then the alpha for this one will be zero point eighty five. And then we have this one up to seventy two percent. And then the rest can be black. Like so two hundred hundred percent. That this look OK. Hey, I've got an error. So we have RGB A. One, two, three. Oh, OK. Yeah, that won't work then. So I'm going to have to remove the background. OK, I'm making a mistake somewhere, which is a little bit hard to see at the moment. So we have RGB A one, two, three, four percentage. RGB A. Oh, that RGB RGB A. Here we go. Made a spelling mistake. And as you can see, we have the real nice effect here, which is pretty cool. And we are almost almost done with the hero section. Now, first of all, let's have a look at the title. And what I'm going to do for the title is instead of making a very specific title for this to start with, I'm going to do a global one for all of the H1 tags. And then I'm going to kind of like override just the hero one to make it a little bit more to like to make it stand out from the rest. Let's go that way. So so let me show you how we can do that above everything here. Maybe maybe around here. Let's add for H1. And of course, you're going to have to do this for H1, H2, H3, H4, H5 and H6, if you wish, but I'm going to keep it simple for now. And there are a couple of ways of doing responsive funds. We can definitely do it with a media query. In fact, let me just copy one of them. And then I'm going to show you. So one way of doing it is we could potentially just do. I don't know. I'm just going to give you a very bad example here. But we could do it font size of 4.2 RAM is or H1 or mobile. And when we hit this threshold of 600 pixels, maybe we want to change it to something ridiculous. Seven, seven, one day, look at what happens now. We go up, it goes, the font is quite big. And if you go down, it goes massive. So this is how you could potentially do responsive web funds. And you can do multiple media queries. But I'm going to kind of cheat today and do something different. So what I'm going to do is I'm going to use the clamp property. So I'm going to do this font size and I'm going to clamp everything. And I'm going to explain what this means. So the first value is the minimum of what we want to fund. The middle value is what we ideally want the font to be. And then the last value is kind of like the market value. So these are the values that I want. If I was to say this, look at what happens when I when I talk of the responsive mode and let me just make space. So let me just, yeah, can you see what happens? So this is the minimum. It won't go any anything lower than this. I want to go up. Look at this now. It kind of starts to extend and then it goes to the maximum threshold which I put on. So it's kind of like a really nice responsive font, I guess. So that's how I'm going to do it today. And let me have a look at what else we have to do. So we definitely need to make this effect here with the outlines. Yeah. And then the second text can be kind of like a field. So to do this, let's use some more trickery. And I'm going to use the WebKit text field color for this to make it work. So let's do dash WebKit. And by the way, if this doesn't work on a very old browser for some reason, I guess the worst that can happen is that the font is just going to go to white after test that. But anyways, WebKit text field, then color. And then we set the color that we want. I'm going to go with RGBA and then 255, 255, 255, and then zero. All right, which is basically white, but then with the alpha of zero. So it's transparent. And then I can do WebKit text stroke. And that could be one pixel. And then we can just pull in over variable of our second cut it. And then color we need to remove. Actually, this is what I'm worried now, but who cares about old browsers? I guess none. I guess we can do if it's supported and then this will work. All right, this will work. So color and then margin top needs to be zero. And then margin bottom needs to be for RAM. And then line height is what I want to change to one point three. So we've reset the margins, which is pretty cool. The height is reset. And the last thing that I want to do is make the white text. So so basically the highlighted text in the design. Let's do that. The one I'm going to do that is I'm going to rub the text with a span. So I'm just going to do span. And then inside here, I'm going to do dash dash. Sorry, WebKit dash text dash field dash color RGBA. What else two five five, two five five, two five five, one. I like it. Let's see how this will look like. So if I find the H1, which is this one here, and if we rub, maybe make this ear, your ear. So if you find your ear and do span and rub it like this, and actually I need dot there instead. OK, let's save this and have a look. As you can see, this is working just the way I wanted it. Yes, the text could do with the element that we have on the original design, but we'll get this. This is kind of like think of this as my global H1 tag. And yeah, it's pretty cool. I'm going to do the same thing with the paragraph. You know, yeah, let's do that. OK, so if we go back and I'm going to do another tag here paragraph. And then for the paragraph, let's do exactly the same thing. Yeah, one clamp. And I'm going to do one point six RAM to one point six view with two two RAM. And then inside here, let's do let's reset the margin. So margin top of zero. Margin bottom of zero and line height needs to be set to one point five. I think I'm done with this. Let me tell you things. Let's just check quickly, check out whether this is working. And I can't tell. Yeah, yeah, it's working. It's pretty good. We definitely need to style or primary button. So that could be the next thing that we do. So let's find all components somewhere button. And what I'm going to do is this is kind of like a modifier to the button. So we have our main styling of the button. And now we're just creating a modifier for it. And in fact, we can just create it in here so we can do dash dash primary. And then inside here. Inside here, we can do background. Background color. And then we can do our GBA two five five, two five five. Two five five or zero point two. Then we can do a border or one pixel solid. And then we can just bring all variable color of white. Then we can add a color for the button to be the secondary color as well. And last but not least, box shadow to give it a little bit of shadow. Zero pixels, three pixels. It's pixels and then RG, GBA zero, zero, zero, zero point 16. Let's have a look at what this works. Again, all button is actually working. We could definitely do with what to go with a hover style as well. But let's just save a little bit of time. And you know how to do a hover. Basically, you can just go in here, do an percent and then. Hover and then you can just change the background color to whatever. You know, it won't work with the touch thing. So let me just so you can do this and just make it look better than this. I guess now that we have those global elements, they can be reused for all of our sections later, which means that the process will be sped up hopefully from now on. But we still need to finish this section as is not as as on the design. So let's do that super quickly. And let's go back to the hero hero case. So we have pretty much everything here. Maybe we just do another one for the hero rapper inside the hero. Hero rapper, which is your rapper. And we can just style this differently. So heading body. That's it, I think. Yeah, OK, that's it. So let's do that. So I'm going to wrap everything in the hero rapper just like that. And then let's do an percent underscore underscore heading. And then we can do max with set to eight hundred pixels for the heading because I wanted to be always kind of like in the middle. And we can do margin set to zero auto. And then for Ram auto, like so. And then we can do font size and we can change the font size just like we done above. But I want to make it a little bigger than this. But we can do Clamp five Ram 10 WV and then 10 Ram again. So that's going to make it a little bit bigger. And then I want to reset the line height to one. So let me quickly finish the body as well, which is the paragraph text. And I want to do something similar. I want to give it a max weight of five hundred pixels. And I want to give it a margin of auto, which is top and bottom. So zero, which is top auto is to the right. Pre Ram is to the bottom to push the button and auto is the left. Yeah, save this and let's have a look at this works. Oh, yeah, this is pretty sharp like it. And if we scale it down, it works really nice. The mobile menu. OK, now if I show you the mobile menu and one thing that I haven't done is probably changing this to a pointer as well, but a button. I definitely could do it. But if I change this, look at this background is now blurring everything. He has a lot of contrast and it's working well. So that's working. And to be completely honest, I consider the key row section as done now. And we forget we definitely forgot to do the active class with this. And that was going to be just like maybe in the line. So desktop menu. Desktop menu. Then we have link and then we just had text, the creation and the line. Is this going to work? Yeah, OK, just because obviously this and from better than this, but it just symbolizes that we are on the home page and that's it. Now, we can definitely focus on the next section, which shouldn't be too hard to do. And this is this section here. I'm not going to I'm just going to do it like this. Actually, I'm going to do it with small squares and then it's going to become big squares and so on. Just to speed up the process, I guess. OK, let's do the second section here, expert coaching, nutrition and sports. So we're going to have three cards. They're all going to be links and all of the cards have a little overlay on top. And that's pretty much it, I think. And also, one thing that we might want to think about is that those cards here at the bottom are very similar. So we might as well kind of like make them customizable so we can reuse the code from here to here as well. That would save us a lot of time, I think. So let's do that. I don't know what to call these. Let's call them categories for now. So let's go to index.html and create a new section. I'm just going to call this section. Well, give this section a class name of categories. Also, I want to have a little bit of space between each section. So what I'm going to do is I'm going to create myself a few little helpers of paddings and margins. So I'm going to do is Padding one, Padding top one. And this is something that Bootstrap does and I really like. So I'm going to do this and also we can link for scroll here. Where is the scroll down? So I'm going to link it to this section here. And when we add a couple of things, we'll test them to see whether the button works. And we can also link or where is it? Or scroll down button, which is main. Main and we can link this somewhere. Around, very, very here. I wonder where to link around. It may we need to test this, but, you know, that we can do. I mean, it didn't do anything because we can't scroll. But I think that could work. Anyways, let's focus on the section. So we have categories. Let me create this PT one, which is on top one helpers. I'm going to create them somewhere at the top, maybe like around here. So what I'm going to do is what I could create a few of them, but I'm just going to keep it simple for now. I'm going to do padding top of one. And this could be padding top of. I mean, it doesn't make any sense now, but it could be eight point to Ram. But yeah, this one I'm going to use, I think. And then let's create one more. And I'm going to do margin top of one as well. And this will be margin top of one eight point to Ram. So hopefully this will give us a little bit of space now here. Yeah, you can see it. And yeah, and we can reuse this as well. So this is all good. Let me go inside here just so you can see a little bit better, like so. OK. Inside this section, first of all, we can name it by giving it a H1. So this could be something like let's give it the last name of SR screen reader only. And we can do I'm not sure what to call this one, but let's just do a gym. No training category, training categories, I think that would do. And then this is not going to be visible to the user. And then we need to create a container. And then we can maybe give this container a class name of training. Just so we know what we are styling. And inside here is where we'll be adding all three parts or links. So what I'm going to do is create a link with Href. And obviously we have nowhere to we have them nowhere to go. The most of I'm just going to put this sign here. And then let's do a class of training and the score, the score card. And then we might have to come back to this to give it a. And these are going to be they're going to have a slightly different. These are going to be square. And these are going to be kind of like a slightly longer. So. So we can definitely give this one a specific class name. So let's do training and the score, the score card. And this will be like a modifier. So we can do square like that. Or I'm not so sure what to cut it, but square is good enough for now. So each link is going to have an age three. And then this age three is going to have a class of training. And the score, the score card and then title. So our title for the first one is expert coaching. And then we have another day, which is going to be the overlay that I was talking about, kind of like the way we've done the overlay for the hero image. So I'm going to call this one, just image overlay, keep it simple. Open the diff, close the diff, of course. And then last but not least, we have the image. So I'm going to wrap the image in a diff. So let's do dot training and then the score on the score image. Oops, I'm writing CSS here and then inside here is where we add the image. So let's do image source. And then we can do image expert coaching is this one. Or we can explain what's on the image. I'm just going to put expert coaching for now, expert coaching, but definitely explain what's in the image. This was all taxa or we can definitely add loading lazy to those images. So and we also are, we might as well add the weight and the height, which I don't know. So I'm going to go for what is expert coaching. It'll be huge, isn't it? Five, three, six, five, five, nine, five, three, six, five, five, nine. None of the images have been optimized, which is bad. But it's obviously just a tutorial here. Make sure that you optimize your images as much as you can, as much as you can. Scale them down, compress them, whatever you can do. Change the format to what if you like or well, serve them as what if you like, you know, you know the job. And now that we have this done pretty much, we can potentially just copy this. Hopefully everything is OK. And we can paste it a few more times. Like so. And now we can start styling it. Definitely need to tidy this up a little bit. Now, let's have a look at how we can do this. Categories, training, training card. OK, let me scroll to the bottom, copy a comment. And this would be this would be categories training. To be completely honest, we don't really need this. They kind of like explains what this section is about. So that's why I'm going to leave it, but it doesn't do pretty much anything. I don't think so. What I'm going to do instead is I'm going to focus on this container here with the class of training and then the cards. So let's do that instead training. And we can display this as a grid. Green makes things styling super easy to do. And I will show you how to do that now. And between every single grid we want or container either way or link, we want a little of a gap and I can just do a gap of 20 pixels. Now, if we scroll down, you will see that all of them are nicely aligned and they should have a little of a gap. I can definitely put it on the right side. OK. And now we can start styling the cards. So the cards were called on this card, underscore, underscore card. And then I'm thinking of using flex so we can position everything in the middle and work all the way up from there. So let's do display flex. This could be the flex direction needs to be column on this one. We need to justify everything over just if I content to the center. Align items to the center. Then we definitely need to make the card to be positioned relative because we're going to have that black overlay on top of it, which will be absolute. So that's how it's going to work. And then text the creation because they're links. I don't actually want the underlying. So text the creation none. Let's say, as you can see, everything is kind of like move to the middle. Text the creation is gone and pointer. Sorry, it's not a pointer. It's cursor. Cursor needs to be set to pointer. So when we hover over, it looks like a link that you can click on. And one thing that I want to do is set a minimum height for them to be 550 pixels. This is going to be helpful because I want to change the aspect ratio for them to be always one to one. But if I just put aspiration one to one, and if I didn't have any height, there is a small potential that I could break as aspect ratio. It's not fully supported on all browsers, but it's getting there. And I want to use it. And if I can use it and it doesn't break the layout, I will use it. That's the deal. Let's style the title or shall we move the image first? Let's let's fix the image first of all, and then we can finish off the title thing. All right, let's do that. So underscore underscore image and then let's do position or. I keep doing this position. Absolute and then we can do top of zero, right of zero, bottom of zero, left of zero. And let's open. OK, now they are fitting inside the containers. But I wonder what I'm going to need of low hidden potentially, we'll see. And then I need for the image. I need this to be object fit cover. And then the width needs to be hundred percent. Height needs to be hundred percent. And that's looking good. Um, one sec overflow. They didn't do it. Maybe I'm mistaken. That's all good. Now, what we have to do is bring up the title and the body, which is. Yeah, bring up the title. And then on the second one, we're going to have body as well. So what we have to do now is bring up the title, which is this one here. And we'll modify. Yeah, let's let's do that now. So inside card, we're going to have and dash title. And this will be font size of three, Ram. The setting is what's important here. We need to change this to two. And let's just align text. Align center. OK, this is pretty cool. If you remember, I added a modifier called card square. So what I'm going to do now inside the card, we can do that. I can do I'm present. And it's called card dash dash square. And that would be my modifier for the for these cards, because the other ones are going to be slightly different. So what I'm going to do is use aspect ratio. And then I'm going to put one to one. OK, one thing that I don't understand is why don't we have a gap between every single element here? OK, this is a level where that isn't working. And I think. Yeah, the grid isn't showing the train. And this is because we have great, great. OK, OK, silly mistake. Easily done. What I'm going to do is go back and fix it. So we have this play instead, and it's great. And now we should get that gap between each element and everything is looking good. The last thing that I can think of in here is probably the overlay. We just call this image overlay, I think. So what I'm going to do is just do a class of image overlay and style this as position absolute. This needs to be top zero. Right, zero, left, bottom and left zero. And then we need the setting next to just come up slightly. And then we need the background color to be set to RGBA and just make it super opaque, black, 123, 4.5. OK, that makes them a little bit darker. And if you want, like, a hover effect in these, when we go to desktop, we can do one percent hover. And let me just change the background to something else, maybe like just slightly less. Whatever, you know, that's working quite nice. And now we need to do to be honest, is just change the the cards are now fairly responsive. And we need to change is the media query and just change the grid. So let me show you how we can do this. OK, let's add a media query. First of all, what I'm going to do is come in here at media screen and and min with and then I'm going to put 600 pixels. And inside here, I'm going to do great template columns. And I'm going to do repeat three times. One far like so. And hopefully if we go to back to the browser, you will see that we have three cards here. And if you go down, they kind of scare. I mean, it doesn't look good. I generally think that this is because of the height. And what we can do is also for the modifier, which is card square, what I can do is inside here, I can do ampersand underscore card square and just put aspect ratio one to one. And I think that this here, this minimum height is going to be a problem. So maybe I can do mean height, mean height of auto. I'm not so sure I need to try that. OK, so hopefully if we recite this, they're all keeping their aspect ratio to a square. And when we go down, they just become like big squares. And that's kind of like what I wanted. I mean, at this point, we could potentially resize the font as well or make them, yeah, resize the font, maybe, or do something else with them or have two cards or something like that. But as you can see, this is how you can do the responsive design, which is pretty cool. So hopefully when we do the next cards, we are pretty much set here and we won't have to do too much work. We might have to just add another class element. And that's it. I think let me just have a look. And I think that we're done with this section. And now we have the next section here, which is get started. Why wait? OK, we just finished this section here, which means that the one below here should be very easy to do. So we might as well just jump over this one and we'll come back to it later. So this should be super quickly to do. So we might as well start it. This is going to be we can just call this one training options. So let's go back and let's copy a comment from here. And let's paste it here. So this would be training options. And this is pretty much going to be as in most of the CSS from the training card. So that's why I wanted to do it. And now let's just build some of the HTML and to do this, we might as well copy most of. Let's copy most of the elements from here. I will just change a couple of things. So I've copied pretty much everything from categories. And now I'm just going to change this from categories to training options. We're going to leave the pad in top to be one, which we set in this tutorial, and I'm going to remove the scroll down because we don't need that. Then each one. And then this is going to be slightly different now. We're going to remove this each one. And in the design, we actually have a heading and a paragraph here, your training options and a little bit of text, which I'm going to copy and paste in a second. So we might as well do that. Also, another thing that I want to do is wrap everything in a container. Instead of having two containers, I'm going to grab this, let's remove it and let's just wrap everything in a container like so. And this is going to wrap all of the cards. OK, we can move this to the left. Just tie the things up. OK, now we have a container here and inside the container is where I'm going to add my H1 and my paragraph. So to do this, let's do an H1. And this one will have a class name or training options. That's options. And then this will be underscore underscore heading. And let's close this. And this setting will be your training and then options. So your training options and options will be highlighted. So we can just do the span that we created earlier while we started earlier. So let's do that. And then we need a paragraph. So I'm going to be and this one will have a class name of training options body like so. And I'm just going to copy and paste some of the text that we need. Copy, paste and view or grab. OK, this is looking good. And then what I want to do for the cards, I'm going to push them a little bit. So I'm going to give them a little bit of padding. So padding top one, it might not be perfect, but you can always mess around with the margins and patterns, of course. And also each card here is going to have a paragraph. So we definitely might need to have a modifier. So what I'm going to do is we have training, which we're reusing from above. And then what I'm going to do is add a modifier called training options. Dash dash options like so. And then we have each car here and each car has this training underscore underscore card last name and this training card square. Now, these ones are not going to be square. So I'm going to remove the square class of all of them. And each of these cards will have a paragraph. So I might as well add that. So it's going to be I'm going to copy and paste some of the text like so. And this card is going to have a class of training training card body. And this one's called card body. One thing that I just noticed is that on some elements, abused training options, heading and then abused training card title. I was just thinking of you or making them similar. But no, it doesn't really matter. I mean, that could be the heading of the section. And that's actually the title of the card. I guess it works out. OK, you know, this so this one is going to be small group PT. Like so, we have the text, the image. I'm just going to change the image to something else. Let's put nutrition like so. The old text needs to be changed, of course. I'm going to just copy whatever I have here. The cards with and hide should be the same if I extracted them. Well, then I have a loadie lasing on each card. And let me do the same for the rest. So this one is going to be classes. I'm going to copy and paste some text. Let's do that as well. And then maybe I'm just going to leave the same image as it doesn't matter too much. And then the last one here, actually, we need the paragraph. Let me copy and paste a paragraph. So this one is going to have the same training card body for the paragraph and then we should be and this one needs to have a paragraph as well. So what I could do is I'm going to copy this paragraph from the top paste it and just swap the text with something else. It isn't really matter too much. Let me go ahead and paste it. And I can use this paragraph here as well for the last one. And the last one will be this will be one to one like so. And I'm going to copy this, change the picture here. And then this could be the fourth picture. So let's do. Fourth dot JPEG and I've got one to one. And maybe just need to change the paragraph so they don't all look the same like so. And we should be going to go now. If we save this, this will probably break. So let's go down and have a look. As you can see, the title is nowhere to be seen. This needs to be centerlined. This needs to be centerlined. So there are a couple of things that we need to do. So first of all, let's start with the top. So we're going to start with the top, which is training options. And then we're going to attack it, the heading and the body. Let's do that. Let's do dot training options. And inside here, we can do ampersand underscore heading. And then for the heading, we can do text align center. And one thing that you might want to do actually is have dot text center class that you can reuse everywhere. So potentially I could copy this, paste it here. And I could use this class name on the heading here like so. And that might save me of writing a very specific CSS for this setting here. So technically speaking, if I go back, we should see that your training options is now centerline, which is pretty good. And now we can focus on the body, which is ampersand underscore underscore body. For the body, there are a couple of things I want to do. I want to make sure that the body is in the middle. So I'm going to do max weight of eight, 10 pixels. And then I just want to make sure that this body paragraph is in the center. So I'm going to do the margin, zero top and bottom and also on left and right. So it moves to the middle and we probably need to copy that. Oh, this is tech. That needs to be text, by the way. And then I'll probably and I'll probably copy this one here, the text center, that's name and pasting here as well. And let me just. We'll fix it here. So text center and that should now have both of the title and the body text in the center looking good. And now we can focus on the cards and just add this modifier, which was let me have a look. It was the training options. OK, now what we have to do is fix the text here, which isn't showing. I think it's just below and we could potentially use this modifier. But now thinking about it, it's probably not required. What we're going to have to do is just go back to the training. Sorry about that. And then what we're going to have to do is just maybe at. I'm present, I'm present, then body and just do the Z index as to as well. And maybe we'll have to do text align center like so. Let's have a look at what we get. That's not too bad. We do have an issue where we don't have enough padding on the side. And ideally, I've probably done this on the actual card itself. So let's have a look quickly. We could go to the card here. And if we give each card a adding of 10 pixels like so, maybe that would fix it. Yeah, I think they'll do. And now the text won't touch the edges, which will look a lot more professional. And I'm going to do and obviously that's going to change for both cards, which is a good thing. And now we should have top cards working and these cards working as well. You could do additional media queries if you think that they're too squished here. Definitely could do that. But it doesn't look too bad or mobile, in my opinion. And then the only bad position is probably around here. So yeah, maybe one more media query on this. And then the desktop is looking pretty nice, actually. So I'm going to leave it as it is. And I think this should do the job for now. OK, the last thing that I just spotted is that the text here is actually in the middle and on the design we have it at the bottom here. So potentially what we have to do on the card is justify the content at the end. And maybe that's why I was thinking of adding the training options modifier. So potentially what we can do is get the training options to wrap all of the cards. We can either do we can either do a new class for every single card here, or potentially we might be able to use this and modify all the cards. Actually, let me let me do this training card and maybe. Training underscore card dash dash and I think that might work. I mean, let's have a look. So I'm going to put this on every single card. And modify it. So if we do have training card here. And we just need to grab this and do a modifier of M. And now justify content and let's have a look whether this is going to work. What did I do? I think I put and did it go to start or something to find content and OK. Sorry, it has to be flex and instead. OK, so let's go back and just do flex and like so. And that should look similar to the designer. The text is at the bottom. Potentially you might want to have a little bit more space from the bottom and the top. And to do this, we can just modify the whole card. We can just do maybe like 20 pixels from top and bottom and then from left and right. And that would fix the issue and they're all looking good now as well. And now we can focus on the next one, which should be this one here. Now we're going to do exactly the same here as well. I'm going to start with this car here. So this section here. And then we're going to do this one as well, because they're exactly the same and they can share the same last names are some sort of component to guess. So let's go back and the first section is actually going to be between those two, just like the one we have on the design. And this one is going to be a tiny one. So it might as well get started. So this one is going to be a section. And I'm going to give it a class name of get started. And then what I'm thinking is because we have two sections, which will be in almost identical, they're just going to have different backgrounds and different overlays. This one here has a red overlay and this one just has a dark overlay. So I want to show you how we can use some sort of modifiers for them to share the same CSS, but yet be slightly different. So what we can do for this one, I'm just going to keep it basic. And let's say get get started. And this could be something like image one or whatever you wish. And then let's give it a pattern. So imagine top of one, just so we have a little space between the sections like so, and that's it. Now inside this section, we're going to have an overlay. So let's do a deep of glass overlay. And let's close the deep. We can move this one at the top and then we're going to wrap everything in a container like so. And inside here, we're going to have a title. So each one, this is going to be get started today. And then on another line, why wait? I'm going to use be after this one here to move the text on the line. And then we're just going to do a span of why wait to make the white white. And then the next section that we have is going to be sorry. The next bit that we have is going to be a button. So we're going to do a graph here. And then this is going to be a class name of button. And then I'm going to use the primary button. So button dash, dash primary. And this is going to be sign up like so. Let me see if I'm missing anything. This could definitely use the class center that I created earlier. So let's do text center like so. And I think that we should be good to go with this section. Let's save it. Let's have a look at what we have. Here it is. So we have get started today. Why wait or looking good? The button is here on the left side. So we definitely need to align this. And of course, at the image and the fear overlays. Now, for this section here, we're going to have three overlays. This one here, which is a gradient from black to this dark red. And then a little bit of opacity. Then we're going to have this overlay here, which is just a gradient. And we're going to have another one at the bottom. So let's have a look at how we can do that. And I'm going to do this one slightly different. And by the way, I'm going to use this image here as a background image instead, just so I can show you how you can do it in a different way. Because we've done this one here as an actual image. And that's why we're going to do this one with CSS. So you have two different examples. That's all. OK, let's go back and let's copy a comment from somewhere. So this one here will do. And I need to move this to the top, by the way, the text center because it's kind of like a global style that I'm going to be reusing everywhere. So this one is going to be get started. I start it and we can start styling it. So get started. And then inside here, I'm going to start with doing some global stuff. And then we're going to use the modifier to add the image. Let me show you. But first of all, I'm going to set the background attachment to be fixed, which means that every time we scroll, we're going to have like kind of a parallax effect a little bit. The image is just going to be fixed, which looks pretty cool. And then we're going to have the background dash position. And this is going to be sent it like so. Then we're going to have a background repeat. And this is going to be set to no repeat because I don't want the background to be repeating. And then we need background size to be covered. So I want the image to always cover the section, no matter how big it is, just going to look cool. And then I want to set a minimum height for this section to be 700 pixels, pixels like so. And then of course, we're going to align the items to the center with the button and everything. And then and then what I'm going to do here is sorry, this needs to be displayed. It picks, obviously, if I'm going to run items. So let's do display. Sorry, flex. If you want to use the line items, you need to have it as display flex or greater guess. And then the last thing that I need to do here is position this as relative because all of the overlays will be positioned absolute to this relative div or section. I'm just make some space here and let's start with getting the first image. And then we're going to put all of the overlays on top after. So for the first image, I'm going to use this here. Get started, I'm G1 and I'm I'm actually going to do this after get started. So like here. So mission now is to grab an image and what we can do is background that image like so URL. And then in double quotes, we can do dot dot and images. And then I need the get started image like so. And then we can do all of the overlays. Let me show you what we have so far. So we have the image as you can see, we have this nice kind of like a parallax effect. I guess this definitely needs to be aligned to the center. But other than that, it's looking pretty good. So let's continue now and do some of the overlays. And actually, let me just quickly do that. Let me quickly send everything. So what I can do is use the container inside. And I'm just going to do text align center. Hopefully they'll do it and just put that index as one because we're going to have a lot of overlays. And as you can see that went to the center, I could potentially give it the center class name, and that would have probably worked as well. And now let's do the overlays. So for the overlays, I'm going to use the before and after center elements. So I'm going to do and present two semicolons. And then let's use before to start with. Inside here, we need to give it a content of empty, just so we create that empty difference on the page. And then we can position this as absolute to this relative section. And now we can do top zero, right, zero, bottom. OK, no, no, we don't need bottom on this one. Sorry. And left zero. So this this one is going to be the top, the top one here, this one here. So I want it to be positioned at the top of the page. So at the top of this section here, from the left, to the right, and we'll probably give it a little bit of a height. So this one I want to keep. That's why I didn't put bottom. So let's go back and that's left zero. And then what we can do is give it a height of 140 pixels, maybe. And then let's give it a default background of black. That would be hashtag with the three zeros. And then let's do a background. And this is going to be a linear gradient. And I like flip this one around and then 80 degrees. And then I'm going to do RGBA, RGBA. And then this is going to be zero, zero, zero, one. And then we're going to have 10 percent RGBA and then zero, zero, zero. And then zero. And now we're going to have 100 percent. Hopefully this will work. And the last thing that I want to do just in case I'm going to put the width to be 100 percent. Hopefully you go back. You should see that we're getting this nice gradient here, which is pretty awesome. Now I just need to rotate the gradient, which should be fairly easy to do and just add another one here at the bottom. So what I'm going to do is I'm going to copy this before and I'm in here, paste there, and I'm just going to do an after one. After like so. We have everything just stayed the same, except the degrees here. I'm going to put around. So this is zero degrees and yeah. I think that should be it. And oh, one more thing. Now we need to change the top to be bottom. And that's it. So if we save this, let's go back and have a look. Yep. That's all looking good. And the last thing that I want to do is add another overlay, which was that black to red overlay. So it helps us out with the contrast of the text. That you go back, we can do. An overlay here, and I'm actually going to make this one as a global overlay thing. Let me show you. Overlay, we can put here as positioned absolute. And then what I'm going to do is stop zero, right, zero. Bottom zero, left, zero. And then opacity, I'm going to set to zero point six. But because we have a specific overlay on both sections, the one here and the one here, we're going to have different colors. So what I'm going to do is I'm going to use this modifier here to add a special overlay. So this one is going to be dot overlay. Like so. And I'm just going to do background, background. And then this is going to be linear gradient. And I'm going to do. Let's go with hashtag three zeros for black, starting from zero percent. And then I'm going to put a very like bloody dark red color. I guess four be one, two, three, four. And then that would be 100 percent like so. Save this. And let's go back to the page and see what we get. As you can see, we are getting the nice overlay. And if I scale down the website now, hopefully everything is working well. As you can see, it's all working well or mobile. You might want to make this section maybe smaller, but that's just personal preference, I guess. And I quite like the way the way this is working out is pretty nice. So the beautiful thing about the next section here, this one here is that we can literally copy everything we've done from above, just change the modifier and obviously the content. So let's do that. That would be super easy to do. And we're going to paste it after the training option. So let me have a look. Let's go back. I'm going to copy this section, study this thing up. I mean, format everything. And now in any section, we're going to create a new one. And what I'm going to do is get started image two. And let's just change some of the text. So in the age one here, let's just remove all of this. And let me do it like this. So in fact, I'm just going to copy and paste some of the text we have. We will help you in the shape of your life. We'll help you to get in the shape of your life. Then we are and then let's get started. And this is going to be wrapped in a span. So like so, just to make this text white. Copy, paste and like that. The signup button is going to be exactly the same. So we just need to recreate this here. A bit copier. And after the guest started image one, we're going to have the guest started image to I can literally copy all of this here based there. And I'm just going to change the image super quickly. So this is going to be we will. We'll rock you help like so. And the background now needs to be changed as well. So this one is going to be RGBA and whoops, definitely don't want that. And this will be zero, zero, zero, zero point five, which is a very opaque killer save it and hopefully if we go back to the website, you should see that we just done this section super quickly. And and as we scroll, we're getting exactly the same effect as this one here. And we're done. We're done with this section. So let's have a look at what's next. OK, so we have the photo here, which is the last section. And I'm going to speed up the process on this one and do it super quickly. But again, I want to show you how you can do it. So let's get started and let's have a look at how we can do the photo. So for the photo, we're going to go outside the main the main section here, and I'm going to do it with the tax. So let's do it like so. And of course, I'm going to give this for a class name of what I'm going to do is inside here. Let's do the last photo and let's give it a patting top of one. And then inside the photo, everything is going to be wrapped in a container. Like so. And on this container, we might as well give it another class of photo container, like so, which is going to make things a lot easier if we convert this into a grid. So we're going to have a couple of things. So I want a couple of columns, essentially. So let's do photo dash cop like so. And each column is going to have a heading. So heading three, maybe on this one. And this one is going to have a class name of photo dash co. I'm basically using the name from here and doing underscore underscore heading or title, whatever you wish to color. And this one is going to be find us. Then this is going to be a list so we can do another list or with the class name of photo co and then underscore underscore list like so. And this list is going to have a couple of items. So maybe we can add an address. Address won't be linked here, but we're going to link it now. So href and I'm going to link potentially you have link to Google Maps or something like that. And then we can have 43 Moscow by London, which I kind of made up. And this is all looking good. Now I can duplicate this by doing all shifting down and then we can change this one to something like contact. This could be a. Telling so tell and we just put something like some random numbers and then this could be our phone number here. Like so. That's all looking good. And now we can essentially copy this and just reuse it for a couple of more columns. So let me copy this column. Paste in here and I'm going to change some of the information. So let's do get assistant. And then we can just put a bunch of links. So I'm going to remove this one and I'm going to remove this as well. This is going to be and let's just do a link off. I mean, yeah, might as well just put link. It doesn't matter too much. And now let's just duplicate this a couple of times. Like so. And let's create two more columns. So I'm going to copy this one here, paste it. And then this one is going to be company. Like so. I'm going to leave everything inside exactly the same. And then let's just do one more off. Keep in touch. In touch like so. And at the bottom, I'm going to create another container. So that container. And this is going to be text aligned center. And then I let's just do as a footer underscore underscore copyright. As you can guess, this is where all of the copyright information is going to go. So I'm going to do a paragraph with the class name of PTE one, just to push everything a little bit. So we have a little more space and I'm going to do copy. And then let me just copy some text. So we're going to actually don't let me just write some text to find. Twenty one, three, six, five. And then we have created by in the link, a href I can do. I can have my website maybe. So it's ready to go to UK. And inside here, actually, this could be a target of blank. So it opens in another tab. And this is going to be ready. And like so if we save this, let's have a look at what we get. We have three columns. They will need to be reset. Of course, we have the copy right here at the bottom. And we can just start styling this. So let's start. Obviously, we're going to start from mobile. I can move this to the left side. Let's go at the top here and see what we get. So for the container, for the call, OK, copy. A comment like always and paste it here at the bottom. So this is going to be for them. Like so, we can start styling. So with the car name for them, I'm going to do the copyright. First of all, let's do copyright. And then this is going to be margin bottom 20, something like this. They should give us a little bit of space at the bottom. And now we can use the for a container here for all of the columns. Let's do that. In fact, I can even put it outside here. So they're not nested if you don't want to. But you can definitely nest them. I don't think it's a problem. So let's do that and we can display this as a grid. Great is going to help us so much with being able to put stuff into columns and rows. And then I can do gap of 10 between each grid. As you can see, that moved a little bit now. Now, what I'm going to do straight away from here, I can do the responsiveness for each grid. So inside the putter container, we might as well add two media queries. So media screen and then and and this is going to be minimum with of 600 pixels. And inside here, we can literally do grid template columns and I can do three columns to be sorry, repeat, three columns, one fraction each. That should deal with the first media query. And I'm going to copy this one more time. Basically, and this is going to be roughly around 800 pixels. And I want to change this to four. So if I was to open this and scroll down. You will see that or columns are now stacking up nicely. And as we go down, they kind of go to three. And then they will stack up. So that's not too bad. We're pretty much done with the responsiveness. And now I can just focus on the actual for the column. And what I can do is under here, maybe we can just do photo. Dash call. And let's have a look at what we need. So for the headings, heading, sorry, I'm going to put the size to font size to 1.8 gram, like so. So they go, they went a little bit smaller than original. And then let's do the list now so we can do underscore, underscore list. And the couple of things that we need to do, we need to reset the padding and margin to zero. And as you can see, everything went to the left here. So we don't have any padding and padding. And we need to remove any bullet points, just in case. So list, start type to none. And they will be removed now. You probably didn't see them here on the left, but they're removed now. And then inside each list, we have a list. So in inside the another list, we have a list. So what I'm going to do is just push everything to the bottom a little bit by using margin bottom. And that could be like six pixels. I'm not going to measure it now, but that should give us a little bit of space between every single item. And then for every single link, I'm going to do padding and then eight pixels and then zero. So now, actually, one more thing for the links. If you want the links to be clickable from the left to the right, we will make it easier to click the links. All you have to do is convert the links to display block. Now, if I hover over my mouse, you will see that the old links, of course, we can do sort of like what they could cover us and so on. But I think that this will work quite well. And that's it pretty much. Obviously, if you put real information, it's going to look so much better. But that's how you do everything and stack everything. As you can see, everything is working. I don't know what I want everything to be underlined like this. But of course, you can just remove the underlined from the link and so on. And that's pretty much everything from this tutorial. I hope you enjoy there. If I do, if I go on the website and press stop and press enter, as you can see, it goes to make this year. You're here. So we're kind of like skipping the whole navigation, which is a good thing. And if I click on the scroll, it goes to this. Well, technically, if I'm at the top here and click on the scroll, you'll see that it goes to this section here. I could have changed the images, but yeah, this mattered too much. But if we go down, you will see the text here. And yeah, everything is pretty nice so far. Not so bad. Well, I hope that you enjoyed this tutorial. I hope that you've learned something. If you enjoyed this tutorial, please leave a comment below, like this video and consider subscribing for more tutorials like this. And I will see you in the next one. Thank you very much for watching. As always, my name is Roddy and you're watching my channel, Roddy the Brand.