1 00:00:02,060 --> 00:00:05,100 How can we now create this card look? 2 00:00:05,100 --> 00:00:06,990 Well, we'll go there step-by-step, 3 00:00:06,990 --> 00:00:08,970 but the first thing I want to change 4 00:00:08,970 --> 00:00:12,560 is I want to define a specific width 5 00:00:12,560 --> 00:00:16,120 for our entire container of the list items. 6 00:00:16,120 --> 00:00:19,450 So, for our unordered list right here, 7 00:00:19,450 --> 00:00:23,370 at the moment it occupies the entire space available, 8 00:00:23,370 --> 00:00:26,430 and I want to limit this a bit with a fixed value. 9 00:00:26,430 --> 00:00:27,263 For this, 10 00:00:27,263 --> 00:00:31,303 I'll add another, Descendant combinator, 11 00:00:32,780 --> 00:00:36,210 select the unordered list in our main element, 12 00:00:36,210 --> 00:00:40,330 and I'll give this a width of maybe, 800 Pixels. 13 00:00:40,330 --> 00:00:42,800 We'll see, if this is the final value, 14 00:00:42,800 --> 00:00:43,970 but with that in mind, 15 00:00:43,970 --> 00:00:48,090 you see now we have a specific area reserved 16 00:00:48,090 --> 00:00:50,700 for our container here. 17 00:00:50,700 --> 00:00:53,240 We could also get rid of the margin though. 18 00:00:53,240 --> 00:00:55,713 Let's set the margin here to, 19 00:00:56,650 --> 00:00:58,570 zero, top, bottom and auto lift. 20 00:00:58,570 --> 00:01:01,490 Right, with this, we center our container. 21 00:01:01,490 --> 00:01:02,810 Yeah, and I think with this, 22 00:01:02,810 --> 00:01:05,069 we can work a bit better. 23 00:01:05,069 --> 00:01:08,230 This brings the whole page to a bit more structure. 24 00:01:08,230 --> 00:01:10,690 Now, let's focus onto our card though. 25 00:01:10,690 --> 00:01:13,450 The idea should be that this image is basically 26 00:01:13,450 --> 00:01:15,780 the left part of the card, 27 00:01:15,780 --> 00:01:17,140 then right to it, 28 00:01:17,140 --> 00:01:19,130 so in this area let's say, 29 00:01:19,130 --> 00:01:22,350 we want to have the Barcelona, name below it. 30 00:01:22,350 --> 00:01:23,910 We want to have to description, 31 00:01:23,910 --> 00:01:27,351 and afterwards we want to have our link. 32 00:01:27,351 --> 00:01:28,750 Now, this means that 33 00:01:28,750 --> 00:01:32,023 we generally want to position our image here, 34 00:01:32,930 --> 00:01:35,940 next to our two
'a, 35 00:01:35,940 --> 00:01:38,260 while changing the image next to one
36 00:01:38,260 --> 00:01:41,550 would be something we can easily achieve via Flexbox, 37 00:01:41,550 --> 00:01:42,740 if you remember. 38 00:01:42,740 --> 00:01:45,880 So, if we check out our places, HTML code, 39 00:01:45,880 --> 00:01:46,950 maybe once again, 40 00:01:46,950 --> 00:01:48,510 here this part. 41 00:01:48,510 --> 00:01:51,060 Then, why don't we say that we Nest 42 00:01:52,150 --> 00:01:54,090 the
, with the Class actions, 43 00:01:54,090 --> 00:01:58,110 inside our
, of the Class item content here. 44 00:01:58,110 --> 00:02:01,030 If we changed this, if we take this now, 45 00:02:01,030 --> 00:02:02,793 and position it in here. 46 00:02:03,930 --> 00:02:05,690 Maybe format this quickly, 47 00:02:05,690 --> 00:02:08,770 then we would have our image, 48 00:02:08,770 --> 00:02:11,390 next to the item content
, 49 00:02:11,390 --> 00:02:14,200 and this
now holds the entire content 50 00:02:14,200 --> 00:02:17,140 of the right part of this card. 51 00:02:17,140 --> 00:02:18,820 With this change in mind, 52 00:02:18,820 --> 00:02:21,560 we could now turn our list items. 53 00:02:21,560 --> 00:02:23,420 So, each single list item, 54 00:02:23,420 --> 00:02:25,230 into a flex container, 55 00:02:25,230 --> 00:02:27,860 and as we learned, in a Flex container, 56 00:02:27,860 --> 00:02:31,300 the items are positioned next to each other by default, 57 00:02:31,300 --> 00:02:33,750 due to the flex direction, with a value of row, 58 00:02:33,750 --> 00:02:35,440 therefore, the image will be positioned 59 00:02:35,440 --> 00:02:37,973 next to the item content. 60 00:02:38,820 --> 00:02:39,683 With this, 61 00:02:40,800 --> 00:02:43,433 we can go back to the places, CSS file. 62 00:02:45,600 --> 00:02:46,920 And now here, 63 00:02:46,920 --> 00:02:49,490 select, main list. 64 00:02:49,490 --> 00:02:50,930 So, the list item. 65 00:02:50,930 --> 00:02:54,473 And this should now be, display: flex. 66 00:02:56,600 --> 00:02:58,740 And this does the trick, hopefully. 67 00:02:58,740 --> 00:03:00,160 Yes it does. 68 00:03:00,160 --> 00:03:00,993 As you see, 69 00:03:00,993 --> 00:03:03,393 we are coming closer towards our card look. 70 00:03:05,060 --> 00:03:06,470 We cannot also change, 71 00:03:06,470 --> 00:03:09,053 the background color of the list item. 72 00:03:11,220 --> 00:03:14,090 Here, I simply use plain white. 73 00:03:14,090 --> 00:03:16,083 Yeah, this brings us even closer. 74 00:03:17,560 --> 00:03:22,560 And if we now select our, item, content Class, 75 00:03:23,260 --> 00:03:27,060 remember the item content now holds our city name, 76 00:03:27,060 --> 00:03:31,180 the description and the link that we created. 77 00:03:31,180 --> 00:03:34,170 So, we can select the entire Class now, 78 00:03:34,170 --> 00:03:35,853 with the Class selector. 79 00:03:36,800 --> 00:03:40,913 And here we add a padding of maybe, 24 Pixels. 80 00:03:42,380 --> 00:03:45,410 Well then, this looks quite good. 81 00:03:45,410 --> 00:03:48,220 With that, we easily created this card look. 82 00:03:48,220 --> 00:03:49,510 We are not done yet, obviously, 83 00:03:49,510 --> 00:03:50,910 but we'll come closer to it.