1 00:00:02,469 --> 00:00:04,280 Let's take the chance to style 2 00:00:04,280 --> 00:00:07,530 the different parts of our card now in a bit more detail, 3 00:00:07,530 --> 00:00:09,920 and let's get started with the card itself. 4 00:00:09,920 --> 00:00:12,150 So with the list item. 5 00:00:12,150 --> 00:00:15,800 Here, I want to add some properties we learned about that 6 00:00:15,800 --> 00:00:18,980 we use to improve the styling of our page. 7 00:00:18,980 --> 00:00:22,640 And one property is our box-shadow that we can add 8 00:00:22,640 --> 00:00:23,780 to the entire card. 9 00:00:23,780 --> 00:00:26,590 So here to our list item, 10 00:00:26,590 --> 00:00:30,760 here, I will set the box shadow to again, 11 00:00:30,760 --> 00:00:32,520 maybe one pixel left, right. 12 00:00:32,520 --> 00:00:36,490 One pixel top, bottom, and the radius of four pixels. 13 00:00:36,490 --> 00:00:38,800 With an RGBA color here once again, 14 00:00:38,800 --> 00:00:42,720 because if we're to work on the opacity of it, 15 00:00:42,720 --> 00:00:44,570 so this should be just black again. 16 00:00:44,570 --> 00:00:48,010 So zero, zero, zero. 17 00:00:48,010 --> 00:00:51,963 And here we'll add a value for alpha of 0.2. 18 00:00:53,290 --> 00:00:58,290 We'll also add a border radius of six pixels here 19 00:01:00,740 --> 00:01:02,670 and with this, yeah, 20 00:01:02,670 --> 00:01:04,760 our card looks better already. 21 00:01:04,760 --> 00:01:06,290 Hard to see the back shadow here. 22 00:01:06,290 --> 00:01:09,430 But if we zoom in a bit, you can slightly see it. 23 00:01:09,430 --> 00:01:11,640 So it's just a very little addition to it, 24 00:01:11,640 --> 00:01:13,970 to make the look a bit better. 25 00:01:13,970 --> 00:01:17,270 The card looks good, while the image doesn't. 26 00:01:17,270 --> 00:01:18,590 Two reasons for this. 27 00:01:18,590 --> 00:01:21,960 If we check the right upper corner of our card, 28 00:01:21,960 --> 00:01:24,530 you see our rounded corner due to 29 00:01:24,530 --> 00:01:27,600 the border radius property we applied. 30 00:01:27,600 --> 00:01:28,630 On the left side, though, 31 00:01:28,630 --> 00:01:30,040 where the image sits, well, 32 00:01:30,040 --> 00:01:32,500 we don't have these rounded corners. 33 00:01:32,500 --> 00:01:33,850 What's the reason for this? 34 00:01:35,170 --> 00:01:39,460 Well our image here exceeds the border of the container. 35 00:01:39,460 --> 00:01:41,620 So of the list item here, 36 00:01:41,620 --> 00:01:44,250 although it doesn't exceed it in general, 37 00:01:44,250 --> 00:01:47,190 it exceeds it in the corners where we apply 38 00:01:47,190 --> 00:01:50,513 the different property to our container. 39 00:01:51,360 --> 00:01:53,550 We can change this behavior though, 40 00:01:53,550 --> 00:01:56,560 with a specific property. 41 00:01:56,560 --> 00:02:00,610 This property is called overflow and it allows us to well, 42 00:02:00,610 --> 00:02:02,470 control the overflow. 43 00:02:02,470 --> 00:02:03,910 So how an element, 44 00:02:03,910 --> 00:02:08,782 which exceeds the dimension of the container, is behaving. 45 00:02:08,782 --> 00:02:10,949 So here in the end, we want to, 46 00:02:10,949 --> 00:02:13,960 well clip anything that would exceed our container. 47 00:02:13,960 --> 00:02:16,220 So the corners here in the end, 48 00:02:16,220 --> 00:02:19,510 and this can be achieved with this property. 49 00:02:19,510 --> 00:02:23,640 This property is not applied to the child in the container, 50 00:02:23,640 --> 00:02:26,170 so to say, but to the container itself, 51 00:02:26,170 --> 00:02:28,920 because typically you want all elements, 52 00:02:28,920 --> 00:02:32,920 which are part of your container, to behave the same way, 53 00:02:32,920 --> 00:02:35,540 when it comes to that overflow behavior. 54 00:02:35,540 --> 00:02:38,970 For this, we can apply this overflow property here 55 00:02:38,970 --> 00:02:41,110 to our list item. 56 00:02:41,110 --> 00:02:44,140 Therefore we'll set the overflow here to 57 00:02:45,100 --> 00:02:48,320 the default value first, which is visible. 58 00:02:48,320 --> 00:02:51,800 This, no big surprise, doesn't change a thing. 59 00:02:51,800 --> 00:02:54,060 We still have these corners here. 60 00:02:54,060 --> 00:02:57,270 This is the default behavior, but as you just saw it with 61 00:02:57,270 --> 00:02:58,570 the position property, 62 00:02:58,570 --> 00:03:00,540 there might be cases where you want to go back 63 00:03:00,540 --> 00:03:01,510 to this behavior. 64 00:03:01,510 --> 00:03:04,273 Therefore, you can keep this value here in mind. 65 00:03:05,740 --> 00:03:09,210 For our purpose here though, we need another value. 66 00:03:09,210 --> 00:03:11,620 Our value here is not visible, 67 00:03:11,620 --> 00:03:14,740 but it is hidden, so easy to remember, 68 00:03:14,740 --> 00:03:17,170 visible default one, hidden well, 69 00:03:17,170 --> 00:03:19,450 the case you probably need in your projects 70 00:03:19,450 --> 00:03:20,730 from time to time. 71 00:03:20,730 --> 00:03:22,870 With hidden, if we go back, 72 00:03:22,870 --> 00:03:24,720 you see that the image and by the way, 73 00:03:24,720 --> 00:03:26,680 also all the other elements, 74 00:03:26,680 --> 00:03:31,000 exactly fit into the borders of the container. 75 00:03:31,000 --> 00:03:31,833 And with that, 76 00:03:31,833 --> 00:03:34,063 we also improve the look right here. 77 00:03:35,790 --> 00:03:38,800 Our image still doesn't look perfect though. 78 00:03:38,800 --> 00:03:41,470 It is squashed into the container 79 00:03:41,470 --> 00:03:43,820 because we applied a fixed dimension to it. 80 00:03:43,820 --> 00:03:46,480 We talked about images in a lot of detail 81 00:03:46,480 --> 00:03:48,550 in earlier lectures of this module. 82 00:03:48,550 --> 00:03:51,250 So if you closely inspect the image, it's again, 83 00:03:51,250 --> 00:03:52,240 squashed a bit. 84 00:03:52,240 --> 00:03:55,120 So it has its default dimensions. 85 00:03:55,120 --> 00:03:58,430 You probably remember how we can change this. 86 00:03:58,430 --> 00:04:02,030 We can change this with the object fit property. 87 00:04:02,030 --> 00:04:03,563 If we add it here, 88 00:04:05,040 --> 00:04:08,810 to the image in the dev tools, object fit, 89 00:04:08,810 --> 00:04:10,803 and which value do we need right here, 90 00:04:12,000 --> 00:04:14,170 cover, that's exactly what we need. 91 00:04:14,170 --> 00:04:17,760 It will fit the image into the space available 92 00:04:17,760 --> 00:04:20,740 and will cut off any parts of it, 93 00:04:20,740 --> 00:04:23,410 which would be bigger than the space available. 94 00:04:23,410 --> 00:04:26,430 And if we unselect this now, you'll see what I mean. 95 00:04:26,430 --> 00:04:28,530 We squashed it into a container. 96 00:04:28,530 --> 00:04:33,130 So let's add the object-fit property to our image here. 97 00:04:33,130 --> 00:04:35,867 So object-fit, cover. 98 00:04:38,740 --> 00:04:42,220 With this, our image looks a lot better. 99 00:04:42,220 --> 00:04:44,220 So besides overflow, 100 00:04:44,220 --> 00:04:46,780 these were things we know already though. 101 00:04:46,780 --> 00:04:51,000 Now it's your turn to also apply a concept to learn about, 102 00:04:51,000 --> 00:04:53,780 but in a different environment, 103 00:04:53,780 --> 00:04:55,590 because the positioning of the image 104 00:04:55,590 --> 00:04:58,590 and the item content class here is all right, 105 00:04:58,590 --> 00:05:00,750 but inside our content, 106 00:05:00,750 --> 00:05:03,860 I don't think this is the look that we want to achieve 107 00:05:03,860 --> 00:05:06,430 because instead of the text and the link here being 108 00:05:06,430 --> 00:05:09,400 positioned to the left and below each other, 109 00:05:09,400 --> 00:05:12,150 so with not a huge gap in here, well, 110 00:05:12,150 --> 00:05:14,863 this should actually be the result. 111 00:05:15,820 --> 00:05:18,110 The heading and the text is all right, 112 00:05:18,110 --> 00:05:21,090 but inside this right part of our card, 113 00:05:21,090 --> 00:05:22,230 the link here, 114 00:05:22,230 --> 00:05:24,050 you can ignore the arrow for the moment, 115 00:05:24,050 --> 00:05:27,170 should be positioned in the right bottom corner. 116 00:05:27,170 --> 00:05:30,340 And there should also be more space here 117 00:05:30,340 --> 00:05:32,340 in between these elements. 118 00:05:32,340 --> 00:05:37,040 Now you can try to achieve this with margins or petting, 119 00:05:37,040 --> 00:05:39,570 but there is a very easier way to achieve this 120 00:05:39,570 --> 00:05:42,050 with flexbox once again. 121 00:05:42,050 --> 00:05:44,140 So this is your next task now, 122 00:05:44,140 --> 00:05:48,310 try to achieve the following styling with flexbox, 123 00:05:48,310 --> 00:05:49,290 change the color, 124 00:05:49,290 --> 00:05:52,610 the text color of the city, and the description, 125 00:05:52,610 --> 00:05:55,910 from black to a slight grayish tone, 126 00:05:55,910 --> 00:05:58,520 and also remove the link style of 127 00:05:58,520 --> 00:06:00,320 the explore link down here, 128 00:06:00,320 --> 00:06:02,820 change its color to whatever color you want. 129 00:06:02,820 --> 00:06:06,230 We will use the right RGB code in the solution lecture, 130 00:06:06,230 --> 00:06:11,010 so in the next lecture, and apply a hover effect to it. 131 00:06:11,010 --> 00:06:13,160 If you check out the hover effect, by the way, 132 00:06:13,160 --> 00:06:16,940 you see it has rounded corners, so also implement this. 133 00:06:16,940 --> 00:06:20,080 So these are your tasks for the next lecture. 134 00:06:20,080 --> 00:06:20,960 Take your time. 135 00:06:20,960 --> 00:06:24,010 You learned all that it takes to finish this task 136 00:06:24,010 --> 00:06:26,360 and therefore, see you in the next lecture, 137 00:06:26,360 --> 00:06:29,223 hopefully with great results from your side.