‫Hey, dad.
‫Welcome back, Siobhan, the site.
‫Now let's move towards the final section of our project, which is deep water now had a few important
‫things.
‫Read final section.
‫I mean, in terms of structure, we still need to add responsiveness to our website.
‫We still need to discuss about this hamburger menu at the top.
‫If you observe this, so there are a lot of things that are still remaining, but let us continue with
‫the final section in terms of structure.
‫Here we are going to work with Flexbox, which is pretty common, and we have already done this type
‫of content.
‫Or I should said this type of project multiple time.
‫That means different up here.
‫What we are going to do is we are going to create our Flexbox and then divide them into four bar ad
‫or type of content, which can be done by today if you see this type of design.
‫We are going to utilize SBT and how we are going to add it.
‫So the first thing we are going to do is let me remove this, as we do for now.
‫So if I remove my as we depart, this is going to be the current look.
‫So we are going to have this big photo, which is going to follow the background color.
‫And then on top of this, we are going to add as we do with alcohol and remember, as we do, is going
‫to be followed with white color.
‫So we are going to have something like this had.
‫If I refresh.
‫Yeah, so this is basically R.S.V.P., pick me right click.
‫I tried to increase this on AD if I select this part.
‫Here we have our bite, sweetie.
‫And this this whole thing is on background, basically.
‫That means we are adding white collars with you on the top of our background color.
‫I will be discussing more about this once we reach that stage.
‫But for now, let me quickly add this whole structure.
‫So here currently, I have my folder and inside this, I simply need to add a section.
‫You can dig division also, but I'm going with section now.
‫Let me give a class here.
‫That's a class length look on majorly.
‫We are going to have links.
‫And also, I need to add on background color to my order.
‫Let me select my folder and remember, I'm not adding container.
‫Why?
‫Because I need 100 percent.
‫That means head.
‫I'm going to have background color, which is going to capture the 100 percent screen.
‫Let me take wide, and here I need to pass theme section colors.
‫Something like this.
‫Remember?
‫Yeah.
‫Say this one, so this is on background color now for our focus section now head, I need to hide everything.
‫What I need to are.
‫Basically, we need to add for S. This is going to be about logo Greg Ling's legal stuff and social
‫media.
‫OK, cool.
‫So I just need to.
‫Ah, Deb, this is going to be my logo and then queue length.
‫And then I'm going to have and dealings, which is my legal length.
‫And then I will have a section of social media looks good to me.
‫The first thing I need to do is make this section as.
‫Flexbox, I'm going to say photo and then I'm going to have links and this is going to be Flexbox,
‫so I just need to go over display flags.
‫This will convert these four section into flex items.
‫Great, and I can arrange them, and I, as you can see, a horizontal manner.
‫Also, let me add justify content.
‫And I'm going to add space because that means all the remaining space.
‫Extra space will be between them.
‫There will be one property that I really wanted to go, which is Flex.
‫Wrap it up because we are going to squeeze it in mobile screen.
‫And let me add some padding bottom so we can have some space lifted and room looks good to me.
‫Now let's jump on to this logo section.
‫We basically need to add our image in terms of logos.
‫I just need to jump onto my media and here I just need to add my logo looks good.
‫The other thing I need to do is add up the dog.
‫And had I can add some description like All-nighters of 2020 to 2023, whatever we want.
‫So let me see this one.
‫This is about my logo.
‫The next thing is about our links, so I'm going to have our heading.
‫This is going to have my quick links.
‫Now remember, what I'm doing is I'm doing this part.
‫If you have this H2 and then you can have your unordered list here.
‫I'm going to have simple menus, which is going to be home packages and to other things.
‫Then again, I'm going to have our edge through here, which is going to contain about legal staff,
‫legal length, something like this.
‫So had I been hired legal stuff?
‫And again, I'm going to follow you and and there will be three allies, and here I'm going to add something
‫a little privacy policy cookies, something like this.
‫Great.
‫And then again, I'm going to have my social media links.
‫So here I just need to add it to dog on social media.
‫And once that is done again, the unlikely combination works well every time, and I simply need to
‫add icons with Chime for deeply leader.
‫This is going to be Twitter, Instagram and YouTube.
‫Remember, I'm not adding the actual links, but you can add, you know, you can add eggs here if I
‫jump back.
‫OK, now currently we are taking this whole question.
‫So what I need to do is I need to add container here.
‫Let's say a container should work fine.
‫Yup.
‫Next looks much better.
‫Now how do we need to play with several other stuff like spacing and everything?
‫And the first thing I want is just quickly give them the right size and everything so we can do the
‫difficult part in a bit.
‫What we need to do is simply add on the sizes.
‫So let's take this folder and head.
‫I'm going to say you that this is going to follow the font size to one point atrium, and then I'm going
‫to add some margin drop.
‫Little wonder.
‫Now here I am taking all the bags.
‫That means that's.
‫Get back here, you can say it's working fine.
‫I need to walk with H2S as well as a light.
‫It jump in, select my folder and the next one, I'm going to work with my edge.
‫And this is going to take my font size, which is going to be Gordon.
‫And the next thing is going to be about my margin bottom, which is London.
‫Save this one in back here.
‫You can see walking fine.
‫Let me quickly update everything.
‫So here I'm going to take my father and I dogs.
‫This is going to be my phone size.
‫Let's take one point six and then there will be some padding and let's padding on top and bottom.
‫You'll find six trim, zero on the left and right.
‫And then I need to change the color because I'm going to replace the dull part.
‫If you remember, we had this one.
‫So I'm going to follow.
‫They don't want me companies on hand, I just need to use my award save.
‫Oh, yeah, looks good.
‫I simply need to add these icons quickly and the half, definitely.
‫So here let me jump.
‫I need to add icons here, so remember, we are utilizing bootstraps, so you and how ACORN can Twitter,
‫Instagram as well as YouTube.
‫This is some repetitive content that we have been doing for long.
‫I just added this remember said this one looks quite.
‫The next thing is, I need to update their color, so if you observe at this point of time, they are
‫black.
‫And I also need to add some padding on the side.
‫Should be easy on.
‫I have to do is just jump over, select my footer and head.
‫I'm going to select my dog fast so I cannot be hiding, right?
‫Which is going to be one of save this one.
‫OK, this looks fine now I just need to select the individual one and change the color, so let's put
‫and individual will be this bad or not.
‫And I need to update their color so you can directly search about individual color, which is going
‫to be about Twitter.
‫And there will be Instagram as well as YouTube.
‫Save this one if I get back here.
‫OK, walking fine.
‫Great stuff.
‫We did it pretty fast.
‫Yup.
‫Now let's discuss about, sweetie.
‫So what we are going to do is we are going to create a sweetie.
‫Let me read about it.
‫Yeah, we need something like this.
‫This is the history department, but this part?
‫So what we are going to do is let's take this one itself.
‫So if I copy this one and I get back for my good, I remember if I add this inside of my section, then
‫it will be inside my container.
‫For example, if I added here, that means it will follow the container of it.
‫I don't want that.
‫I don't want this.
‫Let me.
‫I know this.
‫Yeah.
‫So what I'm going to do is I'm going to add it outside this section, so if I did hear, see, save
‫this one, it is going to take 100 percent off work also for the extra space.
‫The background color will be about half watercolor.
‫Remember this color?
‫Yeah.
‫So if I get back here, you can see this is our RSV display.
‫Now, have you changed this to white?
‫Things will be different.
‫Let's see our switches white.
‫So let me change this one.
‫If.
‫Now you can see we got this design.
‫Similarly, we can take any other design now, you know, how to do this.
‫Maybe if I'm using Port Talbot, I need to use this because this will work better depending on your
‫requirements, but it might change this.
‫Had I can get multiple designs will be hard to get the exact design, but I think this should work fine.
‫I'm going to take this one copy and had I just need to replace this, we.
‫And also, I need to change the economy.
‫Save this one and get back here, looks good.
‫Yeah, this is not the exact same match, but should work fine.
‫Let me copy the exact same margin out of here.
‫Remember, you can save the 3G in a formal image itself.
‫So here is the exact match.
‫And it looks good.
‫So I hope you got the idea how we designed this hole for terror.
‫This was pretty fast stuff, to be honest, since we already have knowledge about everything.
‫The only thing remaining is the Howard effect, since I'm not adding actual links.
‫What I'm going to do is I'm going to just add to what effect do I lie?
‫Simply select my photo.
‫It my L.A. Times and the Howard effect.
‫And had I can change my password to find out, OK, I can get back here, you can see this a walking
‫point.
‫And the other thing I can do is I can also add this on my logo itself.
‫So you observe this is my lower image part, I can do that.
‫I had it.
‫I jumped onto my logo back.
‫On absolute total is going to be fodder.
‫No more than I am.
‫And here I need to add, Gaza winter looks good.
‫OK, now it's done for our photo park.
‫Now there are only two things that are remaining.
‫Now, first one is about responsiveness, and the second one is about adding a hamburger menu.
‫As a beginner, you should be on man of this one.
‫OK, so let's continue our responsive part in the next one and then the hamburger menu.
‫Thank you for calling.
‫I hope you had a great learning session.
‫I should say, begin with all this stuff and I see a raise in the next one.