1 00:00:07,689 --> 00:00:08,830 In this video. 2 00:00:08,860 --> 00:00:12,310 Let's go ahead and then style the header. 3 00:00:12,670 --> 00:00:14,270 Well, before we continue. 4 00:00:14,350 --> 00:00:16,630 Guys, I make some mistake here. 5 00:00:16,660 --> 00:00:19,330 Let's fix it and then we continue. 6 00:00:19,360 --> 00:00:24,010 First I made some typing mistake, supposed to be content. 7 00:00:24,280 --> 00:00:30,730 And then for this day we are going to wrap all this element inside. 8 00:00:30,760 --> 00:00:39,790 So let's cut the paragraph and then the link and then place it inside the header content because I want 9 00:00:39,790 --> 00:00:45,240 to control the entire children using the header element. 10 00:00:45,250 --> 00:00:47,340 So back to the CSS. 11 00:00:47,350 --> 00:00:52,150 First is let's go ahead and then reset the browser defaults. 12 00:00:53,170 --> 00:01:01,780 So here we go, asterisk and then margin is zero, padding the zero. 13 00:01:01,780 --> 00:01:07,450 And then the border box or box sizing is also border box. 14 00:01:07,540 --> 00:01:12,750 And you can see that there is no margin or padding around the elements. 15 00:01:12,760 --> 00:01:17,590 So before you continue, let's add some global style to every element. 16 00:01:17,590 --> 00:01:24,550 So I'm going to add it to the entire body and I'm going to give font family to the entire body using 17 00:01:24,550 --> 00:01:25,980 what is called Roboto. 18 00:01:25,990 --> 00:01:29,380 So I'm going to be as Roboto. 19 00:01:29,920 --> 00:01:35,800 And then if there is no font of that sort, then it should fall to sans serif. 20 00:01:35,800 --> 00:01:40,900 And let's add font size of 1.4 ram. 21 00:01:41,080 --> 00:01:46,090 And lastly, let's give it a background color of hashtag. 22 00:01:46,120 --> 00:01:48,700 F five, f five, f five. 23 00:01:48,700 --> 00:01:50,230 And then that is it. 24 00:01:50,230 --> 00:01:51,220 So let's save it. 25 00:01:51,220 --> 00:01:52,720 And now have a look. 26 00:01:52,720 --> 00:01:56,140 And this is what we have as compared to the final one. 27 00:01:56,140 --> 00:01:57,970 We are on our way. 28 00:01:58,000 --> 00:02:01,120 The next step is let's select the header. 29 00:02:01,120 --> 00:02:02,380 So here we go. 30 00:02:02,380 --> 00:02:03,910 So I will give it a comment. 31 00:02:03,910 --> 00:02:05,290 Says Header. 32 00:02:09,580 --> 00:02:14,250 And for here, I'm going to use this play called Flex. 33 00:02:14,260 --> 00:02:21,820 So next step is let's give it Display Flex because I want to control the children in it. 34 00:02:22,150 --> 00:02:30,670 And with that, let's give it a height of a v h that's V port height, and let's give it a background 35 00:02:30,670 --> 00:02:34,550 color for the meantime and let's see what we are styling. 36 00:02:34,570 --> 00:02:37,180 Indeed, this is what we are styling. 37 00:02:37,330 --> 00:02:43,800 The next step is, instead of this background, I use an image, so I'm going to make use of background. 38 00:02:43,810 --> 00:02:53,470 And then you are to locate where the image is for a slash images and I use the header image jpeg. 39 00:02:53,500 --> 00:02:55,740 So if I do that, this is what we have. 40 00:02:55,750 --> 00:02:58,780 But you can see that the image is not that visible. 41 00:02:58,780 --> 00:03:04,090 So we are going to use some images properly, for example, position to be center. 42 00:03:04,150 --> 00:03:09,430 So going to be as background position at the center. 43 00:03:10,240 --> 00:03:16,780 If I do that now, you can see everything is coming to life, but I want the image to be more visible 44 00:03:16,780 --> 00:03:18,640 inside a container. 45 00:03:18,730 --> 00:03:22,400 So I'm going to use background size called cover. 46 00:03:22,420 --> 00:03:25,150 It's going to be background size. 47 00:03:25,150 --> 00:03:29,010 So let's make use of cover and this what we have. 48 00:03:29,020 --> 00:03:33,130 But I want to position these elements at the start here. 49 00:03:33,130 --> 00:03:39,730 If I put it here, it's not all that visible because of the color of the flower and then the text. 50 00:03:39,730 --> 00:03:46,310 So here to achieve that we are going to make use of justified content to be center and then the align 51 00:03:46,330 --> 00:03:48,950 items to be flex starts. 52 00:03:48,970 --> 00:03:51,000 So with this one, let's see. 53 00:03:51,010 --> 00:03:54,160 And now this is what we have achieved. 54 00:03:54,340 --> 00:03:57,280 But I want this one to be at the center. 55 00:03:57,280 --> 00:04:04,640 So I'm going to select the header which is this one and use text align to be center. 56 00:04:04,660 --> 00:04:11,610 So here we go, dot header content and text align center. 57 00:04:11,620 --> 00:04:16,690 And to give a part around it as ten P6, save it. 58 00:04:16,690 --> 00:04:20,890 And this is what we have as compared to the final one. 59 00:04:21,010 --> 00:04:26,170 So let's style the H one and it is under header content. 60 00:04:26,200 --> 00:04:26,860 Each one. 61 00:04:26,860 --> 00:04:28,660 I want to target this one. 62 00:04:28,660 --> 00:04:34,990 So I'm going to be as I can copy this one and down here I'll paste it and I want to tag it. 63 00:04:34,990 --> 00:04:36,160 The H one. 64 00:04:36,250 --> 00:04:47,230 So for this H one, let's give it a font size of five ram font size of five ram and then padding to 65 00:04:47,230 --> 00:04:55,210 be ten pixels and then margin top, let's give it as 20 pixels and then the color of it. 66 00:04:55,240 --> 00:05:01,690 I use hashtag 14213 dx so save it. 67 00:05:01,690 --> 00:05:08,050 And now this watch we have as compared to the final one, we are almost there. 68 00:05:08,200 --> 00:05:12,520 So next step is less tile the button here. 69 00:05:12,520 --> 00:05:19,330 That is the h with remember it's a link, but we can style it to have something like this. 70 00:05:19,330 --> 00:05:25,350 So we are going to target the class of header and then a link here. 71 00:05:25,360 --> 00:05:26,920 So here we go. 72 00:05:26,950 --> 00:05:33,250 I can copy this one and down here I'll paste eight and change this one to the link. 73 00:05:33,250 --> 00:05:34,450 That is a link. 74 00:05:34,450 --> 00:05:36,730 So let's see how we are going to style it. 75 00:05:36,730 --> 00:05:45,640 So let's remove everything from here and let's start with the background colour to be hashtag hashtag 76 00:05:45,640 --> 00:05:54,550 three point FS and next s, let's give it a colour as hashtag three, three, three and next is let's 77 00:05:54,550 --> 00:06:01,360 give it a border of one paste solid three, three, three. 78 00:06:01,480 --> 00:06:16,600 And the next one is let's give it a padding as $15 and then $20 and font size of 1.2 ram and then font 79 00:06:16,600 --> 00:06:17,350 weights. 80 00:06:17,350 --> 00:06:22,180 Let's put it as bold and cursor. 81 00:06:24,800 --> 00:06:27,290 Are as point to save it. 82 00:06:27,290 --> 00:06:28,430 And let's have a look. 83 00:06:30,430 --> 00:06:32,460 And this what we have. 84 00:06:32,470 --> 00:06:35,630 So let's remove the text declaration. 85 00:06:35,650 --> 00:06:37,290 So here we go. 86 00:06:37,300 --> 00:06:41,200 I'm going to be as text declaration to none. 87 00:06:41,320 --> 00:06:43,540 And now save it. 88 00:06:43,540 --> 00:06:45,560 And this what we have. 89 00:06:45,580 --> 00:06:51,210 So let's go ahead and add some spacing between the paragraph and then the link. 90 00:06:51,220 --> 00:06:56,320 So our target, the header contents and then the paragraph that is the P. 91 00:06:56,440 --> 00:07:05,200 So I our select this one and then paste it here and remove everything from here and select the P tab. 92 00:07:05,290 --> 00:07:09,660 And I want to give it a margin of ten parsecs. 93 00:07:09,670 --> 00:07:17,680 So let's see now I think I can increase it to let's say 20 and now this one looks good. 94 00:07:17,680 --> 00:07:21,040 So let's try on mobile and see if it's okay. 95 00:07:21,040 --> 00:07:24,730 Yes, I think this book as compared to the final one. 96 00:07:24,730 --> 00:07:31,390 So let's reduce the number of texts here to let's say something like this. 97 00:07:31,420 --> 00:07:32,620 Yeah, I think it's good. 98 00:07:32,620 --> 00:07:35,770 This is a final one and this is what we are building. 99 00:07:35,860 --> 00:07:41,830 So the next step is let's go ahead and then implement this number in the next video.