Hello, guys.
Welcome back.
In today's world, you created a Web page that I gave as an assignment in the previous video.
This is the wreckage that we had to design.
So we had this Google lookalike, someone who was here to choose the News app, dropped them on someone
who was online.
The box.
It's a shadow.
When someone who is on the button gets this border.
All right.
So let's begin.
Let's bring a boy, put it into place.
Let's create this structure.
What beach?
So we need these stop menus, GMU images.
This menu, I plan on the profile.
So let's start with those.
So according to Channel five, we do all of these things head on for the specific menus.
We can wrap them in nuff bar.
So now.
So if these two are supposed to be made, so let's drop them and I'm good, dad.
Let's bring this here.
Let's give you a tour of the same beach.
General.
Similarly, images.
Let's save it.
Let's open our lifeso.
And as you can see, they've got these two images.
Now, let's other styles for these.
So I see here the entire beach has a fun family of idiots on Saturday.
So that's where we can give it to the body.
So let's just compare this to going to our season's final.
So, buddy, fun family.
Herald Sun Surf.
So we don't have to in all areas the way we did with Google that funds because this is by default.
We've both ditched the annual suit and simply use it without importing.
All right.
So coming back here now to can see the point on this a bit different.
So far, trading, moving this font style changes when I put it back.
The fun side changes again.
All right, so coming back, so many items on the front page of two Olympic sports background collaterals,
black with obesity point eight seven.
So that's given that that's out across here.
So many do.
That's wasted here.
Let's copy this me.
So what we need is the font size of 13 pixels on a color of GBH like.
And obesity is an obesity off point eighty seven point eighty seven.
Let's say you're coming back to the table.
As you can see.
Are these menu items?
How a similar font size and color, but how this underlined by default so we can do that.
So text decoration.
Let's a none.
But on who would help us underline.
So let's add that to the documenting item on Hova dates decoration.
Underline that save.
And now when I heard about this underline.
All right.
So moving on.
Let's try it out in this item.
So for this, you can use an image or else of a specified.
Another way of using icons to display.
We had formed.
Awesome.
We also have these Google material icons.
So to import them, you can just place this link in the head element of HDMI.
So let's do that.
Something pasted here and now I can access all the Google Makita undesignated.
So if I search you, Lou McKew opens and I was at the sewer.
I have access to all these icons.
All of these.
All right, on to select, I again, just click on that.
So choose your view for modern brothers, describe it as a dad.
So that's what we've done here for that manual.
I think you've got me this idea.
So let's use it here.
So after the so often these menu items, we can have this image.
So coming back here and now, as you can see, we've got the icon as well.
Then after that, we have this profile pics.
So I've got mine over here.
So it's just copying your an adult image after this.
So I n g Sourcefire.
So.
So image you are in the source.
That's pasted here.
And an old text.
So let's see.
Define big.
Let's say that.
Coming back.
And now as you can see, you've got all these top four menu items which are designed here.
Just not this time.
It's a bit off.
So let's just glue these two.
Let's add some statements coming back to.
So if you can see here the profile, because a little protected.
Excellent.
I totally get it.
So let's add that.
So let's give it an I.D. see or find a big.
Let's compare.
So, you know, this is an idea so harsh.
So let's give it the weather behind and see what the eight big storms by 14 pixels, let's say, look,
looks pretty much the same.
All right.
Now it's time to play news items.
So let's not blur it represents our menu so we can add states to distinguish between on the right hand
side.
So not the text alone.
Right.
Let's save it.
And as you can see, all our items are now on the right hand side.
Similarly, that's like them in the center vertically, so we can use the we're looking for that position
rather there.
That's a top zero.
So it stays in the position so we can even negative values to move it up.
So that's a minus eight pixels.
That's much better.
Similarly, we need to move or this menu that I can as well.
So we will we got an I.D. you saw so drop down menu.
So let's add some states.
So hash, let's say dog minus eight pixels.
It wouldn't work because we have them a position relative.
Let's say look.
Let's increase it to Dana.
Yeah, that's much better.
Similarly, for a menu item, let's increase the C minus drug, which is still not enough.
Let's say sixteen.
And that's much better.
Also, if you notice, there's a margin on the right hand side for all these menu items.
So that's your diet.
So let's see margin, right, 16 pixels.
Similarly, let's give the margin like this up as well.
So margin right on 16, which is.
All right.
So that looks much better.
Now, moving on now, what do we need is this group image.
So that's on that.
So given the logo here, so let's copy it coming back, Hugh, let's add it into its general filing.
Let's create the mini section.
That's a section inside this and unsigned outlets of this image.
Let's say a Sarsae and imagine you are.
Let's give it a 90.
See you little logo.
Let's save it.
And as you can see, the good does the Google logo on the screen.
Let's move the hotel to the center so we could do.
So they've got a section here.
So let's move everything in the section in the same job, the screen.
So section.
Text by center.
Let's save it.
As you can see, you've got this Google in the center of the screen horizontally.
So, Maloney, what we need is this input box.
So that's great.
That is my cue.
Let's find an input box.
Let's say that, as you can see, we've got our inbox right next to the image.
But what we want is the image box to be the loaded image.
So let's do that.
So let's just drop it in a do.
Or we could simply do great line.
You tailored, as you can see in the boxes on the next line.
Let's add some states to this and put box.
So we've got a wood colored border fun site starting in a radius.
So you're coming by to that's.
And I need this I need it's a search box.
It's Aybar.
Let's use that idea here.
So surge was.
So after every time we have to Arthus, some golden.
All right, let's say you're so cute.
Now, as you can see on the box, looks pretty much like this.
What we need is this audio search.
So that's on that.
So let's go the voice search I can show you.
Let's compare.
Let's bring it down to you know, what we need to do is we need to adopt this input in a div so that
we can give a different position relative on this.
Voice search, I'm in a position absolutely we can move it on top of the box, so let's add that.
So we've got a dev here.
Let's give this an IDC input dropper.
That's on the issue.
Let's give it the source you are.
Let's give it an all text.
That's a voice search.
I can see it coming back here.
That's odd.
Some statements to this and Petropoulos so harsh because that was and I'd be so into trouble.
Position relative, Xaver.
Now, let's give some science to this search item so we could do.
Hush.
Good gridlock, good.
That image like inside.
Let's give it position, absolute light saber.
If I do right.
Zero.
It goes to the far end.
Which we don't want.
So what's happening here is because there's a Petropoulos, a dev, and there is a block elements that
digs them diamond.
And that's why our images at the far end of the screen.
So what we can do is instead of giving a fixed with this, we can we will fix that, do help people
drop it.
And we can make this right under Boesen so that I don't put box sticks the full weight of the output
on the rhythm that operates just fine.
Eighty two pixels let's say, but.
And as you can see, you've got this image over here.
Similarly, if I do a zero
that moves to the top, which is inside our input box.
All right.
On that image, size looks a bit bigger.
So let's make it small.
So let's say with 28 pixels.
That's much better.
So let's bring it in the center vertically.
It's part of the deal right to the top.
Let's say it pixels on.
That's it then.
Pixels.
That's better.
Also knowing how to bring this print box to the center of the screen.
So we could just seems that this may do in line block the table.
And as you can see, it's coming to the center of the screen.
Now, what we want is when someone who works or focuses on the search box, it should have a box, shadow
and water.
So right now, when you do, nothing happens.
You get this outline into that screen that so we could simply do an outline.
Nunna.
No, we don't get this outline, but we don't get the shadow.
So that's all that.
So she was so uncool.
I'm on this block shadowing this, but I'm going to.
And now when I Hoover.
Disconfirm box as a shadow.
But when I focus, it doesn't.
So let's hotted for focus his work.
Let's go.
It is so harsh.
Search box and focus.
Let's face the children and say what I know and focus, and then I've got this shadow.
Also, I feel this year at some speeds would mean the logo on the input box so we can add some margin.
So coming by QVC, let's say margin.
Sorry.
So we have to do a search box.
So that's a mountain dog on my flummoxes.
It's even.
And that looks much better.
Now, that's right out of these buckets.
So over here, they've got some status for the buckets.
So let's capito's out some buttons here first.
So now we need to do buttons.
So do.
First button, which is Google search.
I'm sick and I'm feeling lucky.
So that's all those who.
So, again, is.
Which we've been lucky, Let's say, about.
Let's give them a glass.
That's a custom buttons.
Similar elements of the same class here as well.
So Guston BGN, let's hear it.
Let's add the states to those bottoms over here.
So don't Guston median.
Let's face.
All the signs here.
So the back the line needs to have this hyphen uncool in which you.
All right, so coming back here.
Let's see this.
And as you can see, these buttons have got the status, but they're all in the same lines.
Let's bring them in the next line so we could simply just drop them in one day of.
Let's save it.
And now, as you can see with these buttons are on the next line.
Also, if you notice, there's some space between these buttons on the bottles that are that as well.
So coming here.
So let's give it a margin bottom as well.
You 24 pixels.
And there's a space with, you know, big box and these buttons.
Other items seems to have gone a bit out of the box.
So it's Monistat.
So instead of double dating skills, let's just bring it to zero.
So it's going outside the box.
Let's give it a big Aubameyang, say, two phobics since.
So to do pixels and that looks much better.
Also, men who were on these buttons should get this border and some shadow.
So that's about.
So I mean, back here,
so that class was custom button, so on Google Arts and styles.
Let's saved us.
Now, when I go over my mountains, look at these border and some shadows.
Also, these buttons have some spacing in the between.
So that's are those as well.
So coming here.
So what we can do is custom button, first of type, we can give the margin.
Right.
Say 16 pixels, let's say.
On as you can see, a button buttons have some space in the middle.
All right.
So now let's bring it to the center of the screen.
So coming here, as you can see, the section wraps all the content that we've got here.
So if you give some body to the section, you can bring the content to the center of the screen.
So let's say Bohning top 10 loosened the table.
Let's increase the volume.
See a little Lucy.
Archconservatives.
Pretty much the same.
Just that our main and how some budding.
When he left on his way through.
That's on that as well.
So coming back here.
So, you know, somebody in here, it's important, Brooke, that say.
On the left and right, so as you answer, Freemason's looks much better off.
All right.
So moving on.
So many who were undecided.
It should show up, drop down like this.
So first next, blame this on top down.
So if you can see here, these are the styles for the top job done.
So come in here.
That's our discussion, so do let's give it an I.D., see?
John Danimal.
Let's see.
Let's add some science to this division.
So harsh.
Let's copy styles.
Them here.
Let's save that.
And I can see you've got a card with some shadow on a bottle.
Now, with this card needs is it needs these items.
So let's add those as well.
So the first one is Google search.
So let's go through this image.
Your coming here.
Let's ask the first.
And then say not.
You need an image.
Let's give it a source.
You are all dog.
Let's see.
Google search.
It also means a label.
So let's see.
Be on, let's give it some label.
So in our case, it has got just search.
So let's on that hill.
The town, some gloss to this.
So we can say I've done.
In total, we need six other items.
So let's just copy paste these.
So two, three, four, five, six.
The table coming here on, as you can see, the stylings are way off.
So let's add some statements.
So we've got the item so harsh, this is a plus or a dog item it doesn't display in my blog.
And it has a width of eighty four, six.
Let's say that.
Then let's add some styles for and slide.
So we've got Image Dargo here.
So I do selecting that image inside.
It has a wealth of 50 pixels on height.
Just didn't Soules.
Let's say with.
So going into your knowledge, you can see the bottom.
I can score a few.
Also, the label has a different color so that our daughters will suit up.
I do.
Paragraph.
Let's just go here.
Let's remove the margins.
And that's awesome, some body.
And on top, say, eight big suits.
That's a lot.
All right.
So moving on now works out.
I can see this label on.
The next item is very much close to each other.
So you could get some marginal bottom.
So let's say, Martin, bottom 60 pixels.
Let's increase it a bit more pixels.
Looks much better.
All right, so let's use these images now.
So for the second one.
Laughs.
Sets it a witness, this would be.
Google Maps and will be maps that say, look.
And as you can see, it changed.
Similarly, let's go out for a drive.
So it's a little certain as you drive over here this week, be driving.
Let's order for governor.
Similarly, that's added for photos.
Similar that ordered for.
Let's save it.
I'm coming back to you.
And as you can see, we've got our application items here.
Although we want to do this on hold.
This should have a border.
So that's about.
Come coming here.
So not item on homework.
We can have this now.
So when the whole Kartheiser border, let's go to border radius.
So as you can see, it has some border radius here.
So let's add that.
Say, a big sales segment that looks much better.
All right.
So, as you can see, these migrants are very close to each other.
So let's add some body.
Let's say.
But I don't bottom a picture.
I'm let's try to do because to you, it looks much better.
Now, what we want is we need this to people right here, right below this menu item.
So find out what we can do is select this entire dropdown.
So this AAB job done, let's contact.
Drop this menu item in the dead of UNbased it incited.
Coming back to as you can see, the entire states are gone off because this is turning into a daylight
saving time dark space.
So let's just change it to the line there.
So let's say I'll be dropped on the.
Let's face it here, let's say display in landlock that saber.
Also, let's do our job done as displayed as position absolute.
Let's say that.
Okay, so we've got this job done right below it, just on it's going out.
So let's change that.
So what we can do is we can give it right off.
Zero.
Let's include the volume.
Mark, say 24.
Let us in, please look at most a hundred pixels on top looks better, although these items are going
to the right hand side.
So let's bring them into the center so we could do text align center.
That looks much better.
All right, so as you can see of it brought this up, dropped down here, but it's visible by default.
And what we want is it to be visible.
Only met someone who was on this many like.
So let's do that.
So this entire thing is dropping, drop down, drop.
So that selected.
But before we do anything, let's hide this by default so we could do our job down display.
Now, let's say you're on the top dumbest gun.
All right, so now what you want is when someone who works on this dropdown droplet.
We need to show our dog down, so let's in a catch up drug down
so underground rapper Hoopoe.
All right, so now what we're doing here is so when someone who was on this job done Rappler, we've
selected it, our job done and we get to be do this next block the road to come in here.
Now, when I hope we're on this many making, it shows us this job done.
That's all for today, guys.
If there is something that you did not understand through the rubble comment and we will discuss it.
See you in the next video.
Bye.
Take care.