1 00:00:01,560 --> 00:00:04,200 line:15% Hello back and welcome to part 2 of 2 00:00:04,200 --> 00:00:06,780 line:15% Building the favorite meals section. 3 00:00:06,780 --> 00:00:10,394 line:15% Let's go straight back into brackets. 4 00:00:10,394 --> 00:00:13,894 So let's continue formatting this section. 5 00:00:13,894 --> 00:00:17,354 Now the first thing we notice and that we didn't correct yet 6 00:00:17,354 --> 00:00:21,354 is this large distance between this two section, 7 00:00:21,354 --> 00:00:24,714 which doesn't look natural and that's because 8 00:00:24,714 --> 00:00:28,154 this section like the other section, as well, 9 00:00:28,154 --> 00:00:31,571 has a big padding which goes like, until, 10 00:00:33,224 --> 00:00:34,057 here. 11 00:00:34,985 --> 00:00:37,484 We actually don't want this section to having padding. 12 00:00:37,484 --> 00:00:38,844 Because it's a different section, 13 00:00:38,844 --> 00:00:41,384 it doesn't have a title and everything 14 00:00:41,384 --> 00:00:45,551 so we don't want this section to have a padding like that. 15 00:00:48,004 --> 00:00:50,504 So let's quickly correct that. 16 00:00:53,024 --> 00:00:55,684 So this section is called, 17 00:00:55,684 --> 00:00:58,517 Section, I honestly don't remember 18 00:01:00,104 --> 00:01:01,521 Meals, of course. 19 00:01:03,264 --> 00:01:04,681 So section-meals, 20 00:01:06,644 --> 00:01:09,144 I will say padding zero 21 00:01:10,100 --> 00:01:12,933 and that should solve the problem. 22 00:01:14,600 --> 00:01:17,600 Yeah so this looks much better. 23 00:01:19,859 --> 00:01:22,359 And next, next we will do that 24 00:01:23,806 --> 00:01:25,026 animation 25 00:01:25,026 --> 00:01:27,286 I was telling you about. 26 00:01:27,286 --> 00:01:29,606 Now what this animation is all about 27 00:01:29,606 --> 00:01:32,856 is that when we hover one of the images 28 00:01:33,926 --> 00:01:38,093 the image kind of zooms out and also gets lighter. 29 00:01:40,166 --> 00:01:43,746 So we want to make the image dark and zoom in 30 00:01:43,746 --> 00:01:46,326 so that when we hover the image, 31 00:01:46,326 --> 00:01:49,659 the image can zoom out and get brighter. 32 00:01:52,406 --> 00:01:55,656 Once I see this, you will get the idea. 33 00:01:58,486 --> 00:02:01,175 So we can use a powerful 34 00:02:01,175 --> 00:02:02,758 CSS3 35 00:02:03,683 --> 00:02:05,123 property, 36 00:02:05,123 --> 00:02:07,163 which is transform. 37 00:02:07,163 --> 00:02:10,744 We actually already used that before, 38 00:02:10,744 --> 00:02:13,083 now we're going to use it again. 39 00:02:13,083 --> 00:02:16,500 So in this case, we will scale the image, 40 00:02:17,923 --> 00:02:21,803 in fact, all of the images we will scale them 41 00:02:21,803 --> 00:02:23,886 to like, 1.15, 42 00:02:25,118 --> 00:02:27,338 and this means that the image 43 00:02:27,338 --> 00:02:31,163 will be instead of 100%, 44 00:02:31,163 --> 00:02:33,996 it will be 115% big. 45 00:02:37,842 --> 00:02:40,342 So let's see this in practice. 46 00:02:43,202 --> 00:02:45,452 So these images have grown. 47 00:02:46,682 --> 00:02:50,349 They are bigger than they are supposed to be 48 00:02:51,202 --> 00:02:55,082 and you see they even go out off the browser width. 49 00:02:55,082 --> 00:02:58,502 It's even bigger than the browser now. 50 00:02:58,502 --> 00:03:01,862 And we will fix that in a moment 51 00:03:01,862 --> 00:03:06,122 because we don't want these images to be bigger 52 00:03:06,122 --> 00:03:09,702 than their container, which is meal-photo. 53 00:03:09,702 --> 00:03:11,962 So right now, the image just kind of 54 00:03:11,962 --> 00:03:13,962 overflows its container. 55 00:03:15,322 --> 00:03:17,062 So what can we do about this? 56 00:03:17,062 --> 00:03:20,782 There's a nice little property called overflow 57 00:03:20,782 --> 00:03:23,002 and if we set it to hidden, 58 00:03:23,002 --> 00:03:25,122 then that overflow will not be visible 59 00:03:25,122 --> 00:03:27,482 and we just see the part of the image 60 00:03:27,482 --> 00:03:29,922 which is still inside of the container. 61 00:03:29,922 --> 00:03:31,005 So let's see. 62 00:03:32,922 --> 00:03:36,902 Alright, so this is exactly what we want 63 00:03:36,902 --> 00:03:41,107 and now what we want is to change that transform 64 00:03:41,107 --> 00:03:44,440 property when we hover the image, right? 65 00:03:46,085 --> 00:03:48,168 So let's do exactly that. 66 00:03:50,005 --> 00:03:53,838 And maybe you already see where this is going. 67 00:03:54,765 --> 00:03:56,905 So what I'm doing now is 68 00:03:56,905 --> 00:04:00,238 meal-photo image 69 00:04:01,084 --> 00:04:03,635 and now we can also use this 70 00:04:03,635 --> 00:04:05,885 hover state for everything. 71 00:04:06,875 --> 00:04:09,255 This doesn't work only for links 72 00:04:09,255 --> 00:04:12,838 even if we only use it for links until now, 73 00:04:13,695 --> 00:04:16,945 but it works really with every element. 74 00:04:18,455 --> 00:04:21,195 And so what do we want to happen? 75 00:04:21,195 --> 00:04:23,778 We want this transform 76 00:04:24,704 --> 00:04:27,037 to go back to normal, right? 77 00:04:28,344 --> 00:04:30,177 So we scale it to one. 78 00:04:33,424 --> 00:04:37,424 Let's see if this works and if you get the idea. 79 00:04:38,805 --> 00:04:41,138 So, so this is what happens. 80 00:04:42,805 --> 00:04:47,545 Don't worry, we will put an animation there in a moment, 81 00:04:47,545 --> 00:04:49,628 but this is what happens. 82 00:04:51,305 --> 00:04:54,105 And you see there is actually, like, 83 00:04:54,105 --> 00:04:56,605 a while little line down there 84 00:04:58,665 --> 00:05:01,625 and I actually can't tell you why that happens, 85 00:05:01,625 --> 00:05:03,865 but I know a good solution to that. 86 00:05:03,865 --> 00:05:06,782 So instead of scaling it until one, 87 00:05:08,725 --> 00:05:11,308 I'm just gonna scale it to 1.03 88 00:05:14,125 --> 00:05:17,025 and this should solve the problem. 89 00:05:17,025 --> 00:05:18,785 And also I want to, of course, 90 00:05:18,785 --> 00:05:21,035 animate this transformation 91 00:05:22,565 --> 00:05:24,648 so what, how can I do it? 92 00:05:25,553 --> 00:05:26,386 I say 93 00:05:28,222 --> 00:05:29,555 transition 94 00:05:30,912 --> 00:05:32,412 and then transform 95 00:05:33,972 --> 00:05:36,756 and let's say 96 00:05:36,756 --> 00:05:39,339 hold for seconds 0.5 seconds 97 00:05:41,839 --> 00:05:43,759 and this should already do the job. 98 00:05:43,759 --> 00:05:45,559 So this is exactly the same thing 99 00:05:45,559 --> 00:05:49,559 as we did with our links here, right? 100 00:05:50,960 --> 00:05:54,340 We defined the transition with the interval 101 00:05:54,340 --> 00:05:56,840 and then with the hover state, 102 00:05:58,040 --> 00:06:00,207 we said what would happen. 103 00:06:01,600 --> 00:06:05,767 So this is what we did right here so let's check it out. 104 00:06:08,440 --> 00:06:11,040 Okay, this is very nice, right? 105 00:06:11,040 --> 00:06:13,520 This is really, really cool, don't you think so? 106 00:06:13,520 --> 00:06:15,520 It's a beautiful effect, 107 00:06:16,760 --> 00:06:20,680 but we will go even further than this. 108 00:06:20,680 --> 00:06:23,660 So, as I said in the beginning, 109 00:06:23,660 --> 00:06:26,020 we will make this image darker 110 00:06:26,020 --> 00:06:29,853 and then as we hover it, we'll make it lighter 111 00:06:30,720 --> 00:06:33,500 and that's quite easy to do. 112 00:06:33,500 --> 00:06:36,920 As we built the header, we learned how to make 113 00:06:36,920 --> 00:06:40,900 a background image darker, which was our here image, right? 114 00:06:40,900 --> 00:06:44,920 And now let's try to make this image darker. 115 00:06:44,920 --> 00:06:48,680 Let me show you how we're going to do that. 116 00:06:48,680 --> 00:06:52,263 So if we set the opacity, 117 00:06:53,637 --> 00:06:56,457 yet another CSS property, 118 00:06:56,457 --> 00:07:00,637 you see, you're using a lot of properties here. 119 00:07:00,637 --> 00:07:02,557 I mean, I'm covering almost everything 120 00:07:02,557 --> 00:07:07,097 that you need to know with just this website. 121 00:07:07,097 --> 00:07:10,588 So opacity 0.7, 122 00:07:10,588 --> 00:07:14,421 so this is 70%. 123 00:07:15,668 --> 00:07:19,028 Just to show you, let me show you what this looks like. 124 00:07:19,028 --> 00:07:22,608 So this is kind of white now and it's white 125 00:07:22,608 --> 00:07:24,528 because its background is white 126 00:07:24,528 --> 00:07:27,427 so if we want to make this darker, 127 00:07:27,427 --> 00:07:31,446 we just put the background 128 00:07:31,446 --> 00:07:33,363 of this image to black, 129 00:07:35,366 --> 00:07:37,866 zero zero zero. 130 00:07:37,866 --> 00:07:42,566 So behind that image, we now have a black container 131 00:07:42,566 --> 00:07:45,483 and since this image is now opaque, 132 00:07:46,925 --> 00:07:48,508 it will get darker. 133 00:07:51,285 --> 00:07:52,368 Very well 134 00:07:53,705 --> 00:07:57,104 This looks really great, right? 135 00:07:57,104 --> 00:07:59,575 And now we just have to 136 00:07:59,575 --> 00:08:01,158 animate 137 00:08:02,780 --> 00:08:04,197 the opacity here. 138 00:08:06,653 --> 00:08:10,820 So when we hover, we also want the opacity to change 139 00:08:11,673 --> 00:08:14,340 back to one, which is 100%, 140 00:08:17,413 --> 00:08:20,733 and in order to animate it, we put it right here 141 00:08:20,733 --> 00:08:22,400 so opacity 142 00:08:23,692 --> 00:08:27,109 opacity 0.5 seconds 143 00:08:29,015 --> 00:08:33,182 and now we should see both of the things animated. 144 00:08:35,175 --> 00:08:38,995 And here we go, wow this is really exciting, right? 145 00:08:38,995 --> 00:08:40,662 This looks so great. 146 00:08:43,915 --> 00:08:46,255 You see how simple this was? 147 00:08:46,255 --> 00:08:49,672 So I think the section is also done here. 148 00:08:51,275 --> 00:08:53,915 Another thing that I noticed 149 00:08:53,915 --> 00:08:57,115 when I was revisiting this section here 150 00:08:57,115 --> 00:08:58,655 was that we maybe need some space 151 00:08:58,655 --> 00:09:02,488 between this paragraph here and these columns. 152 00:09:03,435 --> 00:09:04,435 So what I'm going to do is 153 00:09:04,435 --> 00:09:08,602 add some bottom margin to this paragraph. 154 00:09:12,264 --> 00:09:16,014 So if you remember, it's the long-copy class, 155 00:09:17,024 --> 00:09:19,469 and I will again 156 00:09:19,469 --> 00:09:23,029 make a little section here for that 157 00:09:23,029 --> 00:09:26,946 called features. 158 00:09:29,368 --> 00:09:32,368 Alright, because 159 00:09:34,312 --> 00:09:38,332 where is it, so it's this, it's this class, 160 00:09:38,332 --> 00:09:43,210 but I don't want to make a margin to 161 00:09:43,210 --> 00:09:45,890 to all long-copy class 162 00:09:45,890 --> 00:09:49,890 element that we will use throughout the website. 163 00:09:51,510 --> 00:09:54,531 So again I'm using the long-copy 164 00:09:54,531 --> 00:09:57,031 inside of the section-features 165 00:09:58,011 --> 00:10:00,094 so let me just copy this. 166 00:10:01,391 --> 00:10:04,611 See, this is a very usual practice. 167 00:10:04,611 --> 00:10:08,090 So section-features and then the long-copy, 168 00:10:08,090 --> 00:10:10,090 which is inside of that, 169 00:10:11,090 --> 00:10:14,590 and then we just specify its margin bottom 170 00:10:15,450 --> 00:10:17,367 and set it to 40 pixels 171 00:10:20,110 --> 00:10:21,610 and now, 172 00:10:23,630 --> 00:10:26,550 this looks much better right? 173 00:10:26,550 --> 00:10:29,530 Okay, probably 40 was a little too much. 174 00:10:29,530 --> 00:10:31,590 Again, this is, this is really designing 175 00:10:31,590 --> 00:10:34,673 in the browser and it's really great. 176 00:10:38,130 --> 00:10:42,790 Yeah, this looks cool now, don't you think so? 177 00:10:42,790 --> 00:10:45,730 So let me revisit the whole thing. 178 00:10:45,730 --> 00:10:48,250 We designed this section, 179 00:10:48,250 --> 00:10:50,730 everything beautiful, 180 00:10:50,730 --> 00:10:53,350 then we did this section, 181 00:10:53,350 --> 00:10:58,010 and now we even have this powerful transition stuff. 182 00:10:58,010 --> 00:11:01,177 Wow, you've learned such a lot so far, 183 00:11:02,030 --> 00:11:04,030 a lot of CSS properties. 184 00:11:04,890 --> 00:11:07,910 You should probably take note of them 185 00:11:07,910 --> 00:11:10,770 or copy them somewhere so that you have 186 00:11:10,770 --> 00:11:14,770 a whole list of things that you can do with CSS. 187 00:11:16,290 --> 00:11:20,550 So that's it for now and maybe you want to take a break now 188 00:11:20,550 --> 00:11:24,050 or you can just join me in the next lecture, 189 00:11:24,050 --> 00:11:26,950 where we will design our next section. 190 00:11:26,950 --> 00:11:29,033 So see you there and bye.