1
00:00:00,450 --> 00:00:01,150
Welcome back.

2
00:00:01,890 --> 00:00:08,670
Now that we have finished working on our Grid Futer and header, it's time to work on the different

3
00:00:08,670 --> 00:00:12,820
sections of our Web page and make it responsive.

4
00:00:13,500 --> 00:00:15,510
So this is our Web page at the moment.

5
00:00:15,900 --> 00:00:18,480
And I want to start with the about section.

6
00:00:18,810 --> 00:00:24,150
And what I want to do is when I start reducing the size of this one, it becomes the tablet portrait

7
00:00:24,150 --> 00:00:24,520
site.

8
00:00:24,960 --> 00:00:28,590
I want these two columns to split and the road to go down.

9
00:00:29,010 --> 00:00:32,910
That's going to automatically happen when because I've made my changes to the grid.

10
00:00:32,920 --> 00:00:33,270
Right.

11
00:00:33,930 --> 00:00:38,330
But I also want these images to now when they are smaller in size.

12
00:00:38,340 --> 00:00:40,110
First of all, I want them to become smaller in size.

13
00:00:40,530 --> 00:00:45,240
Secondly, I don't want them to come like this because it might not look good in the smaller screens.

14
00:00:45,540 --> 00:00:48,030
I want them to come one next to each other.

15
00:00:48,300 --> 00:00:51,650
So let's get down to making these changes.

16
00:00:53,090 --> 00:01:00,350
So first thing I'm going to do is I'm going to, of course, include the mix in the respon.

17
00:01:00,350 --> 00:01:04,040
Mixon And this is for the portrait tablet.

18
00:01:04,070 --> 00:01:04,520
All right.

19
00:01:05,580 --> 00:01:11,310
Because I want the changes to kick in when the size is the size of a tablet and portrait mode.

20
00:01:12,280 --> 00:01:17,590
I want it to be less obviously, because it's going to be a smaller device, it's going to be a smaller

21
00:01:17,590 --> 00:01:18,060
viewport.

22
00:01:18,430 --> 00:01:22,720
So instead of twenty five percent, let me make it thirty three point thirty three percent.

23
00:01:23,980 --> 00:01:27,710
And you make the height, I want all of them to have the same height.

24
00:01:27,770 --> 00:01:30,410
OK, so let me give it height of 15 rhim.

25
00:01:40,150 --> 00:01:47,320
And since now, I don't want the images to be placed in absolute positions because this was when I wanted

26
00:01:47,320 --> 00:01:49,690
them to be placed in a particular structure.

27
00:01:49,960 --> 00:01:52,150
Now I just want to place them one next to each other.

28
00:01:52,670 --> 00:01:53,020
Right.

29
00:01:53,380 --> 00:01:58,150
So for that, I don't need them to be in absolute position anymore.

30
00:01:58,480 --> 00:02:00,750
They can be in a relative position.

31
00:02:05,110 --> 00:02:07,410
Now I can start positioning the images, OK?

32
00:02:11,910 --> 00:02:15,990
I want the images to be positioned like next to each other, right?

33
00:02:16,290 --> 00:02:21,300
So now I don't need this to be minus two and left minus two, we can just be zero zero, right?

34
00:02:23,920 --> 00:02:25,450
So let me ask you this.

35
00:02:27,590 --> 00:02:29,000
And change this to zero.

36
00:02:31,210 --> 00:02:32,260
And zero.

37
00:02:36,520 --> 00:02:43,260
Same thing here and same thing here, and one thing I forgot is to put a semicolon over here, otherwise

38
00:02:43,270 --> 00:02:44,100
I'm going to get an error.

39
00:02:44,620 --> 00:02:47,260
And I think so far this should be it.

40
00:03:03,130 --> 00:03:06,450
So these are aligned, but the width is not right.

41
00:03:08,560 --> 00:03:15,870
One thing I wanted to do is actually I forgot to do this, I had to set the width for each of the columns.

42
00:03:15,890 --> 00:03:16,180
All right.

43
00:03:16,180 --> 00:03:18,070
So, uh, I forgot to add this to the grid.

44
00:03:18,610 --> 00:03:20,170
So I have the grid open already.

