1 00:00:02,130 --> 00:00:05,270 How did it go? Were you successful? 2 00:00:05,270 --> 00:00:08,259 Let's solve this challenge together now. And for this, 3 00:00:08,259 --> 00:00:11,380 I want to get started with the layout of 4 00:00:11,380 --> 00:00:14,783 the elements in the right part of our card here. 5 00:00:15,920 --> 00:00:20,040 Our goal was to add space between certain elements. 6 00:00:20,040 --> 00:00:22,960 Specifically, space should be added between our 7 00:00:22,960 --> 00:00:26,290 description of the city and between this link. 8 00:00:26,290 --> 00:00:27,900 The link should be pushed down to 9 00:00:27,900 --> 00:00:30,410 the bottom and then to the right. 10 00:00:30,410 --> 00:00:32,033 So it should be somewhere here. 11 00:00:33,170 --> 00:00:35,160 I told you that you can achieve 12 00:00:35,160 --> 00:00:38,360 this with Flexbox once again. 13 00:00:38,360 --> 00:00:40,610 You know that we use Flexbox already 14 00:00:40,610 --> 00:00:44,790 for our list item here to position the elements 15 00:00:44,790 --> 00:00:46,610 so the image and the diff of the 16 00:00:46,610 --> 00:00:49,600 class item content next to each other 17 00:00:50,840 --> 00:00:54,630 but we cannot use Flexbox also inside 18 00:00:54,630 --> 00:00:58,910 this item content class. But why Flexbox here? 19 00:00:58,910 --> 00:01:01,130 Didn't we use Flexbox so far to 20 00:01:01,130 --> 00:01:03,670 weld position items next to each other? 21 00:01:03,670 --> 00:01:05,740 For example, here in the header. 22 00:01:05,740 --> 00:01:07,920 Yes we did. But you remember 23 00:01:07,920 --> 00:01:11,360 that we can change the default behavior of 24 00:01:11,360 --> 00:01:13,400 how items should be positioned 25 00:01:13,400 --> 00:01:15,750 this was the flex direction with 26 00:01:15,750 --> 00:01:18,410 a default value of row which we have right here 27 00:01:18,410 --> 00:01:20,540 in the header, or right here in our card 28 00:01:21,550 --> 00:01:23,700 we can change this value to column 29 00:01:23,700 --> 00:01:27,300 which would basically bring back the initial style we have. 30 00:01:27,300 --> 00:01:30,830 But then with our justify content logic 31 00:01:30,830 --> 00:01:32,390 that we used, for example here 32 00:01:32,390 --> 00:01:36,760 in the header, if we open this down there, 33 00:01:36,760 --> 00:01:39,260 so justify content space between 34 00:01:39,260 --> 00:01:42,470 which allowed us to add gaps between elements. 35 00:01:42,470 --> 00:01:47,470 So it's the gap between the logo and the navigation items. 36 00:01:47,630 --> 00:01:50,370 Well, this gap could be added then 37 00:01:50,370 --> 00:01:54,200 into our flex container we create right here. 38 00:01:54,200 --> 00:01:57,980 Let's give this a try and let's see how this might work. 39 00:01:57,980 --> 00:02:00,730 For this we have to add display flex 40 00:02:00,730 --> 00:02:03,250 to our item content class. 41 00:02:03,250 --> 00:02:06,390 So let's do this in the code down here. 42 00:02:06,390 --> 00:02:10,773 So we add display flex. 43 00:02:12,450 --> 00:02:14,480 With this change in place. 44 00:02:14,480 --> 00:02:16,660 Yeah, the items, the elements 45 00:02:16,660 --> 00:02:18,930 are positioned next to each other. 46 00:02:18,930 --> 00:02:23,930 But, as I said, with our flex direction property, 47 00:02:24,500 --> 00:02:29,500 so flex direction, you know the default value is row 48 00:02:29,880 --> 00:02:32,410 but we can change this to column 49 00:02:32,410 --> 00:02:37,410 which will then position all flex items below each other. 50 00:02:37,530 --> 00:02:40,540 Let's see if this works. Yes. This looks okay. 51 00:02:40,540 --> 00:02:45,503 And now we only have to add our justify content property. 52 00:02:47,040 --> 00:02:50,290 Here, this one with the value of space between 53 00:02:50,290 --> 00:02:52,643 and then we'll see what this looks like. 54 00:02:53,490 --> 00:02:58,490 So let's implement this. Justify content space between, 55 00:03:00,600 --> 00:03:05,600 so let's see. Yeah. And we are not there yet. 56 00:03:07,150 --> 00:03:12,150 We added space between our description and the link, 57 00:03:14,950 --> 00:03:16,710 but we also added space between 58 00:03:16,710 --> 00:03:19,040 the city name and the description. 59 00:03:19,040 --> 00:03:20,733 Do you know what's wrong here? 60 00:03:22,250 --> 00:03:25,148 Well, our problem is that space between 61 00:03:25,148 --> 00:03:29,360 adds space, between all flex items that we have, 62 00:03:29,360 --> 00:03:31,310 and here we have the flex container. 63 00:03:31,310 --> 00:03:34,330 And as you see it indicated in the dev tools 64 00:03:34,330 --> 00:03:37,973 we have three flex items. One two three. 65 00:03:39,140 --> 00:03:42,370 but if we would be able to turn the 66 00:03:42,370 --> 00:03:46,299 h2 element and the paragraph into one element, 67 00:03:46,299 --> 00:03:48,570 well then space between would work 68 00:03:48,570 --> 00:03:50,270 because, well, then we would have 69 00:03:50,270 --> 00:03:52,910 the space between these two elements. 70 00:03:52,910 --> 00:03:54,950 So the element containing the name 71 00:03:54,950 --> 00:03:57,490 and the description and the link. 72 00:03:57,490 --> 00:03:59,789 for that, we can simply use our 73 00:03:59,789 --> 00:04:03,140 non semantic block element as a wrapper. 74 00:04:03,140 --> 00:04:07,370 And this is a diff therefore let's go back 75 00:04:07,370 --> 00:04:11,720 to our HTML code and replace this HTML file 76 00:04:11,720 --> 00:04:14,850 and in here I'd simply add a diff 77 00:04:14,850 --> 00:04:18,110 now inside our item content class, 78 00:04:18,110 --> 00:04:20,300 and this diff now should hold the 79 00:04:20,300 --> 00:04:23,683 paragraph and the h2 element. 80 00:04:25,368 --> 00:04:28,318 Let's move this up a bit and let's quickly format the text. 81 00:04:30,240 --> 00:04:34,240 And with this change in place, don't forget to save it. 82 00:04:34,240 --> 00:04:39,240 We should have, yeah, an almost perfectly styled card here. 83 00:04:42,330 --> 00:04:44,180 Now, if we check the flex logic, 84 00:04:44,180 --> 00:04:46,350 we see we have the first diff and 85 00:04:46,350 --> 00:04:48,823 the second diff and the space between. 86 00:04:50,540 --> 00:04:54,630 So this was the most complex part about this challenge. 87 00:04:54,630 --> 00:04:56,210 I hope you were able to solve it. 88 00:04:56,210 --> 00:04:58,713 Otherwise you now saw it, how it works. 89 00:05:00,050 --> 00:05:02,490 However, we are not done yet because 90 00:05:02,490 --> 00:05:04,940 the explore link here is at the bottom. 91 00:05:04,940 --> 00:05:08,403 It's okay, but it should be at the bottom right here. 92 00:05:09,800 --> 00:05:11,720 This is an easy task now though, 93 00:05:11,720 --> 00:05:15,340 because no, you know, we have our diff with 94 00:05:15,340 --> 00:05:18,010 the class actions and we know that we 95 00:05:18,010 --> 00:05:21,970 can position the content, the text content of 96 00:05:21,970 --> 00:05:26,400 elements easily with our text align property. 97 00:05:26,400 --> 00:05:31,400 So if we refer to our actions class back in the 98 00:05:31,780 --> 00:05:36,780 place a CSS file here and now 99 00:05:37,420 --> 00:05:42,380 we refer to our actions class with the dot notation here 100 00:05:42,380 --> 00:05:46,680 and use the text align property. 101 00:05:46,680 --> 00:05:49,030 Typically, in the course we use, 102 00:05:49,030 --> 00:05:52,020 we often use our center value, 103 00:05:52,020 --> 00:05:54,680 which of course would also work to center 104 00:05:54,680 --> 00:05:58,670 the content of this class, text content of this class. 105 00:05:58,670 --> 00:06:01,860 But here we use a value of right now 106 00:06:01,860 --> 00:06:04,940 to position this text to the right 107 00:06:06,400 --> 00:06:09,000 if that this goal is also achieved 108 00:06:10,730 --> 00:06:14,580 Talking about this text now. This link text in here, now. 109 00:06:14,580 --> 00:06:18,130 We could also remove the text decoration. 110 00:06:18,130 --> 00:06:20,390 Maybe add some space, because it's 111 00:06:20,390 --> 00:06:24,180 kind of well closely positioned to the 112 00:06:24,180 --> 00:06:28,070 container here and also change the color. 113 00:06:28,070 --> 00:06:32,040 So three steps to apply here. Let's get started. 114 00:06:32,040 --> 00:06:35,640 First by referring to the anchor tag here 115 00:06:35,640 --> 00:06:40,640 and for this I'll again, use the actions class 116 00:06:41,540 --> 00:06:45,563 and refer to the anchor tag inside of this actions class. 117 00:06:47,070 --> 00:06:50,317 First, we'll remove the text decorations so this 118 00:06:50,317 --> 00:06:54,433 underlining of the link with texts decoration, none. 119 00:06:56,470 --> 00:06:59,100 Then we'll add a bit of padding to 120 00:06:59,100 --> 00:07:01,680 all directions, because as I said, it sits 121 00:07:01,680 --> 00:07:05,300 a bit too close here in the right bottom corner. 122 00:07:05,300 --> 00:07:10,300 Therefore with some padding of maybe six pixels should help. 123 00:07:12,380 --> 00:07:14,130 We'll check this in a few seconds 124 00:07:14,130 --> 00:07:16,400 and let me scroll down a bit. 125 00:07:16,400 --> 00:07:19,040 Finally, I would like to change the color 126 00:07:19,040 --> 00:07:22,520 of this link with the color property 127 00:07:22,520 --> 00:07:27,520 and this property has another RGB color code I prepared. 128 00:07:28,200 --> 00:07:32,970 We use 22 for red, 211 for green and 228 for blue. 129 00:07:39,170 --> 00:07:42,260 With these changes in place. Yeah, 130 00:07:42,260 --> 00:07:45,500 this looks a lot better. Now we are almost there. 131 00:07:45,500 --> 00:07:48,690 What's missing now is our hover effect 132 00:07:48,690 --> 00:07:51,500 though we can quickly implement this 133 00:07:51,500 --> 00:07:53,883 with our hover pseudo selector. 134 00:07:54,980 --> 00:07:58,080 This pseudo selector works as follows. 135 00:07:58,080 --> 00:08:00,920 We also did this quite often throughout the course. 136 00:08:00,920 --> 00:08:04,913 I'll again use our descendant Combinator actions, 137 00:08:06,270 --> 00:08:09,850 a hover, so the pseudo selector of the anchor tag 138 00:08:09,850 --> 00:08:13,870 whenever we hover over this element with our mouse 139 00:08:13,870 --> 00:08:17,260 and here to add this hover effect, 140 00:08:17,260 --> 00:08:20,490 I'll simply add a background color to it, 141 00:08:20,490 --> 00:08:23,550 to change the color of the entire element. 142 00:08:23,550 --> 00:08:27,707 And here we'll use an RGB code of 235, 253 and 255 143 00:08:35,090 --> 00:08:37,510 So it's a slightly brighter color tone than 144 00:08:37,510 --> 00:08:40,270 the one we have for the link up here. 145 00:08:40,270 --> 00:08:45,210 So let's see if we hover now this looks good. 146 00:08:45,210 --> 00:08:47,130 If we zoom in a bit closer, we see 147 00:08:47,130 --> 00:08:50,830 that our rounded corners are missing. 148 00:08:50,830 --> 00:08:54,880 We can quickly fix this with border radius and 149 00:08:54,880 --> 00:08:57,410 as always we applied as property, 150 00:08:57,410 --> 00:08:59,900 not to the hover rule here, but 151 00:08:59,900 --> 00:09:02,170 to the default rule of the element 152 00:09:02,170 --> 00:09:05,160 to avoid any kind of glitches in the styling Because 153 00:09:05,160 --> 00:09:07,727 if you have a default styling and then hover 154 00:09:07,727 --> 00:09:10,240 which kind of breaks this default styling, 155 00:09:10,240 --> 00:09:13,130 This can sometimes lead to elements jumping around a bit. 156 00:09:13,130 --> 00:09:15,100 So we want to avoid this. Therefore 157 00:09:15,100 --> 00:09:18,980 we add this property border radius 158 00:09:18,980 --> 00:09:22,090 to the general elements style, 159 00:09:22,090 --> 00:09:25,610 and here we'll use a radius of maybe five pixels. 160 00:09:25,610 --> 00:09:28,350 Let's see if you hover now and zoom in. 161 00:09:28,350 --> 00:09:30,423 Yeah. Now this looks all right. 162 00:09:32,799 --> 00:09:35,400 With this, this challenge is almost solved. 163 00:09:35,400 --> 00:09:38,790 You had one last task though, and this was 164 00:09:38,790 --> 00:09:41,350 to change the text color of the 165 00:09:41,350 --> 00:09:44,060 city name and city description. 166 00:09:44,060 --> 00:09:47,050 This can be done quite easily because the 167 00:09:47,050 --> 00:09:49,470 only thing we have to do right here is, well, 168 00:09:49,470 --> 00:09:52,810 we have to add a different color to the body 169 00:09:54,140 --> 00:09:58,420 because in our current place, a CSS file, 170 00:09:58,420 --> 00:10:02,050 we don't have any color property applied for the text. 171 00:10:02,050 --> 00:10:04,460 And also in the shared CSS file, 172 00:10:04,460 --> 00:10:07,280 there is no specific color applied 173 00:10:07,280 --> 00:10:10,090 only here for the anchor tag. We'll fix this later 174 00:10:10,090 --> 00:10:12,090 but generally for the text, 175 00:10:12,090 --> 00:10:15,500 we don't have any color property. 176 00:10:15,500 --> 00:10:20,450 Therefore, we can just go to our body selector up here 177 00:10:20,450 --> 00:10:23,530 and change the color with the color property 178 00:10:23,530 --> 00:10:28,170 to an RGB code of 68, 68 and 68. 179 00:10:32,520 --> 00:10:35,050 And as you learned, color is a property 180 00:10:35,050 --> 00:10:37,980 with which gets inherited by other elements. 181 00:10:37,980 --> 00:10:40,660 Therefore jumping back to our page. 182 00:10:40,660 --> 00:10:44,330 Well, we now have the great text color right here. 183 00:10:44,330 --> 00:10:45,910 It's not that easy to see though 184 00:10:45,910 --> 00:10:47,880 But if we, for example, select the 185 00:10:47,880 --> 00:10:50,613 h2 element and scroll down, 186 00:10:52,170 --> 00:10:54,890 we see that we inherited the color from the body. 187 00:10:54,890 --> 00:10:58,550 So if I would unselect it, you'll see it's getting black. 188 00:10:58,550 --> 00:11:01,120 So this is this slight grayish tone 189 00:11:01,120 --> 00:11:02,533 we had to implement here. 190 00:11:04,570 --> 00:11:07,940 This was the challenge. I hope you had fun. 191 00:11:07,940 --> 00:11:11,220 I hope you could apply your knowledge in this challenge. 192 00:11:11,220 --> 00:11:13,550 In the next lecture we'll now add 193 00:11:13,550 --> 00:11:16,270 more cards because we don't only have one 194 00:11:16,270 --> 00:11:21,030 single card. And then we'll explore one big issue though. 195 00:11:21,030 --> 00:11:23,460 This issue will be the last big task. 196 00:11:23,460 --> 00:11:27,080 The last big problem we have to tackle in this module. 197 00:11:27,080 --> 00:11:30,003 Looking forward to this. So see you in the next lecture.