‫Hey, there.
‫Welcome back.
‫Now in this section, we are going to walk with footnote now for is pretty important.
‫Why?
‫Because it's going to play with Flexbox.
‫Also, we are going to do a lot of things at the time of responsiveness.
‫So if you see all of this is controlled with Flexbox itself and we are going to do a lot of things.
‫That said, let's jump on to our section and first let me jump on to Richmond Park and add content.
‫So basically, we have this section passed.
‫I need to add image and Lord of the Unordered List Park.
‫And then we have certain social icons and then again on our list and these are going to be span on a
‫paragraph.
‫Let me jump here and simply add all the content.
‫So inside my logo, the first thing I'm going to do is I'm going to add IMG.
‫Now, this image is going to be exactly the same that they're using on our navigation bar here, all
‫our crew selectors logo are being.
‫Now remember, if you are walking on a real website, you'll need to add value for this alternative
‫text.
‫That said, that's my logo and if I get back here.
‫You can see we have no go here.
‫The first change next I need to do is.
‫I need to add a background color to our forecast section itself, so I can simply select order.
‫And had I can I add background color?
‫OK, that's it.
‫Let me get back and continue everything.
‫So the first thing is done with our logo and we have our background color now.
‫The next thing is going to be links.
‫Now, if you observe one thing, you jump here we have one section, one column with company links,
‫then one column with community links, then with one column we have some useful link so we can basically
‫divide them.
‫The other thing is there are links that are not clickable, so basically they are heading.
‫So we can add them differently.
‫Or I should say we can add separate class for them.
‫So that's it.
‫And that's the three changes.
‫So we are going to divide them in three different parts.
‫So the first part will be about links.
‫I'm going to call this as complete.
‫And this is going to have an unordered list.
‫What I'm going to do is I'm going to utilize these short breaks.
‫That's great.
‫So I just need to add for the first one will be a lot of my heading which is going to be company.
‫And then there will be three other element.
‫OK, this looks fine.
‫Now, one important thing, since this is optics that I just want fascinating.
‫What I can do is I can add a separate class here and call this as heading.
‫And save this one because we are going to have a different color as well as all of them are capital.
‫So maybe you are writing enough lowercase manner.
‫We can change through this property as uppercase so we can do lock up thing that's done for our company
‫too.
‫After that, I'm going to add on you do, and I'm going to call this as communities.
‫Now, again, inside this community, we have.
‫This is going to be our heading one two, three four five.
‫OK, so I'm going to have you with.
‫Five plus one six.
‫OK, so I have these six and I.
‫The first one will be about heading last.
‫This will be called communities, and then we are going to have few other links.
‫Let me add here, if this one looks fine, that's done for communities.
‫And the third one is about our a useful length.
‫So what I'm going to do is add a new do and I'm going to call this as.
‫Useful links.
‫Looks fine again, it is going to have four child.
‫You were and I it all looks fine to me.
‫This is going to be our class heading.
‫And I just need to replace them with.
‫This looks fine, so that's done for our part.
‫That's done for our next part, basically.
‫Then I'm going to have this section in which I'm going to have certain background than these icons.
‫So this is a tricky part, but we are going to play well.
‫Basically, what I'm going to do is I'm going to follow the same list part, so here I'm going to create.
‫Unordered list with three child.
‫And each child will contain the icon.
‫The first one will contain the Instagram.
‫The second one will contain Twitter and similarly, Facebook.
‫So I just need to add the icon.
‫Remember, you can add this icon through font.
‫Awesome.
‫Now head, I don't want to repeat this concept.
‫These are basic concepts, but you can just visit and awesome.
‫And how you can search about the icon, maybe you want zero Twitter or anything else, any type of white
‫one that you want.
‫Now one important thing when you are walking with one awesome, remember you and your initial script
‫at the top of your HDMI.
‫So I did drop off your HDMI.
‫That means in the head section and let me add at the end of head.
‫So this is going to be about want awesome?
‫And this will help us to utilize all these icons.
‫That's done for this section, so that means we have this now, the next part is this country.
‫This should be easy because we just need to add a country name.
‫So all I have to do is add an icon and then next time out country.
‫So let me jump here and inside my country section.
‫You can call this as location, call list, as country, whatever you want.
‫Take me to this location.
‫Actually, location sounds better here.
‫I need to add an icon for my location again.
‫Jump on the font awesome and copy the world icon.
‫It can be related to Europe or anything else.
‫So we have a globe that have certain settings and had I have copied a globe that follows something related
‫to Europe.
‫Basically, the map is showing Europe.
‫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
‫you can take.
‫I'm just taking some sample example.
‫This part is done and then we have the spot.
‫It is going to be interesting.
‫So what I have to do is jump on to extras.
‫And here I need to add another on our list and all the items that are approx.
‫Six items, so I just need to select the and I and six now have these are all seen?
‫That means I don't need to do much of this heading out so I can just add the names directly.
‫It.
‫This looks fine.
‫Now, once this Pakistan, we have this ban, which is inside this park itself, so that as you well,
‫I just need to our lifespan.
‫And I just need to add some copyright symbol to 2021 and whatever the extra company name is, I'm just
‫thinking about it new or.
‫That's it.
‫So that's the whole content.
‫And if I jump here, you can see that the whole content.
‫So we just added a content, but we need to limit access.
‫And why are they content first so we can focus on CSIS properly known?
‫We know this is the content that we are going to work.
‫Let's focus on CIUSSS property.
‫Now to implement this, there are few methods by which we can play with, and for that, I need to jump
‫onto my notebook if I jump here.
‫Now here are basic aims to divide multiple sections or if I draw my photo here, I remember don't judge
‫me with my drawing.
‫OK, this is going to be some type of section.
‫So the first part is we are going to divide them like this.
‫So this is going to be a first part.
‫Part one, part two, part three.
‫So that there's going to be the first part.
‫Then we are going to divide them again.
‫So we are going to have again our divided nation, which is going to be our country.
‫So there will be a globe and then there will be countries name.
‫So country name.
‫Don't judge my handwriting, please.
‫And then we are going to have some extra link and we are going to divide them with the extra link and
‫then the company name.
‫OK, so that's how this is going to follow.
‫Now there are certain things that you can do, either you can take all of them in a single Flexbox so
‫you can have one two three in a single line, then you can give one person with good escort one.
‫And then this is going to be fifth and sixth on a single line.
‫You can take a one container like retired currently.
‫So if you jump here now this is one container and everything is inside it.
‫So that means this one container has lower style as length than social, then location, then extras.
‫All of them are going to work as an item so we can take this first approach.
‫That means our containers, Flexbox and all of them are child, basically child, one child, dujail,
‫three and so on.
‫We can divide them into sections.
‫So maybe we can call this as section one and we can divide this into three parts.
‫So this will be container one.
‫You can have flex and this can be Container two.
‫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
‫container three.
‫We can do this.
‫Also similar, we are going to follow this all common Flexbox concept.
‫So you can take any type, you can divide them into multiple section or you can take them into a single
‫container itself.
‫In this particular project, I am taking container.
‫And the reason is I want to explain our team concept.
‫If by any chance, I was building this as a separate project where I don't want to explain any concept,
‫then I'm going to take them as three different section because it's easy to manage different section.
‫I hope you got the idea.
‫You can take this section and call this container one at class section container as class section container
‫three as class.
‫That will be much, much easier to approach.
‫I hope you got the idea what we just discussed because we are walking with Flexbox and we need to understand
‫certain complexities.
‫So in future, maybe you are working on an internship project or freelancing project on an accompanying
‫project, you how ideas, how to tackle things.
‫The other important part nested flexing.
‫That means currently we are going to have three column here.
‫So that means we are going to add Flex to this, also this also this also because we need to add content
‫like this.
‫So there will be certain flexes inside other boxes that maybe we have this item and we want to have
‫flex because maybe we want to send something so we can use Flex.
‫Maybe we have our allied dog and then our icon need to be at the center so we can utilize justify a
‫center and alliance.
‫And that that means our line item center so that our time says that you want to implement flex inside
‫another flex.
‫Similarly, we will have follow flexing because we need to add item in our proper flex at all manner.
‫So currently these are applied, these are blocked, but we want items in our room and we will do that.
‫So I hope you got the idea about the layout in the next lecture.
‫Let us implement this in a proper practical manner.
‫So you will have clear concept.
‫I hope this space idea was easy to understand in the next lecture.
‫Let us jump on to our stainless says and play with a lot of things.
‫Thank you for calling and I see you guys in the next one.