45
00:03:20,510 --> 00:03:25,980
I needed to set the maximum width of the room, which was initially one hundred and fourteen REM.

46
00:03:26,890 --> 00:03:29,560
So let me add it here.

47
00:03:31,040 --> 00:03:36,530
OK, this is inside the room, not inside this part, OK, not last night, it's not here.

48
00:03:36,540 --> 00:03:38,960
It's inside this room element.

49
00:03:39,020 --> 00:03:40,520
It's nested inside the room element.

50
00:03:41,000 --> 00:03:44,060
They're all glass, OK, or the room selector.

51
00:03:44,540 --> 00:03:45,740
So let me add this.

52
00:03:48,100 --> 00:03:52,870
Include respond, and this will be for d'abord.

53
00:03:55,920 --> 00:04:06,520
I will make the max with, um, let me try around 60 reenforced, and this was supposed to also have

54
00:04:06,520 --> 00:04:09,790
the important key word.

55
00:04:10,310 --> 00:04:11,840
OK, and then let's continue now.

56
00:04:12,760 --> 00:04:14,200
So let's take a look at this.

57
00:04:15,680 --> 00:04:20,940
The whip is a little bit better, but I think it could be much more correct.

58
00:04:20,960 --> 00:04:22,880
I mean, it has to be in one line.

59
00:04:25,170 --> 00:04:31,320
All right, and for the whole composition itself, we want to add a few margins, margin left, and

60
00:04:31,470 --> 00:04:36,800
also we want to change the margin top because it's too much.

61
00:04:36,810 --> 00:04:38,220
Do this one over here.

62
00:04:38,710 --> 00:04:41,100
OK, so we put.

63
00:04:42,790 --> 00:04:48,880
Include respond to airport.

64
00:04:54,420 --> 00:04:59,490
And we say margin lift should be auto, not five ram.

65
00:05:02,110 --> 00:05:07,810
So it should be centered nicely and we want the margin top to be.

66
00:05:09,620 --> 00:05:10,190
Adrian.

67
00:05:13,880 --> 00:05:20,690
All right, one way around this is to make the tax deadline property a center for the parent element

68
00:05:20,690 --> 00:05:21,050
of this.

69
00:05:21,080 --> 00:05:25,160
OK, so what I can do is over here, this the parent element for the column.

70
00:05:25,160 --> 00:05:32,150
Read the rules, the parent element for the column so I can just see text align center and this will

71
00:05:32,150 --> 00:05:34,340
make sure that it's all centered.

72
00:05:36,080 --> 00:05:37,120
And that's perfect.

73
00:05:41,000 --> 00:05:46,310
OK, next thing, which is the club amenities, OK, the club amenities section.

74
00:05:53,040 --> 00:05:58,290
So let me close the composition now we're done with this and let me open the amenities.

75
00:05:59,940 --> 00:06:00,330
File.

76
00:06:03,070 --> 00:06:04,120
Amenity books.

77
00:06:05,300 --> 00:06:10,420
And don't need this right now, OK, so for the amenity box, what else do we need to do?

78
00:06:12,170 --> 00:06:15,710
First of all, we need to center all of this looks really weird.

79
00:06:16,790 --> 00:06:19,840
And I think that's the only thing we need to do, otherwise everything seems fine.

80
00:06:22,100 --> 00:06:22,850
So.

81
00:06:23,970 --> 00:06:25,410
All right, so let's add.

82
00:06:27,750 --> 00:06:28,800
Let's include

83
00:06:31,560 --> 00:06:37,440
a mix in here, the response mixin, and it was called tap water, what was called.

84
00:06:38,680 --> 00:06:41,320
Tap water, OK, tap bought

85
00:06:44,470 --> 00:06:50,050
it originally was 28 grams, we wanted a little wider now, so it takes up a little more space here.

86
00:06:50,990 --> 00:06:58,640
So let's give it a width of 50 room and see how it looks for straight, the height can remain the same.

87
00:06:59,300 --> 00:07:00,800
Let's also give it a margin.

88
00:07:03,330 --> 00:07:05,630
Let's start with one point five and see how it looks.

89
00:07:13,080 --> 00:07:15,180
There's no margin on the right side, why is that?

