1 00:00:01,370 --> 00:00:01,930 ‫Hey, dad. 2 00:00:02,160 --> 00:00:03,930 ‫Welcome back, Siobhan, the site. 3 00:00:04,500 --> 00:00:10,770 ‫Now let's move towards the final section of our project, which is deep water now had a few important 4 00:00:10,770 --> 00:00:11,130 ‫things. 5 00:00:11,490 --> 00:00:12,570 ‫Read final section. 6 00:00:12,570 --> 00:00:18,600 ‫I mean, in terms of structure, we still need to add responsiveness to our website. 7 00:00:18,930 --> 00:00:22,890 ‫We still need to discuss about this hamburger menu at the top. 8 00:00:23,250 --> 00:00:29,190 ‫If you observe this, so there are a lot of things that are still remaining, but let us continue with 9 00:00:29,190 --> 00:00:32,400 ‫the final section in terms of structure. 10 00:00:33,060 --> 00:00:38,820 ‫Here we are going to work with Flexbox, which is pretty common, and we have already done this type 11 00:00:38,820 --> 00:00:39,630 ‫of content. 12 00:00:39,780 --> 00:00:43,020 ‫Or I should said this type of project multiple time. 13 00:00:43,440 --> 00:00:45,860 ‫That means different up here. 14 00:00:45,870 --> 00:00:51,390 ‫What we are going to do is we are going to create our Flexbox and then divide them into four bar ad 15 00:00:51,390 --> 00:00:56,490 ‫or type of content, which can be done by today if you see this type of design. 16 00:00:56,940 --> 00:01:00,690 ‫We are going to utilize SBT and how we are going to add it. 17 00:01:01,160 --> 00:01:04,980 ‫So the first thing we are going to do is let me remove this, as we do for now. 18 00:01:05,730 --> 00:01:10,110 ‫So if I remove my as we depart, this is going to be the current look. 19 00:01:10,470 --> 00:01:15,570 ‫So we are going to have this big photo, which is going to follow the background color. 20 00:01:15,900 --> 00:01:22,110 ‫And then on top of this, we are going to add as we do with alcohol and remember, as we do, is going 21 00:01:22,110 --> 00:01:23,760 ‫to be followed with white color. 22 00:01:23,970 --> 00:01:26,190 ‫So we are going to have something like this had. 23 00:01:27,780 --> 00:01:28,620 ‫If I refresh. 24 00:01:28,950 --> 00:01:32,830 ‫Yeah, so this is basically R.S.V.P., pick me right click. 25 00:01:33,430 --> 00:01:37,080 ‫I tried to increase this on AD if I select this part. 26 00:01:37,770 --> 00:01:39,600 ‫Here we have our bite, sweetie. 27 00:01:39,780 --> 00:01:43,410 ‫And this this whole thing is on background, basically. 28 00:01:44,750 --> 00:01:50,780 ‫That means we are adding white collars with you on the top of our background color. 29 00:01:51,960 --> 00:01:55,230 ‫I will be discussing more about this once we reach that stage. 30 00:01:55,380 --> 00:01:58,260 ‫But for now, let me quickly add this whole structure. 31 00:02:01,210 --> 00:02:06,970 ‫So here currently, I have my folder and inside this, I simply need to add a section. 32 00:02:07,060 --> 00:02:09,970 ‫You can dig division also, but I'm going with section now. 33 00:02:11,200 --> 00:02:12,640 ‫Let me give a class here. 34 00:02:13,840 --> 00:02:16,660 ‫That's a class length look on majorly. 35 00:02:16,660 --> 00:02:17,830 ‫We are going to have links. 36 00:02:18,550 --> 00:02:21,820 ‫And also, I need to add on background color to my order. 37 00:02:22,510 --> 00:02:26,400 ‫Let me select my folder and remember, I'm not adding container. 38 00:02:26,620 --> 00:02:27,070 ‫Why? 39 00:02:27,460 --> 00:02:29,110 ‫Because I need 100 percent. 40 00:02:29,620 --> 00:02:30,820 ‫That means head. 41 00:02:30,820 --> 00:02:36,220 ‫I'm going to have background color, which is going to capture the 100 percent screen. 42 00:02:37,150 --> 00:02:42,700 ‫Let me take wide, and here I need to pass theme section colors. 43 00:02:42,700 --> 00:02:43,470 ‫Something like this. 44 00:02:43,480 --> 00:02:44,060 ‫Remember? 45 00:02:44,800 --> 00:02:45,090 ‫Yeah. 46 00:02:47,280 --> 00:02:54,300 ‫Say this one, so this is on background color now for our focus section now head, I need to hide everything. 47 00:02:54,780 --> 00:02:55,880 ‫What I need to are. 48 00:02:55,890 --> 00:03:02,400 ‫Basically, we need to add for S. This is going to be about logo Greg Ling's legal stuff and social 49 00:03:02,400 --> 00:03:02,880 ‫media. 50 00:03:03,420 --> 00:03:04,030 ‫OK, cool. 51 00:03:04,110 --> 00:03:05,010 ‫So I just need to. 52 00:03:05,020 --> 00:03:10,460 ‫Ah, Deb, this is going to be my logo and then queue length. 53 00:03:11,430 --> 00:03:15,630 ‫And then I'm going to have and dealings, which is my legal length. 54 00:03:16,110 --> 00:03:21,720 ‫And then I will have a section of social media looks good to me. 55 00:03:22,200 --> 00:03:25,710 ‫The first thing I need to do is make this section as. 56 00:03:27,570 --> 00:03:34,920 ‫Flexbox, I'm going to say photo and then I'm going to have links and this is going to be Flexbox, 57 00:03:34,920 --> 00:03:37,690 ‫so I just need to go over display flags. 58 00:03:38,190 --> 00:03:42,150 ‫This will convert these four section into flex items. 59 00:03:43,210 --> 00:03:46,960 ‫Great, and I can arrange them, and I, as you can see, a horizontal manner. 60 00:03:47,320 --> 00:03:49,720 ‫Also, let me add justify content. 61 00:03:51,340 --> 00:03:55,620 ‫And I'm going to add space because that means all the remaining space. 62 00:03:55,630 --> 00:03:57,700 ‫Extra space will be between them. 63 00:03:58,330 --> 00:04:01,950 ‫There will be one property that I really wanted to go, which is Flex. 64 00:04:01,960 --> 00:04:05,500 ‫Wrap it up because we are going to squeeze it in mobile screen. 65 00:04:06,010 --> 00:04:13,360 ‫And let me add some padding bottom so we can have some space lifted and room looks good to me. 66 00:04:14,380 --> 00:04:17,080 ‫Now let's jump on to this logo section. 67 00:04:17,170 --> 00:04:20,460 ‫We basically need to add our image in terms of logos. 68 00:04:20,470 --> 00:04:26,530 ‫I just need to jump onto my media and here I just need to add my logo looks good. 69 00:04:26,800 --> 00:04:29,200 ‫The other thing I need to do is add up the dog. 70 00:04:29,560 --> 00:04:35,560 ‫And had I can add some description like All-nighters of 2020 to 2023, whatever we want. 71 00:04:36,130 --> 00:04:37,540 ‫So let me see this one. 72 00:04:37,870 --> 00:04:39,190 ‫This is about my logo. 73 00:04:39,730 --> 00:04:43,570 ‫The next thing is about our links, so I'm going to have our heading. 74 00:04:45,150 --> 00:04:47,490 ‫This is going to have my quick links. 75 00:04:48,330 --> 00:04:51,390 ‫Now remember, what I'm doing is I'm doing this part. 76 00:04:52,350 --> 00:04:56,730 ‫If you have this H2 and then you can have your unordered list here. 77 00:05:02,160 --> 00:05:06,960 ‫I'm going to have simple menus, which is going to be home packages and to other things. 78 00:05:07,650 --> 00:05:13,410 ‫Then again, I'm going to have our edge through here, which is going to contain about legal staff, 79 00:05:13,410 --> 00:05:15,000 ‫legal length, something like this. 80 00:05:15,600 --> 00:05:17,490 ‫So had I been hired legal stuff? 81 00:05:18,700 --> 00:05:26,290 ‫And again, I'm going to follow you and and there will be three allies, and here I'm going to add something 82 00:05:26,290 --> 00:05:29,620 ‫a little privacy policy cookies, something like this. 83 00:05:30,550 --> 00:05:31,050 ‫Great. 84 00:05:31,060 --> 00:05:34,390 ‫And then again, I'm going to have my social media links. 85 00:05:35,080 --> 00:05:39,790 ‫So here I just need to add it to dog on social media. 86 00:05:40,210 --> 00:05:47,200 ‫And once that is done again, the unlikely combination works well every time, and I simply need to 87 00:05:47,200 --> 00:05:50,290 ‫add icons with Chime for deeply leader. 88 00:05:51,010 --> 00:05:56,590 ‫This is going to be Twitter, Instagram and YouTube. 89 00:05:57,640 --> 00:06:04,540 ‫Remember, I'm not adding the actual links, but you can add, you know, you can add eggs here if I 90 00:06:04,540 --> 00:06:05,230 ‫jump back. 91 00:06:05,260 --> 00:06:08,410 ‫OK, now currently we are taking this whole question. 92 00:06:08,800 --> 00:06:13,120 ‫So what I need to do is I need to add container here. 93 00:06:13,680 --> 00:06:16,420 ‫Let's say a container should work fine. 94 00:06:17,140 --> 00:06:17,440 ‫Yup. 95 00:06:17,810 --> 00:06:19,180 ‫Next looks much better. 96 00:06:19,990 --> 00:06:24,310 ‫Now how do we need to play with several other stuff like spacing and everything? 97 00:06:24,610 --> 00:06:30,880 ‫And the first thing I want is just quickly give them the right size and everything so we can do the 98 00:06:30,880 --> 00:06:32,230 ‫difficult part in a bit. 99 00:06:32,650 --> 00:06:35,840 ‫What we need to do is simply add on the sizes. 100 00:06:35,880 --> 00:06:37,900 ‫So let's take this folder and head. 101 00:06:37,900 --> 00:06:44,830 ‫I'm going to say you that this is going to follow the font size to one point atrium, and then I'm going 102 00:06:44,830 --> 00:06:46,340 ‫to add some margin drop. 103 00:06:48,620 --> 00:06:49,820 ‫Little wonder. 104 00:06:50,930 --> 00:06:52,970 ‫Now here I am taking all the bags. 105 00:06:53,000 --> 00:06:54,440 ‫That means that's. 106 00:06:55,810 --> 00:06:58,120 ‫Get back here, you can say it's working fine. 107 00:06:58,760 --> 00:07:01,420 ‫I need to walk with H2S as well as a light. 108 00:07:02,740 --> 00:07:09,100 ‫It jump in, select my folder and the next one, I'm going to work with my edge. 109 00:07:10,090 --> 00:07:14,620 ‫And this is going to take my font size, which is going to be Gordon. 110 00:07:15,010 --> 00:07:19,010 ‫And the next thing is going to be about my margin bottom, which is London. 111 00:07:19,450 --> 00:07:21,100 ‫Save this one in back here. 112 00:07:21,820 --> 00:07:23,320 ‫You can see walking fine. 113 00:07:24,220 --> 00:07:25,720 ‫Let me quickly update everything. 114 00:07:26,330 --> 00:07:30,250 ‫So here I'm going to take my father and I dogs. 115 00:07:30,760 --> 00:07:32,740 ‫This is going to be my phone size. 116 00:07:32,980 --> 00:07:39,520 ‫Let's take one point six and then there will be some padding and let's padding on top and bottom. 117 00:07:39,670 --> 00:07:42,940 ‫You'll find six trim, zero on the left and right. 118 00:07:43,360 --> 00:07:47,710 ‫And then I need to change the color because I'm going to replace the dull part. 119 00:07:48,190 --> 00:07:50,880 ‫If you remember, we had this one. 120 00:07:52,950 --> 00:07:54,140 ‫So I'm going to follow. 121 00:07:54,360 --> 00:07:59,820 ‫They don't want me companies on hand, I just need to use my award save. 122 00:08:02,280 --> 00:08:04,410 ‫Oh, yeah, looks good. 123 00:08:05,070 --> 00:08:09,690 ‫I simply need to add these icons quickly and the half, definitely. 124 00:08:10,080 --> 00:08:11,250 ‫So here let me jump. 125 00:08:12,680 --> 00:08:19,460 ‫I need to add icons here, so remember, we are utilizing bootstraps, so you and how ACORN can Twitter, 126 00:08:19,700 --> 00:08:21,770 ‫Instagram as well as YouTube. 127 00:08:23,780 --> 00:08:26,720 ‫This is some repetitive content that we have been doing for long. 128 00:08:26,900 --> 00:08:31,970 ‫I just added this remember said this one looks quite. 129 00:08:33,140 --> 00:08:38,060 ‫The next thing is, I need to update their color, so if you observe at this point of time, they are 130 00:08:38,060 --> 00:08:38,600 ‫black. 131 00:08:39,050 --> 00:08:41,510 ‫And I also need to add some padding on the side. 132 00:08:42,410 --> 00:08:43,580 ‫Should be easy on. 133 00:08:43,580 --> 00:08:48,620 ‫I have to do is just jump over, select my footer and head. 134 00:08:48,620 --> 00:08:52,220 ‫I'm going to select my dog fast so I cannot be hiding, right? 135 00:08:53,460 --> 00:08:56,040 ‫Which is going to be one of save this one. 136 00:08:58,100 --> 00:09:05,410 ‫OK, this looks fine now I just need to select the individual one and change the color, so let's put 137 00:09:05,750 --> 00:09:09,190 ‫and individual will be this bad or not. 138 00:09:13,080 --> 00:09:18,420 ‫And I need to update their color so you can directly search about individual color, which is going 139 00:09:18,420 --> 00:09:19,620 ‫to be about Twitter. 140 00:09:19,860 --> 00:09:22,230 ‫And there will be Instagram as well as YouTube. 141 00:09:30,040 --> 00:09:32,110 ‫Save this one if I get back here. 142 00:09:32,560 --> 00:09:33,850 ‫OK, walking fine. 143 00:09:34,030 --> 00:09:34,900 ‫Great stuff. 144 00:09:35,110 --> 00:09:36,310 ‫We did it pretty fast. 145 00:09:37,750 --> 00:09:38,070 ‫Yup. 146 00:09:38,380 --> 00:09:40,810 ‫Now let's discuss about, sweetie. 147 00:09:41,260 --> 00:09:44,100 ‫So what we are going to do is we are going to create a sweetie. 148 00:09:44,620 --> 00:09:46,080 ‫Let me read about it. 149 00:09:46,870 --> 00:09:48,670 ‫Yeah, we need something like this. 150 00:09:49,420 --> 00:09:52,060 ‫This is the history department, but this part? 151 00:09:53,990 --> 00:09:56,870 ‫So what we are going to do is let's take this one itself. 152 00:09:57,070 --> 00:10:03,830 ‫So if I copy this one and I get back for my good, I remember if I add this inside of my section, then 153 00:10:03,830 --> 00:10:05,570 ‫it will be inside my container. 154 00:10:05,790 --> 00:10:10,670 ‫For example, if I added here, that means it will follow the container of it. 155 00:10:11,030 --> 00:10:12,110 ‫I don't want that. 156 00:10:12,290 --> 00:10:13,520 ‫I don't want this. 157 00:10:14,300 --> 00:10:14,620 ‫Let me. 158 00:10:14,630 --> 00:10:15,200 ‫I know this. 159 00:10:16,970 --> 00:10:17,340 ‫Yeah. 160 00:10:17,390 --> 00:10:23,020 ‫So what I'm going to do is I'm going to add it outside this section, so if I did hear, see, save 161 00:10:23,030 --> 00:10:28,280 ‫this one, it is going to take 100 percent off work also for the extra space. 162 00:10:29,030 --> 00:10:31,610 ‫The background color will be about half watercolor. 163 00:10:31,970 --> 00:10:33,050 ‫Remember this color? 164 00:10:33,770 --> 00:10:34,100 ‫Yeah. 165 00:10:34,610 --> 00:10:39,230 ‫So if I get back here, you can see this is our RSV display. 166 00:10:39,740 --> 00:10:41,210 ‫Now, have you changed this to white? 167 00:10:41,390 --> 00:10:42,380 ‫Things will be different. 168 00:10:42,470 --> 00:10:45,710 ‫Let's see our switches white. 169 00:10:45,890 --> 00:10:47,120 ‫So let me change this one. 170 00:10:48,100 --> 00:10:48,460 ‫If. 171 00:10:50,720 --> 00:10:52,790 ‫Now you can see we got this design. 172 00:10:54,250 --> 00:10:57,970 ‫Similarly, we can take any other design now, you know, how to do this. 173 00:10:58,600 --> 00:11:05,200 ‫Maybe if I'm using Port Talbot, I need to use this because this will work better depending on your 174 00:11:05,200 --> 00:11:07,530 ‫requirements, but it might change this. 175 00:11:08,600 --> 00:11:15,680 ‫Had I can get multiple designs will be hard to get the exact design, but I think this should work fine. 176 00:11:16,050 --> 00:11:21,410 ‫I'm going to take this one copy and had I just need to replace this, we. 177 00:11:24,460 --> 00:11:26,520 ‫And also, I need to change the economy. 178 00:11:28,250 --> 00:11:32,450 ‫Save this one and get back here, looks good. 179 00:11:32,600 --> 00:11:36,310 ‫Yeah, this is not the exact same match, but should work fine. 180 00:11:37,250 --> 00:11:39,710 ‫Let me copy the exact same margin out of here. 181 00:11:41,000 --> 00:11:44,420 ‫Remember, you can save the 3G in a formal image itself. 182 00:11:44,570 --> 00:11:46,490 ‫So here is the exact match. 183 00:11:48,430 --> 00:11:49,630 ‫And it looks good. 184 00:11:50,050 --> 00:11:53,290 ‫So I hope you got the idea how we designed this hole for terror. 185 00:11:53,680 --> 00:11:58,810 ‫This was pretty fast stuff, to be honest, since we already have knowledge about everything. 186 00:11:59,140 --> 00:12:03,970 ‫The only thing remaining is the Howard effect, since I'm not adding actual links. 187 00:12:04,390 --> 00:12:08,460 ‫What I'm going to do is I'm going to just add to what effect do I lie? 188 00:12:09,610 --> 00:12:11,440 ‫Simply select my photo. 189 00:12:11,720 --> 00:12:14,440 ‫It my L.A. Times and the Howard effect. 190 00:12:15,690 --> 00:12:21,990 ‫And had I can change my password to find out, OK, I can get back here, you can see this a walking 191 00:12:21,990 --> 00:12:22,320 ‫point. 192 00:12:22,920 --> 00:12:26,640 ‫And the other thing I can do is I can also add this on my logo itself. 193 00:12:27,090 --> 00:12:32,100 ‫So you observe this is my lower image part, I can do that. 194 00:12:32,120 --> 00:12:32,510 ‫I had it. 195 00:12:32,530 --> 00:12:34,830 ‫I jumped onto my logo back. 196 00:12:36,540 --> 00:12:39,300 ‫On absolute total is going to be fodder. 197 00:12:42,340 --> 00:12:43,690 ‫No more than I am. 198 00:12:43,990 --> 00:12:48,070 ‫And here I need to add, Gaza winter looks good. 199 00:12:48,640 --> 00:12:50,950 ‫OK, now it's done for our photo park. 200 00:12:51,160 --> 00:12:53,500 ‫Now there are only two things that are remaining. 201 00:12:53,740 --> 00:12:59,320 ‫Now, first one is about responsiveness, and the second one is about adding a hamburger menu. 202 00:13:00,730 --> 00:13:03,430 ‫As a beginner, you should be on man of this one. 203 00:13:03,730 --> 00:13:10,030 ‫OK, so let's continue our responsive part in the next one and then the hamburger menu. 204 00:13:10,510 --> 00:13:11,500 ‫Thank you for calling. 205 00:13:11,530 --> 00:13:13,660 ‫I hope you had a great learning session. 206 00:13:13,990 --> 00:13:19,030 ‫I should say, begin with all this stuff and I see a raise in the next one.