1 00:00:02,040 --> 00:00:05,569 line:15% Let's continue to build our features section 2 00:00:05,569 --> 00:00:07,636 line:15% So the first thing that we're gonna do with this 3 00:00:07,636 --> 00:00:11,803 line:15% is white space, you surely remember that white space 4 00:00:12,837 --> 00:00:17,453 line:15% is a very important thing, and so let's define white space 5 00:00:17,453 --> 00:00:21,620 line:15% between the sections for all sections at the same time. 6 00:00:22,916 --> 00:00:26,795 So let's format the section, and I will do it here 7 00:00:26,795 --> 00:00:30,962 right in the reusable competence part of our code. 8 00:00:34,085 --> 00:00:36,663 And we will put that white space 9 00:00:36,663 --> 00:00:39,580 between the sections using petting. 10 00:00:42,120 --> 00:00:46,287 Now you maybe say that to put a space between elements, 11 00:00:48,250 --> 00:00:52,035 we use margin, and that's actually right, but I will use 12 00:00:52,035 --> 00:00:55,368 petting because I will later have some-- 13 00:00:57,259 --> 00:01:00,556 I'm planning to have some sections with background colors, 14 00:01:00,556 --> 00:01:04,202 and in order to preserve that background color, 15 00:01:04,202 --> 00:01:06,889 we need to make sure that the space 16 00:01:06,889 --> 00:01:09,472 is inside of each of the boxes. 17 00:01:10,736 --> 00:01:12,736 You will see that later. 18 00:01:14,391 --> 00:01:19,382 So I want a lot of white space, so let me say 80 pixels 19 00:01:19,382 --> 00:01:21,882 at the top, and on the bottom. 20 00:01:23,052 --> 00:01:26,885 Zero, so zero at left and right, so no margin. 21 00:01:31,601 --> 00:01:35,218 line:15% Great, so this is a lot of white space, 22 00:01:35,218 --> 00:01:37,385 line:15% and it looks great, right? 23 00:01:41,818 --> 00:01:45,985 line:15% So the next thing is to format the H2 heading here. 24 00:01:50,735 --> 00:01:54,902 line:15% So I want the H2 heading to look quite similar to the H1. 25 00:01:59,489 --> 00:02:04,133 line:15% For example, I want it to have the same text transform, 26 00:02:04,133 --> 00:02:08,216 line:15% the same letter spacing, and the same font white. 27 00:02:11,307 --> 00:02:14,724 line:15% So what do I do in order to achieve that? 28 00:02:15,835 --> 00:02:19,157 line:15% I just group the similar properties 29 00:02:19,157 --> 00:02:21,570 line:15% just as I showed you before. 30 00:02:21,570 --> 00:02:25,320 line:15% So H1 and H2 will have some things in common. 31 00:02:35,199 --> 00:02:36,032 H1 and H2. 32 00:02:40,160 --> 00:02:43,827 So this is for H1 only, this is for H1 only, 33 00:02:50,771 --> 00:02:52,188 and this as well. 34 00:02:57,982 --> 00:03:02,149 And also this, but the rest, we can leave here for both. 35 00:03:06,829 --> 00:03:10,996 line:15% Now on H2, I want another font size, not so big, of course. 36 00:03:14,933 --> 00:03:19,100 line:15% And I will say maybe 180 percent, so it's not so big. 37 00:03:22,433 --> 00:03:25,516 line:15% And maybe a word spacing of 2 pixels. 38 00:03:27,355 --> 00:03:30,698 line:15% Alright, I also want to align it on the web page 39 00:03:30,698 --> 00:03:34,968 line:15% inside of the row, so I will make center-- 40 00:03:34,968 --> 00:03:38,051 line:15% sorry, I will make text align center. 41 00:03:41,632 --> 00:03:44,674 line:15% Yeah, that looks much better than before. 42 00:03:44,674 --> 00:03:47,841 line:15% Now let's put some space between this. 43 00:03:49,991 --> 00:03:53,574 line:15% So again, we use some margin at the bottom. 44 00:03:55,250 --> 00:03:58,750 line:15% 30 pixels should be a good value for this. 45 00:04:00,812 --> 00:04:04,312 line:15% And now, I want a nice, little yellow line 46 00:04:06,650 --> 00:04:10,483 line:15% between the H2 and the text, and as I told you 47 00:04:12,199 --> 00:04:14,614 line:15% in the first lecture, we will learn to put some content 48 00:04:14,614 --> 00:04:18,677 line:15% on a website just with CSS, so we do that 49 00:04:18,677 --> 00:04:21,094 line:15% using the after pseudo-class. 50 00:04:25,318 --> 00:04:29,485 line:15% So after it's just some stuff that will appear after the H2, 51 00:04:31,123 --> 00:04:33,373 line:15% such as the name indicates. 52 00:04:34,861 --> 00:04:36,417 line:15% And now we can style this 53 00:04:36,417 --> 00:04:39,334 line:15% just as if it was a normal element. 54 00:04:42,910 --> 00:04:47,077 line:15% You can say you want it to display as a block element, 55 00:04:48,508 --> 00:04:51,927 line:15% and we want a eight of two pixels, 56 00:04:51,927 --> 00:04:56,094 line:15% so it will be a nice little line with two pixel sides. 57 00:04:57,824 --> 00:05:01,907 line:15% And we want it to be orange, and you already know 58 00:05:02,786 --> 00:05:06,119 where to find that orange, it's up here. 59 00:05:09,542 --> 00:05:13,375 Paste it here, and now a very important thing: 60 00:05:14,558 --> 00:05:18,725 whenever we do a after pseudo-class, we have to specify 61 00:05:21,477 --> 00:05:25,644 its content, and in this case, we don't want any words 62 00:05:27,376 --> 00:05:30,543 to appear, so we put a space in there. 63 00:05:34,179 --> 00:05:37,244 Now the width of that line, of that box will be 64 00:05:37,244 --> 00:05:41,411 another pixel, and alright, let's see how that looks. 65 00:05:46,277 --> 00:05:49,202 line:15% So somethings is not right here, 66 00:05:49,202 --> 00:05:53,963 line:15% because we want it centered, and of course the reason 67 00:05:53,963 --> 00:05:58,130 for that is that we have to say that we want it centered, 68 00:06:00,789 --> 00:06:03,872 and we do that such as we did before. 69 00:06:06,664 --> 00:06:09,938 So we say we want a margin zero, and bottom zero, 70 00:06:09,938 --> 00:06:14,105 and left and right auto, and now this should work. 71 00:06:15,232 --> 00:06:18,831 And also we need to specify some margin 72 00:06:18,831 --> 00:06:21,084 between this and the bottom. 73 00:06:21,084 --> 00:06:24,917 Three pixels as well, such as we have it here. 74 00:06:27,471 --> 00:06:30,859 line:15% So let's take a look at this, alright, 75 00:06:30,859 --> 00:06:35,026 line:15% but we still don't have the margin that we want, and-- 76 00:06:36,107 --> 00:06:40,274 yeah, the reason's because this has to be margin top. 77 00:06:42,701 --> 00:06:46,868 So there's a margin between DH2 after, so this block, 78 00:06:48,506 --> 00:06:52,089 and the actual H2, and then 30 pixels after 79 00:06:54,915 --> 00:06:57,415 that orange block we inserted, 80 00:07:00,163 --> 00:07:03,483 line:15% and this is exactly what we want. 81 00:07:03,483 --> 00:07:06,130 line:15% Now next up, we have this text here. 82 00:07:06,130 --> 00:07:10,130 line:15% So let's define a nice paragraph style for this. 83 00:07:13,746 --> 00:07:17,913 line:15% So this can also go here into the reusable competence 84 00:07:19,992 --> 00:07:24,159 line:15% that will make a little sub-section here for paragraphs. 85 00:07:28,584 --> 00:07:32,751 line:15% So this is called long copy, and one thing we will do 86 00:07:35,537 --> 00:07:39,740 line:15% is to change the line height, which is one thing 87 00:07:39,740 --> 00:07:43,478 line:15% that we learned in the typography lecture. 88 00:07:43,478 --> 00:07:47,645 line:15% So line height should be between 120 and 145 percent, 89 00:07:49,933 --> 00:07:54,508 line:15% and I will actually use the highest of the values, 90 00:07:54,508 --> 00:07:57,758 line:15% because I really like some line height. 91 00:08:01,078 --> 00:08:04,074 line:15% Now one thing that you notice is that this line 92 00:08:04,074 --> 00:08:07,999 line:15% is very long, because another rule of typography 93 00:08:07,999 --> 00:08:11,499 line:15% was that this line should have at most two 94 00:08:14,454 --> 00:08:17,821 line:15% complete alphabets, and this is way more, 95 00:08:17,821 --> 00:08:21,821 line:15% so let's make this paragraph a little less wide, 96 00:08:23,277 --> 00:08:26,807 line:15% so I will say that the width of this paragraph 97 00:08:26,807 --> 00:08:28,557 line:15% should be 70 percent. 98 00:08:30,220 --> 00:08:34,387 line:15% Now the problem is that it will no longer be centered, 99 00:08:35,421 --> 00:08:39,588 line:15% so a good idea for this problem is that instead of trying 100 00:08:40,669 --> 00:08:45,389 line:15% to centering it, is to do another thing, which is this: 101 00:08:45,389 --> 00:08:49,499 line:15% we say that the margin left should be 15 percent. 102 00:08:49,499 --> 00:08:50,416 line:15% And why 15? 103 00:08:51,310 --> 00:08:55,374 line:15% Because the total width would be 100 percent, 104 00:08:55,374 --> 00:08:59,541 line:15% so if we want to center it, the remaining 30 percent 105 00:09:00,389 --> 00:09:02,316 line:15% should be distributed to both sides. 106 00:09:02,316 --> 00:09:07,100 line:15% So 15 percent left, 15 percent right, plus the 70 percent, 107 00:09:07,100 --> 00:09:10,267 line:15% which is our width, makes 100 percent. 108 00:09:12,069 --> 00:09:15,236 line:15% Okay, so let's see what it looks like. 109 00:09:17,711 --> 00:09:20,080 line:15% Okay, and this is way better now. 110 00:09:20,080 --> 00:09:22,495 Maybe you already noticed that sometimes I have to scroll 111 00:09:22,495 --> 00:09:25,350 the webpage a little bit in order to make 112 00:09:25,350 --> 00:09:28,508 our changes appear here, and I actually have no idea 113 00:09:28,508 --> 00:09:32,246 why this happens, it must be something with the connection 114 00:09:32,246 --> 00:09:36,117 between bracket and the browser, so don't worry, 115 00:09:36,117 --> 00:09:40,536 maybe if you also experience this, just scroll your website 116 00:09:40,536 --> 00:09:44,369 a little bit, and then the change will appear. 117 00:09:45,226 --> 00:09:49,080 line:15% Now the next thing is to format these boxes. 118 00:09:49,080 --> 00:09:51,467 line:15% And the first thing I notice immediately 119 00:09:51,467 --> 00:09:56,250 line:15% is that these columns are a little too close to each other, 120 00:09:56,250 --> 00:10:00,129 line:15% so I should give them some petting here, 121 00:10:00,129 --> 00:10:04,122 line:15% like for example, one percent petting. 122 00:10:04,122 --> 00:10:08,289 So let's go back to CSS, and now how should we do this? 123 00:10:12,737 --> 00:10:16,904 So we should never, ever change anything of these classes 124 00:10:20,423 --> 00:10:24,423 which come from our grid, so what we can do here 125 00:10:25,647 --> 00:10:30,268 is to add another class, and then format that class, 126 00:10:30,268 --> 00:10:33,685 and I will call it box, because you know, 127 00:10:38,697 --> 00:10:42,197 line:15% it's like a box where all the features go. 128 00:10:45,593 --> 00:10:49,760 And I will actually reuse this box probably later, 129 00:10:50,608 --> 00:10:52,536 so let me just put it here. 130 00:10:52,536 --> 00:10:55,703 I will call it box, and I just want to 131 00:10:57,714 --> 00:11:00,464 have it a petting of one percent. 132 00:11:02,700 --> 00:11:06,700 line:15% Alright, and that looks a little bit better now. 133 00:11:12,017 --> 00:11:16,184 line:15% Now, these H3 elements here, they should be similar 134 00:11:18,565 --> 00:11:22,065 line:15% to this one, but a little smaller, so I do 135 00:11:24,904 --> 00:11:29,071 line:15% all the petting elements look similar, so that we maintain 136 00:11:31,104 --> 00:11:34,687 a similar style all throughout the webpage. 137 00:11:37,211 --> 00:11:41,460 So I want these three attributes to be always the same 138 00:11:41,460 --> 00:11:45,460 in all these three pettings, and for the H3 ones 139 00:11:47,126 --> 00:11:50,959 line:15% in specific, it should also be a little bigger 140 00:11:54,556 --> 00:11:58,364 line:15% than the normal font size, but only slightly bigger, 141 00:11:58,364 --> 00:12:02,531 line:15% so maybe 110 percent should be fine, and then also 142 00:12:05,701 --> 00:12:10,159 line:15% some space between the H3 and the paragraph, 143 00:12:10,159 --> 00:12:14,326 line:15% so let me say a margin bottom for instance, 15 pixels. 144 00:12:21,573 --> 00:12:25,490 line:15% Alright, now I really don't like that this text 145 00:12:26,715 --> 00:12:30,882 line:15% doesn't fit in one line, so what can we do about that? 146 00:12:32,010 --> 00:12:34,842 Let's go back and maybe the reason for that 147 00:12:34,842 --> 00:12:39,009 is this letter spacing, so if we take that away from the H3, 148 00:12:44,525 --> 00:12:48,692 and I do this by pasting it here under H1 and in H2 149 00:12:51,003 --> 00:12:54,753 headings, we will see so now the H3 no longer 150 00:12:57,792 --> 00:13:01,875 has the letter spacing so let's see what happens. 151 00:13:04,456 --> 00:13:07,789 line:15% Okay, now it fits, just as we wanted it, 152 00:13:10,090 --> 00:13:12,012 line:15% so this is much better. 153 00:13:12,012 --> 00:13:16,238 line:15% Now as for the text in here, I think this 154 00:13:16,238 --> 00:13:18,560 line:15% is a little too big, actually. 155 00:13:18,560 --> 00:13:21,903 line:15% It looks a bit overwhelming, don't you think so? 156 00:13:21,903 --> 00:13:24,700 line:15% So what we can do here is to make the text 157 00:13:24,700 --> 00:13:28,700 line:15% a little bit smaller, and raise its line height. 158 00:13:32,407 --> 00:13:35,990 So we didn't give it any name because maybe 159 00:13:38,338 --> 00:13:42,505 we don't need to, but you can see here, that it's a simple 160 00:13:43,516 --> 00:13:47,683 paragraph inside of the box, so you already can guess 161 00:13:49,391 --> 00:13:51,808 what I'm gonna do now, right? 162 00:13:52,665 --> 00:13:56,125 I'm writing box and then I'm selecting 163 00:13:56,125 --> 00:13:59,708 all the paragraphs inside a box, very easy. 164 00:14:03,972 --> 00:14:07,889 line:15% So as I said a smaller font size, I will choose 165 00:14:09,127 --> 00:14:12,239 line:15% 90 percent here, and again I'm going 166 00:14:12,239 --> 00:14:15,072 line:15% with a line height of 145 percent. 167 00:14:18,160 --> 00:14:20,410 line:15% That will look much better. 168 00:14:24,359 --> 00:14:27,959 line:15% So I think that's way more pleasant to look at. 169 00:14:27,959 --> 00:14:31,767 line:15% And this section already looks great, don't you think so? 170 00:14:31,767 --> 00:14:34,252 line:15% The only thing that we need to do now 171 00:14:34,252 --> 00:14:37,835 line:15% is to change these icons, so let's do that. 172 00:14:42,279 --> 00:14:46,196 And in order to do that, I will actually define 173 00:14:47,046 --> 00:14:51,643 a new class for all those icons, and I will call this 174 00:14:51,643 --> 00:14:55,476 icon big, because we will use some other icons 175 00:14:57,564 --> 00:15:01,731 down the road, and they will probably not be as big 176 00:15:03,137 --> 00:15:07,304 as these, so let's just call these icons big icons. 177 00:15:09,407 --> 00:15:11,682 Makes sense right? 178 00:15:11,682 --> 00:15:15,849 So, I can just say I want paragraphs, and here I want 179 00:15:19,554 --> 00:15:23,687 some icons, so you see I'm really worried 180 00:15:23,687 --> 00:15:27,657 with keeping this code organized, and you will see 181 00:15:27,657 --> 00:15:30,769 when you have bigger projects, 182 00:15:30,769 --> 00:15:33,973 this becomes incredibly important. 183 00:15:33,973 --> 00:15:37,619 So in order to make you get used to this, 184 00:15:37,619 --> 00:15:39,452 is why I'm doing this. 185 00:15:41,148 --> 00:15:45,315 So let's define the icon big class, and as you notice, 186 00:15:49,020 --> 00:15:53,873 it's an icon font, so it's really a font, so you can set 187 00:15:53,873 --> 00:15:58,146 line:15% its font size, for instance, and I will make it really big. 188 00:15:58,146 --> 00:16:01,651 line:15% I will start with 400 percent, and if it's too big, 189 00:16:01,651 --> 00:16:03,818 line:15% we can always reduce that. 190 00:16:05,483 --> 00:16:09,650 line:15% And I also want this icon to display as a block... 191 00:16:10,684 --> 00:16:15,235 line:15% display block, so that it forces a line break, 192 00:16:15,235 --> 00:16:16,902 line:15% as you already know. 193 00:16:18,068 --> 00:16:22,235 line:15% I want it to be orange, so again as if it was a real font, 194 00:16:23,826 --> 00:16:27,993 line:15% we can set its color, because color really means font color, 195 00:16:30,201 --> 00:16:33,368 line:15% so I will again copy this orange color 196 00:16:34,206 --> 00:16:38,614 line:15% that we're already used to and put it right here. 197 00:16:38,614 --> 00:16:42,781 line:15% It may be a little margin between the icon and the heading, 198 00:16:45,375 --> 00:16:49,542 line:15% so margin bottom, of course, and let's say 10 pixels. 199 00:16:51,923 --> 00:16:56,090 line:15% And, okay, I think we can see how this looks like. 200 00:16:59,327 --> 00:17:00,327 line:15% Okay, great. 201 00:17:01,673 --> 00:17:05,690 line:15% Well the icons are probably a little too big, right? 202 00:17:05,690 --> 00:17:09,857 line:15% So I think I'll maybe 350 percent, and let's check it again. 203 00:17:16,325 --> 00:17:18,043 line:15% Yeah, that's better. 204 00:17:18,043 --> 00:17:21,177 So this is really designing in the browser, 205 00:17:21,177 --> 00:17:24,731 that's what I meant when I said-- when I told you 206 00:17:24,731 --> 00:17:28,213 what designing in a browser was all about. 207 00:17:28,213 --> 00:17:33,090 It's trying, tweaking the CSS codes, and see what 208 00:17:33,090 --> 00:17:36,155 looks best and what works best in order 209 00:17:36,155 --> 00:17:39,322 to make our website as good as we can. 210 00:17:42,146 --> 00:17:46,313 line:15% So I think this section is ready, it looks great, right? 211 00:17:48,531 --> 00:17:51,281 line:15% And see you in the next section.