1 00:00:02,110 --> 00:00:04,920 We finished a style of the header. 2 00:00:04,920 --> 00:00:09,920 Now it's time to style our main section of our website. 3 00:00:10,850 --> 00:00:12,900 For this, I would like to get started 4 00:00:12,900 --> 00:00:15,930 with our h1 element here. 5 00:00:15,930 --> 00:00:17,910 So let's close the header part, 6 00:00:17,910 --> 00:00:19,350 going through the main element, 7 00:00:19,350 --> 00:00:21,671 some referring to the h1 part, 8 00:00:21,671 --> 00:00:25,620 what we should change here is probably the text alignments. 9 00:00:25,620 --> 00:00:27,170 So the text should be centered. 10 00:00:27,170 --> 00:00:28,003 We could add a different color, 11 00:00:28,003 --> 00:00:33,003 and to maybe also increase the font size a little bit. 12 00:00:34,680 --> 00:00:36,640 For this, back in the code, 13 00:00:36,640 --> 00:00:39,840 we'll first select our h1 element. 14 00:00:39,840 --> 00:00:42,210 We'll select the main element. 15 00:00:42,210 --> 00:00:46,350 And in there, if we want to target the h1 element, 16 00:00:46,350 --> 00:00:50,070 and there we'll first use text align center 17 00:00:50,070 --> 00:00:53,550 to center the text content of an element, 18 00:00:53,550 --> 00:00:56,830 which is the case for this h1 element. 19 00:00:56,830 --> 00:00:58,603 Then for the color, 20 00:01:00,070 --> 00:01:05,069 we'll add an RGB color of 238, 164, 80. 21 00:01:06,310 --> 00:01:11,310 We used this already earlier here in this project up here. 22 00:01:11,660 --> 00:01:15,503 So it's the same color that we applied to our logo. 23 00:01:17,000 --> 00:01:21,410 And finally, we'll increase the font size here. 24 00:01:21,410 --> 00:01:23,640 We'll use a temporary value. 25 00:01:23,640 --> 00:01:25,750 We'll update this unit later 26 00:01:25,750 --> 00:01:28,590 when we dive deeper into responsive design. 27 00:01:28,590 --> 00:01:32,623 But for the moment, I'll go for 38 pixels here. 28 00:01:33,670 --> 00:01:35,760 With this, if we go back, 29 00:01:35,760 --> 00:01:39,380 we see that the header, well, looks a lot better. 30 00:01:39,380 --> 00:01:41,240 This was step one. 31 00:01:41,240 --> 00:01:44,270 Now we'll dive deeper into the main element. 32 00:01:44,270 --> 00:01:47,160 And here I want to refer to the section 33 00:01:47,160 --> 00:01:49,340 with the ID latest products, 34 00:01:49,340 --> 00:01:52,914 and then dive deeper there to see how we can style our 35 00:01:52,914 --> 00:01:55,274 unordered list, the corresponding list items, 36 00:01:55,274 --> 00:02:00,020 and also the article that contains the actual content of 37 00:02:00,020 --> 00:02:03,771 each individual cards that we want to create right here. 38 00:02:03,771 --> 00:02:06,690 Let's get started with the section though. 39 00:02:06,690 --> 00:02:10,470 Here, I first want to define a specific width 40 00:02:10,470 --> 00:02:13,710 for the entire section, so it should not occupy 41 00:02:13,710 --> 00:02:16,667 the entire space as it is the case at the moment, 42 00:02:16,667 --> 00:02:21,667 should only be well, less than 100%, maybe. 43 00:02:22,560 --> 00:02:27,560 And we'll also center the section here. 44 00:02:27,820 --> 00:02:29,310 We'll learn how this works. 45 00:02:29,310 --> 00:02:34,187 So let's go back to the code and refer to our latest 46 00:02:34,187 --> 00:02:39,187 products ID here. 47 00:02:40,180 --> 00:02:43,070 First we'll limit the space. 48 00:02:43,070 --> 00:02:46,830 This element will occupy with the width property, 49 00:02:46,830 --> 00:02:51,830 and here I'll go with a percentage value of 80%, maybe. 50 00:02:52,200 --> 00:02:56,183 So this is step one. Let's see. Yeah. 51 00:02:57,490 --> 00:03:02,440 Now the content only occupies the 80% of the space, 52 00:03:02,440 --> 00:03:06,700 now we only have to center this element and, you know, 53 00:03:06,700 --> 00:03:09,398 centering block elements can be done with our 54 00:03:09,398 --> 00:03:14,398 margin auto property value combination. 55 00:03:14,770 --> 00:03:16,770 For this, back in the code, 56 00:03:16,770 --> 00:03:20,170 we'll add the margin property and set it to, well, 57 00:03:20,170 --> 00:03:23,970 let's maybe even add a top and bottom margin, 58 00:03:23,970 --> 00:03:26,610 because this distance here is a bit close. 59 00:03:26,610 --> 00:03:28,320 And also at the bottom here, 60 00:03:28,320 --> 00:03:30,940 we might want to add a bit more space. 61 00:03:30,940 --> 00:03:35,450 So let's say we add a top and bottom margin of 50 pixels, 62 00:03:35,450 --> 00:03:39,110 and for left and right, we'll go with the auto property, 63 00:03:39,110 --> 00:03:42,973 which will then automatically center our block element. 64 00:03:44,330 --> 00:03:48,290 Let's see if this works. Well, apparently it doesn't, 65 00:03:48,290 --> 00:03:51,412 but if we look at the section, we see it does, 66 00:03:51,412 --> 00:03:56,412 we just have the problem that the styling of the image here 67 00:03:57,360 --> 00:03:58,910 is not perfect yet. 68 00:03:58,910 --> 00:04:02,400 So we have to fix this, but generally for our section, 69 00:04:02,400 --> 00:04:04,963 the styling is working as intended. 70 00:04:06,960 --> 00:04:09,160 To fix this issue though, 71 00:04:09,160 --> 00:04:13,620 we'll continue with the unordered list right here, 72 00:04:13,620 --> 00:04:16,100 because besides the fact that the images are 73 00:04:16,100 --> 00:04:19,000 way too big from a width perspective, 74 00:04:19,000 --> 00:04:22,060 we also have the problem that these images are displayed 75 00:04:22,060 --> 00:04:25,360 below each other and not next to each other. 76 00:04:25,360 --> 00:04:28,697 As we saw in our overview of the finished website, 77 00:04:28,697 --> 00:04:31,475 we want to display the cards next to each other, 78 00:04:31,475 --> 00:04:33,993 at least in the desktop view. 79 00:04:35,120 --> 00:04:38,370 Now to achieve this, we have multiple options. 80 00:04:38,370 --> 00:04:41,140 This case here, I will not use Flexbox, 81 00:04:41,140 --> 00:04:42,630 which would be possible, 82 00:04:42,630 --> 00:04:45,774 but I want to use the grid, because theoretically, 83 00:04:45,774 --> 00:04:49,070 we might have more than two cards right here. 84 00:04:49,070 --> 00:04:51,470 So if we have more cards and if you want to keep the 85 00:04:51,470 --> 00:04:56,080 structure of two cards being positioned next to each other, 86 00:04:56,080 --> 00:04:59,070 then the grid is the better approach. 87 00:04:59,070 --> 00:05:01,980 As you learned, Flexbox is the better choice 88 00:05:01,980 --> 00:05:04,210 for one dimensional layout. 89 00:05:04,210 --> 00:05:07,400 Grid here is better for two dimensional layouts. 90 00:05:07,400 --> 00:05:10,533 Therefore, in our case, I would go for the grid. 91 00:05:11,378 --> 00:05:16,001 Now to apply the grid here, I'm back in our code. 92 00:05:16,001 --> 00:05:21,001 And I'll refer again to the latest products ID here, 93 00:05:22,630 --> 00:05:25,360 and there to the unordered list. 94 00:05:25,360 --> 00:05:30,250 In this list now, we will use the display grid property 95 00:05:30,250 --> 00:05:32,760 to create the CSS grid. 96 00:05:32,760 --> 00:05:33,972 And additionally, 97 00:05:33,972 --> 00:05:38,103 we'll use the concept of our grid template columns. 98 00:05:39,140 --> 00:05:41,740 Also something we've learned throughout this course already, 99 00:05:41,740 --> 00:05:44,700 therefore, I will not dive too deep into this. 100 00:05:44,700 --> 00:05:47,433 With grid template columns, we can basically define 101 00:05:47,433 --> 00:05:51,760 how many columns our grid should contain, 102 00:05:51,760 --> 00:05:56,390 and what part of the existing space of this 80% 103 00:05:56,390 --> 00:05:59,153 in the end should be occupied by each column. 104 00:06:00,050 --> 00:06:02,960 We want to have two equally sized columns 105 00:06:02,960 --> 00:06:05,340 from a width perspective, therefore, I go 106 00:06:05,340 --> 00:06:09,060 with one fraction and one fraction for each of the 107 00:06:09,060 --> 00:06:10,870 individual columns. 108 00:06:10,870 --> 00:06:13,730 With this in place, let's see. 109 00:06:13,730 --> 00:06:18,380 Yeah, we kind of have the grid layout, but still our images 110 00:06:18,380 --> 00:06:21,090 are kind of destroying the enter a page. 111 00:06:21,090 --> 00:06:22,447 So let's fix this now to have 112 00:06:22,447 --> 00:06:26,850 a better view of our grid that we created. 113 00:06:26,850 --> 00:06:29,820 For this, we have to tackle our images. 114 00:06:29,820 --> 00:06:34,060 So the images inside the list item inside the article. 115 00:06:34,060 --> 00:06:35,590 So these images here, 116 00:06:35,590 --> 00:06:39,162 and we have to add a specific height to these images, 117 00:06:39,162 --> 00:06:44,030 well, to fix the sizing issue we have right here. 118 00:06:44,030 --> 00:06:47,030 For this, back in the code, 119 00:06:47,030 --> 00:06:49,850 we'll select the food item class. 120 00:06:49,850 --> 00:06:54,850 So here this class right here, 121 00:06:54,890 --> 00:06:56,856 or actually to be more precise, 122 00:06:56,856 --> 00:07:00,240 we could actually rename this to food item, 123 00:07:00,240 --> 00:07:01,980 as it is a single item, actually. 124 00:07:01,980 --> 00:07:03,570 So let's change this now. 125 00:07:03,570 --> 00:07:05,777 So the class should be named food item 126 00:07:05,777 --> 00:07:08,800 right here and right there. 127 00:07:08,800 --> 00:07:10,440 And then back in the code, 128 00:07:10,440 --> 00:07:13,728 we could refer to this class and to the image 129 00:07:13,728 --> 00:07:17,693 inside this element, which has this class applied. 130 00:07:18,940 --> 00:07:23,940 And there we'll now set a default height of let's say, 131 00:07:25,112 --> 00:07:29,220 240 pixels. Let's see what this looks like. 132 00:07:29,220 --> 00:07:31,080 Yeah, I think this is okay. 133 00:07:31,080 --> 00:07:33,760 And now we have the problem that the images 134 00:07:33,760 --> 00:07:36,040 are not both equally sized. 135 00:07:36,040 --> 00:07:38,260 When it comes to the way these images 136 00:07:38,260 --> 00:07:41,530 fill the space inside the container. 137 00:07:41,530 --> 00:07:45,536 You see this image here is only 335 pixels wide, 138 00:07:45,536 --> 00:07:49,493 the other image is well, almost 400 pixels wide. 139 00:07:49,493 --> 00:07:53,456 Therefore what we can now add back in our code 140 00:07:53,456 --> 00:07:56,070 is the width property, 141 00:07:56,070 --> 00:07:59,497 which can now be changed 100% to fill 142 00:07:59,497 --> 00:08:03,570 the entire width available, like this. 143 00:08:03,570 --> 00:08:05,810 Now it looks bad already. 144 00:08:05,810 --> 00:08:07,205 The problem here now is that 145 00:08:07,205 --> 00:08:10,710 the images don't keep their aspect ratio. 146 00:08:10,710 --> 00:08:13,120 So especially the cheeseburgers image 147 00:08:13,120 --> 00:08:16,290 is significantly distorted, 148 00:08:16,290 --> 00:08:18,840 but this can also be fixed with a property 149 00:08:18,840 --> 00:08:21,430 we learned about so far in this course. 150 00:08:21,430 --> 00:08:23,940 Here, we can use object fit now 151 00:08:23,940 --> 00:08:27,150 to perfectly position the image in the predefined 152 00:08:27,150 --> 00:08:30,690 width and height dimensions that we set here. 153 00:08:30,690 --> 00:08:35,690 For this, we go again to the food item, image rule here, 154 00:08:36,090 --> 00:08:39,133 and set object fit to cover. 155 00:08:40,320 --> 00:08:43,360 With this, both images are positioned correctly 156 00:08:43,360 --> 00:08:46,773 with the right size and are not distorted. 157 00:08:48,260 --> 00:08:50,597 Next, we could add a bit more distance 158 00:08:50,597 --> 00:08:54,930 between our two images or to be more precise, 159 00:08:54,930 --> 00:08:57,640 between our two list items. 160 00:08:57,640 --> 00:08:59,641 As we used a grid structure here, 161 00:08:59,641 --> 00:09:03,200 we can add the gap property. 162 00:09:03,200 --> 00:09:08,200 So here in our latest products, U L rule with the gap, 163 00:09:08,820 --> 00:09:11,010 we can, well, define the gap between 164 00:09:11,010 --> 00:09:14,870 our different grid columns in this case. 165 00:09:14,870 --> 00:09:18,681 And here I'll simply go for a gap of 16 pixels. 166 00:09:18,681 --> 00:09:22,710 With this, we have that space between our two columns, 167 00:09:22,710 --> 00:09:24,620 which improves the look of our page. 168 00:09:24,620 --> 00:09:29,309 Again, to finish this rule, if we hover over 169 00:09:29,309 --> 00:09:31,100 our unordered list, 170 00:09:31,100 --> 00:09:34,100 you can also see that the elements are not perfectly 171 00:09:34,100 --> 00:09:38,750 centered due to a default padding to the left and due 172 00:09:38,750 --> 00:09:42,800 to a default margin top and bottom, the orange part. 173 00:09:42,800 --> 00:09:46,910 So let's also set these properties equal to zero 174 00:09:46,910 --> 00:09:49,860 to remove any of these default values. 175 00:09:49,860 --> 00:09:54,471 So once again, back in our latest products, U L rule here, 176 00:09:54,471 --> 00:09:57,870 we'll set the margin to zero, 177 00:09:57,870 --> 00:10:01,623 and we'll also set the padding to zero. 178 00:10:02,880 --> 00:10:06,343 If there's some place, if we go back, this looks all right. 179 00:10:08,290 --> 00:10:12,330 Next, we'll work on our individual list items 180 00:10:12,330 --> 00:10:14,910 here with the food item class. 181 00:10:14,910 --> 00:10:17,200 There is not a lot to change right here. 182 00:10:17,200 --> 00:10:21,180 I actually see two main things that I would like to adjust. 183 00:10:21,180 --> 00:10:23,320 The first thing is I want to have 184 00:10:23,320 --> 00:10:26,050 a different background color, which has an impact 185 00:10:26,050 --> 00:10:31,050 onto the lower part of this card of this element in the end. 186 00:10:31,416 --> 00:10:35,522 And additionally, I would like to have rounded corners 187 00:10:35,522 --> 00:10:38,063 as we had previously in our project 188 00:10:38,063 --> 00:10:41,630 with the border radius property. 189 00:10:41,630 --> 00:10:43,170 To change these things, 190 00:10:43,170 --> 00:10:46,550 we have to select our food item class. 191 00:10:46,550 --> 00:10:48,050 So I'll add this rule above 192 00:10:48,050 --> 00:10:50,910 our food item image selector here. 193 00:10:50,910 --> 00:10:54,670 So we'll go again for the food item class. 194 00:10:54,670 --> 00:10:59,140 And in here, I'll first add a background color 195 00:10:59,140 --> 00:11:03,713 with an RGB code of 228, 196 00:11:05,653 --> 00:11:07,260 206 197 00:11:07,260 --> 00:11:09,023 and 182. 198 00:11:10,220 --> 00:11:12,840 Then we'll add a border radius. 199 00:11:12,840 --> 00:11:17,840 So for the rounded corners around our card of six pixels, 200 00:11:18,960 --> 00:11:22,570 and if you go back, yeah, you see, we improved the look. 201 00:11:22,570 --> 00:11:24,490 But if we zoom in a bit, 202 00:11:24,490 --> 00:11:27,120 we see that we have the rounded corners at the bottom, 203 00:11:27,120 --> 00:11:31,160 but not in the top corners where our image is placed. 204 00:11:31,160 --> 00:11:34,780 And this is also an issue that we had earlier in our course, 205 00:11:34,780 --> 00:11:37,403 so you might remember how this can be fixed. 206 00:11:38,920 --> 00:11:43,230 It can be fixed with the overflow property. 207 00:11:43,230 --> 00:11:47,530 If we add this property here to our food item class, 208 00:11:47,530 --> 00:11:51,023 so, overflow hidden, 209 00:11:52,650 --> 00:11:54,405 this simply means that the elements 210 00:11:54,405 --> 00:11:56,911 inside this element kind of adjust 211 00:11:56,911 --> 00:12:01,911 to the predefined layout to the predefined way 212 00:12:02,088 --> 00:12:04,841 this element is styled. This means in our case, 213 00:12:04,841 --> 00:12:09,841 the image will end with the rounded corners and not with the 214 00:12:11,130 --> 00:12:14,850 end of the actual image corners that the default image has 215 00:12:14,850 --> 00:12:18,060 because the image doesn't have rounded corners by default. 216 00:12:18,060 --> 00:12:19,550 So if you go back, you see, 217 00:12:19,550 --> 00:12:23,763 now we have these rounded corners also around our images. 218 00:12:25,670 --> 00:12:28,898 With this, we are almost done with our styling. 219 00:12:28,898 --> 00:12:33,410 There are actually only two more things we have to work on. 220 00:12:33,410 --> 00:12:36,410 The first thing is the food item content, 221 00:12:36,410 --> 00:12:39,380 so the lower part of this card. 222 00:12:39,380 --> 00:12:42,360 And then of course also the button, the add to cart button, 223 00:12:42,360 --> 00:12:45,243 which doesn't have any kind of button look at the moment. 224 00:12:46,520 --> 00:12:48,030 Let's first get started with the 225 00:12:48,030 --> 00:12:50,470 food item content class here. 226 00:12:50,470 --> 00:12:54,930 There, I simply want to well, align the texts in the center. 227 00:12:54,930 --> 00:12:57,700 And I want to add some padding to increase the gap 228 00:12:57,700 --> 00:12:59,970 to the border here that we have. 229 00:12:59,970 --> 00:13:03,750 So for this back in the code we'll first go with 230 00:13:03,750 --> 00:13:08,010 the food item content class, 231 00:13:08,010 --> 00:13:09,150 and here, as I said, 232 00:13:09,150 --> 00:13:14,150 I'll add some default padding of maybe 16 pixels. 233 00:13:16,000 --> 00:13:17,020 Let's see. Yeah. 234 00:13:17,020 --> 00:13:18,270 Now it looks better already, 235 00:13:18,270 --> 00:13:20,590 especially here at the bottom also. 236 00:13:20,590 --> 00:13:24,657 And as a second step, we'll add the text align property 237 00:13:24,657 --> 00:13:29,657 here once again, with a value of center to center the text. 238 00:13:30,250 --> 00:13:32,623 Yeah. This also works nicely. 239 00:13:33,950 --> 00:13:36,860 With that, our cart looks almost okay. 240 00:13:36,860 --> 00:13:38,960 The distance here is not perfect yet, 241 00:13:38,960 --> 00:13:41,560 but we'll work on this throughout this module. 242 00:13:41,560 --> 00:13:44,404 So the last styling I would like to tackle now is 243 00:13:44,404 --> 00:13:47,754 our button. So the add to cart button down here, 244 00:13:47,754 --> 00:13:50,161 which we have inside our article, 245 00:13:50,161 --> 00:13:54,350 and they're inside the food item content class. 246 00:13:54,350 --> 00:13:57,130 So this anchor tag here is this button 247 00:13:57,130 --> 00:14:00,030 when we added the class button to it, 248 00:14:00,030 --> 00:14:02,520 therefore we'll just add some background, 249 00:14:02,520 --> 00:14:03,768 color, some color maybe, 250 00:14:03,768 --> 00:14:07,740 and also changed the border radius to our rounded style 251 00:14:07,740 --> 00:14:09,273 that we previously have. And with that, 252 00:14:09,273 --> 00:14:12,483 the default style should look all right. 253 00:14:13,660 --> 00:14:17,305 So let's go back to the code maybe here to the bottom 254 00:14:17,305 --> 00:14:20,880 and there, I'll now select the button class. 255 00:14:20,880 --> 00:14:24,000 And first we'll add a different background color 256 00:14:24,000 --> 00:14:26,390 to this button. 257 00:14:26,390 --> 00:14:29,540 Here, I prepared a value of 258 00:14:30,460 --> 00:14:31,423 228, 259 00:14:33,800 --> 00:14:35,173 157, 260 00:14:37,210 --> 00:14:40,630 and 44 for the color. 261 00:14:40,630 --> 00:14:43,420 We'll go with a plain white text here, 262 00:14:43,420 --> 00:14:47,570 so I just enter white as a full vert here, 263 00:14:47,570 --> 00:14:51,070 and then we'll apply the border radius property 264 00:14:51,070 --> 00:14:52,460 for our round corners. 265 00:14:52,460 --> 00:14:54,950 Here, I'll use four pixels only maybe, 266 00:14:54,950 --> 00:14:59,360 to make it a bit less over-rounded corner. 267 00:14:59,360 --> 00:15:01,340 So let's see what this looks like. 268 00:15:01,340 --> 00:15:03,409 Yeah, this looks almost good. 269 00:15:03,409 --> 00:15:06,475 What is missing now are two things: 270 00:15:06,475 --> 00:15:08,610 first, a hover effect, 271 00:15:08,610 --> 00:15:10,584 and secondly, some more padding here 272 00:15:10,584 --> 00:15:15,080 between our actual content and the border of the element. 273 00:15:15,080 --> 00:15:17,053 Let's first add the padding. 274 00:15:18,280 --> 00:15:23,280 So down here, we'll add a padding of maybe eight pixels, 275 00:15:23,730 --> 00:15:24,950 top bottom, 276 00:15:24,950 --> 00:15:29,410 and 24 pixels left. 277 00:15:29,410 --> 00:15:31,260 Right? Let's see. 278 00:15:31,260 --> 00:15:32,310 Yep. It looks better. 279 00:15:33,410 --> 00:15:38,270 And besides this, I also would like to have a hover effect. 280 00:15:38,270 --> 00:15:41,670 So for this we'll select the button class here once again, 281 00:15:41,670 --> 00:15:44,540 but now with the hover pseudo selector, 282 00:15:44,540 --> 00:15:48,020 we also learned about already, and here we'll just add 283 00:15:48,020 --> 00:15:53,020 a slightly changed background color with an RGB code of 284 00:15:53,112 --> 00:15:55,661 221, 285 00:15:55,661 --> 00:15:56,494 134, 286 00:15:58,472 --> 00:16:00,890 and 34. 287 00:16:00,890 --> 00:16:03,257 So let's see what this looks like now. Yeah. 288 00:16:03,257 --> 00:16:05,253 I think this looks good. 289 00:16:06,280 --> 00:16:09,900 With this, our initial styling is finished. 290 00:16:09,900 --> 00:16:12,970 It's not perfect yet, of course, but we'll work on this 291 00:16:12,970 --> 00:16:16,578 throughout this module, and with this optional part 292 00:16:16,578 --> 00:16:19,162 being finished now, in the next lecture, 293 00:16:19,162 --> 00:16:23,390 we'll now finally dive into the responsive design 294 00:16:23,390 --> 00:16:26,940 aspect of this module, because at the moment, 295 00:16:26,940 --> 00:16:28,977 if we decrease the width here, well, 296 00:16:28,977 --> 00:16:31,655 not a lot is happening by default, right? 297 00:16:31,655 --> 00:16:33,770 This doesn't look good. 298 00:16:33,770 --> 00:16:37,383 So this is what we will work on in the next lectures.