 Hey, what is going on everybody? My name is Wadi and today we're going to build a stylish portfolio website using HTML and CSS. I also have the same design built with ReactJS and Tailwind CSS. If you're interested, the link will be in the description below. Hello and welcome everybody. I've already created a brand new project folder called HTML portfolio and I've opened this folder in Visual Studio Code here inside the Explorer. You can go to file, open folder and select the folder that you want to work in. For today's tutorial, I'm going to be using Visual Studio Code, but of course, feel free to use whatever code editor you have. One thing that I want to mention before we get started is that I'm going to be using two extensions today. If we go to extensions here in Visual Studio Code, the first extension that I'm going to be using today is going to be the live set. This will create a local server for me and it's going to listen for changes. So every time I make a change on the HTML or the CSS, it's going to refresh the browser for me, which will save a lot of time. Now you definitely don't need this, but it's just nice to have. And the second plugin that I'm going to be using today is going to be Prettier. And Prettier is basically a code format. So it's going to every time I make a change on the HTML or CSS, it's just going to format the code a little bit and that's pretty much it. Definitely don't need it, but nice to have. Let's close this. Let's close the extensions. Open the Explorer and let's start by creating the folders and the files that we need. The first folder that we need is going to be the CSS folder, which is going to hold all styles. The second folder that we're going to need is the images folder. I am G for short. And then I need a file, which is going to be called index.html index.html is going to be our home. This is what servers recognize as home is always the index.html or PHP, whatever the extension is. So this is going to be our homepage, but for the rest of the pages, we can name them whatever we like, such as about HTML contact.html, folio.html and so on. The next file that I'm going to create is the style is the style sheet. So inside CSS, let's create a new file called style.css and the last thing that I need to do inside here is add some of my images. So what I could do is right click reveal in file explorer here. I'm going to grab some images super quickly. So copy paste and here are the images for this project. All of the images except the pattern and the logo come from unsplash.com. I will link them in the description below and that's pretty much it. Now that we have our project structure in here, let's concentrate on the index.html. So the first thing that I'm going to do is create a very basic HTML. So you can start typing HTML and I'm going to select HTML five. Now if you just did a code, we have the event abbreviation tool, which kind of like gives us templates, which is awesome. So if I click on HTML five, you will see that this creates a very basic HTML five page for us. So what I'm going to do, let's go to view and toggle world wrap in here. So we can see a little bit better. I've zoomed in a lot and the first thing that I'm going to do is obviously change the title from here. So let's do that ready dash web developer based somewhere in Europe. That's absolutely fine. There is a lot of other metadata that you can add to your head of your HTML in order to achieve better SEO such as description. But today I'm going to keep it to minimum and leave it as it is. The next thing that we need to do is let's test the website. So inside the body here, I'm going to create an H1 tag, which is a heading and inside here I'm going to say, hello world, save this and in order to open this page, this project with a live server, there are two ways you can either click on this button here, go live or you can go to Explorer and then right click on index dot HTML and open with live server. This will open the browser here as you can see and we're getting hello world awesome. So now every time I make a change, this will automatically refresh the page for me. So let me show you super quickly. So if I say hello world one and I save, you will see that this refreshes the browser straight away, which is super helpful. The other way of doing it is obviously you can just open the HTML as normal double click on it, open it with the browser and that would also work, but you have to refresh manually. That's all. Okay. Now that we know that our page is working. Let's link our style sheet and make sure that this is working as well. So our style sheet is currently located in CSS in this CSS folder and it's called style dot CSS. In order to link it to our HTML, let's move that inside the head here. We can do link and then again, visual studio code is helping us and I want to choose link CSS. So this is pretty much finishing the whole code for me. It says link rail with equal sign to style sheet and href is going to link the style dot CSS. But of course we need to go into the CSS folder. So I'm going to do CSS slash and then as you can see, this is actually showing me what inside this CSS folder and that's the style dot CSS, which I've already added. Save this. And in order to see whether this is working, I always do this. So if you go to start dot CSS, always just do something like body. I just change the background color to something like black, let's say for example. So if I go back to the browser, you will see that the background color of our website is now black, which means that all CSS is working and we can start adding some stuff and styling or page. Let's remove this. And the first thing that I want to do is add the font that we are going to use today and that font is called inter. So if we search, if you search for inter font, this is a Google font. So this is the link that we need. So fonts.google.com, click on it and I've actually already selected it. But what I'm going to do is remove everything. What you need to do is scroll down a little bit and inside here is where you can select the weights of the font that you need. So in this project, I'm probably going to be using the light. So I'm going to select this. I'm going to be using regular for sure. And then I'm going to be using the extra bolt for the heading. So I'm going to select this one as well. And if you go here at the top right corner and toggle this, you will see that we've selected the font inter with the light, regular and extra bolt. The two ways of linking this font to a project, we can either use the link or we can either import this into a style sheet. I'm going to be using the link today. So I'm going to copy this here and paste this inside the index dot HTML inside the head element below the style here, just paste everything and save. As you can see this as the family inter weight of 300, 400 and 800. If you're not using some of the weights, don't add them because obviously the more you add, the bigger package would be and then obviously there'll be more things to load. So save this. And the last thing that I need to do is put this into the CSS. So I'm going to grab this and add this to the body element. In order to do this, we can go back and inside style dot CSS. Let's just add a to start with so body and I'm going to paste it inside here. So from family inter with sensory, save this. And of course you can add more font to here for backup, but I'm going to keep a simple for now. Let's go back. Let's go on the website. And as you can see, the font has changed and it's looking so much better now. That's a very cool font. I'm going to zoom out and now I feel like the next step would be to set up some of the basics for website and then we can build everything from top to bottom. What I'm going to do is let's jump back into style dot CSS. And the first thing I like to do is to set up some of the branding stuff. What I mean by this is that I want to set up a couple of variables that we can reuse through the entire page. And in order to do this, we can do column, route and then inside the route, we can add variables. Now variables are added with dash dash and then you just name them. For example, let's say I want to name the variables color and then let's say dash black. So inside here, I'm going to add my black color. So zero D zero D zero D. This is very close to the fully black one, as you can see, but it's not fully black. It's just very close to it's a shade of black, I guess. So this is how you add variables and now I can actually reuse this variable pretty much anywhere inside my star sheet. So for example, on the body, I can say I want all the topography, so color to be this black color. And to do this, we can do variable var for short and then dash dash color black. If I choose this, save it. And now the topography of our website should be taking this color. Of course, you probably won't see much difference. Well, there is a little difference, but if I was to change it to red, for example, just so you can see, you'll see that the font is changing, which is great. So I'm going to go back and the variables are very useful for pretty much anything. You can add variables for your font family. You can add variables for your media queries and so much more. Now, without wasting any more time, I'm going to add the rest of the colors and I'm going to add some hover colors as well. So for example, I'm going to add a color and this one is going to be black, but this one is going to be hover like so. And then this is going to be a very like close to black by again, gray. So to a to a to a and this is going to be every time we hover on like a black link, for example, I want this to be the color. Now I'm going to do the same for the rest. Let's add the white color. So color dash white, for example. And then for this, I'm going to do FFF and stop. Now you can see that I'm using hex decimals in here, but of course, you can use RGB. You can use RGB, which has the alpha value as well, whatever you wish. That's absolutely fine. For the next thing I'm going to do is dash yellow. And for the yellow, I'm going to hash F4D828. And this is going to be a really nice yellow color. And for the next one, whoops, this needs to be killer. Let's make sure that they all the same. And then for the next one, I'm going to do all shift and down arrow to copy this and I'm just going to do hover. And then for this is going to be EAB308. And then I'm going to do one more here. So this is going to be purple. And the purple color is going to be 6610F2. Let me copy this one more time. So this is going to be the purple. We don't need a purple hover. Let's have a green color. And then for the green, I'm going to be using zero E9577. And then let's add a hover for the green. The hover and then this is going to be 0F766E. And then the last one is going to be a dash dash color. And then this is going to be BG for background. And then this is going to be a very creamy color. So I'm going to do FAF4F0 like so and close it. You'll see it's a very close to white, but it's a nice creamy color here. In the same way that I've added the color here, I can add the background color. So for example, I can do on the body, let's do background color and we can do a variable and then dash dash color of background. Save this and you will see that the entire website changes. It's very close to white. You can see the color clearly and let's finish the body as well. So as a default, the body has a little bit of margin around. So what we can do is remove this margin by doing margin of zero. Save this. And the next thing that I'm going to do is set a border all around purely because my design is like that. So it's going to save us writing borders on every single section. So two pixels solid and I'm going to use the black color from here. And I know it's going to look odd for now, but trust me, otherwise, I'll have to add border on every single section to the left to the right and so on. So that's going to save us a little bit of time to complete the design. And I'm going to reset the line height. I believe that the default line height is one point five. But what I'm going to do is add a make a little bit bigger because I'm probably going to make the font a little bit bigger than the default one, which is 16. So if I save this, you probably won't see much difference. But let's add a paragraph inside the index dot HTML. So inside here, I'm going to do a P tag. And then I'm going to start typing Lorem, which is the Lorem Ipsum Demi text that we can add and I'm going to save. So this will show you how everything is looking so far. Now, the first thing that I need to set up is the responsive font. Now, what I mean, but this is that if a user changes their font size on the browser, I want my font to be responsive. So purely just for good accessibility. So they'll be able to see a little bit better. And in order to do this, let me show you something super quickly. So if you go back to style dot CSS, if I write HTML here and if I put the font size to be hundreds percent like so, this will essentially so use the browser settings, which is default, is actually 16 pixels on most modern browsers. So if I go back, nothing changes. And let me show you something. If I go to the browser settings super quickly settings and then appearance and if I scroll down here, font size, if I was to change the font size, let me show you. I'm going to decoupler here. And so if I was to change the font size right now to, let's say, very large, see what happens, the font changes, which is what we want. We want to have the best accessibility possible. And if I change to very small policy, the font goes small. Now, the reason I'm showing you this is because if you use pixels, things can go wrong. So for example, let's say the base font of our browser is 16 pixels. Oh, and by the way, I can show you this. So if I do right click and inspect, you will see that if I click on the HTML here, I'll zoom in a little more. If I click on the HTML here, and if I go to compute it, you'll see that if I scroll down that the font size computed is equals to 16 pixels. If I was to change the font size to, let's say 18 pixels here, 18 pixels percentage, save this. And if I go back, everything is looking normal, right? It's a little bit bigger. The text is a little bit bigger, but that's all. If I go to the settings one more time, and if I change the font size to, let's say, very large, nothing happens. So this is not so great for accessibility. I can only imagine that there will be some cases where you don't want your font to change, I guess. But for accessibility purposes, you shouldn't be using pixels. So I'm going to reset this to medium. And I'm going to close this and let's actually remove the HTML. So you could leave the font size of 100 percent here, but I don't think that this is going to do much for us. So what I'm going to do instead is add a relative font size on the body. To do this, I'm going to do font size and one rem is going to be equals 16 pixels. So if I do, here is a calculator. So if I do pixels to rem or base or base font size is 16 as we just saw. And if I want to see what this is in brems, so I can put 16 and convert it. So 16 pixels is one round. This is what I know. And then if I wanted to make the kind of like the font of our website a little bit bigger, let's say I want to make it 18, I know that this is one point one, two, five, and there are a lot of ways of actually making this a little bit easier. But I'm going to skip all that today and just use this instead. So I've already pre-calculated most of my fonts and so on. So I'm going to be using this today and keep it super simple. Saying this, I do want to make my font size a little bigger. So I'm going to put it as one point one, two, five, which as I showed you, is equals 18 pixels. So if I go back to the website, this is a relative unit. So technically speaking, all of this will be will be responsive when I. All right. The next thing that I want to do is to set up some of the very, very, very basic core stuff that we need for this layout and then we can start. So what I'm going to do inside here, I have an H1 tag and I'm going to copy this, let's say two more times. So this is going to be H2 here and this is going to be H3 in here. Let's say heading one, I'm going to speed this process up so you don't have to watch it heading to break. Cool. If I go back to the browser, you will see that they've already as default, they have different sizes as default, they're all slightly different. So the heading one is always the bigger and then it goes downwards. The next thing that I want to add is a link in here. So let's just do the basics. So href and this is going to be an empty link and I'm just going to say link. So basically what I want to achieve is I want to start styling some of the basic stuff for the layout and then we'll do the rest as we go along. So for the links, I'm going to do some basic styling. Let's go to start dot CSS and underneath the body in here. Let's say, in fact, let's start with the paragraph. So for the paragraph, I'm going to do a couple of things. Now, I really like the font size, the base font size in here. So I'm not going to give our paragraph a font size. I'm just going to use the default from the body, which means that I only want to reset the margin top of zero because paragraphs have a little bit of margin at the top and the bottom. And I want to reset the margin at the bottom. Margin that bottom. This is going to be one point five ramp like so. So this is going to make the paragraphs a little bit better, in my opinion. And then I'm going to reset the links as well. So for the links, we can do a and then inside here, we can set a default color to be variable of black. And also we could potentially add a hover state. So a and then hover and then I'm going to do color black hover. So and that should be probably hard to see. There is a little bit of difference. It's very hard to see, but there is a little bit of difference. And of course, there is a lot more that you can do with the links. You can do active states and so on, but I'm going to keep it simple. Now that we have that done, the next thing that we can look at is we got the paragraph link. Let's say the images in order to make the images responsive on our layout, we can do IMG. And then we can do max weight of 100%. And we can set the height as also this will make the images responsive. And I'm going to leave it as it is, but we'll come back to this a little bit later on when we add an image and see how this behaves. And we might need to add a few more styles to this. The next step that I'm going to do is let's make sure that or topography or headings are responsive. Now if I do right click inspect and go down, I've got the mobile device toggled here. That's why I can do this. So if we go up and down, you will see that none of the headings change. And I want to have some basic styles for the heading one, two and three in here. And I want to make them responsive as default on the entire website. In order to do this, I'm going to be using media queries today. So the first thing that I'm going to do is write h1 comma h2 comma h3 h4 h5 and open and close curly brackets. Now what I want to do here is reset some of the styles. For example, all of the headings have a little bit of margin at the top. So margin top, I want to remove zero. I'm going to change the margin at the bottom is margin bottom is going to be one rem. And then I'm going to do the font weight just in case to 800, which is the extra boat that we selected earlier. And I'm going to change the line height just in case to one. Okay, as you can see, they changed a little bit. No more spacing round, which is cool. But now I want to style them individually starting from mobile and going up. So for example, if I go back here, and let's say we start with the h1. So h1, I want to give it a specific font size font size. And this is going to be 2.441 rem. And we can save this. I'm going to do exactly the same for the h2 and h3. So I can do h2, h3. And for the h2, we can do 1.953 rem just because we started from mobile. That's why the font size is quite small. And for the h3, let's do something smaller. So 1.566 rem, save them. And as you can see, they're starting to stack up and look nice. Of course, you're going to have to do the same thing for the h4, h5 and so on. Keep it basic. You've got a good example here to get you started. Now, what I want to achieve when I go mobile, that's absolutely fine. But when I go up, I want to make the h1, h2 and h3 a little bit bigger than the app. In order to achieve this, we can use media queries. So I'm going to do at media. Okay, we're going to do at media. And then inside here, we're going to do minimum width. It's going to be equals to 1024 pixels. And then inside here, we can change the font size of the headings. So for example, let's start with the h1. And I'm going to change this to the font size to something a little bigger. So in this case, 3.052 rem and save this. Now, if I go to the browser and if I shrink it, you'll see how the heading should change in a second. So here we go. It changes from small to big. And this is one easy way of doing responsive typography. Like so, which is pretty cool. Let's finish the rest. So I'm going to do the heading two and the heading three. I'm going to actually copy this. I'm pasting here in here twice like so. And I'm going to do heading two, heading three. And let's just change the size to 2.441. And then for the heading three, I'm going to change it to 1.953. And let's add a few more media queries. So I'm going to copy this and I'm going to paste in here. And this one is going to be slightly bigger. So on slightly larger screens around 1, 2, 8, 0, anything above this, we're going to change it one more time. So I'm going to copy h1, paste in here. And I'm going to change this to something bigger. So 4.624 copy this two more times like so. And this is going to be h2, h3. And let's change the sizing to 4.11. And then this is going to be 3.653 grams. And let me space things out. Save. If I refresh and if I go up, you'll see that we're getting bigger font and even bigger font, which is awesome. Of course, as I said earlier, you can do that for the next headings as well. And I feel like the last thing that we need to do for globally is to create a responsive container that makes all content stay in the middle. And then we can start styling stuff in order to create a container. So let's wrap everything in a div. So we can do a dot container. And this is going to create this difference just for the testing purposes. And I'm going to wrap everything in this container. What I'm going to do now is copy this class name, go to star.css. And somewhere around here, we can do dot container. Now I want to make sure that all mobile devices we have a little bit of padding on the left and the right. You will see that everything is just next to the edge here, which is not good. So in order to achieve this, we can do padding left to one REM. And we can do padding right to one REM as well. Now there is a short way of doing this. We can just do padding of zero would be top and bottom. And left and right will be one REM as well. And this will equal to exactly the same thing as here. I'm going to remove this. Save it. And then as you can see now, we have a little bit of padding on the left and the right makes all out a little bit better. And now what I want to achieve is when we go on a bigger screen, I want to make this container go in the middle. And I want to kind of like give it a little bit of a constraint. So it's not always forward. In order to do this, we can again use media query. So I'm going to copy this media query here and just change the number. So at media, minimum width this time, let's go with 768. And then inside here, I'm going to grab the container and say, okay, I want, when we hit this break point, I want the container to go in the middle. We can use a little hack called margin zero, which is top and bottom. And then also is what's going to push the container in the middle of our page. But we need to constrain the width in order for that to happen. So I'm going to max width. And then we can do 768 kind of like the break point, I guess. Save it. If you go back, you will see that as soon as they go above this break point, the content is now constrained in the middle of the page, which is exactly what I want. Of course, I'm going to be creating a few more break points for this to make it look nice. So what we can do is copy this and paste it inside here. The next break point is going to be one zero two four. So I'm going to change the max width to one zero two four. And because we are starting from mobile and everything is flowing downwards, basically or upwards the way you look at it, we don't need to specify margin again, because the container already has margin on a set on this break point. And as it's flowing down, then we don't need it. Like we don't need it. It's already applied inside here. And that's why we don't need it. And also the same goes for the padding, padding left and right is already applied in here and it's flowing down and it's applying it to the other ones as well. So if we save this, this should also constrain the layout but make it a little bit bigger. Perfect. And I'm thinking of creating two more. So I'm going to do one here. And this is going to be one two eight zero copy it paste. And then one more do one five three six paste. And that's it for the container. What we can do to make things a little bit clear, I'm going to put a little comment here with slash and three stars container. And that's it. So here is a code for the container. We should be good to go. If we go up just to make sure that everything is working. Perfect. As you can see, it's not full width and it's constrained in the middle, which is exactly what we want. All right. The last thing I want to add is another class here, which is going to be helpful for when we need to have things off screen. And I'm going to tell you why now. So for example, this is a kind of like a well known hack. So off screen. And then inside here, we can do position absolute. So we can move stuff off the screen. So it's not visible and we can clip it. We can do wrecked. And then this is going to be one pixel. One pixel, one pixel, one pixel. I believe that bootstrap uses this as well. So it's a well known thing. So clip again, one more time. The first one is for Internet Explorer, actually. So this one is for all the other normal brothers. So one pixel with comma, one pixel with comma, one pixel with comma and one pixel. This will make sense in a second. And then let's reset the padding to zero. So no padding round, no border, border of zero. And then we can put the height to one pixel, the width to one pixel. And then the overflow to hidden. And the reason I'm doing this is because I want to outline the project in the best possible way without affecting any SEO. And you might have heard of the HTML5 outliner is basically a document hierarchy. So I'm going to show you what this means. If I go to the browser, and if I open this, I have this HTML5 outline thing is stored here in extensions. So if I click on it, you would say untitled body. Now, as we're developing the website, I'm going to try to structure my website as well as possible. But sometimes in order to do this, we need to hide the text. And hiding the text is normally not good for SEO. And that's why we're doing this hack here. So for example, inside the body, let's super quickly add H1 tag. And then we're going to do a class name offscreen. And then I'm going to say Radies website. Save this. If I go back, nothing on the homepage. But if I click on the outliner, you'll see that we're starting with Radies website. Let's start with the header. So for the header, let's go into index.html and make some space inside here. I'm going to structure everything inside HTML5 elements. And this one is going to be called inside the header is where we're going to be adding all of the elements. But before we do this, I'm going to give it a class name of header. Now you might be wondering, well, why are you repeating yourself? This is an HTML5 element. And you have a class name. This is purely because if you ever want to change the header element to whatever you like, let's say you want to change it to diff. Well, the class is already applied to the header. So that won't really affect it. Of course, if you change it to a URL, you might have some bullet points and so on. But this is the idea behind it. And for this tutorial, I'm also going to be using something called BEM, which is block element modifier. And this is how I'm going to structure the CSS. I will show you a lot of examples. In fact, this could be one of the examples straight away. So this is our main block, which is called header. Inside the header, I'm going to have three elements. I'm going to start from mobile first, which means that first of all, we're going to have the logo. Second, we're going to have a let's talk button. And third, we're going to have a menu to do this. I'm going to create a link. So a href and this link is going to go to slash because it's going to be our homepage. So this is going to be the logo. And this is going to have a class name, for example, of header and then logo. Just to make it a little bit more descriptive. So we don't run into duplication or problems. I'm going to have it like this. And then inside here is where I'm going to add my logo. So this is going to be an image with the source. And the source is going to go into images. So I and G slash and then logo SVG is what I want. Of course, we do need to have the width and the height of the image to avoid any rendering issues. Don't worry, the image will be still responsive. And then we just need to close this. So for the width and height, I actually don't know what they are. So I'm going to super quickly look into this. So 137 on 15. Okay. 137 on 15. Cool. So here is the logo. It appears in here. Let's add the next step. Let's add the let's talk button. So a href equals and this is going to be contact.html. We're going to create this page later on. And then this is going to have a class name of header talk, for example, inside here, let's say let's talk. And then I'm going to add an icon later on. And then for the last thing here, I'm going to create a navigation. So now this navigation can be called something like header menu or header nav. Maybe now that would be a little bit better. And then inside here, I'm going to do another offset. So just like here, I'm going to copy this. And I'm going to do h1 with the class name of something like navigation. And then for the navigation, I'm going to wrap everything into an ordered list. So an ordered list usually has a list inside. And I want to make links. So a href and the first link is going to be our home link. So we can just do slash and then put home like so. So I can potentially duplicate this two more times, for example. And let's say about and let's say contact. Also the about page is going to be called about dot html. And the contact page is going to be called contact dot html. Like so perfect. Now for the current link. So for example, we're currently on the home page. And what you can do for accessibility purposes, you can do some, you can add some area labels area dash current. So just to tell scheme screen readers, we're currently on this page. We can do page and also for usability purposes, we can kind of like add a custom class to the active link. So for example, class of active when we are on the homepage, I want this button, the home link to be somehow selected. Maybe you can underline it. Maybe you can change the color. Maybe you can make it bold. I'm probably just going to put a little star on top to make it look retro. Now we're actually good to go with the styling. If we jump back to the star dot CSS, let's grab a comment from here. Let's just do it inside here. So I'm going to do header. Cool. Put a header. Let me actually potentially, because we're starting on mobile first, I could move this to the left and I could potentially have it here so you can see. And maybe I can zoom in a little bit. But now we have a visual representation without me switching too much. First of all, let's change the background. Let's select the header by doing dot. This is a class. So I'm only using classes in here. And then I'm going to do background color of variable dash dash white. Here it is. Save. As you can see, it changes. Then I'm going to add a bottom bottom of two pixels solid. And then this is going to be black. Now my idea is that on every single section, I'm going to be only adding bottom to the bottom. And then every single section will be separated. There's so many ways that we can style the header, but a very effective way would be to use grid because we are half kind of like a two dimensional header. So we're going to have to have the logo on the left side here. Let's talk on the right side. And then this menu can span across the entire row in here. But when we go to desktop, things will change. This is going to stay on the left. This is going to stay on the right. But the menu, I want to go in the middle. Let's start by displaying the header as grid. So display grid, I will explain as we go. As you can see, things started to shift already. So for the grid, we can do something like this grid template columns. And I can say repeat twice. So repeat two columns, one of the screen. Now you could also do mean max if you wish, but I think this is going to be efficient for what we're doing. So repeat two columns of one fraction each, which means that they're taking exactly the same of the available space. And if I inspect this, if we can see, maybe I can toggle this. Let me click on the header. And if I click on the grid icon here, you'll see that is created two columns and two rows because we have the menu here. Now there are actually a couple of ways that you can position things on the grid. But I'm going to show you my favorite way, which is very visual and easy to use. So for this, I'm going to use grid template areas. And then inside here, I'm going to put this on another line. So it's a little bit more visual. And I'm going to do double quotes and then logo and then talk. So essentially, this is going to be a visual representation of where I want to position things. And I'm going to do one more row. So this is the first row here with two columns. And then I'm going to do one more row with the single quotes in here. I'm going to say menu menu. What this means is that I want the logo to be on the top row here, top column, top row, top left column. I want the talk to be on top row, top right corner. And then for the menu, I want the menu to take the second row, but to take it all from left to right. So if I save this, obviously, grid doesn't know what is logo, what is the talk button and what is the menu. It just doesn't know yet. We need to do that. First of all, if we go back, you will see that I start the logo with the class name of header logo. So I can use this inside here. And I can say header logo and I can tell it grid area to be called logo. So this needs to be equals the name of this and you can name it whatever you like. So if we save this, nothing really changes because that's the current position. But if we do the same for the rest, so for the header talk, the header talk button, this is going to be grid area. And this is going to be called talk just like in here. Nothing is going to change just yet one more time, but we need to do the same for the menu. So for the menu, we can do header dash menu was a menu or not. Now I believe, let's have a look. I think it was enough. Yeah, had enough. So for the head enough, I'm going to do grid area. And then this is going to be equals to menu. So we have menu menu and look at what happens now. Nothing really happens because they're already on their position. But if I was to change the head enough, for example, to background color of red, just so we can see, you see what's happening here. The actual navigation is taking both spaces in here. And this is because I've set the grid template areas. Now if I want to swap their position, let's say I want the talk to be on the left side, all I need to do is grab the talk and move it to the left side. And look what happens. The button moves to the left and the logo moves to the right. So this is a very visual representation of what's going on. And I can do the same thing with the actual menu as well. But the HTML elements on the page doesn't really matter how they're structured, like how they're positioned. If I put it like this, look at what happens. The menu becomes on top. So this is pretty awesome like that. Of course, we don't need the background color. Here it was just a visual representation. Save this. And I do need to move the logo on the left side. Sorry. And let's save it. Okay, let's remove the gridding here so we can see a little bit better. And the next thing that I want to do is make sure that this works on desktop as well. At the moment, if I open this in a bigger browser for a sec, I will see that they're structured exactly the same because we've only got the mobile styling basically. So for desktop pains, I want to change this. And the way we can do this is by using a media query and changing the grid template columns and grid areas. So I'm going to copy the entire thing from here and make a media query around here. So this is going to be called media. And then this media is going to be mean width of 768 pixels. Oops, pixels. And then inside here, I'm going to paste the header. Of course, we don't need any of this. We don't want to repeat ourselves, but we just want to change the grid template columns to be free. So instead, I'm going to have the load to be 180 pixels. I'm going to have the menu this time to be one fraction of the available space. And I'm going to have the talk button the same with the logo 180 pixels like so. So nothing happened just yet. And I want to remove as well the second row here. So let's remove them. So we only have one row and we can position the menu in the middle. So now let's have a look at what happens. As you can see, right here on the left, this on the middle. And let's talk on the right. When I add a little bit of styling, they will look a little bit better. I guess if I click on the grid, you'll see that they only have one row. If I go down, look at this now. Boom, it sucks. This is what we want. So this is pretty much the responsive stuff done for the header. So now let's style it super quickly. Let's start with the logo. If we go up, we've already got the logo here and we can focus on that for the logo. I'm going to remove the grid first though. So we can see for the logo, I'm going to add a little bit of a border separator. So I'm going to do border right of two pixels solid black like so. As you can see, they're looking nice. I have zoomed in. And that's why it looks a bit odd display the logo as a flex. And the reason for this is because I actually want to center it on the left axis. Sorry, x axis and y axis. So in order to do this, I can do align items to center and I can do justify content to center as well. And this is going to move it to the middle. The other thing that I want to do is make sure that we have a little bit of padding just in case. So I'm going to do padding. And then I'm going to do top and bottom to be 0.6 REM and then left and right to be 0. So I don't know if you can see, but there is a little bit of padding added to and we're done with the logo. Let's focus on the let's talk button now. So for the let's talk button, we're going to do a background color or variable yellow here because this is a link. I'm going to remove the underlying text decoration. So none. And then I'm going to do exactly the same thing as the logo and display this as flex. So I can center align it so we can do justify content of center and then maybe align items of center is well perfect. Now I do want to add a hover effect to this. So what I'm going to do, copy the header talk and then put a hover element in here over and then instead of using background color yellow, we remove everything. We just want to change this to the yellow of hover. So if I have an error, perfect. We have a hover effect there, which is fine. One more thing that I want to add on the let's talk button is a little icon. And I'm going to use hero icons. If you go to hero icons.com, you can use I'm going to be using this one here. I'm just going to copy the SVG. Of course, you can save the SVG as a file instead of pasting it like I will, but I don't see as a big issue here. So I'm just going to paste it as an SVG. And as you can see, we have the SVG in there. And what I'm thinking of is to actually just change the weight of this. I'm going to remove the classes in here. No, we don't need them. I'm just going to change the width. If I can to 1.2, 1.2, can I do REM? Yeah, that seems to work. Perfect. So this seems to work. I'm just going to change it like that. Of course, we zoomed in. So are we zoomed in? No, I think just the menu is pushing everything. But that's actually good because we can see that everything is aligned in the middle. And I like it. If we go back to style.css, on the header talk, I also want to add a little bit of a space between the icon and the let's talk. And to do this, we can use gap. And then this gap is going to be of 0.6 REM. And this is going to appreciate a little bit. The last thing that we need to focus on is the actual menu in here. And for the menu, let's go to head and nav here, and we can give it a border up top to fix a solid variable black, just so we have this nice border. And I'm going to remove it later on. I'll show you. All right, let's display this as flex. So display flex. And then this is just going to help us to justify the content, justify content in the middle like so. And then I'm going to align items in the center in order to remove the bullet points. If we focus on the navigation here, we have an unordered list and actually forget to give this unordered list a class name. So we could just go ahead and just say header nav list, for example, something like something very descriptive, copy this, save it. And then inside here, I can style it. So dot header dash nav dash list, reset the bullet points. So list style type to none, remove the bullet points. Then we're going to do reset the margins because as default, the unordered lists have a margins and padding. So save this, as you can see, removes them. Padding zero, removes the padding. And now what we can do to stack the elements next to each other, horizontally, we can display as flex like so. We can give it a gap between or 1.2 RAM. And then maybe a little bit of padding as well. Or maybe we can give padding to the actual buttons so they're easier to press. Let's give it a little padding just in case anyway, top and bottom zero. And then left and right is going to be 0.7 RAM. And this is going to actually help with the scroll or mobile. So this is all good. What's going to happen if we have a few more items in here is that I want to achieve a scroll. So I'm going to copy, let's say, let's see, how many do we need? Okay. So at the moment, they're going to overflow. What I want to achieve is I want to put overflow of Y to auto. And now this is going to add a scroll. Obviously, it looks quite ugly like that on desktop, but on mobile, you won't even see the score. It'll look really nice. And this is where the padding works out in all favor here. It adds a little bit of fighting to the left here. So the button on the left side is visible, which is great. Definitely, we could add a little bit of fighting on each button, just so they're easier to press. But I'm going to remove them for now. And that's it for the actual links. I'm going to do, so I'm just going to target them from here. So what I'm going to do is head enough list links. A, this is going to have the text declaration of none. And then I'm going to position this position as relative, because I want to position a little dot on top of them, just so we know which one is the selected one. And to be honest, I think this could do with a little bit of padding. So I'm going to add a little bit of padding, maybe of 0.6 ram or around. No, no, no, no. Maybe top and bottom 0.6 and then 0.0. Maybe they need to be block element in order for the padding to work, because they are probably displayed as inline blocks. So what we can do is display block, save. And yeah, this is working now. As long as we have the position relative here, we can actually create a pseudo element that doesn't exist in the HTML here. But it kind of creates an element inside here. And I'm going to use the active class here in order to position a little dot on top. So what we can do is we can say the header nav list link, if he has a class of active, like so, then we can create the pseudo element by doing before. And then inside here, in order to create this pseudo element, we can put content. And then you can put whatever you want to add. For example, I'm going to add a little star. And now you can see the star in here. It's kind of like a ghost element. Here it is. If I select it, it just says before that's all. And now I want to position here in the middle of the button. And that's why I made the links as relative. So we can position something absolute to them. Otherwise, if I position this absolute, you could go to the top left corner or somewhere else position this as absolute. This is going to have the color of yellow. So dash dash yellow. And then what else do we need? We can position this to the top of zero. Yep. That's looking okay. Maybe I can move a little bit more. And now I want to offset this 50% of the actual button. So left can be 50% like so. Because the actual element has a little bit of a weight, we can offset it by removing the half of the weight of it. So to this, we can do margin. And I'm going to completely guess this, to be honest. And this is going to be minus 0.4 ram. Around there, maybe three. Yep. That looks quite centered. And maybe we can even move this to minus one point. No, minus 0.2 ram. That looks good. And now we know which page we are on. And if I was to create a new page, all I can do is grab those two things and just say, let's say if the about page was active, I add both of those things here. And now we have the about page. I'm going to control Z and save. Let's have a look at how this works on desktop first of all. So it's looking good. Of course, don't worry about the bottom border. It's because we don't have any content. I can add some below the header. I can just say H1 awards. And you'll see how this is going to work. But we do need to remove the border from the top. So I'm going to go back to the start dot CSS. I think I added border on the actual navigation here. Here it is. Navigation. Now, head on up. Sorry. I need to remove this on bigger screens. I'm going to scroll down and I'm going to add it in here. So head on up. And this is going to basically reset the border top of zero. Save. And here we go. The border top is gone. Also, I noticed that we don't have border here on the left side. So maybe on the let's talk button and do that, I'm going to do header talk. And this is going to be border left of two pixels, solid variable of black. All looks good on mobile. All looks good on desktop. So if I was to show you super quickly how this works, here we go. And now we can focus on the hero section next. We go back to index dot HTML. Let's first of all write the HTML and then we can style it. To do this, I'm going to create a new section. And this section is going to have the class name of hero. Let's close this. And inside this hero section, I'm going to create the container that we added earlier. So diff with the class name of container. And inside the container is where we're going to be adding the details. Essentially, I'm going to be creating two columns that stack underneath each other. So what we can do is maybe we can create two diffs. So let's cool them hero code so we know what they are. And then inside here, we're going to have the first content. So this is going to be the image. And then we're going to duplicate this and have one more. And this is going to be the about and they're literally going to stack just like this. We need to change the content. And let's start with the image. For the image, I'm going to be using the picture element. The reason for this is because you can be a little bit more creative with this. And also we can optimize all websites for performers. So if you're on smaller screens, maybe we can load a smaller image that has a smaller power size. So let me show you what we can do. We can start with a picture and give it a class name of hero image like so. And then we close. So as default, we need to add an image with the source. And then this is going to be image. And I've already added images. This is going to be called hero dash large dot jpeg. Of course, we can give it a width of 870 pixels. And the height for this one is going to be five, three, two. And all text is going to be something like me working on a computer. Just something descriptive. So screen readers can read this. And then this is going to be our first image. Here it is. But now for smaller screens, we can do let's do source. And then for the source, we're going to have to do src set this time. And this is going to be image slash hero. And then this is going to be the medium, for example. And then dot jpeg. I've started backwards, but that's absolutely fine. And then the width is going to be for this one 608. The height, the height is going to be three, seven, two. And we're going to put a media screen here. So this is going to be max width. And then I'm going to say seven, six, eight inside here. And then I can do type. And the type will be the type of image. And it will be just jpeg in this case. And we need to close save this. I think this will be fine. We can copy this source, paste it one more time. And instead of medium, I have one more image, which is a small image. And this is going to be three, six, three. And this is going to be two, two, two, the height. And then the last thing that I'm going to change is the max width 400. And that should do the job. Now you might be wondering, well, okay, here is the image. I scale it down and nothing really happens. It's, it's the same image. Well, it's not actually the same image. I did save three images for different screens. And I can preview this by going to the actual image. And then if you find hero image, let's say hero small here, here is the image. And let's say I want to edit this reveal in file explorer here, the three images. And I'm going to edit this one just so you can see. So I'm going to do various paint open with open with. And I'm going to say paint here. So what I'm going to do is type something other s m for small. And I'm going to save. Okay. And if I save this, you will see that we're getting the small now, the small image here. You might not. Oh, here it is. So if I go down with the browser, you'll see the small image. And this is good. Okay. Let me minimize this. And let's fix the image by going ZZ and save. Cool. So that's pretty much it for the image. Let's finish the about this section here. And then we can style everything. What I'm going to do is wrap everything inside another diff with the class name of something like hero about, let's say, so it's a little bit more specific. Later on, I'm going to use this diff to center everything inside the actual column. So inside here, we can start by adding the first heading, the subheading, which in fact, let's give it a class name. So this is going to be hero dash about. And then we're going to do underscore underscore subheading. You can make it sub, I guess. And then just type. And then I'm going to add a little text. Hi. A wave emoji. I'm ready. And then save this. So as you can see it, you can see it in here. By the way, the reason I'm writing the underscore underscore is because we can tell that this is an element of this block. So we're using the prefix hero about, and then we add in an element here. That's pretty much who it does look ugly, especially when you add bigger names, but it's very helpful because it's very descriptive. And we don't have a lot of nesting, which is great. The next one I'm going to do is each one. So for the each one, I'm going to say developer. Dot. And then I'm going to do BR inside here. And then I'm going to do on another line, let's say content creator. And then dot as well. And for this, let's give it the same class name. So hero dash about underscore underscore heading. Heading. And that's obviously fine. And then I'm going to also add a paragraph in here with a little bit of a description that I'm going to copy and paste. So this says I create digital products and services to help brands, organizations and entrepreneurs get the most out of their websites. We can give this a class name of hero dash about underscore underscore body. Save it. And then last but not least, we could have to go to actions. And I'm going to wrap them into a div and we'll have a look into this later. So they're going to be links essentially. So the first one is going to be the selected work link. So we can just put an anchor for now, maybe work. We'll have to do this a little bit later on. And then I'm going to give it a class name or we can call it button or you can call it BTN, whatever you prefer. Let's call it button for now. It's absolutely fine. Let's call it and let's give it a secondary class name of button dash dash primary. Now, what the dash dash means is oops, let me close this. Let me fix this button super quickly. So this is going to say selected work. Close. What does the dash dash mean? It's essentially a modifier. So we have a button that we're going to style and we want to modify that original button and maybe give it a background color or whatever. We'll look into this in a second, but this is essentially a modifier. When we put the dash dash, let's create one more button inside this div a href and this is going to be going to contact our HTML and we can just say let's talk like so. And potentially we can add an icon later on. So we have the selected work and let's talk in here. Everything is looking good. And I believe that this is everything from the HTML. Now we could start styling the actual layer to start with. So what we need to do is go back. We can target hero and then container. So first of all, I'm going to copy a comment from somewhere. Here it is. Paste in here. Here up. And then I'm going to do hero and let's start by changing some of the spacing on the top and bottom for small screens. I want to add padding top of 2.5 REM. So this is going to push the content down. Then I want to add padding bottom to be 2.5 REM. It's going to push everything else down. So we have a little bit of space everywhere. And then I'm going to say border bottom as always, 2 pixels solid and variable of black. So this is going to give us a nice separator or the next section that we're going to add later on. For mobile, we are actually okay like the way they're stacking. But when we go on desktop, as you can see, they're still stacking, which is not what we want. We want the image to be on the right side here. And we want the text to be on the left side here. So one way of doing this is we can target the hero call, the column. And we can say, first of all, flex 110. And I'm going to show you what this is in a second. So nothing is going to change just yet. We're going to display this as a flex box. And then we can align things along items to the center. So I want to align everything inside the container to the center. And I actually need to change the layout first of all. So as you know, we have this hero class here and we have a container. So I'm actually going to target the container by using the hero. So what I'm going to do is maybe here actually, so I'm going to do dot hero. And then inside the hero, where we have a container, I want to say display flex. And I want to say the flex direction to be row reverse first of all. And then I'm going to add a little bit of gap between them of 2.5 ram. But if I say this is going to break the content exactly where I want, but on mobile was absolutely fine. So I'm going to wrap this into a media query. So let's do media and then mean with this equals 768 pixels. And then we open and close and we put that inside. So now we have the content stuck in. But if I go on desktop, it goes to the left and it goes to the right. Now this is what the flex 110 did. This is the, where is it? On the hero code, we basically added this flex, which means flex grow one, flex shrink one and flex basis zero. Now this is actually making the each column here that we have equal size. So kind of like think of it as 50%. So if I was to remove this, let's say look at that. The, this content is needs a little more space. So it's automatically pushing the image and making it smaller. But if I click on it and add it basically, it makes them equal, which is what I want. And the gap was added from the container itself. As you can see, we added a gap of 2.5 ram, which is perfect. And now if I go down to mobile, it stacks underneath, which is exactly what I want. Go back and let's start with the image. All right, let's move this to the top here. Let's start with the image. So for example, we can do dot hero dash image. And then for the image, I want to make the border radius look a little bit cooler. So border radius is going to be around 11 ram of 0.75 ram. Of course, we won't see anything just yet. And the reason could be two. First of all, we probably need overflow hidden. Potentially sometimes the images will have a little bit of spacing underneath. And what we can do, we could potentially put display block on all images. So here we could do display block and that would save the spacing issue here. And also some of the sizing issues potentially. So that it's going to help us out. All right, we are potentially getting some alignment issues here. The image is not going in the middle. And the problem is that I want this to be always on the left. And this could be on the right on mobile, but definitely middle on mobile. So what I could do, a quick fix could be hero image code. And then I can just give it a justify content center for mobile. And then potentially on desktop, I want to write a line. So I'm going to copy this and put it in here. And instead of center, I think it's going to be flex and instead. And so if I go back, everything is looking good. So this is a quick fix with this. And yeah, that's looking good. I think I like that. So far we've given a border radius. We need to give it a little bit of border. So border, two pixels solid of our black. And then we need to give it a little bit of margin to the bottom of two REM so we can push the text. So this can look a little bit nicer. And also I want to add a little bit of a filter shadow. So we can do filter. And then for this is going to be drop shadow. The drop shadow is going to be offset on the x-axis and y-axis of 10 and 10 minus 10 pixels and zero. And then the variable color is going to be the color of yellow. Nice. That's looking good. We go on desktop. This is looking nice. Perfect. So one thing that I'm noticing straight away is that we do need a lot more spacing between the sections. So I will need to fix that. And that was done through the hero here. So I need to go down inside here. I need to create two more, two, three more media queries. And this one is going to be let's say zero, one, two, four. And I'm going to make the hero section to have padding top of nine REM and then adding bottom of nine REM as well. So if I go up, you will see that the padding is starting to look a little bit better. But I want to make one more, one, two, eight, zero pixels. And in this case, I'm going to add 12 REMs. And that's going to make it even nicer when we go on bigger screens. Perfect. We could potentially focus on the about content inside here. We can do that hero about. And to start with, we're going to do the subheading. For the subheading, I'm going to change the font size to 1.125 REM. And then we're going to do text transform. And this is going to be uppercase. So the content goes uppercase here. And then we're going to have margin bottom. And then we're going to have one REM for this. So we push the bottom heading a little bit. And for the line height, I can't remember what I gave it. Line height is the one I think I probably did. So that might not be relevant, but I'm going to leave it here as it is. And for the main heading here, I'm actually really happy with this because we've already set the global styles for the heading sink here. So that's going to work quite well. But I do want to make it a little bit more interesting. And the way I'm going to do this is add colorful dots. So what we can do to add the colorful dots is we can wrap them in spans. So this is the first dot here. So just so you can see a little bit of span. And then I'm going to wrap the dot in this span. So I'm going to give this span a class name of text yellow. And this is going to be a global thing that we're going to do. So I'm going to do one more span. And then I'm going to wrap the dot and then give it a class name of text. Perfect. Now we can create them as global class names. So somewhere at the top, maybe around here. So I'm going to do text yellow. And I'm going to do text purple. Perfect. So for the text yellow, we're going to do color of yellow. And as you can see, this turns into yellow. And then for the other one, I'm going to do purple. And as you can see, the dot turns into purple. And we can reuse those two classes through the entire website. The next one would be the body. And the body is actually not so bad. So I'm going to copy this class name here, go back to the hero section here and put dot hero dash about body. And the body is actually not bad. I've already put the global styles. So I like the font. I like the spacing. Everything is looking good. But if we go up on desktop, you'll see that the text is actually getting a little bit too long. And it's kind of hard to read this way. So what I'm going to do is constrain it somewhere around this line here by giving it a max width. So inside here with the max width of 36 gram and save. So for mobile, nothing really happens. But for desktop, it gives it this constraint here, which is looking good. The next thing that we can focus on is the two buttons here. And they can be global buttons as well. If you remember, I gave those buttons somewhere right there. I gave those buttons a class name of button and a modifier button primary. And this one doesn't have anything. So this one needs to have a class name or button. Now, these are going to be global. So let's do some somewhere around the top. I don't know, maybe now, maybe around the text here. So I'm going to do buttons. And then for the buttons, I gave him a very long names of the button. And now we can do the basic button styling in here. So the first thing I'm going to do is make sure that the original color of the buttons is set to black. Like so, the next thing I'm going to do is remove the text decoration on the buttons. So text decoration to none. And then I'm going to add a little bit of padding or all around. So top and bottom can be one ram. And then left and right can be one point five ram like so. And as you can see, they're starting to take a little bit of shape. The links itself are actually they're actually not blocks are not only that. So they stack next to each other. We could potentially give him a default value of inline block here. Now the padding is going to work and everything like that. And they're going to stack next to each other, which is good thing to have. And now we can look into the modifiers. So as I said earlier in this tutorial, modifiers are basically we already have the basic button here. And I just want to modify. And that's why we do dot button and then dash dash. And then let's say primary, for example. So this primary button can have a background color of variable. And then this is going to be green. And as you can see, we're getting the green button. But now I need to reset the color. So I can do color. And we can do white, just like so. And also I want to give it a little bit of a border radius to make it look cool. And then this is going to be zero point three, seven, five ram. So this is already looking good. And the list of it is actually absolutely fine. That's the way I want it. Although I am going to add a little icon to it. And in order to add an icon, we can do another modifier. So let's say button with an icon, dash dash icon. And the reason I'm doing this is so we can add a little bit of space to the icon. So first of all, let's find the SVG that we used earlier, this one here. And I'm going to reuse it. So this is the little arrow. So I'm going to reuse it here. Here it is. It's looking good. But if you look into it closely, it looks like it's aligned to the top. So that's why I'm going to add another modifier for the buttons. So let's say button, button dash dash icon. And then potentially we could convert this into display inline flex. If I convert to flex, there is a potential that this could go on another line. I don't want that. I want them to stay on one line. But when the screen goes even smaller, they'll probably just stack underneath each other. Yep. That's the way I want it. Perfect. And then I want to, oh, that's already actually aligned the icon in the middle. So that's perfect. All right. This is solving one issue. But the other issue that I want to solve is the, is the space between the icon. So we can just do gap of 0.5 REM safe. And now we have a little bit of space between them. Let's have a look at how this looks on desktop. Nice. And if I inspect them super quickly, here we go. Now this is looking good. Okay. And the last thing that I'm going to do is fix the hover on this. As you can see, it doesn't look great for the actual button here, button primary. In fact, I'm going to copy this and fix the hover by giving it a hover state here. And then I'm going to change this. So the hover color to white is absolutely fine. I wonder, but the border we don't need because we've already got it. So let's change the background color into a variable that is the green hover. And if I hover over now, perfect. So the hero section is now complete. And we can move on to the next section, which is going to be the marquee. All right. Now let's focus on the marquee tool, which is going to be the next section here that moves right to left. And actually saw this example on co-pen, which I'm going to link in the description below. And I just modified it quite a bit. So in order to do this, let's jump into the index.html here. And let's go down under the hero section. As you can see here, I do need to tidy things up, but let's go down to just below it. And inside here, I'm going to wrap this into a div instead. Inside this div, this is going to be actually a huge link to the contact page. So what I'm going to do is do an href. And then this is going to be contact.html for now. And let's give it a class name of marquee. Cool. Now inside here is where I'm going to create another div with the class name of marquee items. And this is what we're actually going to be animating this div here and everything inside it. So what I'm going to do now is create two more divs. So div and we don't have to give him any class names or anything like that. And I'm just going to copy some of the text that I've prepared. So the first one is going to be with these nice retro stars. Let's get to work and let's create another line. And then I'm going to have a project in mind. And then what I'm going to do, save this first of all, just to show you what it looks like. Here they are. And I'm actually going to replicate this two more times. So I'm going to copy this like so and save. What we want to achieve is I actually want to animate this. But when this animation finishes, I don't want to see blank space. And what we can do is duplicate this. So I'm going to duplicate the whole bit. And just tell the browser that we want to hide this. So we can do area dash hidden equals to true. And this is going to remove this text from the accessibility tree, which is great. So it's still going to be visible, but it's just not going to be readable on screen readers, I believe. And if we look at it now, obviously, we're just going to have a lot of repair this too. And now we can start styling it. So you'll see how simple this is actually to do. And it's pretty cool. If we go down somewhere below, I do want to copy a comment, by the way, right? If we go down below, let's put Marquis here instead. Class name of Marquis. And inside here, what I'm going to do is display this as flex. So we have both divs here on one line. And then I'm going to give them a little bit of a gap one rem. I'm going to say that the overflow can be hidden. So when we have the animation going, we don't have any scroll. And we can actually do the animation. And then I'm going to change the background color to be variable to yellow. Then let's add a little bit of padding. So this is going to be one rem top and bottom, one rem left and right. Text decoration for this can be none because I want to remove the actual link. Let's have a look at our looks. So they're stacking next to each other. Perfect. The color, I mean, the color is already set to black. I'm going to change it anyway, just in case here. And then also I want to add, as always, border of two pixels solid variable. Dash black. And this needs to be border bottom. So if we go back, everything is looking good. So now we need to concentrate on the actual items and make sure that the animators is going to be dot Marquis items as a class. And then the same thing as here. We want to display every single line next to each other. So an easy fix display flex. If you don't have enough information inside each box, we can justify the contents to space between, which is going to always make it look nice. Sorry, space around, which is always going to make it look nice. Let's do flex shrink just so the actual boxes don't shrink and like break into another line or anything like that. We can give them a gap of one ram between each item. And we need to set the minimum width to be 100%. So we stake in the full screen. We can change the font size to something a little bit bigger off to ram potentially. Font weight, we can do as 800. So let's choose 800 here. And then we can do the animation. Let's have a look. Okay, this is already looking pretty cool. Am I zoomed in? Nope. Maybe I can just make it a tiny bit smaller, but this is already looking pretty cool. Anyways, hiding at the top can be 0.6. So simple. Let's have a look. We'll see. It doesn't matter too much of the money to animate them. We can do a very simple keyframe animation here below. So let's say at keyframes at keyframes here, and let's call a Marquis animation. This is the name on giving it. And we need to do is give it a from and we can do translate. And then the translate can use X and Y. So a zero and a zero in this case. And then we just need to change. So from we need to change to and we basically want to change it. So it goes left. And to do this, we can do translate. And then inside here, we can do calc minus 100% and then minus one REM, which is going to be the actual gap between the Marquis items. So they don't touch each other. And then we put a zero for the X axis. All right. So this should work. But of course we need to give these two diffs that we created the animation. So this Marquis animation. And in order to do this, we can add it in here by doing animation. Animation and animation is called Marquis animation. I can put it 50 seconds to make it super slow. And then this can be linear and infinite. So it never stops. So if we go back refresh, nothing seems to happen. The problem straight away is that I've actually, so we need to wrap the calc function in here. So I can remove this and which means that we're fine. But I need to remove this one here and we should be fine. So we have the Y axis and the X axis in here. And that's why it's probably not working. Save this. Let's go back. And as you can see, this is working. So just to show you that it's not actually breaking, it's not jumping around. Let's put this into two seconds. Now this can be super quick. As you can see, I mean it's too quick, but it's not jumping around. That's the point that I'm trying to tell you. All right. And this is not so distracting. I think this is pretty cool. And one thing that I want to make is that when I hover over this, I want to actually pause it. So what I want to say is that when we hover over marquee hover, like so, I want the marquee items here to stop. So animation dash play state and then we can put pause. Save this. And if I hover over now, you will see that this stops. And I feel that this is pretty cool. Of course, if I go on mobile, toggle the mobile version just super quickly, you'll see that it works. For some reason, it is a little bit bigger than I actually intended to make it. Maybe maybe we can make the text a little bit smaller, but these are just like adjustments that you can always make. So I'm going to leave it as it is because it already works. Now we can concentrate on the next section, which is the work section where we display some of our portfolio work. Let's go back into the index.html and below the marquee, we're going to create a brand new section. So section with the class name of work, like so actually this created a diff. So I need to put a section section and let me change inside the section. We're going to have a container. And inside the container, we're going to have the heading, so the titles at the top. So I'm going to actually create a reusable class that we can reuse for the entire website. So what I'm going to do is create a diff with the class name. And let's call it something like section heading, something that is descriptive. And we can actually add a modifier for this. And I'm going to show you how this works. Section, let's say heading. And then I'm going to do dash dash. And you'll see how this is going to work in a second. So I need to close this diff. Don't forget that. And then inside here, I'm going to add an H1. And then I'm going to do select the work. Let's add another one here paragraph. And I'm going to copy and paste some text that I've created. So this is going to say I've been developing websites for a while, but I also equally enjoy creating other digital products. All right, let's start styling the actual work section. And then we'll look into the heading. So for the work, I'm going to do a comment work and then work in here. So for the work, let's give it a little bit of padding. So padding can be for rem top and bottom and left and right can be zero. Background color can be green. So variable slash green like so. And that's absolutely fine. And I'm going to add a little button in here. So background image. And this is going to be a URL and this is going to be dot dot images. And then slash portfolio button like so. And we could potentially have this, you know, let's try it. Let's background, was the attachment fixed? Yeah, attachment fixed. So when we scroll the background stays, this can be okay. But on older phones as well, if the SVG is a little bit big, make the scrolling a little bit jittery, which you might have to watch out for. Put a border bottom of two pixels, solid variable of black. Let's have a look. And that's already looking good. And now we can focus on the actual heading here. So for the heading, maybe we can do it separately. Let's say section heading and let's add dot. And then for the section heading, we can text align center. We can set the max width of it to be 36 REM. And then we can do margin of zero auto. And then we can do margin of bottom for REM like so. As you can see, this is already looking good. And now this is going to be the default one. I mean, in fact, I kind of like it with black, but also I think that white might look a tiny bit better here. What I'm going to do, this is going to be the base. And I'm going to do a modifier that we can use on any section. For example, this section here to make it turn into white. So for this, I've already added the modifier in here. So I'm going to copy it. And what I'm going to do is modify the section. So modify and what I'm going to do is color bar and then dash dash white. Here it is. Save. So here it is. We have a cool section that we can reuse with black and white without any worries. And this is going to be reused on the next section as well. So this can be quite helpful. Now, the next section that we can do inside here is the portfolio piece. So let's go back and copy a little comment here and paste there inside here. Just so it's a little bit separate, we could potentially use the work class name. Let's make it totally separate so we know what we're working on. Inside here, we're going to have a div. You know what? Let's go with selected work just because this is a little bit better. And then inside here is where we're going to stack or portfolio work into links. So I'm going to do a href. And for now, I'm going to leave it as an empty link because I'm not going to be creating those pages. I might create one. We'll see how it goes. And then I need to close this link. Now for this link, I'm going to give it a class name of selected work underscore underscore card, for example, or maybe we can just do card to be its own component, actually, just so we don't make them too long. Essentially, we're going to create two rows. The first row is going to have the image. And the second row is going to have the description. So let's do this with a class name of selected work dash card. And then image. So inside here, we're going to load an image. IMG source. And this is going to be equals image, portfolio one. And then of course, give it an old tag, a photo, ready, a photo showcasing branding work that I did for writing. And because this image is kind of like, let's call it below the fold. So we need to scroll in order to see the image we can do the we can do loading. Because lazy. And this works pretty much on all modern browsers now. I think the support is like just just above 90% to something like that. So we can definitely use this and there is no downside of really using this. So I'm definitely going to use it. And then we need to create, let's have a look first of all, do we get it? We get the image here. And the next thing that we need to do is the description. So one more diff with the class name of selected work. Dash card and then dash dash desk for description. And inside here, I'm going to be creating another diff, which is going to hold kind of like the description. So I'm going to have, let's say a span. And the first thing is going to be kind of like the title. I'm going to say right is brand. And the second span is going to be something like branding. So the word I did, for example, and then I'm going to put a dot by using this volume. I'm percent hash nine, six, seven, nine. And this is going to make a little dot you will see here kind of how to see. And probably need to make like a little spacer. So let's create a section, section with style of adding top five, four, or whatever. Just so we can scroll and see a little bit better, maybe a lot more, maybe eight or nine. Here we go. So we can scroll and see a little bit more. The next thing that I'm going to do is potentially add a little icon in here in a second. And in fact, let me copy one and I'm going to add the straight away. So let's look into the SVG SVG. We can copy this SVG. So I'm reusing the same icon everywhere pretty much. And this is going to go into the second div here. And then inside here, we add the icon. And in fact, we don't even need the div because this is going to act as his own little section. Sorry about that. That would be fine. Maybe we can make this to be to run instead. Just so it's a little bit bigger. Cool. So we have this and we can start styling it. So first of all, what I'm going to do is I'm actually going to copy one of them links. So we have two of them. And then we see what's going on a little bit better. So I do need to tidy these things up. But now we essentially have two cards. And now we can start looking into starting the portfolio here. Okay. So instead of portfolio, we call the selected work. And then inside here, we can do dot selected work. And we can do display this as a grid. Now, nothing is going to happen on mobile. And I'm going to put a little bit of a gap between them. Nothing is going to happen on mobile. They're just going to stack with a little bit of space between them. But what I want to achieve now on desktop is to for them to stack next to each other. That's very easily done with media query. So at media, and then we do mean width. And then this is going to be 768 pixels. And then inside here, we do dot selected work. And then for the selected work, we do grid template columns, repeat two. And then we say one fraction each. So now if we go, we will see that they're now stacking up. And in order to make the effect that the secondary one is dropping down a little bit, what we can do is inside here, we could potentially just do, could do selected work. Dashcard, I call them. This is going to take the NTH child even. So every single even number is going to have a padding top of two REM. And now look at what happens. This is now pushed. And if I create two more, so let's say we have two more pieces of the portfolio here, we can do one, two, save it. And you'll see that we're getting a really nice effect. And if I go down to mobile, it should just work. Perfect. So the responsiveness is done. Now we just need to start them and make them look a little bit more presentable. And they were called selected work cards. So I'm going to copy this and start styling around here. So first of all, because there are links, I'm going to remove the text decoration and set it to none. Done. So the next, so the next bit that I'm going to do is add a little hover effect on this. So I'm going to copy it and do hover. And for the hover, I'm going to do photo drop shadow. And then inside here, I'm going to do 10 pixels, eight pixels, zero. And then RGBA and then zero, zero, zero, comma, zero, comma. One like so. And this is going to be the drop shadow when we hover over. Here it is. It's looking nice. And now we need to focus on the actual image. So for this, I'm going to do this. And I believe that I called it just underscore image. And then for the image, I'm going to do the border radius to make the borders look nice and curvy. So seven, five, the REM. And then I'm going to do border of two pixels. Solid. And then this is going to be bar black, black, like so. And then we need to set the overflow to this to be hidden. And that's pretty much it. Let's have a look already looking good. The hover effect is working nicely. Maybe we can animate a little bit better. But now we need to focus on the actual description here. It's going to be very similar. Let's copy this and let's put it here. And let's say instead of image, we say description like so. And then we can do background color of white. Then we can do a little bit of padding everywhere. One REM. So I'm going to do border left to be two pixel solid, a variable of black border right. So you can see a little bit better. Of two pixel solid and then variable color black. And then I need to do this for the bottom is our border. Bottom two pixel solid variable of color black. And you could use a variable to kind of like save all this. For example, you could potentially do dash dash custom border. And then this could be equals to this. And now I could potentially reuse this inside here if I wish to. So I could do variable. And inside the variable, I can use the custom border if you wish to. And now if I ever change it, which I probably want, this will update. Let's have a look. As you can see, it's all working. And if I was to update it, it will update everywhere. So it's all working. Let me put it. So you could do custom variables in here if you wish to. We also need to add border radius bottom. Oops. This is going to be bottom right radius. And this is going to be 0.75 and we're going to add one more line. And this is going to be to the left side. And so as you can see, this is getting a little bit better now. I can push this a little bit from the left and the right first of all. So for this, let's do margin zero minus one. Sorry, one ram, I'm going to display everything as flex. So they're on one line. And I'm going to justify the content to be space between. So we have the icon on the right side. And I'm going to align everything in the middle just in case. Yep. So that's already looking good. If you wish to change the actual title here and the branding, we could do that as well. I mean, we could give it a custom class names or we could just target them saying like custom class names will be definitely a little bit better. I think I'm going to say span and first try out, for example, and then maybe we can do font weight of instead of I'm going to put 800. Let's have a look where this works. And for the branding, I'm actually going to leave it. Now the next thing I'm going to do is sort out the animation because it's a little bit, it's not that nice. So what we can do on the actual card here, we can set a transition. Transition or and we can set this to 0.1 second is in out. And say if I was to hover over now, you will see that the transition is a little bit better. So that's working great. Now what I'm going to do, this is pretty much done. Let's test it first of all on. Well, looking cool. And yep, everything is looking cool. That's exactly what I wanted. And the last thing that I'm going to do is super quickly. In fact, the my speed of the video for this is just going to replace the images here and the details. Cool. And that's it. So we now have all the images in here and they're looking great. All right. The last thing that I'm going to do is just in case if you ever wanted to showcase a little bit more work, we could potentially add a little button here. Just outside the selected work actually, I'm going to click on this. And outside here is where I'm going to add one more div. And this div is just going to be with the class name of maybe like view or work. And then inside here, I'm going to add a link. So a href and it's going to be equals to maybe your portfolio page. I'm not going to create one. So no, I'm going to leave it as empty. And this is going to be class of button and then button with an icon and then it's going to say view or work like so. And then I could just copy an SVG. So I'm going to copy an SVG super quickly, paste the SVG in here. And if we go back to the website, it's looking okay. But I want to make it here in the middle and make it a little bit bolder. So for this, I'm going to copy, go to styles and somewhere around here, I can put view or work. And let's put a little margin to the top or REM display can be flex. And then justify content can be center like so. All right. This is a little bit better. Maybe that can be white and a little bit bolder. So I could potentially just target the button super quickly and just say dot button. And then I can just say color, set it to white. And then I can just say font weights to be 800. And I'm going to consider the selected work finished. And now we can focus on the next section, which is where you kind of like showcase the services that you offer. All right. Let's start creating the services. So for that, let's go back to the index dot HTML. And underneath the last section that we created is where we're going to create another section called services section with the class name of services. And inside this section, we're going to have a container. And inside this container, we're going to have the heading. So Dave with the class name of section heading that we created earlier. And then inside here, we're going to have an H1 that is going to say services. And we're going to have a little paragraph that's going to say, let me copy and paste it. Actually, this is going to say I've been developing websites for a while, but also I equally enjoy creating other digital products. And save this. If I go to the HTML, you'll see that this is already taking shape. And this is because we actually created it here. Obviously for this section, we modified it, but this is the default one, which is black, and it seems to work already. So the first thing that we could do is put the spacing on the top and the bottom of the section. So potentially we could just grab services. Let's go down here. Let's put a comment super quickly. I'm going to put services, and then I'm going to put dot services, because this is a class name, obviously. And then we can do padding of four REM zero. And then I'm going to do a background color to actually inherit it from the original color. So this is just going to inherit the original background color, border, bottom, two pixels solid, and then black, like so. And we have the services already looking pretty good. So essentially we're going to have kind of like three columns, one on the left side, one middle and one on the right. And the left and the right will contain the text and the middle will contain the image. Let's call it something like maybe so we have to be inside the container. Let's give it a dip with a class name of services, maybe great. Just so we know what it is. And inside here, as I said, we're going to have three columns. So I'm going to do a class with this is going to become a little bit long. I'm going to do services, great. And then maybe call just so we know what it is. So this is going to be called one. First of all, I'm going to create one more. So call two. In fact, I'm going to put image here. And then the last one is going to be called three. And this is going to be again, this is going to be text. So if I look into it, we have them stuck in call one, image and call two. This is, this is all good for mobile. When we go on desktop, I also want this to be on the left, middle and right. So we can go back to the style CSS here and we can say services dash, great. And then I can convert this into display grid. First of all, can give it a little bit of a gap to Ram. Yep, that's absolutely fine. So when we go to desktop, we can do a media query. So at medium, and then this is going to be mean with of 1024 pixels. And inside here, I'm going to add the services grid like so and say grid template columns, repeat four times one fraction, one fraction each. And I know that we have three columns. I want to create two in the middle. So we can have the image in the middle that I'm going to add kind of like taking two columns. And you'll see how this works in seconds. So at the moment, if I inspect this and let me pull this up. So you can see if I was to click on the grid here, you'll see that we actually have four columns. If we scroll down, sorry, if we put down this mobile, they're stacking up. And this is how I want them. Let's look into how we can make the image span across from here to here. Now this is another way that we can do. So for the image, we can actually we'll have to give it a class name. So instead of call, we could potentially just change this to an image. And now what I'm going to do is add another class in here. And this is going to be underscore underscore underscore image grid column to span from the second to the fourth. And now I can also, and now if I save this, you will see that the actual image is now taken two columns from the second number here. And that's how it's going to work. And for the rest, they were already in the correct place. So I'm not going to touch them. And if I go down, everything is working well. So let's start by adding some of the content. So let's go into the first column here, where we can add a little bit of text. And let's say that we want to add, I'm going to do it with divs. But let's say that we want to add an H3 here. And let's say web design. And then for the web design, I'm going to put a paragraph in here. And just put a little bit of text. Like so, I've been developing websites for a while, but I was to quickly enjoy creating other digital products. And that would be fine. Just a little bit of demo text, it doesn't matter too much. And let's create potentially a linking here. So a href, if you want it, you could do that. And then you can do learn more, maybe you can add the icon and so on. So I'm going to copy this one more time. And this is going to be web development, for example. I'm not going to touch anything else, but just to show you, we have web design and web development here. And I'm going to do exactly the same thing for the other column on the right side. So I can just copy both of them and put them inside here. And now these ones can be something like branding and SEO, for example. I don't know anything like this would be absolutely fine. You might as well add the image as we are already here. So I'm going to go inside the middle column here and remove the image from here and just add IMG. Source, this is going to be equals image. And then this is going to be equals services. So and then I'm going to put an old tag. Services I offer or something like this. And for the weight, I'm going to put 611 height is going to be 764. And I'm going to put the loading equals to lazy. Save, I need to close the image as well. And we are good to go. I'm going to add this up and we are good. Okay. So that's not so bad. The image will be responsive because we made all the images responsive early in this tutorial. So that's cool. And now we can just style some of the sections in here and make the image a little bit pretty. Oh, for the image straight away, if we go back, what I could do somewhere around here, I can do services, great underscore underscore image. And then I'm going to target the actual image. And I'm going to say I want the max width of this image to be 400 pixels. I want it to be always 100%. And I want to put the border radius to be 250 pixels. The border, border can be two pixel solid and variable and then black. Let's have a look. That's already looking good. Also, I want to make sure that this image is actually in the middle. So I could use the grid here that I added. So in fact, we can put this as display flex. And then we can do justify content center and align items center. And now everything should be in the middle. Let's look into the actual headings because they look a little bit bigger than I actually want them services, great. And then just target all the headings. So maybe somewhere around here, I'm going to say services, great. And say H3 and let's just say font size 1.875 RAM. And that's going to make them look so much better. Now I'm seeing a little bit of a problem here. I need to add a little bit of a margin just on the first two elements here. So what I could do is inspect this and let's grab the services, great column. I'm just going to target the diff. I think this would be a little bit easier. Of course, you can give it a class name. That would be probably the sensible thing to do. So I'm going to do services, that great underscore underscore call. And I'm going to do first off type. And actually I need this, I need to put diff. So the diff inside first off type. And now I can do, let's say margin bottom off to REM, for example. Now this should add a little bit of space. Maybe we can do for just a double and that already looks a little bit better. This is pretty much done. So if I scroll down, as you can see, it's actually looking pretty decent. And we have a little bit of a separator here between the services that we offer. And this is going to be it for this section. So the next section will be a very big contact button inside here. And we are almost ready with the first page. All right. So let's save this. Let's copy a comment first of all. And I honestly don't know what to call this. So big, big, big contact button. I honestly don't know what to call this for now. I'm just going to have a something that describes what it is under the services. I'm going to create a brand new section. I definitely need to tidy things up. But don't worry. So good. So let's do a section. And this section is going to have a class name or let's say big contact button. Such a good name. And then inside here, I'm going to add a link. Href. And this is going to go to the contact dot html like so. And I can close it. So inside here, I'm actually going to create a div with the class name of container. So the first one div is going to have an H. So the first div is going to be kind of like the information. And the second one is going to be the icon. So let me show them in. So for H2 here, I'm going to say what should we let's let's just give it this class name. And say underscore underscore subheading. And then this is going to be something like have a project in mind. Question mark. And then I'm going to copy this, change it to H1 H1. And then instead of a subheading, I'm going to say heading. And I'm going to say something like, let's get to work with a exclamation mark. Or we can just put dot. It doesn't matter too much. We can even use or purple span that we created earlier. So we can do span and then wrap the dot between a maybe we can just say class of text. Perfect. Cool. Let's have a look. So we have those two looking great. We don't need to start them a little bit. And I'm going to add the same SVG that I've been adding pretty much everywhere. And I'm just going to add it underneath. Let's create this big contact form button. So I'm going to do it in here. And in fact, I'm just going to target the link. And let's start by giving it a little bit of padding for ramp top and bottom. And then left and right can be zero. Let's display this link as block. And then let's put a background color of variable yellow. And then let's put the text decoration because this is a link to none. I don't want it to be underlined. Now let's target the subheadings. So I'm going to do big contact button. And then this is going to be underscore underscore subheading. And then I'm going to do font, wait, set it to 300 because the defaults for the H tags, the headings is 800. So I'm resetting it. And I'm going to set the font size to be 2.25 rem. And I'm going to do line height to be 2.5. I think I'm going to leave the original heading the way this because I kind of like it. And now we kind of need to make this as flex so we can position the arrow to the right side or next to it. In order to do this, we can do copy this and let's target the container. So I'm going to do big contact button here and then dot container. And then I'm going to convert this into a flex and then flex direction to be column and then align items to be center. Let's have a look. Oh, okay. So, so this is going to be a mobile. If I scale down, you will see that this is going to look okay. Mobile, I think. Kind of. Yeah, this looks okay on mobile. But if I go up on desktop, it doesn't look right. So what I'm going to do is make a quick media query here, media. And this media query is going to be min width of seven, six, eight pixels. And then I'm going to do dot big contact button dot container. And I'm going to convert this into flex direction to row. And then I'm going to add a little bit of gap in between two for them. So this is now stuck in next to it and it's looking a little bit better. Of course, I could change this on hover as well. I think I'm going to do that just to make it a little bit cooler, I guess. So what I'm going to do is for the link here, I'm going to copy this and change the link on hover. And I'm just thinking, let's change the background, maybe, and I think that would be it. So instead of yellow, I'm going to do hover. Nice, potential we could add an effect here, transition. And then we can do all 0.1 seconds is in out and okay, this is a little bit better, I guess. And I definitely need to add border at the bottom. So maybe we can just do it here to have a look and yeah, that's already looking good. And I think that we have done with this button. One thing that would probably improve is maybe remove this. Now the footage is going to be more or less similar to the header. So what I'm going to do is actually grab the header, grab the styles and modify super, super quickly. So first of all, let's go to the HTML and find the header and here it is. And here it is. So I'm going to grab the header, the entire thing, and let's modify a little bit. So I'm going to paste this at the bottom here. I'm going to remove this section as we want to need it and paste. So of course, for the header, we're not going to need, we can have the logo. That's fine. So I'm going to change this to footer. I'm going to change this footer as well, the cast name. And I'm going to change the bottom to footer as well. So instead of a nav, I'm going to change this into a div with the class name or footer, maybe dash copyright, like so. And then we can write a little bit of text in here. All right. So I'm going to copy and paste some text in here. This is going to create the copyright sign. This is going to create a dot. This is going to create a dot. And I've just set copyright 2022 ready dot built with HTML and CSS dot hosted on GitHub potentially. Let's have a look at what else do we have? Instead of header, we need to change both of them here to footer. And we should be okay. So what I'm going to do now is copy the header styles. So let's copy the whole thing. And I'm going to change this super quickly. So there is quite a bit, but we'll fix it. So I'm going to paste in here and let's change everything. That says header to footer. Let's change everything. And then header talk. So now header navigation is what we don't really need. So I'm going to remove this and I'm going to say this to copyright. And this is going to be put a copyright. And then the rest can be deleted, I think. And instead of header, we can do footer for big screens. Foot and nav can be removed. Actually, this can be the copyright for the copyright and talk. Okay, cool. So now this needs to be changed to copyright, because I gave the copyright a name and I need to change it somewhere here. Copyright, copyright. Let's have a look. So if I go down, it doesn't seem to be working well. And let's have a look at why. So I have the grid. Okay, I generally don't know what's wrong with it, but we're going to have to debug it. So let's start from mobile. So on mobile, we're actually not doing too bad. Potentially I could center align the footer copyright. To do this, we can go to footer copyright somewhere around here and just say text, text align center. Could give it a little bit of planning, but that's already looking good. So something is happening when we go to the next media crease. So it's breaking. Let's have a look at what's happening. So we have the... Oh, okay, okay. So instead of... Yeah, so the copyright needs to be in the middle. And then the talk needs to be on the right side. Perfect. Now it's working. Potentially could make it a little bit bigger. But that's pretty much it from the homepage. All right, the next thing that we can look into is the contact page. So if I was to click on contact, we will see that we're not getting anything. And this is because we never created the actual page. So let's go and open the explorer here and let's create a brand new page called contact.html. So for the contact, obviously, because we're not using any framework like that, unfortunately, we have to do a lot of copying and pasting. And if you haven't changed something, let's say you change the head of the website, you're gonna have to copy and paste. This is why some people use frameworks like Angular, ReactView, and so on. But since we're making only a tiny website, it doesn't really matter too much. It's very easy to copy and paste and change things around. So what I'm gonna do is copy everything from index.html and paste it into the contact. The first few things that you might want to do is obviously change your text here, maybe set the title to contact or whatever in the description. Everything else stays the same. We could remove pretty much everything now. So from hero down to actually, I do like the marquee. Maybe we can keep the marquee. So I'm gonna keep the marquee and everything else after the marquee, we can remove up to maybe let's services, maybe up to the big contact button. So let's save this and let's have a look. So if we go back refresh, we have the contact page. Awesome. So the first thing I'm gonna do is change the menu here. So I'm gonna find the nav and on the nav, I'm gonna change the area current page to be the contact I'm gonna paste in here. And now if you see, we have the contact active. And if I click home, home is active. So that's pretty cool. One thing that I would definitely look into is to potentially make a little bit more spacing between them, just so they're easier to press. And maybe a little bit of padding on top and bottom should have done. But other than that, let's create a very basic contact page. Let's open the contact dot HTML and close pretty much everything else that we don't need. Underneath the, underneath the header and above the marquee tool is where we're gonna be creating the contact page. So I'm gonna create a new section and this section is gonna have a class name of let's say contact. And then for this, I'm gonna create a container. And inside the container is where we're gonna be adding the details. So I'm actually gonna create a little grid. So I'm gonna call this one, let's say contact grid, just so you know what it is. And inside this grid, I'm essentially going to have two diffs. So the first diff is gonna be like the H1 with the contact. And then I'm gonna add a little bit of text. I'm gonna copy it right now for you. And I will read as well. So this is the first text and then I'm gonna add another P tag here and read it. So view, world wrap. Okay, the text reads, Hi, I'm Rady, a web developer and content creator from Europe. With over 10 years of experience in the tech industry, I've worked for Google, Microsoft, so make this up. So right here on description, obviously, this is just a made up text for the tutorial. For the tutorial. And then the next paragraph that I have is I mainly make videos about web development on YouTube these days, which fits well within my educational background and interest in my free time. I like to build indie projects, indie projects that make the world a better place. So I'm gonna leave it like this. And also potentially we could have a few and also potentially we could have a few social media icons in here. So I'm gonna say find me on and then we're gonna create this in a second. And in fact, I'm gonna make this a little bit bold, just like the cheating super quickly. And let's okay, we have the contact, we have this. And on the right side is where we're gonna put the actual contact form. All right, let's create the other section first of us. So we make sure that we don't do too much before we have the layer sorted. So after this diff, I'm gonna create an actual form. So this form, it's gonna be, it's gonna have an action later on. I'm gonna put this, I'm gonna put this later on and show you how we can link it. But essentially, I'm gonna ask this to a class name of contact form. And inside here, and this is gonna have the method of post like so. And inside here is where we can create the form. Cool. So the first thing that I want to achieve is make sure that obviously mobile, this is fine because they're stuck in. So I want potentially mount the text first, and then the form. And then on desktop, I want the text on the left and the form on the right. All right, let's grab the contact first of all. And let's go to start.css and put contact. And let's make a little bit of space. So padding for REM of zero and border. Bottom of two pixels, solid variable, black like so. And then for the contact grid, I'm gonna say display as grid. So we can use the gap property of to REM. And this is gonna give both elements a little bit of gap, the form and the contact. And on bigger screens, so we're gonna do media. And then minimum width of one to one, zero to four pixels. And then we're gonna do that contact grid. And this is gonna be equals to great template columns, one effort, one effort for each. So as you can see, we have contact on the left and we have the form on the right, which is exactly what we need. Oh, and this on the footer looks like we have a symphony has spotted just now on the footer, we have the border at the bottom. So potentially I can remove that super quickly. Sorry about that. Border bottom. Okay. Yep, that pixel. Cool. Now this is already pretty good. What we can do next is let's first of all test it. It's looking good on mobile. It's looking good on desktop. Now we can add some social media icons here and define me on. So I'm gonna find this now. Inside here, maybe we can do like an ordered list with the class name of find social socials. Let's call it socials. I think that would be fine. And then inside here, we do a list. And inside the list, we have a link with the href. And then this href can be something like let's say, let's say this is a YouTube one. So this could be something like HTTPS. And then we can do column slash slash youtube.com slash user. And then this is going to be a target underscore blank. And then we can do rail. As you can see, this specifies the relationship of the target object to the linked object. And we can do rail. And this is going to be no, no opener and no referrer. We close the link. We put let's say YouTube, for example. And then inside here, we put the image. So I'm going to put image and I've already got the icons. So I'm going to do image and then icons and then social YouTube. Here we go. Social YouTube. And then of course, we're going to need the width and the height, which I don't know. So I'm going to leave them as they are, but make sure that you look into them and add and that's pretty much it. Close this and that's pretty much it. Let's have a look. Here we go. We've got one. So now we can easily replicate this a couple of more times. And let's say we add GitHub. And then this is going to be GitHub. And of course, this is going to be changed to GitHub. Dot com. And then I'm going to add one more. Let's say the other one is discord. And then this is going to be discord. Like so, probably the link will be different on discord, but you can change that. And then the last one that I'm going to do is let's say we have Twitter and Twitter here. And that's pretty much it. And that's pretty much it. Now that we have them, let's start them super quickly. So I'm going to grab the social class name and add it somewhere at the bottom here. For the socials, let's start with the resetting date. And we're going to reset all of the margin to zero, adding to zero display, flex, and then flex direction can be a row. And then justify content can be space between like so. And then gap can be too red. Let's have a look. Now this is pretty much the mobile. But I also kind of like want to centralize them, remove maybe the underlines and to do this, I'm going to grab this and then put a for the link. And then we can do display them as flex. And then in this case, we can display them as flex direction column. So they stack underneath each other on mobile. And then we can do gap of 0.6 run between them. And then text decoration can be set to none. And then item align center. So the text is centered. You know what? That's actually already looking good on desktop is wow, you know. Yeah. You know what? I was gonna, I was gonna make them stack next to each other on desktop, but I kind of like this now. Okay. I'm going to leave this as it is because I kind of like it. Of course, feel free to add a hover effect. Maybe the black hover like that and out the job potentially. Okay. Now maybe you can do an effect and so on for the form. Since we actually only use an HTML and we don't have a way of actually processing a form, you could use a third party service. Now I wasn't able to find a good one, but at this point, this website here, which is free form backend for devs, it's called headlessforms.cloud. And I actually registered for this. And essentially, this is going to give you a very simple form. If you sign up, I'm gonna log in now. So once you log in, you can actually create forms from here. If you go to their website and if we go to pricing, I think that you can create one user, two forms per team and submissions per month, only 30. So it's not ideal. And also when you submit a form, we are actually redirected to the website back to your own website without any success or error messages, which is not great. But I just wanted to show you what you could do. So I'm not saying that you should use this website, but most websites, if you find a better one, let me know in the description below. Anyways, to link this, all you need to do is create any form. And then you can edit the form here and somewhere on overview, I believe, somewhere under integration, they actually give you this. So they give you this action link. So I can literally copy this action link here from here and make sure that you have your method set to post. So I'm going to go back to my HTML. And where I created the form here in action, I'm going to paste this link. And then this is obviously using my ID and so on. And then inside here is where I can create the inputs. So for the input, I'm going to wrap them in a div super quickly. And let's say we wrap them in divs like so. And let's say we have a label. And this label is for name, the input of name. And then let's say your name, something like this. And then we can do input. And then this input can have the name of name in this case. And it can have the ID of name as well. And type can be text. And we can set it as required. Required, if you wish. So this is the first input that we have. I'm going to copy this and I'm going to paste one more in here. This is going to be, let's say email. So we need to change this to for email. We need to change this name to email. And the ID can be email. And the type can be email. Nice, required as well. And the last one that I'm going to do is let's copy this one more time. And let me space them out so you can see. And the last one that I'm going to do is going to be something like message. So let's put message everywhere. But instead of an input, we're going to do a text area. So text area like so, we need to close it. And for the name, we can put message. We can put an ID of message. We can put columns to be around 30. We can add rows to be around 10. You can put the spell checker to true. Okay, not bad, not bad. Okay, this is good. And let's have a look at what we get. So if I go back, you'll see that our form is here. And we forget the button actually. So let me add the button as well. Underneath everything else, we're going to add one more diff. And this diff is going to contain all input. So input is going to be all button here. So the type needs to be submit. This is important. So we can submit the form. And then maybe we can give it a class name or button with the button dash dash primary that we created early in this chapter. And then value, we can just say, send it, send it. Cool. This is not so bad. Oh, that looks, we definitely need to reset this as well. Like border and so on. So I can do this. And this form should actually work. So I've put rad. And if I put my email, and if I put the world and submit it, this is only going to. So this is what I don't like about this form. It just goes straight to my website. It didn't say, oh, the submission was successful and things like that. So I don't fully like this. And I think they're making you pay in order to have that option. Which other than that, if you go to overview now, you will see that we have two submissions. I've tested this the other day. And the second submission, I can click on submissions. And here it is the second submission. I just added a few seconds ago, name, write, email, hello, writer, okay. And message. Hello world. Cool. That's pretty much how you can wire this up. So the next thing that I want to show you is let's go to this is how we can style this super quickly. So we're going to have to style the input. So let's go back to start.css and somewhere at the top where we have all the kind of like global elements. I'm going to start from here. Let's start with label. For the label, I'm going to say font. Size to be one ram to make a little bit smaller. And I'm going to say margin bottom of 0.4 ram. And then I'm going to display this block. The label should look a little bit better now. And now for the input, let's do input. And we can also target the text area as well. Text area. And then inside here, we can do width of 100%. And we can do border of two pixel solid variable dash dash black. And then maybe we can do, let's give it a little padding. So padding is going to be 0.8 on top and bottom ram 0.75 on left and right. And then border radius is going to be 0.25 ram. And then we're going to do font family to inherit the actual font family. Because if I don't add this, I think that the text area is going to look odd. Look at this odd text. So I want this to inherit the original font. So as you can see, this fix it when I put inherit. Now, one thing that I'm seeing here straight away is that for some reason the button is smaller than the actual form. And this is because we actually gave padding to the input. Which means that we have the input as 100% plus the padding that we've added. Now, in order to fix this, you could do this inside here. And you can do box sizing of border box. And this should fix the problem. As you can see, everything is now aligned. And this is basically making the border to be to include the width. So the full width, including the border. And you might see this done on websites usually where they pretty much target everything and they reset the box sizing. And you can do that. That's not a problem. In fact, it could be a good thing. Now that said, let's have a look at what else do we need. This is pretty good so far. Potentially a little bit more space between them. But these are things that you can always fix. And the form now works. If we go back to mobile super quickly and scale down, you will see how this works. And this is looking all right. Not so bad. So that's how you can create multiple pages and link them. Now, I'm not going to do the other pages because the about page is essentially exactly the same as the contact. In fact, you can make the you can make the classes kind of like generic. So you can reuse them on the about page. And what you can do is change this to about and change this into a picture. And that would work really nice. And then for the portfolio, you can do something similar. And then just list some of your portfolio work. I haven't done a very good design on this. So I'm going to leave it as this for today. And that's pretty much everything from this tutorial. I hope that you enjoyed it. I hope that you learned something new. Consider subscribing to my channel. Like this video if you found it useful. And hopefully I will see you in the next tutorial. Thank you very much for watching.