90
00:07:17,210 --> 00:07:19,990
There is, but when it becomes smaller, then it becomes a problem.

91
00:07:20,070 --> 00:07:21,880
OK, so we'll have to fix that later.

92
00:07:23,130 --> 00:07:25,630
And the overlay also has to be the full width, right?

93
00:07:25,650 --> 00:07:27,320
So that's added to the overlay as well.

94
00:07:42,870 --> 00:07:44,370
OK, I don't want to put this margin here.

95
00:07:51,130 --> 00:07:58,720
Now, the thing about mobile devices is that this hover effect actually does not matter in it because

96
00:07:58,720 --> 00:07:59,680
it's of no use.

97
00:07:59,710 --> 00:08:06,280
We don't have a hover effect on phones so we can do away with this hover effect and just have this content

98
00:08:06,310 --> 00:08:08,170
on top as it is.

99
00:08:08,200 --> 00:08:08,710
All right.

100
00:08:09,340 --> 00:08:11,400
So let's do that first.

101
00:08:11,860 --> 00:08:16,780
What we need to do is we want to start without the power just as it is.

102
00:08:16,780 --> 00:08:17,390
We want it.

103
00:08:17,440 --> 00:08:20,200
We want the opacity to start at point seven.

104
00:08:20,230 --> 00:08:23,140
Right now, the opacity is how much?

105
00:08:23,140 --> 00:08:23,970
It's zero.

106
00:08:23,980 --> 00:08:24,310
Right.

107
00:08:24,640 --> 00:08:27,410
But we want to start the opacity with point seven as it is.

108
00:08:27,430 --> 00:08:27,760
OK.

109
00:08:29,660 --> 00:08:33,440
So then the hover effect doesn't really have much to do here.

110
00:08:36,700 --> 00:08:38,380
And we have to do that for all of them.

111
00:08:43,940 --> 00:08:45,500
So for the title.

112
00:08:51,640 --> 00:08:57,310
Actually, the title should have a capacity of zero when it's in the tablet portrait format because

113
00:08:57,310 --> 00:08:58,690
we don't want that to be seen.

114
00:09:01,270 --> 00:09:03,880
OK, and now let me make all this visible.

115
00:09:09,480 --> 00:09:13,740
So the aurally has to be visible, the title has to be visible.

116
00:09:17,590 --> 00:09:21,550
What is the title originally, the capacity for the title is point seven.

117
00:09:30,380 --> 00:09:31,580
What about the content?

118
00:09:32,780 --> 00:09:39,050
The content is initially adiposity zero, right, but now we want it to have the capacity of point seven.

119
00:09:41,470 --> 00:09:42,420
Just the opposite.

120
00:09:49,190 --> 00:09:54,560
Eighty one point seven opacity one, because we want it to be fully visible.

121
00:09:56,060 --> 00:09:57,790
I don't think we need this over here.

122
00:10:04,500 --> 00:10:11,090
So now it's visible, all right, but we wanted to start over here, not over here on top, right.

123
00:10:11,640 --> 00:10:12,720
So let's change that.

124
00:10:17,030 --> 00:10:22,820
So let's see for each of these items, for each of the elements where it is before, however, and where

125
00:10:22,820 --> 00:10:28,270
it is after the over, OK, let's start with the title before the hover.

126
00:10:28,370 --> 00:10:30,320
It is at 50 percent.

127
00:10:32,210 --> 00:10:34,730
Well, the title is zero, but that doesn't matter.

128
00:10:35,150 --> 00:10:37,190
OK, let's go over to.

129
00:10:38,970 --> 00:10:40,200
The this.

130
00:10:41,990 --> 00:10:43,230
No, not the content.

131
00:10:43,250 --> 00:10:50,360
All right, so initially its position is 10 percent and when it's hovered over, its position is at

132
00:10:50,630 --> 00:10:51,440
50 percent.

133
00:10:52,100 --> 00:10:54,560
So we wanted to start a 50 percent.

134
00:10:58,590 --> 00:11:00,180
Next, we Eichen.

135
00:11:04,630 --> 00:11:08,740
So I guess the content boxes for the whole thing, I forgot actually the content boxes for the whole

136
00:11:08,740 --> 00:11:09,060
thing.

