Original subtitles

1 1

Hello back and welcome to part 2 of 2

2

Building the favorite meals section. 3

3

Let's go straight back into brackets. 4

4

So let's continue formatting this section. 5

5

Now the first thing we notice and that we didn't correct yet 6

6

is this large distance between this two section, 7

7

which doesn't look natural and that's because 8

8

this section like the other section, as well, 9

9

has a big padding which goes like, until, 10

10

here. 11

11

We actually don't want this section to having padding. 12

12

Because it's a different section, 13

13

it doesn't have a title and everything 14

14

so we don't want this section to have a padding like that. 15

15

So let's quickly correct that. 16

16

So this section is called, 17

17

Section, I honestly don't remember 18

18

Meals, of course. 19

19

So section-meals, 20

20

I will say padding zero 21

21

and that should solve the problem. 22

22

Yeah so this looks much better. 23

23

And next, next we will do that 24

24

animation 25

25

I was telling you about. 26

26

Now what this animation is all about 27

27

is that when we hover one of the images 28

28

the image kind of zooms out and also gets lighter. 29

29

So we want to make the image dark and zoom in 30

30

so that when we hover the image, 31

31

the image can zoom out and get brighter. 32

32

Once I see this, you will get the idea. 33

33

So we can use a powerful 34

34

CSS3 35

35

property, 36

36

which is transform. 37

37

We actually already used that before, 38

38

now we're going to use it again. 39

39

So in this case, we will scale the image, 40

40

in fact, all of the images we will scale them 41

41

to like, 1.15, 42

42

and this means that the image 43

43

will be instead of 100%, 44

44

it will be 115% big. 45

45

So let's see this in practice. 46

46

So these images have grown. 47

47

They are bigger than they are supposed to be 48

48

and you see they even go out off the browser width. 49

49

It's even bigger than the browser now. 50

50

And we will fix that in a moment 51

51

because we don't want these images to be bigger 52

52

than their container, which is meal-photo. 53

53

So right now, the image just kind of 54

54

overflows its container. 55

55

So what can we do about this? 56

56

There's a nice little property called overflow 57

57

and if we set it to hidden, 58

58

then that overflow will not be visible 59

59

and we just see the part of the image 60

60

which is still inside of the container. 61

61

So let's see. 62

62

Alright, so this is exactly what we want 63

63

and now what we want is to change that transform 64

64

property when we hover the image, right? 65

65

So let's do exactly that. 66

66

And maybe you already see where this is going. 67

67

So what I'm doing now is 68

68

meal-photo image 69

69

and now we can also use this 70

70

hover state for everything. 71

71

This doesn't work only for links 72

72

even if we only use it for links until now, 73

73

but it works really with every element. 74

74

And so what do we want to happen? 75

75

We want this transform 76

76

to go back to normal, right? 77

77

So we scale it to one. 78

78

Let's see if this works and if you get the idea. 79

79

So, so this is what happens. 80

80

Don't worry, we will put an animation there in a moment, 81

81

but this is what happens. 82

82

And you see there is actually, like, 83

83

a while little line down there 84

84

and I actually can't tell you why that happens, 85

85

but I know a good solution to that. 86

86

So instead of scaling it until one, 87

87

I'm just gonna scale it to 1.03 88

88

and this should solve the problem. 89

89

And also I want to, of course, 90

90

animate this transformation 91

91

so what, how can I do it? 92

92

I say 93

93

transition 94

94

and then transform 95

95

and let's say 96

96

hold for seconds 0.5 seconds 97

97

and this should already do the job. 98

98

So this is exactly the same thing 99

99

as we did with our links here, right? 100

100

We defined the transition with the interval 101

101

and then with the hover state, 102

102

we said what would happen. 103

103

So this is what we did right here so let's check it out. 104

104

Okay, this is very nice, right? 105

105

This is really, really cool, don't you think so? 106

106

It's a beautiful effect, 107

107

but we will go even further than this. 108

108

So, as I said in the beginning, 109

109

we will make this image darker 110

110

and then as we hover it, we'll make it lighter 111

111

and that's quite easy to do. 112

112

As we built the header, we learned how to make 113

113

a background image darker, which was our here image, right? 114

114

And now let's try to make this image darker. 115

115

Let me show you how we're going to do that. 116

116

So if we set the opacity, 117

117

yet another CSS property, 118

118

you see, you're using a lot of properties here. 119

119

I mean, I'm covering almost everything 120

120

that you need to know with just this website. 121

121

So opacity 0.7, 122

122

so this is 70%. 123

123

Just to show you, let me show you what this looks like. 124

124

So this is kind of white now and it's white 125

125

because its background is white 126

126

so if we want to make this darker, 127

127

we just put the background 128

128

of this image to black, 129

129

zero zero zero. 130

130

So behind that image, we now have a black container 131

131

and since this image is now opaque, 132

132

it will get darker. 133

133

Very well 134

134

This looks really great, right? 135

135

And now we just have to 136

136

animate 137

137

the opacity here. 138

138

So when we hover, we also want the opacity to change 139

139

back to one, which is 100%, 140

140

and in order to animate it, we put it right here 141

141

so opacity 142

142

opacity 0.5 seconds 143

143

and now we should see both of the things animated. 144

144

And here we go, wow this is really exciting, right? 145

145

This looks so great. 146

146

You see how simple this was? 147

147

So I think the section is also done here. 148

148

Another thing that I noticed 149

149

when I was revisiting this section here 150

150

was that we maybe need some space 151

151

between this paragraph here and these columns. 152

152

So what I'm going to do is 153

153

add some bottom margin to this paragraph. 154

154

So if you remember, it's the long-copy class, 155

155

and I will again 156

156

make a little section here for that 157

157

called features. 158

158

Alright, because 159

159

where is it, so it's this, it's this class, 160

160

but I don't want to make a margin to 161

161

to all long-copy class 162

162

element that we will use throughout the website. 163

163

So again I'm using the long-copy 164

164

inside of the section-features 165

165

so let me just copy this. 166

166

See, this is a very usual practice. 167

167

So section-features and then the long-copy, 168

168

which is inside of that, 169

169

and then we just specify its margin bottom 170

170

and set it to 40 pixels 171

171

and now, 172

172

this looks much better right? 173

173

Okay, probably 40 was a little too much. 174

174

Again, this is, this is really designing 175

175

in the browser and it's really great. 176

176

Yeah, this looks cool now, don't you think so? 177

177

So let me revisit the whole thing. 178

178

We designed this section, 179

179

everything beautiful, 180

180

then we did this section, 181

181

and now we even have this powerful transition stuff. 182

182

Wow, you've learned such a lot so far, 183

183

a lot of CSS properties. 184

184

You should probably take note of them 185

185

or copy them somewhere so that you have 186

186

a whole list of things that you can do with CSS. 187

187

So that's it for now and maybe you want to take a break now 188

188

or you can just join me in the next lecture, 189

189

where we will design our next section. 190

190

So see you there and bye.