1 00:00:00,810 --> 00:00:06,630 No sign to start about S. So let's get into court again. 2 00:00:07,790 --> 00:00:13,110 And by the way, if this happens too, don't worry, it just means that we lost connection to and splashed 3 00:00:13,110 --> 00:00:16,110 and the image will appear then later on. 4 00:00:16,560 --> 00:00:16,970 Don't worry. 5 00:00:16,980 --> 00:00:18,100 The image is still there. 6 00:00:18,120 --> 00:00:19,220 It didn't disappear. 7 00:00:20,910 --> 00:00:24,960 So when we live there, we need to go to our e-mail. 8 00:00:26,930 --> 00:00:28,610 Now create our next section. 9 00:00:35,730 --> 00:00:38,430 Which was the about section right after. 10 00:00:42,550 --> 00:00:45,130 I mean, section ends, not a comment. 11 00:00:46,990 --> 00:00:47,680 About. 12 00:00:50,830 --> 00:00:54,250 And then to compare precedent and and of about. 13 00:00:56,890 --> 00:00:58,680 We could also tap into your section. 14 00:01:04,670 --> 00:01:08,180 So let's take this to compliment our success also. 15 00:01:11,360 --> 00:01:20,600 They are beginning and ending tags, delete them and comment this out, OK? 16 00:01:25,120 --> 00:01:30,880 Now, let's go back into our e-mail, because we now need to create this section, so we're going to 17 00:01:30,880 --> 00:01:38,020 create a section tag which are going to give the idea of about. 18 00:01:41,140 --> 00:01:43,090 Within here, we're going to create an H2. 19 00:01:44,630 --> 00:01:47,810 Pistorius just have the title of about us. 20 00:01:49,770 --> 00:01:55,530 Then after Easter, we'll have a generic container, which could contain two things. 21 00:01:56,070 --> 00:02:00,500 So let's create a container about Dasch container. 22 00:02:03,920 --> 00:02:05,330 And there should be a class. 23 00:02:11,140 --> 00:02:16,630 OK, so within this, we're going to create to contain two things, first of all, in our class of not 24 00:02:16,640 --> 00:02:22,690 generic generic container of about the image. 25 00:02:23,910 --> 00:02:31,530 And after this container, we'll have another one with the class of about description, and this is 26 00:02:31,530 --> 00:02:37,290 where the entire discussion for about section will live, about description. 27 00:02:40,490 --> 00:02:47,300 OK, within all about description, we'll have a tree which will have now also. 28 00:02:48,930 --> 00:02:57,540 I shall give the class no need to give it the class, but we will take your time in here about a company. 29 00:03:02,860 --> 00:03:09,520 I just like giving ideas because I use a lot of JavaScript and you need ideas, and if they're going 30 00:03:09,520 --> 00:03:16,490 to create a paragraph that I would create here, just a generic line, Ipsen, and leave it open with 31 00:03:16,490 --> 00:03:17,620 33 dots. 32 00:03:19,010 --> 00:03:23,660 Now, after paragraph tag, the last thing we need is a pattern. 33 00:03:23,960 --> 00:03:26,390 So, again, we're going to create a pattern tag. 34 00:03:28,320 --> 00:03:36,390 And this would also have the classes of the and then dot beauty and danger, the danger. 35 00:03:37,970 --> 00:03:44,600 And within here, we're going to create a text of learn more. 36 00:03:49,820 --> 00:03:56,120 OK, and that's actually it for about S.A.M., so let's get into styling this section. 37 00:04:03,550 --> 00:04:05,410 No, I'm going to start our. 38 00:04:06,660 --> 00:04:13,140 About section white, about about section comment, I'm going to create general styling for all of my 39 00:04:13,140 --> 00:04:23,700 sections, so everything that will have a section tag will have a height of 100 viewport heights and 40 00:04:23,700 --> 00:04:30,460 a width of 100 percent of its container and also give it a margin of auto. 41 00:04:31,170 --> 00:04:35,490 And this just means that my content will be then placed automatically in the center of the page. 42 00:04:40,550 --> 00:04:47,480 If I don't do this, then each section that I create, I need to type this in and I do not like to type 43 00:04:47,480 --> 00:04:48,550 in unnecessary code. 44 00:04:48,860 --> 00:04:53,630 So this just means I already applied the section. 45 00:04:54,020 --> 00:04:59,090 I replied all sections that I'm going to start from now on a height, a weight and a margin ordo. 46 00:05:00,650 --> 00:05:07,340 Another thing I know I have three sections upcoming, the first section background, I want to be white, 47 00:05:07,610 --> 00:05:12,860 but the second one, so tenth child. 48 00:05:14,250 --> 00:05:23,280 And there are another way of using our children, which are odd and even and I can now target the old 49 00:05:23,280 --> 00:05:29,970 ones and tell them he when there's a odd one, then he should have the background colors actually all 50 00:05:29,970 --> 00:05:32,090 at once will have a dark background color. 51 00:05:33,260 --> 00:05:41,360 OK, and here also general settings for our each tooth, they should have a font size of six RAM. 52 00:05:44,630 --> 00:05:49,890 So with this being done, I actually take a look in our Web page and there we go. 53 00:05:51,110 --> 00:05:55,150 So the section already has a height of 100 percent, the next one. 54 00:05:55,400 --> 00:05:59,620 And when we going to create the next section, it will automatically have a height of 100 percent. 55 00:05:59,630 --> 00:06:01,790 But the background color will be dark. 56 00:06:02,240 --> 00:06:04,730 And for the color of the text, we will take care of that. 57 00:06:06,600 --> 00:06:13,410 OK, so let's get back into our code and show them, like, how this is arranged so they should be here. 58 00:06:14,770 --> 00:06:18,460 Now, let's get back into court and start talking about section. 59 00:06:28,760 --> 00:06:31,220 So first, we need to grab on to the idea of about. 60 00:06:34,450 --> 00:06:36,030 We're going to display it as Fleck's. 61 00:06:40,170 --> 00:06:45,090 And as soon as we do this, we will see that all about doesn't look that good. 62 00:06:45,510 --> 00:06:52,890 So let's go back in here and flex it to the flex direction in the column. 63 00:06:52,890 --> 00:06:55,610 And as soon as we do this, this is much better. 64 00:06:57,920 --> 00:07:01,970 Now we need to justify the content to the center again. 65 00:07:04,720 --> 00:07:12,490 And we need to align the items on the center since we do this, we have our section here and also our 66 00:07:12,490 --> 00:07:13,780 navigation should already work. 67 00:07:13,800 --> 00:07:16,830 So if I click on about, then this will send me down here. 68 00:07:17,200 --> 00:07:25,510 And as I said, if you go out of style and coming back in scrolls, scroll behavior smooth. 69 00:07:26,380 --> 00:07:31,180 Go back up here, click on about then this will have a smooth scroll behavior. 70 00:07:32,690 --> 00:07:34,260 But this will get annoying. 71 00:07:34,280 --> 00:07:36,350 So let me comment this out again. 72 00:07:37,350 --> 00:07:40,500 Now, let's go back to our above section, so down here. 73 00:07:45,080 --> 00:07:46,310 Next up, we're going to. 74 00:07:47,500 --> 00:07:54,700 Are about container, so I'm going to target the about section again within this class of about the 75 00:07:54,700 --> 00:07:55,270 container. 76 00:08:04,580 --> 00:08:12,020 Now, again, I want to have a image later on in this, so first of all, I'm going to limit the width 77 00:08:12,020 --> 00:08:14,950 of this container to 1200 pixels. 78 00:08:16,100 --> 00:08:19,700 I'm going to display this flex because we have two things within here. 79 00:08:20,840 --> 00:08:22,400 That container we have. 80 00:08:22,760 --> 00:08:24,320 Let me go into our e-mail. 81 00:08:25,100 --> 00:08:28,310 We have this depth of image. 82 00:08:29,320 --> 00:08:36,340 And then we have this stiff of about description, an SUV displayed as flex, then it will flex these 83 00:08:36,340 --> 00:08:40,150 two items on this one and this one in the specific direction. 84 00:08:46,290 --> 00:08:47,760 So let's go through this again. 85 00:08:48,810 --> 00:08:52,230 And they also give it a bit of a margin from the top 86 00:08:55,620 --> 00:08:56,400 of six one. 87 00:09:00,170 --> 00:09:01,050 See how this looks. 88 00:09:01,070 --> 00:09:06,020 OK, so the container is now limited, one thousand two hundred pixels. 89 00:09:08,960 --> 00:09:11,510 Not a star or image or introduce or image. 90 00:09:11,990 --> 00:09:18,050 Again, the idea of about and now target the class of about image. 91 00:09:21,180 --> 00:09:25,260 I'm going to create now an image which will have a Menwith. 92 00:09:27,400 --> 00:09:35,410 Of 550 pixels, now, whatever happens, this image with should not go on the left of five hundred five 93 00:09:35,410 --> 00:09:38,510 hundred fifty pixels now for the image itself. 94 00:09:39,340 --> 00:09:49,840 We are going to go again with a background image and you are l and just go up here actually going to 95 00:09:49,840 --> 00:09:51,420 copy everything that I did here. 96 00:10:00,560 --> 00:10:09,140 Second is in, but for the Eyedea going to use another ID, which you can get, actually you can go 97 00:10:09,470 --> 00:10:18,650 go ahead and choose whatever image you want so you could go to splash and let's say you want to do. 98 00:10:20,910 --> 00:10:24,260 So that's why you want this image or you want it? 99 00:10:24,310 --> 00:10:32,240 We are all nuts image and just one image and copy this idea because right now we have this one. 100 00:10:32,610 --> 00:10:42,030 If I were choose this other ideas I can just copy this winter could replace this here, save it. 101 00:10:42,050 --> 00:10:44,130 Actually, go to my Web site. 102 00:10:47,140 --> 00:10:48,030 Hit refresh again. 103 00:10:48,070 --> 00:10:53,650 I don't know why unsuppressed constantly does this where we keep losing our connection. 104 00:10:53,670 --> 00:10:57,930 OK, so this will load and believe me, it will have that not image in it. 105 00:10:59,580 --> 00:11:01,380 So let's get back to our starting. 106 00:11:06,500 --> 00:11:14,900 The last thing we need to do, you know, about section is talk about Ida again and within this to about 107 00:11:14,900 --> 00:11:15,620 description. 108 00:11:20,020 --> 00:11:27,490 And what I want to do here is give it a petting to the left of the rim now before I hit Save, let me 109 00:11:27,490 --> 00:11:28,990 show what this mean. 110 00:11:28,990 --> 00:11:30,580 Hey, there's doughnuts. 111 00:11:31,830 --> 00:11:33,820 I want to have a padding here to the left side. 112 00:11:33,830 --> 00:11:39,550 So when I go back here and hit Save the Seat, now I have to rim of padding right here. 113 00:11:40,310 --> 00:11:42,700 Okay, so that's basically for our bar section. 114 00:11:42,710 --> 00:11:44,200 So soon the next one, pabai.