137
00:11:10,330 --> 00:11:15,760
For everything, so if you can just adjust the content box, then everything gets adjusted automatically.

138
00:11:16,570 --> 00:11:18,970
All right, so this is how it looks at the moment.

139
00:11:19,160 --> 00:11:24,430
The only thing left to do is when we hover over, see this this thing comes on the back, the the title

140
00:11:24,430 --> 00:11:25,240
which we don't want.

141
00:11:25,930 --> 00:11:32,860
So where is this the title when it is hovered, this one will we added this by mistake.

142
00:11:32,860 --> 00:11:39,370
We didn't need to add it because it's already opacity zero when hovered over and that should be it.

143
00:11:41,300 --> 00:11:42,610
OK, that's it.

144
00:11:43,560 --> 00:11:44,240
So we're done.

145
00:11:45,120 --> 00:11:46,320
I mean, we're done with this part.

146
00:11:49,910 --> 00:11:56,870
Some more things we need to reduce this space over here a bit too much, I guess, and also the space

147
00:11:57,350 --> 00:12:00,800
between this border here and this here, we don't want so much space.

148
00:12:01,130 --> 00:12:02,920
So we're going to do that right at the end, right.

149
00:12:05,120 --> 00:12:12,620
OK, let's move on to the next section, which is the stories from our esteemed members or the testimonial

150
00:12:12,620 --> 00:12:13,010
section.

151
00:12:14,030 --> 00:12:14,490
All right.

152
00:12:14,510 --> 00:12:15,770
Let's close this.

153
00:12:18,110 --> 00:12:24,050
And let's open the testimonials, actually, the first we have to open the B.G., the background video

154
00:12:24,440 --> 00:12:26,000
component, great music video.

155
00:12:27,380 --> 00:12:32,580
And is there anything actually that we need to change for this, the big video is fine.

156
00:12:32,600 --> 00:12:34,750
I don't think there's anything that needs to be changed for it.

157
00:12:35,180 --> 00:12:38,180
What needs to be changed is this testimonial box, right?

158
00:12:39,260 --> 00:12:42,860
So let's close this and let's open the testimonial boxes.

159
00:12:46,710 --> 00:12:52,530
Testimonial access, so right now, the width of each of the testimonials is 40 percent.

160
00:12:52,560 --> 00:12:56,130
We want this to be wider so that it takes up more space.

161
00:12:56,160 --> 00:12:56,490
All right.

162
00:12:56,940 --> 00:12:59,560
So let's make the width at 90 percent.

163
00:12:59,580 --> 00:12:59,910
OK.

164
00:13:12,460 --> 00:13:14,680
So with 90 percent.

165
00:13:18,640 --> 00:13:23,530
And since these are floated, I mean, they've been given margin rate, let's see.

166
00:13:24,600 --> 00:13:30,460
Each of the images you remember, see this one over here is flooded left and it has a margin of five.

167
00:13:31,050 --> 00:13:32,000
We don't want that.

168
00:13:32,430 --> 00:13:34,240
We want zero margin over here.

169
00:13:34,310 --> 00:13:36,360
OK, so let's do that.

170
00:13:53,020 --> 00:13:56,920
OK, so this would be margin left zero.

171
00:14:00,730 --> 00:14:05,560
OK, similarly for the second image of the margin rate should be zero.

172
00:14:13,290 --> 00:14:18,170
And we don't want so much of a margin talk, we don't want to end them, we just have like one room

173
00:14:18,180 --> 00:14:18,630
or something.

174
00:14:28,180 --> 00:14:29,350
It's because of the flawed.

175
00:14:30,230 --> 00:14:32,240
So maybe if we do float none.

176
00:14:35,150 --> 00:14:36,440
It should work.

177
00:14:44,600 --> 00:14:46,070
And that's perfect.

178
00:14:52,190 --> 00:14:58,010
In the same way, as I explained before, you're going to change this hover effect instead of the hover

179
00:14:58,010 --> 00:15:01,040
effect, you're just going to have the name of the person over here.

180
00:15:01,430 --> 00:15:03,590
OK, we don't need to have the hover effect.

181
00:15:05,420 --> 00:15:07,830
And you can probably lessen the blurring as well.

