Welcome back.
Now that we have finished working on our Grid Futer and header, it's time to work on the different
sections of our Web page and make it responsive.
So this is our Web page at the moment.
And I want to start with the about section.
And what I want to do is when I start reducing the size of this one, it becomes the tablet portrait
site.
I want these two columns to split and the road to go down.
That's going to automatically happen when because I've made my changes to the grid.
Right.
But I also want these images to now when they are smaller in size.
First of all, I want them to become smaller in size.
Secondly, I don't want them to come like this because it might not look good in the smaller screens.
I want them to come one next to each other.
So let's get down to making these changes.
So first thing I'm going to do is I'm going to, of course, include the mix in the respon.
Mixon And this is for the portrait tablet.
All right.
Because I want the changes to kick in when the size is the size of a tablet and portrait mode.
I want it to be less obviously, because it's going to be a smaller device, it's going to be a smaller
viewport.
So instead of twenty five percent, let me make it thirty three point thirty three percent.
And you make the height, I want all of them to have the same height.
OK, so let me give it height of 15 rhim.
And since now, I don't want the images to be placed in absolute positions because this was when I wanted
them to be placed in a particular structure.
Now I just want to place them one next to each other.
Right.
So for that, I don't need them to be in absolute position anymore.
They can be in a relative position.
Now I can start positioning the images, OK?
I want the images to be positioned like next to each other, right?
So now I don't need this to be minus two and left minus two, we can just be zero zero, right?
So let me ask you this.
And change this to zero.
And zero.
Same thing here and same thing here, and one thing I forgot is to put a semicolon over here, otherwise
I'm going to get an error.
And I think so far this should be it.
So these are aligned, but the width is not right.
One thing I wanted to do is actually I forgot to do this, I had to set the width for each of the columns.
All right.
So, uh, I forgot to add this to the grid.
So I have the grid open already.
I needed to set the maximum width of the room, which was initially one hundred and fourteen REM.
So let me add it here.
OK, this is inside the room, not inside this part, OK, not last night, it's not here.
It's inside this room element.
It's nested inside the room element.
They're all glass, OK, or the room selector.
So let me add this.
Include respond, and this will be for d'abord.
I will make the max with, um, let me try around 60 reenforced, and this was supposed to also have
the important key word.
OK, and then let's continue now.
So let's take a look at this.
The whip is a little bit better, but I think it could be much more correct.
I mean, it has to be in one line.
All right, and for the whole composition itself, we want to add a few margins, margin left, and
also we want to change the margin top because it's too much.
Do this one over here.
OK, so we put.
Include respond to airport.
And we say margin lift should be auto, not five ram.
So it should be centered nicely and we want the margin top to be.
Adrian.
All right, one way around this is to make the tax deadline property a center for the parent element
of this.
OK, so what I can do is over here, this the parent element for the column.
Read the rules, the parent element for the column so I can just see text align center and this will
make sure that it's all centered.
And that's perfect.
OK, next thing, which is the club amenities, OK, the club amenities section.
So let me close the composition now we're done with this and let me open the amenities.
File.
Amenity books.
And don't need this right now, OK, so for the amenity box, what else do we need to do?
First of all, we need to center all of this looks really weird.
And I think that's the only thing we need to do, otherwise everything seems fine.
So.
All right, so let's add.
Let's include
a mix in here, the response mixin, and it was called tap water, what was called.
Tap water, OK, tap bought
it originally was 28 grams, we wanted a little wider now, so it takes up a little more space here.
So let's give it a width of 50 room and see how it looks for straight, the height can remain the same.
Let's also give it a margin.
Let's start with one point five and see how it looks.
There's no margin on the right side, why is that?
There is, but when it becomes smaller, then it becomes a problem.
OK, so we'll have to fix that later.
And the overlay also has to be the full width, right?
So that's added to the overlay as well.
OK, I don't want to put this margin here.
Now, the thing about mobile devices is that this hover effect actually does not matter in it because
it's of no use.
We don't have a hover effect on phones so we can do away with this hover effect and just have this content
on top as it is.
All right.
So let's do that first.
What we need to do is we want to start without the power just as it is.
We want it.
We want the opacity to start at point seven.
Right now, the opacity is how much?
It's zero.
Right.
But we want to start the opacity with point seven as it is.
OK.
So then the hover effect doesn't really have much to do here.
And we have to do that for all of them.
So for the title.
Actually, the title should have a capacity of zero when it's in the tablet portrait format because
we don't want that to be seen.
OK, and now let me make all this visible.
So the aurally has to be visible, the title has to be visible.
What is the title originally, the capacity for the title is point seven.
What about the content?
The content is initially adiposity zero, right, but now we want it to have the capacity of point seven.
Just the opposite.
Eighty one point seven opacity one, because we want it to be fully visible.
I don't think we need this over here.
So now it's visible, all right, but we wanted to start over here, not over here on top, right.
So let's change that.
So let's see for each of these items, for each of the elements where it is before, however, and where
it is after the over, OK, let's start with the title before the hover.
It is at 50 percent.
Well, the title is zero, but that doesn't matter.
OK, let's go over to.
The this.
No, not the content.
All right, so initially its position is 10 percent and when it's hovered over, its position is at
50 percent.
So we wanted to start a 50 percent.
Next, we Eichen.
So I guess the content boxes for the whole thing, I forgot actually the content boxes for the whole
thing.
For everything, so if you can just adjust the content box, then everything gets adjusted automatically.
All right, so this is how it looks at the moment.
The only thing left to do is when we hover over, see this this thing comes on the back, the the title
which we don't want.
So where is this the title when it is hovered, this one will we added this by mistake.
We didn't need to add it because it's already opacity zero when hovered over and that should be it.
OK, that's it.
So we're done.
I mean, we're done with this part.
Some more things we need to reduce this space over here a bit too much, I guess, and also the space
between this border here and this here, we don't want so much space.
So we're going to do that right at the end, right.
OK, let's move on to the next section, which is the stories from our esteemed members or the testimonial
section.
All right.
Let's close this.
And let's open the testimonials, actually, the first we have to open the B.G., the background video
component, great music video.
And is there anything actually that we need to change for this, the big video is fine.
I don't think there's anything that needs to be changed for it.
What needs to be changed is this testimonial box, right?
So let's close this and let's open the testimonial boxes.
Testimonial access, so right now, the width of each of the testimonials is 40 percent.
We want this to be wider so that it takes up more space.
All right.
So let's make the width at 90 percent.
OK.
So with 90 percent.
And since these are floated, I mean, they've been given margin rate, let's see.
Each of the images you remember, see this one over here is flooded left and it has a margin of five.
We don't want that.
We want zero margin over here.
OK, so let's do that.
OK, so this would be margin left zero.
OK, similarly for the second image of the margin rate should be zero.
And we don't want so much of a margin talk, we don't want to end them, we just have like one room
or something.
It's because of the flawed.
So maybe if we do float none.
It should work.
And that's perfect.
In the same way, as I explained before, you're going to change this hover effect instead of the hover
effect, you're just going to have the name of the person over here.
OK, we don't need to have the hover effect.
And you can probably lessen the blurring as well.
OK, just have the name of the image and make it slightly less blurred than before, would you be able
to do that?
Let that be a challenge for you.
OK?
All right, next, we're going to move on to membership plans.
No, we're not going to know what the membership plans because there's a lot of work to do here.
We're going to do that in the next lesson.
Right.
And so let us finish up with contact first.
So let me open the contact section.
So just a few things that I need to change here, first of all, I want this part.
What do you see the the form part?
I want you to take up the whole space here.
Earlier, it was just towards one corner, right?
I mean, it just took up one part of the contact form.
But now I want to take up this whole space here.
All right.
So for that, let me include a respon mix in over here.
And let me give it a width of one hundred percent before it was just 50 percent, right now it's one
hundred percent.
Uh, let me align everything to the center.
Let's see now.
So it's taking up the whole space, that's fine.
I also want to reduce the padding.
It's a little too much over here, so that takes up as much space as possible.
Right.
So let me just give it a padding of three REM's.
All right, and I want to actually remove this thing over here doesn't make much sense in smaller screens,
right?
So let's remove that.
So we'll copy this first.
We'll just copy this over here.
All right.
And instead of having the gradient transparent over here, we'll just put this color as it is over here.
So it's just uniform, it's the same color throughout.
And notice there's another transparent here.
So we got to add the same thing over here as well.
So it's seamless, there's no transparency anywhere.
I mean, there's no transparent anywhere.
And now that looks much better and that means we're done with the contact section as well.
Now, the only thing left to do is this part, the plans I don't want these things rotating like this
because as I said before, there's no point in having rotation in and held devices.
All right.
So we're going to do this in the next lesson.
And that's going to be the last lesson of this whole series of your response of using SAS.
Makes sense, right.
So I'll see you in the next lesson.