1 00:00:00,530 --> 00:00:03,040 All right, we've made it to the end of our page. 2 00:00:03,040 --> 00:00:05,740 Now it's time to style out our footer content. 3 00:00:05,740 --> 00:00:07,410 As we look at our reference sketch, 4 00:00:07,410 --> 00:00:10,280 we see I have the last paragraph of requirements split out and 5 00:00:10,280 --> 00:00:15,170 centered, the five links spanning across the page as buttons, and the aside section 6 00:00:15,170 --> 00:00:20,340 styled out in two column format, where one takes up 60% and the other takes up 40%. 7 00:00:20,340 --> 00:00:22,880 Both link lists here are centered. 8 00:00:22,880 --> 00:00:28,010 First, let's style out this last paragraph in our requirements section. 9 00:00:28,010 --> 00:00:32,470 I'll target it through the requirements, paragraph, last of type selector. 10 00:00:33,490 --> 00:00:35,480 Since it's a short piece of content, 11 00:00:35,480 --> 00:00:39,460 I want to break it out of the normal measure to distinguish it as different. 12 00:00:39,460 --> 00:00:47,180 So, I'll set a max width of 92%, a text-align of center, 13 00:00:47,180 --> 00:00:52,940 and a style of Italic. 14 00:00:57,290 --> 00:01:01,200 Next, I'll remove our text indent so it centers correctly. 15 00:01:01,200 --> 00:01:06,142 Give it some top padding of 4m to space it evenly between the paragraph above and 16 00:01:06,142 --> 00:01:10,815 the end of the section and give it a similar blue color to our benefits copy. 17 00:01:10,815 --> 00:01:15,771 [BLANK_AUDIO] 18 00:01:15,771 --> 00:01:17,510 So I'll save and let's go check it out. 19 00:01:19,080 --> 00:01:19,710 Nice. 20 00:01:19,710 --> 00:01:20,980 That's looking a lot better and 21 00:01:20,980 --> 00:01:26,220 feels like a closing element that's ending our copy and introducing our footer. 22 00:01:26,220 --> 00:01:28,776 I'm not sure if I like the link style here, 23 00:01:28,776 --> 00:01:33,123 as it feels a little clunky in this context, so let's change it up a bit. 24 00:01:33,123 --> 00:01:40,691 [BLANK_AUDIO] 25 00:01:40,691 --> 00:01:45,513 I'll target it again through our requirements class p, last-of-type a and 26 00:01:45,513 --> 00:01:49,380 assign our green color to it with a bottom border of none. 27 00:01:49,380 --> 00:01:52,167 Then for our hover state I'll copy that code but 28 00:01:52,167 --> 00:01:55,172 change its color to be a sandy white with no border. 29 00:01:55,172 --> 00:02:00,959 [BLANK_AUDIO] 30 00:02:00,959 --> 00:02:02,240 Let's save and refresh. 31 00:02:03,430 --> 00:02:04,890 Great. That's more like it. 32 00:02:04,890 --> 00:02:08,790 Although they no longer have the border they're still obviously links to 33 00:02:08,790 --> 00:02:12,860 the user because of their color and hover state change. 34 00:02:12,860 --> 00:02:16,070 All right, let's move into our footer links now. 35 00:02:16,070 --> 00:02:21,294 So, we'll want these five links down here to span across the whole page, as buttons. 36 00:02:21,294 --> 00:02:25,058 To do that, we'll want to assign the background of the footer to be green. 37 00:02:25,058 --> 00:02:30,352 [BLANK_AUDIO] 38 00:02:30,352 --> 00:02:34,018 Since we'll be floating these five button styles to the left, 39 00:02:34,018 --> 00:02:38,721 I'll throw in a clear fix trick by using the pseudo selector footer colon after, 40 00:02:38,721 --> 00:02:43,370 with nothing in our content, a display of table, and a clear of both. 41 00:02:43,370 --> 00:02:46,550 Basically, this makes sure our footer's background extends all the way 42 00:02:46,550 --> 00:02:47,950 across the screen. 43 00:02:47,950 --> 00:02:50,360 Next we'll get into styling the links. 44 00:02:50,360 --> 00:02:54,088 I'll give each one a float of left, box-sizing border-box. 45 00:02:55,300 --> 00:02:59,488 A width of 20% which will make them fill the screen because there's five of them. 46 00:02:59,488 --> 00:03:01,691 So 5 times 20 is 100%. 47 00:03:01,691 --> 00:03:03,364 A text line of center. 48 00:03:03,364 --> 00:03:05,200 A background of our green also. 49 00:03:05,200 --> 00:03:12,655 [BLANK_AUDIO] 50 00:03:12,655 --> 00:03:16,290 Padding of 1 em for our top and bottom and 0 for our left and right. 51 00:03:18,520 --> 00:03:20,818 We'll set the color to be our sandy white and 52 00:03:20,818 --> 00:03:23,629 give them some slight letter spacing of 0.05 em. 53 00:03:23,629 --> 00:03:29,798 [BLANK_AUDIO] 54 00:03:29,798 --> 00:03:31,260 Let's save and check out what that did. 55 00:03:32,720 --> 00:03:35,550 So it's getting there but needs a few tweaks still. 56 00:03:35,550 --> 00:03:37,230 They don't really feel like buttons, and 57 00:03:37,230 --> 00:03:39,650 there's no hover state changes to our buttons. 58 00:03:39,650 --> 00:03:41,836 So let's go in and refine that. 59 00:03:41,836 --> 00:03:46,893 So, I'll target every even link through our footer a nth of type even, and 60 00:03:46,893 --> 00:03:49,636 set its background to our darker green. 61 00:03:49,636 --> 00:03:55,051 [BLANK_AUDIO] 62 00:03:55,051 --> 00:03:59,305 Next I'll change the hover state of our footer links to be a background of 63 00:03:59,305 --> 00:04:03,084 our sandy white, and then the text will turn to a color of green. 64 00:04:03,084 --> 00:04:13,084 [BLANK_AUDIO] 65 00:04:16,074 --> 00:04:17,740 Let's save and see what that looks like. 66 00:04:19,020 --> 00:04:19,630 Great. 67 00:04:19,630 --> 00:04:23,290 These look more like buttons instead of just one long bar and when we 68 00:04:23,290 --> 00:04:27,740 hover over them they feel like buttons as their background and colors change. 69 00:04:27,740 --> 00:04:32,390 Finally let's jump into our aside content down here. 70 00:04:32,390 --> 00:04:35,720 In our HTML this is located below the footer and we're going to 71 00:04:35,720 --> 00:04:41,240 be styling this out for small to mid-sized screens, so we'll set it up properly here. 72 00:04:41,240 --> 00:04:45,490 Then through our media queries later we'll work some magic for larger sizes. 73 00:04:45,490 --> 00:04:51,010 So we'll head over to our CSS and style out our aside with a width of 100%. 74 00:04:51,010 --> 00:04:55,582 [BLANK_AUDIO] 75 00:04:55,582 --> 00:05:00,167 We'll set our sidebar class to have a background of dark navy, which is what we 76 00:05:00,167 --> 00:05:04,682 use for our benefit section, and we'll set its text color to a lighter blue, 77 00:05:04,682 --> 00:05:08,596 which will give it a lower amount of contrast with the background. 78 00:05:08,596 --> 00:05:11,269 [BLANK_AUDIO] 79 00:05:11,269 --> 00:05:15,456 Then we'll keep our top and bottom padding consistent with 4 em and 80 00:05:15,456 --> 00:05:17,150 set our left to right to 0. 81 00:05:17,150 --> 00:05:19,760 And finally we'll give it a text-align of center. 82 00:05:19,760 --> 00:05:23,460 This sidebar class will span the entire width of the browser. 83 00:05:23,460 --> 00:05:25,740 Let's save and just see where we're at now with it. 84 00:05:25,740 --> 00:05:29,790 So we see we still have a ways to go to set up our two columns, 85 00:05:29,790 --> 00:05:32,390 change some link colors and list items. 86 00:05:32,390 --> 00:05:35,920 Next we'll get into styling our first column in this two column layout. 87 00:05:35,920 --> 00:05:40,580 I'll set our design selection class to float left with box-sizing border-box 88 00:05:40,580 --> 00:05:45,110 the width of 60% so it'll take up 60% of the browser width. 89 00:05:45,110 --> 00:05:49,070 I want the font style to be italic, because I want all the instances of 90 00:05:49,070 --> 00:05:55,450 the word by, to be italic, such as, mid century by Andrew Lowman. 91 00:05:55,450 --> 00:05:59,650 Then I'll give it a border-right of 1px solid, and our lighter blue, 92 00:05:59,650 --> 00:06:02,200 which is the same as our text color in our sidebar. 93 00:06:02,200 --> 00:06:05,090 And this will be a subtle way to distinguish its spacing in 94 00:06:05,090 --> 00:06:07,490 relation to the other column. 95 00:06:07,490 --> 00:06:11,190 Next I'll set our two other classes which will align to the right side of 96 00:06:11,190 --> 00:06:15,780 the column to have a display of inline-block and a width of 40%. 97 00:06:15,780 --> 00:06:20,230 Notice that this time I didn't set our columns at both at 50% because our 98 00:06:20,230 --> 00:06:24,740 content in our left column is a bit longer per line than the content in the right. 99 00:06:24,740 --> 00:06:30,490 And the 60, 40 lined up better with our five footer links at 20% intervals. 100 00:06:30,490 --> 00:06:31,870 Let's save and see what that looks like. 101 00:06:33,950 --> 00:06:35,670 Good so it's starting to form, but 102 00:06:35,670 --> 00:06:38,600 we still have some trouble with these list item elements here. 103 00:06:39,690 --> 00:06:44,840 And we'll want some adjustments to our styles, our sizes, and color changes. 104 00:06:44,840 --> 00:06:49,700 Although our sidebar titles are set at H3, I wanna size them down a bit so 105 00:06:49,700 --> 00:06:53,090 they'll work more as small labels, rather than big headings. 106 00:06:55,320 --> 00:06:56,680 We'll go into our H3 here and 107 00:06:56,680 --> 00:07:01,590 set its font size to 0.75 em which is our next size down in our scale. 108 00:07:04,500 --> 00:07:08,088 Their margin at 0, their line height at 1.6. 109 00:07:08,088 --> 00:07:11,729 [BLANK_AUDIO] 110 00:07:11,729 --> 00:07:15,838 Their padding at 0.5 em for the top and bottom, and 4% for the left and 111 00:07:15,838 --> 00:07:16,840 right for space. 112 00:07:18,730 --> 00:07:21,410 Lastly here I'll give it our lighter tone of blue, 113 00:07:21,410 --> 00:07:24,260 which is different than what we set the summary class in, 114 00:07:24,260 --> 00:07:28,000 as this color difference will help set apart the headings in a slight way. 115 00:07:28,000 --> 00:07:30,070 Now to style out our links. 116 00:07:30,070 --> 00:07:33,630 I want our side bar UL to have a padding of 0, and then for 117 00:07:33,630 --> 00:07:38,210 our side bar LIs, let's set the list-style type to none to remove those bullets. 118 00:07:40,910 --> 00:07:44,945 And then adjust the padding for those to have top and bottom padding of 0.3em and 119 00:07:44,945 --> 00:07:46,361 2% for the left and right. 120 00:07:46,361 --> 00:07:50,369 [BLANK_AUDIO] 121 00:07:50,369 --> 00:07:51,569 Lets save and check that out. 122 00:07:51,569 --> 00:07:54,693 [BLANK_AUDIO] 123 00:07:54,693 --> 00:07:58,615 Alright, our H3s are now working as labels, our bullets are gone and 124 00:07:58,615 --> 00:08:01,460 this border here is a nice subtle divider. 125 00:08:01,460 --> 00:08:04,970 Now let's looking at styling out the actual links in our list items. 126 00:08:04,970 --> 00:08:08,410 So for these I'll want these titles to be small caps as I think it'll give it 127 00:08:08,410 --> 00:08:10,760 a more official feel for a title. 128 00:08:10,760 --> 00:08:13,280 And then, for these author names we'll change up their color and 129 00:08:13,280 --> 00:08:16,080 just sat them in a regular font style. 130 00:08:16,080 --> 00:08:20,620 To do that, let's head back into our CSS and start styling those out. 131 00:08:20,620 --> 00:08:25,600 So, for these sidebar links I'll grab our font-family code for our small caps and 132 00:08:25,600 --> 00:08:26,750 paste that in. 133 00:08:26,750 --> 00:08:29,330 Then I want their style to be normal instead of metallic. 134 00:08:32,030 --> 00:08:34,870 And then for our color, I think the green would look good here, for 135 00:08:34,870 --> 00:08:36,240 our dark navy background. 136 00:08:38,820 --> 00:08:42,630 And we'll set our letter spacing at .06 em to give it some room to breathe. 137 00:08:42,630 --> 00:08:45,710 And then, lastly, for our hover state, we'll just set it at our sandy white. 138 00:08:48,190 --> 00:08:49,350 Let's check out what that's looking like. 139 00:08:51,080 --> 00:08:51,890 Nice. 140 00:08:51,890 --> 00:08:52,970 So that's starting to look good. 141 00:08:52,970 --> 00:08:56,500 We have our Zen Garden title styled in the way we want, but 142 00:08:56,500 --> 00:08:59,100 all other links are now styled this way too. 143 00:08:59,100 --> 00:09:02,810 We'll need to use our CSS Selectors to change the other ones, so 144 00:09:02,810 --> 00:09:04,760 let's see how to do that. 145 00:09:04,760 --> 00:09:09,680 Each of these author names is the second, fourth, sixth, eighth and so 146 00:09:09,680 --> 00:09:13,300 forth number in that class, so they're all even. 147 00:09:13,300 --> 00:09:19,050 We can use the a nth of type even selector to target those lengths. 148 00:09:19,050 --> 00:09:23,760 So, I want to set our font-family back to Alegreya Sans instead of the small caps. 149 00:09:26,580 --> 00:09:31,060 We'll remove our letter spacing and finally we'll set its 150 00:09:31,060 --> 00:09:34,290 color to be our sandy white which will complement that green well. 151 00:09:36,700 --> 00:09:39,710 And then for that hover state we're gonna change it to our darker shade of blue. 152 00:09:42,950 --> 00:09:43,750 Let's check that out now. 153 00:09:45,720 --> 00:09:46,360 Great. 154 00:09:46,360 --> 00:09:49,070 This part of the sidebar has really taken shape. 155 00:09:49,070 --> 00:09:52,960 I like how the titles of the Zen Garden stand out with their green color and 156 00:09:52,960 --> 00:09:54,980 because they're set in small caps. 157 00:09:54,980 --> 00:09:57,080 The italicized by is a nice touch and 158 00:09:57,080 --> 00:10:01,530 the author names are given good attention through their color. 159 00:10:01,530 --> 00:10:04,580 We still need to hone in the right side as its baseline gets 160 00:10:04,580 --> 00:10:07,920 a little misaligned because of the extra H3 here and 161 00:10:07,920 --> 00:10:11,440 the color contrast is a bit too high for this section. 162 00:10:11,440 --> 00:10:16,670 So in our CSS I'll adjust the top padding of our zen-resources class h3 163 00:10:16,670 --> 00:10:20,770 to 0.92 em, which will help realign the baselines. 164 00:10:20,770 --> 00:10:24,650 Then, I'll set its color to be the same as our sidebar text color, 165 00:10:24,650 --> 00:10:27,300 which will lower its contrast with the background, 166 00:10:27,300 --> 00:10:31,230 focusing the user's attention first on the left part of the side bar. 167 00:10:31,230 --> 00:10:33,900 Let's see what that looks like now. 168 00:10:33,900 --> 00:10:36,410 Nice. Our color contrast is a lot lower here, 169 00:10:36,410 --> 00:10:38,460 and the hover state still look good, 170 00:10:38,460 --> 00:10:41,770 and it aligns well with the left side of our sidebar. 171 00:10:41,770 --> 00:10:46,230 Not only does the footer look good now but the whole page has really taken shape. 172 00:10:46,230 --> 00:10:49,770 Through typography we've turned a basic HTML file into 173 00:10:49,770 --> 00:10:54,600 some hierarchically stylized content that helps readers digest the whole page.