182
00:15:07,880 --> 00:15:12,410
OK, just have the name of the image and make it slightly less blurred than before, would you be able

183
00:15:12,410 --> 00:15:12,920
to do that?

184
00:15:14,040 --> 00:15:15,540
Let that be a challenge for you.

185
00:15:15,880 --> 00:15:16,220
OK?

186
00:15:17,150 --> 00:15:20,380
All right, next, we're going to move on to membership plans.

187
00:15:20,400 --> 00:15:23,570
No, we're not going to know what the membership plans because there's a lot of work to do here.

188
00:15:24,140 --> 00:15:25,460
We're going to do that in the next lesson.

189
00:15:25,470 --> 00:15:25,710
Right.

190
00:15:26,030 --> 00:15:28,610
And so let us finish up with contact first.

191
00:15:31,010 --> 00:15:33,350
So let me open the contact section.

192
00:15:40,260 --> 00:15:44,330
So just a few things that I need to change here, first of all, I want this part.

193
00:15:44,910 --> 00:15:47,250
What do you see the the form part?

194
00:15:47,490 --> 00:15:49,740
I want you to take up the whole space here.

195
00:15:50,340 --> 00:15:52,860
Earlier, it was just towards one corner, right?

196
00:15:52,890 --> 00:15:55,950
I mean, it just took up one part of the contact form.

197
00:15:55,950 --> 00:15:59,100
But now I want to take up this whole space here.

198
00:15:59,370 --> 00:15:59,810
All right.

199
00:16:00,270 --> 00:16:03,990
So for that, let me include a respon mix in over here.

200
00:16:14,110 --> 00:16:19,150
And let me give it a width of one hundred percent before it was just 50 percent, right now it's one

201
00:16:19,150 --> 00:16:19,780
hundred percent.

202
00:16:20,320 --> 00:16:22,690
Uh, let me align everything to the center.

203
00:16:26,870 --> 00:16:27,650
Let's see now.

204
00:16:29,620 --> 00:16:31,720
So it's taking up the whole space, that's fine.

205
00:16:32,140 --> 00:16:33,680
I also want to reduce the padding.

206
00:16:33,700 --> 00:16:37,720
It's a little too much over here, so that takes up as much space as possible.

207
00:16:37,730 --> 00:16:37,930
Right.

208
00:16:37,960 --> 00:16:40,030
So let me just give it a padding of three REM's.

209
00:16:50,430 --> 00:16:55,860
All right, and I want to actually remove this thing over here doesn't make much sense in smaller screens,

210
00:16:55,860 --> 00:16:56,090
right?

211
00:16:56,490 --> 00:16:57,900
So let's remove that.

212
00:16:58,590 --> 00:17:01,020
So we'll copy this first.

213
00:17:04,840 --> 00:17:06,670
We'll just copy this over here.

214
00:17:07,300 --> 00:17:07,810
All right.

215
00:17:12,440 --> 00:17:20,660
And instead of having the gradient transparent over here, we'll just put this color as it is over here.

216
00:17:20,670 --> 00:17:23,560
So it's just uniform, it's the same color throughout.

217
00:17:24,200 --> 00:17:25,990
And notice there's another transparent here.

218
00:17:26,000 --> 00:17:28,900
So we got to add the same thing over here as well.

219
00:17:30,100 --> 00:17:33,820
So it's seamless, there's no transparency anywhere.

220
00:17:34,030 --> 00:17:35,680
I mean, there's no transparent anywhere.

221
00:17:38,990 --> 00:17:44,040
And now that looks much better and that means we're done with the contact section as well.

222
00:17:45,610 --> 00:17:51,280
Now, the only thing left to do is this part, the plans I don't want these things rotating like this

223
00:17:51,850 --> 00:17:57,130
because as I said before, there's no point in having rotation in and held devices.

224
00:17:57,640 --> 00:17:58,130
All right.

225
00:17:58,130 --> 00:18:01,030
So we're going to do this in the next lesson.

226
00:18:01,030 --> 00:18:05,530
And that's going to be the last lesson of this whole series of your response of using SAS.

227
00:18:05,530 --> 00:18:06,210
Makes sense, right.

228
00:18:06,580 --> 00:18:08,110
So I'll see you in the next lesson.