1 00:00:00,390 --> 00:00:00,930 ‫Hey, there. 2 00:00:01,050 --> 00:00:01,740 ‫Welcome back. 3 00:00:02,160 --> 00:00:07,080 ‫Now in this section, we are going to walk with footnote now for is pretty important. 4 00:00:07,110 --> 00:00:07,620 ‫Why? 5 00:00:08,040 --> 00:00:10,620 ‫Because it's going to play with Flexbox. 6 00:00:10,800 --> 00:00:15,360 ‫Also, we are going to do a lot of things at the time of responsiveness. 7 00:00:15,870 --> 00:00:22,050 ‫So if you see all of this is controlled with Flexbox itself and we are going to do a lot of things. 8 00:00:23,370 --> 00:00:30,420 ‫That said, let's jump on to our section and first let me jump on to Richmond Park and add content. 9 00:00:30,990 --> 00:00:33,120 ‫So basically, we have this section passed. 10 00:00:33,120 --> 00:00:36,750 ‫I need to add image and Lord of the Unordered List Park. 11 00:00:37,080 --> 00:00:44,670 ‫And then we have certain social icons and then again on our list and these are going to be span on a 12 00:00:44,670 --> 00:00:45,300 ‫paragraph. 13 00:00:46,170 --> 00:00:49,380 ‫Let me jump here and simply add all the content. 14 00:00:49,770 --> 00:00:54,120 ‫So inside my logo, the first thing I'm going to do is I'm going to add IMG. 15 00:00:55,770 --> 00:01:02,190 ‫Now, this image is going to be exactly the same that they're using on our navigation bar here, all 16 00:01:02,190 --> 00:01:04,370 ‫our crew selectors logo are being. 17 00:01:04,920 --> 00:01:10,320 ‫Now remember, if you are walking on a real website, you'll need to add value for this alternative 18 00:01:10,320 --> 00:01:10,740 ‫text. 19 00:01:11,670 --> 00:01:15,060 ‫That said, that's my logo and if I get back here. 20 00:01:16,210 --> 00:01:18,520 ‫You can see we have no go here. 21 00:01:18,880 --> 00:01:21,430 ‫The first change next I need to do is. 22 00:01:22,400 --> 00:01:28,280 ‫I need to add a background color to our forecast section itself, so I can simply select order. 23 00:01:29,830 --> 00:01:31,900 ‫And had I can I add background color? 24 00:01:34,100 --> 00:01:34,970 ‫OK, that's it. 25 00:01:35,000 --> 00:01:36,980 ‫Let me get back and continue everything. 26 00:01:37,250 --> 00:01:41,600 ‫So the first thing is done with our logo and we have our background color now. 27 00:01:43,570 --> 00:01:45,310 ‫The next thing is going to be links. 28 00:01:45,700 --> 00:01:53,350 ‫Now, if you observe one thing, you jump here we have one section, one column with company links, 29 00:01:53,350 --> 00:02:00,430 ‫then one column with community links, then with one column we have some useful link so we can basically 30 00:02:00,430 --> 00:02:01,120 ‫divide them. 31 00:02:01,360 --> 00:02:06,940 ‫The other thing is there are links that are not clickable, so basically they are heading. 32 00:02:07,360 --> 00:02:10,870 ‫So we can add them differently. 33 00:02:10,870 --> 00:02:13,840 ‫Or I should say we can add separate class for them. 34 00:02:14,500 --> 00:02:15,070 ‫So that's it. 35 00:02:15,250 --> 00:02:16,640 ‫And that's the three changes. 36 00:02:16,640 --> 00:02:19,120 ‫So we are going to divide them in three different parts. 37 00:02:19,570 --> 00:02:22,540 ‫So the first part will be about links. 38 00:02:22,550 --> 00:02:24,520 ‫I'm going to call this as complete. 39 00:02:25,680 --> 00:02:28,080 ‫And this is going to have an unordered list. 40 00:02:28,590 --> 00:02:32,040 ‫What I'm going to do is I'm going to utilize these short breaks. 41 00:02:33,310 --> 00:02:34,330 ‫That's great. 42 00:02:34,660 --> 00:02:41,260 ‫So I just need to add for the first one will be a lot of my heading which is going to be company. 43 00:02:41,590 --> 00:02:43,660 ‫And then there will be three other element. 44 00:02:45,660 --> 00:02:46,920 ‫OK, this looks fine. 45 00:02:47,190 --> 00:02:52,530 ‫Now, one important thing, since this is optics that I just want fascinating. 46 00:02:53,040 --> 00:02:58,230 ‫What I can do is I can add a separate class here and call this as heading. 47 00:02:59,730 --> 00:03:05,670 ‫And save this one because we are going to have a different color as well as all of them are capital. 48 00:03:05,730 --> 00:03:09,030 ‫So maybe you are writing enough lowercase manner. 49 00:03:09,210 --> 00:03:16,190 ‫We can change through this property as uppercase so we can do lock up thing that's done for our company 50 00:03:16,200 --> 00:03:16,450 ‫too. 51 00:03:17,100 --> 00:03:21,780 ‫After that, I'm going to add on you do, and I'm going to call this as communities. 52 00:03:25,250 --> 00:03:28,070 ‫Now, again, inside this community, we have. 53 00:03:29,720 --> 00:03:33,080 ‫This is going to be our heading one two, three four five. 54 00:03:33,260 --> 00:03:35,610 ‫OK, so I'm going to have you with. 55 00:03:37,140 --> 00:03:38,700 ‫Five plus one six. 56 00:03:38,730 --> 00:03:41,070 ‫OK, so I have these six and I. 57 00:03:42,470 --> 00:03:44,780 ‫The first one will be about heading last. 58 00:03:45,880 --> 00:03:50,800 ‫This will be called communities, and then we are going to have few other links. 59 00:03:51,460 --> 00:03:57,490 ‫Let me add here, if this one looks fine, that's done for communities. 60 00:03:58,760 --> 00:04:01,460 ‫And the third one is about our a useful length. 61 00:04:01,490 --> 00:04:06,920 ‫So what I'm going to do is add a new do and I'm going to call this as. 62 00:04:08,820 --> 00:04:10,770 ‫Useful links. 63 00:04:12,510 --> 00:04:15,120 ‫Looks fine again, it is going to have four child. 64 00:04:17,690 --> 00:04:20,990 ‫You were and I it all looks fine to me. 65 00:04:21,380 --> 00:04:24,200 ‫This is going to be our class heading. 66 00:04:26,160 --> 00:04:28,140 ‫And I just need to replace them with. 67 00:04:31,820 --> 00:04:35,210 ‫This looks fine, so that's done for our part. 68 00:04:35,240 --> 00:04:38,030 ‫That's done for our next part, basically. 69 00:04:38,480 --> 00:04:45,350 ‫Then I'm going to have this section in which I'm going to have certain background than these icons. 70 00:04:45,350 --> 00:04:47,810 ‫So this is a tricky part, but we are going to play well. 71 00:04:48,980 --> 00:04:54,540 ‫Basically, what I'm going to do is I'm going to follow the same list part, so here I'm going to create. 72 00:04:56,260 --> 00:04:58,480 ‫Unordered list with three child. 73 00:05:01,290 --> 00:05:03,870 ‫And each child will contain the icon. 74 00:05:04,260 --> 00:05:06,490 ‫The first one will contain the Instagram. 75 00:05:06,510 --> 00:05:10,410 ‫The second one will contain Twitter and similarly, Facebook. 76 00:05:10,630 --> 00:05:13,290 ‫So I just need to add the icon. 77 00:05:13,320 --> 00:05:16,140 ‫Remember, you can add this icon through font. 78 00:05:16,140 --> 00:05:16,590 ‫Awesome. 79 00:05:17,400 --> 00:05:19,830 ‫Now head, I don't want to repeat this concept. 80 00:05:19,860 --> 00:05:23,490 ‫These are basic concepts, but you can just visit and awesome. 81 00:05:26,730 --> 00:05:32,610 ‫And how you can search about the icon, maybe you want zero Twitter or anything else, any type of white 82 00:05:32,610 --> 00:05:33,420 ‫one that you want. 83 00:05:33,960 --> 00:05:40,350 ‫Now one important thing when you are walking with one awesome, remember you and your initial script 84 00:05:40,560 --> 00:05:42,240 ‫at the top of your HDMI. 85 00:05:42,570 --> 00:05:44,650 ‫So I did drop off your HDMI. 86 00:05:44,670 --> 00:05:48,900 ‫That means in the head section and let me add at the end of head. 87 00:05:49,770 --> 00:05:52,440 ‫So this is going to be about want awesome? 88 00:05:52,440 --> 00:05:55,890 ‫And this will help us to utilize all these icons. 89 00:05:57,010 --> 00:06:04,270 ‫That's done for this section, so that means we have this now, the next part is this country. 90 00:06:04,870 --> 00:06:08,230 ‫This should be easy because we just need to add a country name. 91 00:06:08,680 --> 00:06:13,270 ‫So all I have to do is add an icon and then next time out country. 92 00:06:13,510 --> 00:06:17,200 ‫So let me jump here and inside my country section. 93 00:06:17,350 --> 00:06:21,220 ‫You can call this as location, call list, as country, whatever you want. 94 00:06:21,730 --> 00:06:23,470 ‫Take me to this location. 95 00:06:23,980 --> 00:06:26,430 ‫Actually, location sounds better here. 96 00:06:26,440 --> 00:06:30,510 ‫I need to add an icon for my location again. 97 00:06:30,520 --> 00:06:33,670 ‫Jump on the font awesome and copy the world icon. 98 00:06:33,670 --> 00:06:36,430 ‫It can be related to Europe or anything else. 99 00:06:36,970 --> 00:06:43,990 ‫So we have a globe that have certain settings and had I have copied a globe that follows something related 100 00:06:43,990 --> 00:06:44,540 ‫to Europe. 101 00:06:45,620 --> 00:06:47,620 ‫Basically, the map is showing Europe. 102 00:06:48,580 --> 00:06:55,690 ‫The second thing I need to is I need to add text, so I'm going to rely on and call Texas USA any country 103 00:06:55,690 --> 00:06:56,260 ‫you can take. 104 00:06:56,260 --> 00:06:58,240 ‫I'm just taking some sample example. 105 00:06:59,050 --> 00:07:02,920 ‫This part is done and then we have the spot. 106 00:07:04,210 --> 00:07:05,620 ‫It is going to be interesting. 107 00:07:05,800 --> 00:07:09,820 ‫So what I have to do is jump on to extras. 108 00:07:10,920 --> 00:07:17,970 ‫And here I need to add another on our list and all the items that are approx. 109 00:07:18,270 --> 00:07:24,060 ‫Six items, so I just need to select the and I and six now have these are all seen? 110 00:07:24,240 --> 00:07:30,720 ‫That means I don't need to do much of this heading out so I can just add the names directly. 111 00:07:34,340 --> 00:07:34,530 ‫It. 112 00:07:34,670 --> 00:07:35,570 ‫This looks fine. 113 00:07:36,170 --> 00:07:43,580 ‫Now, once this Pakistan, we have this ban, which is inside this park itself, so that as you well, 114 00:07:43,580 --> 00:07:45,210 ‫I just need to our lifespan. 115 00:07:45,560 --> 00:07:52,970 ‫And I just need to add some copyright symbol to 2021 and whatever the extra company name is, I'm just 116 00:07:52,970 --> 00:07:54,800 ‫thinking about it new or. 117 00:07:55,580 --> 00:07:56,210 ‫That's it. 118 00:07:58,030 --> 00:07:59,980 ‫So that's the whole content. 119 00:08:00,550 --> 00:08:04,270 ‫And if I jump here, you can see that the whole content. 120 00:08:05,050 --> 00:08:08,820 ‫So we just added a content, but we need to limit access. 121 00:08:08,830 --> 00:08:13,780 ‫And why are they content first so we can focus on CSIS properly known? 122 00:08:13,810 --> 00:08:16,480 ‫We know this is the content that we are going to work. 123 00:08:17,020 --> 00:08:19,150 ‫Let's focus on CIUSSS property. 124 00:08:20,230 --> 00:08:26,590 ‫Now to implement this, there are few methods by which we can play with, and for that, I need to jump 125 00:08:26,590 --> 00:08:28,830 ‫onto my notebook if I jump here. 126 00:08:29,620 --> 00:08:37,000 ‫Now here are basic aims to divide multiple sections or if I draw my photo here, I remember don't judge 127 00:08:37,000 --> 00:08:37,990 ‫me with my drawing. 128 00:08:39,340 --> 00:08:42,880 ‫OK, this is going to be some type of section. 129 00:08:43,240 --> 00:08:46,150 ‫So the first part is we are going to divide them like this. 130 00:08:46,570 --> 00:08:48,220 ‫So this is going to be a first part. 131 00:08:48,580 --> 00:08:51,220 ‫Part one, part two, part three. 132 00:08:51,760 --> 00:08:54,100 ‫So that there's going to be the first part. 133 00:08:54,760 --> 00:08:56,770 ‫Then we are going to divide them again. 134 00:08:56,780 --> 00:09:01,150 ‫So we are going to have again our divided nation, which is going to be our country. 135 00:09:01,150 --> 00:09:04,690 ‫So there will be a globe and then there will be countries name. 136 00:09:04,840 --> 00:09:06,580 ‫So country name. 137 00:09:07,690 --> 00:09:09,430 ‫Don't judge my handwriting, please. 138 00:09:09,880 --> 00:09:15,130 ‫And then we are going to have some extra link and we are going to divide them with the extra link and 139 00:09:15,130 --> 00:09:16,210 ‫then the company name. 140 00:09:17,660 --> 00:09:20,060 ‫OK, so that's how this is going to follow. 141 00:09:20,090 --> 00:09:26,900 ‫Now there are certain things that you can do, either you can take all of them in a single Flexbox so 142 00:09:26,900 --> 00:09:32,180 ‫you can have one two three in a single line, then you can give one person with good escort one. 143 00:09:33,170 --> 00:09:36,530 ‫And then this is going to be fifth and sixth on a single line. 144 00:09:37,040 --> 00:09:40,640 ‫You can take a one container like retired currently. 145 00:09:40,640 --> 00:09:46,580 ‫So if you jump here now this is one container and everything is inside it. 146 00:09:46,580 --> 00:09:54,170 ‫So that means this one container has lower style as length than social, then location, then extras. 147 00:09:54,680 --> 00:10:00,110 ‫All of them are going to work as an item so we can take this first approach. 148 00:10:00,110 --> 00:10:06,010 ‫That means our containers, Flexbox and all of them are child, basically child, one child, dujail, 149 00:10:06,030 --> 00:10:06,950 ‫three and so on. 150 00:10:07,460 --> 00:10:09,190 ‫We can divide them into sections. 151 00:10:09,190 --> 00:10:15,030 ‫So maybe we can call this as section one and we can divide this into three parts. 152 00:10:15,030 --> 00:10:16,460 ‫So this will be container one. 153 00:10:16,760 --> 00:10:20,110 ‫You can have flex and this can be Container two. 154 00:10:20,120 --> 00:10:26,180 ‫We're going to have Flex and then you can see this is going to be a flex end and then we can have this 155 00:10:26,180 --> 00:10:27,110 ‫container three. 156 00:10:27,380 --> 00:10:28,130 ‫We can do this. 157 00:10:28,130 --> 00:10:33,260 ‫Also similar, we are going to follow this all common Flexbox concept. 158 00:10:34,010 --> 00:10:41,270 ‫So you can take any type, you can divide them into multiple section or you can take them into a single 159 00:10:41,270 --> 00:10:42,350 ‫container itself. 160 00:10:43,040 --> 00:10:45,990 ‫In this particular project, I am taking container. 161 00:10:46,310 --> 00:10:49,220 ‫And the reason is I want to explain our team concept. 162 00:10:49,640 --> 00:10:56,510 ‫If by any chance, I was building this as a separate project where I don't want to explain any concept, 163 00:10:56,870 --> 00:11:02,210 ‫then I'm going to take them as three different section because it's easy to manage different section. 164 00:11:02,600 --> 00:11:03,890 ‫I hope you got the idea. 165 00:11:04,220 --> 00:11:12,290 ‫You can take this section and call this container one at class section container as class section container 166 00:11:12,290 --> 00:11:13,100 ‫three as class. 167 00:11:13,670 --> 00:11:16,460 ‫That will be much, much easier to approach. 168 00:11:17,030 --> 00:11:23,390 ‫I hope you got the idea what we just discussed because we are walking with Flexbox and we need to understand 169 00:11:23,390 --> 00:11:24,680 ‫certain complexities. 170 00:11:24,950 --> 00:11:30,020 ‫So in future, maybe you are working on an internship project or freelancing project on an accompanying 171 00:11:30,020 --> 00:11:33,080 ‫project, you how ideas, how to tackle things. 172 00:11:33,680 --> 00:11:36,650 ‫The other important part nested flexing. 173 00:11:36,650 --> 00:11:39,620 ‫That means currently we are going to have three column here. 174 00:11:41,780 --> 00:11:47,570 ‫So that means we are going to add Flex to this, also this also this also because we need to add content 175 00:11:47,570 --> 00:11:48,140 ‫like this. 176 00:11:48,590 --> 00:11:56,830 ‫So there will be certain flexes inside other boxes that maybe we have this item and we want to have 177 00:11:56,840 --> 00:12:01,550 ‫flex because maybe we want to send something so we can use Flex. 178 00:12:01,550 --> 00:12:08,300 ‫Maybe we have our allied dog and then our icon need to be at the center so we can utilize justify a 179 00:12:08,300 --> 00:12:10,160 ‫center and alliance. 180 00:12:10,160 --> 00:12:16,610 ‫And that that means our line item center so that our time says that you want to implement flex inside 181 00:12:16,610 --> 00:12:17,540 ‫another flex. 182 00:12:18,230 --> 00:12:24,860 ‫Similarly, we will have follow flexing because we need to add item in our proper flex at all manner. 183 00:12:25,010 --> 00:12:30,890 ‫So currently these are applied, these are blocked, but we want items in our room and we will do that. 184 00:12:31,370 --> 00:12:35,180 ‫So I hope you got the idea about the layout in the next lecture. 185 00:12:35,180 --> 00:12:38,750 ‫Let us implement this in a proper practical manner. 186 00:12:38,930 --> 00:12:40,790 ‫So you will have clear concept. 187 00:12:41,510 --> 00:12:46,290 ‫I hope this space idea was easy to understand in the next lecture. 188 00:12:46,310 --> 00:12:50,630 ‫Let us jump on to our stainless says and play with a lot of things. 189 00:12:51,440 --> 00:12:54,350 ‫Thank you for calling and I see you guys in the next one.