1 00:00:02,469 --> 00:00:07,223 So things are a bit off in many ways at the moment. 2 00:00:08,250 --> 00:00:12,320 To get started, let's first change the size of the image. 3 00:00:12,320 --> 00:00:14,680 We saw this already on the landing page, 4 00:00:14,680 --> 00:00:16,340 by default images 5 00:00:16,340 --> 00:00:19,130 tend to take quite a lot of space available, 6 00:00:19,130 --> 00:00:22,650 therefore, as we did it already, earlier in the course, 7 00:00:22,650 --> 00:00:26,230 we'll give the image a fixed width and height. 8 00:00:26,230 --> 00:00:28,290 Well, to make it smaller. 9 00:00:28,290 --> 00:00:32,240 For this, we have different options to do so. 10 00:00:32,240 --> 00:00:35,860 We could refer to the image here in general, 11 00:00:35,860 --> 00:00:39,910 or we'll again, use a descendant combinator maybe 12 00:00:39,910 --> 00:00:42,870 that we say, we want to tackle images here, 13 00:00:42,870 --> 00:00:44,330 which are list items. 14 00:00:44,330 --> 00:00:46,860 So part of a list in the end, and this list 15 00:00:46,860 --> 00:00:49,690 should be part of the main elements. 16 00:00:49,690 --> 00:00:52,530 The main section of our website. 17 00:00:52,530 --> 00:00:55,760 To do this we go to the places CSS file, 18 00:00:55,760 --> 00:00:58,450 and finally add some code in here. 19 00:00:58,450 --> 00:01:03,450 So we'll say in the main element list items and images, 20 00:01:03,520 --> 00:01:04,920 this will have the advantage 21 00:01:04,920 --> 00:01:07,490 that when adding more images here 22 00:01:07,490 --> 00:01:10,830 for all our different destinations that we have, 23 00:01:10,830 --> 00:01:13,790 well, this tab will be applied for these images. 24 00:01:13,790 --> 00:01:18,790 So, let's say we add a width of maybe 300 pixels 25 00:01:20,600 --> 00:01:21,433 for this image. 26 00:01:21,433 --> 00:01:23,880 We'll see if this is the appropriate size. 27 00:01:23,880 --> 00:01:28,880 And a fixed height here of 280 pixels. 28 00:01:28,960 --> 00:01:31,660 And again, as you saw it throughout the course, 29 00:01:31,660 --> 00:01:35,500 images are more or less the only element, 30 00:01:35,500 --> 00:01:38,460 so to say, where we add a height. 31 00:01:38,460 --> 00:01:41,640 Typically we work with padding to increase the height 32 00:01:41,640 --> 00:01:43,560 of certain elements. 33 00:01:43,560 --> 00:01:47,050 With this in place, well, the images became a lot smaller. 34 00:01:47,050 --> 00:01:50,160 I think this is around about out the right size we need, 35 00:01:50,160 --> 00:01:54,271 but now we see another issue on our page. 36 00:01:54,271 --> 00:01:59,180 The issue here is our header because on the landing page, 37 00:01:59,180 --> 00:02:02,530 the background image should be both behind the header, 38 00:02:02,530 --> 00:02:03,440 so to say. 39 00:02:03,440 --> 00:02:07,000 Therefore, we applied specific styles to this header 40 00:02:07,000 --> 00:02:08,750 to make this possible. 41 00:02:08,750 --> 00:02:10,400 On our destinations page though, 42 00:02:10,400 --> 00:02:12,340 I don't think this is the look we want to have. 43 00:02:12,340 --> 00:02:15,470 Because here we don't have a background image, 44 00:02:15,470 --> 00:02:17,590 but a normal image now, 45 00:02:17,590 --> 00:02:20,440 and this image will be, well, displayed multiple times 46 00:02:20,440 --> 00:02:21,770 for different locations. 47 00:02:21,770 --> 00:02:25,240 So it definitely should not be behind the header. 48 00:02:25,240 --> 00:02:28,373 Do you have an idea how we can fix this quickly? 49 00:02:30,120 --> 00:02:34,050 We can change our position property, right? 50 00:02:34,050 --> 00:02:36,150 Because here, in the header, 51 00:02:36,150 --> 00:02:38,920 we have position absolute applied. 52 00:02:38,920 --> 00:02:43,000 If we would unselect this, then this will do the trick. 53 00:02:43,000 --> 00:02:45,410 We don't need left, and top zero, by the way. 54 00:02:45,410 --> 00:02:48,080 And also the width is not required because by default, 55 00:02:48,080 --> 00:02:49,920 our header is a block element. 56 00:02:49,920 --> 00:02:53,770 Therefore it occupies the entire space available here. 57 00:02:53,770 --> 00:02:56,770 But nevertheless, we can see that by changing 58 00:02:56,770 --> 00:03:01,770 the position property, we can get the desired result. 59 00:03:02,530 --> 00:03:05,420 Now back in our code, we should keep in mind 60 00:03:05,420 --> 00:03:10,060 that in our shared CSS file, here. 61 00:03:10,060 --> 00:03:10,893 Where is it? 62 00:03:12,580 --> 00:03:15,900 Here, in the header, we have, the position absolute 63 00:03:15,900 --> 00:03:18,320 a rule applied and also all the other rules. 64 00:03:18,320 --> 00:03:20,410 So this has to be overwritten. 65 00:03:20,410 --> 00:03:22,340 And how does this work now? 66 00:03:22,340 --> 00:03:25,533 Well, it works by going to the places CSS file again, 67 00:03:27,570 --> 00:03:31,350 and in here top maybe to keep our order 68 00:03:31,350 --> 00:03:33,170 from top to bottom on the page, 69 00:03:33,170 --> 00:03:37,000 we'll select the header and now add the position property 70 00:03:37,000 --> 00:03:40,890 with a value of static here. 71 00:03:40,890 --> 00:03:44,070 As you learned, static is the default value 72 00:03:44,070 --> 00:03:45,300 for the position property. 73 00:03:45,300 --> 00:03:48,700 So typically you don't have to apply this value, 74 00:03:48,700 --> 00:03:51,720 but for such cases where you add a different value 75 00:03:51,720 --> 00:03:54,420 for the position property in general, keep in mind, 76 00:03:54,420 --> 00:03:56,790 we added it here in the shared CSS file. 77 00:03:56,790 --> 00:04:00,000 But now on specific pages or in specific cases, 78 00:04:00,000 --> 00:04:01,720 you want to override this change, 79 00:04:01,720 --> 00:04:03,653 then you use position static. 80 00:04:05,330 --> 00:04:08,180 As I said, also all the other properties, 81 00:04:08,180 --> 00:04:10,760 So width, top and left are not required here, 82 00:04:10,760 --> 00:04:13,600 but they also don't hurt, so we can keep these in here. 83 00:04:13,600 --> 00:04:16,110 We don't have to add a different value to these. 84 00:04:16,110 --> 00:04:21,089 And with this in place, if we save this, this is working. 85 00:04:21,089 --> 00:04:22,660 What's important here 86 00:04:22,660 --> 00:04:26,400 is that the order of our imports matters. 87 00:04:26,400 --> 00:04:29,530 If we go back to our places HTML file 88 00:04:29,530 --> 00:04:33,270 to the top here into the head section right here, 89 00:04:33,270 --> 00:04:36,690 you see that we first set the link for the shared CSS file, 90 00:04:36,690 --> 00:04:40,440 where we changed the position property to absolute. 91 00:04:40,440 --> 00:04:44,070 And afterwards we add the link to the places CSS file, 92 00:04:44,070 --> 00:04:47,480 so to specific styles applied to this page. 93 00:04:47,480 --> 00:04:49,130 And this is very important. 94 00:04:49,130 --> 00:04:53,060 If you were to change the order here and save this, 95 00:04:53,060 --> 00:04:56,420 then suddenly our image will be behind our header 96 00:04:56,420 --> 00:05:01,420 because now the rules set in the shared CSS file 97 00:05:01,980 --> 00:05:05,100 override the rules we have from the places CSS file. 98 00:05:05,100 --> 00:05:06,810 Therefore, it's always important 99 00:05:06,810 --> 00:05:09,330 to add the shared CSS filing first, 100 00:05:09,330 --> 00:05:12,130 this typically holds the more common style, so to say, 101 00:05:12,130 --> 00:05:14,770 and then a specific styles afterwards. 102 00:05:14,770 --> 00:05:16,583 Just a side note here though. 103 00:05:18,460 --> 00:05:20,520 As we already working on the header, 104 00:05:20,520 --> 00:05:25,520 we could actually finish some generic styles for our page 105 00:05:25,610 --> 00:05:28,600 because as you saw in our example earlier 106 00:05:28,600 --> 00:05:32,320 the entire a page should have a grayish background color. 107 00:05:32,320 --> 00:05:35,810 Not a background image as we had it on the landing page. 108 00:05:35,810 --> 00:05:38,310 Therefore, and with the logic we just had 109 00:05:38,310 --> 00:05:42,590 with the order of our import, so shared before 110 00:05:42,590 --> 00:05:46,840 the specific CSS file, we could say that our shared code 111 00:05:46,840 --> 00:05:51,840 for the body here could be overwritten, or in our case, 112 00:05:52,130 --> 00:05:55,580 could be enhanced for the specific styling 113 00:05:55,580 --> 00:05:58,360 we want to have on the place, the` CSS file. 114 00:05:58,360 --> 00:06:02,500 Therefore I'll add another body selector here. 115 00:06:02,500 --> 00:06:05,840 And for this body, I want to change one thing now. 116 00:06:05,840 --> 00:06:07,960 I want to add a background color, 117 00:06:07,960 --> 00:06:10,320 but not with the background color property, 118 00:06:10,320 --> 00:06:12,100 but with the background property, 119 00:06:12,100 --> 00:06:15,860 because we want to use a CSS function once again. 120 00:06:15,860 --> 00:06:19,090 And that's our linear gradient function. 121 00:06:19,090 --> 00:06:23,610 We'll use 40 degrees for the angle of the gradient 122 00:06:23,610 --> 00:06:27,690 and color wise, we'll use again, our RGB colors 123 00:06:28,710 --> 00:06:33,000 add the parenthesis and here use 77, 77 and 77. 124 00:06:34,550 --> 00:06:36,080 This will be a grayish tone. 125 00:06:36,080 --> 00:06:40,000 And the second RGB code will be quite similar. 126 00:06:40,000 --> 00:06:43,840 It's 58, 58 and 58. 127 00:06:43,840 --> 00:06:46,500 We don't need the space in here. 128 00:06:46,500 --> 00:06:50,510 And with this, we see we added this background color 129 00:06:50,510 --> 00:06:52,410 to our page. 130 00:06:52,410 --> 00:06:54,860 By the way, the fact that the footer is kind of 131 00:06:54,860 --> 00:06:56,500 in the middle of nowhere at the moment 132 00:06:56,500 --> 00:06:58,670 is something we'll tackle a bit later. 133 00:06:58,670 --> 00:07:00,963 So please ignore this for the moment. 134 00:07:02,030 --> 00:07:05,300 So our page is progressing well, 135 00:07:05,300 --> 00:07:09,060 what's now totally off is our, well, card 136 00:07:09,060 --> 00:07:11,000 that we want to achieve in the end. 137 00:07:11,000 --> 00:07:14,430 We basically have in our main element now 138 00:07:14,430 --> 00:07:17,660 this unordered list, and in there, 139 00:07:17,660 --> 00:07:19,480 we have our first list item, 140 00:07:19,480 --> 00:07:22,410 which basically is a block element 141 00:07:22,410 --> 00:07:25,990 with three other elements inside one inlaid element 142 00:07:25,990 --> 00:07:28,290 of the image here, and two block elements, 143 00:07:28,290 --> 00:07:29,480 the div and the div. 144 00:07:29,480 --> 00:07:31,260 One holding the description 145 00:07:31,260 --> 00:07:32,910 and the other one holding the link. 146 00:07:32,910 --> 00:07:33,900 I think it's time now 147 00:07:33,900 --> 00:07:37,313 to work on the layout of this card as a next step.