1 00:00:02,480 --> 00:00:05,580 The background image looks good but what is missing is 2 00:00:05,580 --> 00:00:09,540 the styling of our content of that hero. 3 00:00:09,540 --> 00:00:13,870 Now what we would need here is a container actually, 4 00:00:13,870 --> 00:00:16,660 which well, it contains these three elements, 5 00:00:16,660 --> 00:00:18,180 which we could then style. 6 00:00:18,180 --> 00:00:20,890 So we could add the styling list container, 7 00:00:20,890 --> 00:00:23,740 this black background color, and so on. 8 00:00:23,740 --> 00:00:25,320 Now for this container, 9 00:00:25,320 --> 00:00:29,320 we could use a non semantic block element, right? 10 00:00:29,320 --> 00:00:32,710 Because this container doesn't have any semantic meaning. 11 00:00:32,710 --> 00:00:35,500 It's just required to group the content here 12 00:00:35,500 --> 00:00:37,080 and to add styling to it. 13 00:00:37,080 --> 00:00:41,070 And that's again, a perfect example for our div. 14 00:00:41,070 --> 00:00:44,080 Let's add the div now in the code. 15 00:00:44,080 --> 00:00:45,830 For this, we'll go right here. 16 00:00:45,830 --> 00:00:50,830 Add a div and now at the content of this hero into it. 17 00:00:51,910 --> 00:00:53,450 Quickly format this here. 18 00:00:53,450 --> 00:00:58,450 And as this hero content is, well, a single item here. 19 00:00:58,540 --> 00:01:03,540 So to say, we could also add an ID being named hero content. 20 00:01:03,660 --> 00:01:04,492 With that, 21 00:01:04,492 --> 00:01:07,260 we can identify the different parts of that section. 22 00:01:07,260 --> 00:01:11,210 ID hero is the background image hero content is, well, 23 00:01:11,210 --> 00:01:13,130 the content that we want to display here 24 00:01:13,130 --> 00:01:16,480 as part of this hero area. 25 00:01:16,480 --> 00:01:20,860 This means we can now go back to our styles.CSS file. 26 00:01:20,860 --> 00:01:25,600 And then refer to the hero content ID, which was created. 27 00:01:25,600 --> 00:01:28,660 And how can we style this now? 28 00:01:28,660 --> 00:01:32,290 Well first, the hero content should be kind of 29 00:01:32,290 --> 00:01:34,630 in the middle here of that page. 30 00:01:34,630 --> 00:01:37,430 And therefore, maybe defining a width, 31 00:01:37,430 --> 00:01:41,230 a smaller width, than the actual entire page, 32 00:01:41,230 --> 00:01:43,130 would be a good first step. 33 00:01:43,130 --> 00:01:45,860 Therefore, we use the width property here. 34 00:01:45,860 --> 00:01:49,563 And the width could be maybe 900 pixels. 35 00:01:50,470 --> 00:01:54,660 Let's see if I zoom out a bit, maybe, then you see it. 36 00:01:54,660 --> 00:01:56,283 This seems to look all right. 37 00:01:58,300 --> 00:02:01,690 If we increase the width for maybe a bit, you can see it. 38 00:02:01,690 --> 00:02:02,650 That's good. 39 00:02:02,650 --> 00:02:05,260 Okay. So we define the width. 40 00:02:05,260 --> 00:02:09,180 Then we could add a background color 41 00:02:10,380 --> 00:02:12,670 to make it better visible. 42 00:02:12,670 --> 00:02:15,400 For this. I prepared an RGBA color. 43 00:02:15,400 --> 00:02:18,843 RGBA right here, because if we check the finished page, 44 00:02:19,690 --> 00:02:22,760 you see that it should be slightly transparent here. 45 00:02:22,760 --> 00:02:25,520 Therefore we have to change the opacity, 46 00:02:25,520 --> 00:02:28,740 and this can be done with an RGB color code. 47 00:02:28,740 --> 00:02:33,740 The color I prepared here is 51 47 and for the opacity, 0.8. 48 00:02:38,040 --> 00:02:39,103 Let's check this. 49 00:02:41,230 --> 00:02:43,520 Yeah, that's the tone. 50 00:02:43,520 --> 00:02:45,740 So we are coming closer to it. 51 00:02:45,740 --> 00:02:48,700 Then we could add two more properties 52 00:02:48,700 --> 00:02:51,100 we always use for styling purposes, 53 00:02:51,100 --> 00:02:56,040 with one being the box shadow with two pixels left to right, 54 00:02:56,040 --> 00:02:57,973 four pixels top to bottom, 55 00:02:59,180 --> 00:03:03,570 and a pixel blur radius and an RGB code 56 00:03:05,470 --> 00:03:10,470 of 68, 67, 67. 57 00:03:13,200 --> 00:03:16,040 And also a border radius. 58 00:03:16,040 --> 00:03:20,683 So to have these rounded corners again of eight pixels. 59 00:03:22,590 --> 00:03:24,350 We check the box again. 60 00:03:24,350 --> 00:03:26,410 Yeah, we see this looks even better. 61 00:03:26,410 --> 00:03:27,560 We still have the problem that 62 00:03:27,560 --> 00:03:29,430 it's not positioned correctly, right? 63 00:03:29,430 --> 00:03:31,520 It should be positioned, well, in the center and not in the 64 00:03:31,520 --> 00:03:34,000 top left corner, but we'll tackle this soon. 65 00:03:34,000 --> 00:03:37,670 And also the content here is directly positioned 66 00:03:37,670 --> 00:03:39,480 at the top left and bottom. 67 00:03:39,480 --> 00:03:41,090 So that doesn't look perfect. 68 00:03:41,090 --> 00:03:45,970 Therefore let's first apply the text align property here 69 00:03:45,970 --> 00:03:47,530 to center the content. 70 00:03:47,530 --> 00:03:51,430 Remember, if we apply text aligned to our container, 71 00:03:51,430 --> 00:03:54,137 then this will be applied to its content. 72 00:03:54,137 --> 00:03:55,450 Therefore, the texts we have in there. 73 00:03:55,450 --> 00:03:58,840 So we centered it and to get more space 74 00:03:58,840 --> 00:04:00,770 to the top and to the bottom, 75 00:04:00,770 --> 00:04:03,340 we could add some padding top and bottom. 76 00:04:03,340 --> 00:04:05,490 Padding left right is not required. 77 00:04:05,490 --> 00:04:10,490 So let's also add this padding here of top and bottom, 78 00:04:10,870 --> 00:04:13,600 maybe 50 pixels and zero left, right 79 00:04:15,080 --> 00:04:18,192 And yeah, I think just doesn't look too shabby, that's okay. 80 00:04:19,230 --> 00:04:21,209 However, we still have the problem that 81 00:04:21,209 --> 00:04:22,830 the box is not centered. 82 00:04:22,830 --> 00:04:25,210 And as we learned, we can use text aligned 83 00:04:25,210 --> 00:04:28,860 to center the text content of the container, 84 00:04:28,860 --> 00:04:30,240 but we also have an option to 85 00:04:30,240 --> 00:04:32,730 center our block elements right here. 86 00:04:32,730 --> 00:04:35,720 And which property do we need for that? 87 00:04:35,720 --> 00:04:39,750 We need the margin, so let's also use this concept. 88 00:04:39,750 --> 00:04:44,070 So margin, and here we don't need any margin 89 00:04:44,070 --> 00:04:46,640 top or bottom so we can set to zero. 90 00:04:46,640 --> 00:04:48,840 But left and right should be set to auto. 91 00:04:48,840 --> 00:04:52,420 With that, our element should be automatically centered. 92 00:04:52,420 --> 00:04:55,503 Let's see, yeah this is also working. 93 00:04:57,470 --> 00:05:00,130 However, the positioning of the element 94 00:05:00,130 --> 00:05:01,950 is still not correct. 95 00:05:01,950 --> 00:05:04,940 We want to be in the middle of that background image 96 00:05:04,940 --> 00:05:08,200 and not centered to the top, right? 97 00:05:08,200 --> 00:05:13,200 For this, we need to dive into another core concept of CSS, 98 00:05:15,040 --> 00:05:18,383 the positioning of elements in the document flow.