1
00:00:00,740 --> 00:00:02,460
Hey again and welcome back.

2
00:00:02,460 --> 00:00:05,058
We just styled the header of our CSS Zen
Garden.

3
00:00:05,058 --> 00:00:09,575
And now we want to jump into typesetting
some of our body text in a one and

4
00:00:09,575 --> 00:00:10,910
two-column layout.

5
00:00:10,910 --> 00:00:13,190
We've got our line height, vertical rhythm
and

6
00:00:13,190 --> 00:00:16,790
sizes down, so this shouldn't be too much
of a chore.

7
00:00:16,790 --> 00:00:20,620
From our concept sketches, I want our
preamble, benefits, and

8
00:00:20,620 --> 00:00:23,040
requirements sections to be one column.

9
00:00:23,040 --> 00:00:27,010
And our explanation and participation
sections to be two column.

10
00:00:27,010 --> 00:00:31,450
We see our benefits are set up as a small
aside for larger size screens.

11
00:00:31,450 --> 00:00:35,160
But we want to style them in our basic
format for smaller sizes.

12
00:00:35,160 --> 00:00:37,629
Then, through media queries, adjust it for
larger.

13
00:00:37,629 --> 00:00:39,378
[BLANK_AUDIO]

14
00:00:39,378 --> 00:00:42,260
We'll start by setting up our one column
layouts.

15
00:00:42,260 --> 00:00:43,870
Using Trent Walton's technique,

16
00:00:43,870 --> 00:00:49,920
I've placed asterisks at the 45th and 75th
characters into our HTML.

17
00:00:49,920 --> 00:00:52,240
Remember, we'll be removing these later,
so

18
00:00:52,240 --> 00:00:56,630
that's okay to put them in now as these
are gonna help us determine our measure.

19
00:00:56,630 --> 00:00:58,840
Our line should break somewhere between
the two.

20
00:00:58,840 --> 00:01:00,840
For these sections,

21
00:01:00,840 --> 00:01:04,130
I'm gonna wanna set em apart through
different background changes.

22
00:01:04,130 --> 00:01:06,350
So, lets head over to our CSS.

23
00:01:06,350 --> 00:01:07,460
So for our preamble and

24
00:01:07,460 --> 00:01:11,565
requirements, I want to set our background
to be that navy tone we've been using.

25
00:01:11,565 --> 00:01:14,012
[BLANK_AUDIO]

26
00:01:14,012 --> 00:01:18,139
And I'll also wanna give it some padding
of 4M for the top and bottom and 6% for

27
00:01:18,139 --> 00:01:23,310
the left and right, as this is gonna give
our content good space within the block.

28
00:01:23,310 --> 00:01:26,111
For our benefits, I wanna do a similar set
up, but

29
00:01:26,111 --> 00:01:29,868
I wanna give it an even darker shade of
our navy for the background.

30
00:01:29,868 --> 00:01:36,616
[BLANK_AUDIO]

31
00:01:36,616 --> 00:01:39,130
So I'll save and let's go check that out.

32
00:01:39,130 --> 00:01:39,720
Great.
So

33
00:01:39,720 --> 00:01:43,120
our backgrounds are definitely setting
apart these sections, but

34
00:01:43,120 --> 00:01:45,700
our type inside them now needs some help.

35
00:01:45,700 --> 00:01:47,590
We can't even see our body copy.

36
00:01:47,590 --> 00:01:48,530
So let's go in and

37
00:01:48,530 --> 00:01:52,098
set that at a sandy tone of white and
let's also setup our measure.

38
00:01:52,098 --> 00:01:54,050
So I head over here.

39
00:01:54,050 --> 00:01:59,000
And notice how I'm selecting the H3's and
P's of our preamble and requirements.

40
00:01:59,000 --> 00:02:03,140
Because our HTML cannot change and we
can't add another div or class into

41
00:02:03,140 --> 00:02:06,510
the mix, we'll need to use these classes
and elements to set our measure.

42
00:02:08,100 --> 00:02:12,300
I felt like a max width of 34 rim felt
like a good reading measure and

43
00:02:12,300 --> 00:02:15,400
is just at the cusp of the 75th character
mark.

44
00:02:15,400 --> 00:02:19,770
We'll also need to set our margins to 0
auto to keep our content block in

45
00:02:19,770 --> 00:02:21,140
the middle of the page.

46
00:02:21,140 --> 00:02:25,190
And for our H3, we'll give it a bottom
margin of .62m to keep it in line with

47
00:02:25,190 --> 00:02:26,720
the rhythm that we set up.

48
00:02:26,720 --> 00:02:30,670
Now, I'll copy this and paste it into our
P tags.

49
00:02:30,670 --> 00:02:35,570
And remove that .62m of bottom margin as
it's no longer necessary.

50
00:02:35,570 --> 00:02:37,860
And then I'll also set it's color to be
our white.

51
00:02:39,600 --> 00:02:41,030
Let's save and check out how that's
looking.

52
00:02:42,250 --> 00:02:42,757
All right.

53
00:02:42,757 --> 00:02:43,760
That's much better.

54
00:02:43,760 --> 00:02:46,460
Our measure is in a much more readable
place.

55
00:02:46,460 --> 00:02:49,420
And notice the two asterisks are on two
different lines.

56
00:02:49,420 --> 00:02:50,870
So that's good.

57
00:02:50,870 --> 00:02:53,710
And our benefits down here still need some
help.

58
00:02:53,710 --> 00:02:55,860
So let's go style those out.

59
00:02:55,860 --> 00:02:58,230
We'll want to set our H3s up in a similar
way.

60
00:02:58,230 --> 00:03:03,280
So I'll grab that copy and paste it down
here for our benefits H3.

61
00:03:03,280 --> 00:03:06,485
But let's change the color of it to be our
lighter shade of gray.

62
00:03:06,485 --> 00:03:08,755
[BLANK_AUDIO]

63
00:03:08,755 --> 00:03:13,470
Let's set our paragraphs of our benefits
section to be the same as these.

64
00:03:13,470 --> 00:03:15,320
But we're gonna want to change the color.

65
00:03:15,320 --> 00:03:16,200
So I'll paste that in there.

66
00:03:16,200 --> 00:03:20,000
And then our color will be a tad darker
shade of that gray.

67
00:03:20,000 --> 00:03:21,910
So we'll do 606f81.

68
00:03:23,360 --> 00:03:26,400
This'll make our H3 stand out just a bit
more.

69
00:03:26,400 --> 00:03:27,150
So let's check that out.

70
00:03:28,250 --> 00:03:29,620
Great.
That's much better, and

71
00:03:29,620 --> 00:03:33,060
it has a nice feel and contrast with the
background.

72
00:03:33,060 --> 00:03:34,910
Now in our requirements section,

73
00:03:34,910 --> 00:03:37,830
things are styled in a similar way to our
preamble.

74
00:03:37,830 --> 00:03:40,820
But notice now, our links need some tender
loving care.

75
00:03:40,820 --> 00:03:42,740
So let's fix those.

76
00:03:42,740 --> 00:03:47,190
So for our requirements class link style,
I'll set the color to be the same white as

77
00:03:47,190 --> 00:03:51,565
the copy and give it a border bottom of
one pixel solid with the same color.

78
00:03:51,565 --> 00:03:59,754
[SOUND] When these are hovered over, I
want them to turn green.

79
00:03:59,754 --> 00:04:03,535
So on our hover selector, we'll set a
color of green and border of green.

80
00:04:03,535 --> 00:04:05,627
[SOUND]

81
00:04:05,627 --> 00:04:14,833
Let's save and refresh.

82
00:04:14,833 --> 00:04:15,400
So great.

83
00:04:15,400 --> 00:04:16,340
That's much better.

84
00:04:16,340 --> 00:04:19,510
They actually look like links because they
have a border bottom here, and

85
00:04:19,510 --> 00:04:21,420
they're hover state is nice.

86
00:04:21,420 --> 00:04:25,000
And notice how building a good foundation
in the first video made this

87
00:04:25,000 --> 00:04:28,350
process a whole lot easier for our one
column layouts.

88
00:04:29,710 --> 00:04:33,780
Now, we'll be getting into the two column
layout area of our design.

89
00:04:33,780 --> 00:04:34,750
After our preamble,

90
00:04:34,750 --> 00:04:38,880
we see from our sketch that we want our
content to split into two columns.

91
00:04:38,880 --> 00:04:41,800
It would be great here if our backgrounds
also differed,

92
00:04:41,800 --> 00:04:44,580
which would further distinguish each
content block.

93
00:04:44,580 --> 00:04:49,185
Again, our vertical rhythm, margins, and
line height are already set, so

94
00:04:49,185 --> 00:04:50,680
this should be pretty straightforward.

95
00:04:52,030 --> 00:04:54,910
These content blocks are similar lengths.

96
00:04:54,910 --> 00:04:58,290
So it can work well to place them side by
side.

97
00:04:58,290 --> 00:05:02,150
If they were longer pieces of content or
if just one was longer,

98
00:05:02,150 --> 00:05:05,980
then it wouldn't make sense as the reader
would have to scroll through one,

99
00:05:05,980 --> 00:05:08,670
then scroll back up to read the other.

100
00:05:08,670 --> 00:05:12,530
Notice how asterisks have been placed at
the 40th and

101
00:05:12,530 --> 00:05:16,049
50th characters to help us with our
measure for a multiple column layout.

102
00:05:17,240 --> 00:05:21,410
To style these out, let's head over to our
CSS and we'll target our explanation and

103
00:05:21,410 --> 00:05:23,410
participation classes.

104
00:05:23,410 --> 00:05:27,260
We'll set a width of 50%, so that each
class takes up half of the browser.

105
00:05:27,260 --> 00:05:30,670
And I'll set our box-sizing to border-box,
so

106
00:05:30,670 --> 00:05:34,130
that when we adjust padding, it won't
adjust our width past the 100% mark.

107
00:05:36,320 --> 00:05:39,780
On my explanation class, I'll give it a
float of left.

108
00:05:42,220 --> 00:05:44,840
And padding of 4m for the top.

109
00:05:44,840 --> 00:05:45,920
10% for the right.

110
00:05:45,920 --> 00:05:47,560
4m for the bottom.

111
00:05:47,560 --> 00:05:49,290
And 8% for the left.

112
00:05:49,290 --> 00:05:52,560
This will float or position our content
block to the left and

113
00:05:52,560 --> 00:05:56,180
space our content well within the block
through our padding.

114
00:05:56,180 --> 00:06:00,220
Notice how our top and bottom padding are
consistent with our other sections of 4m.

115
00:06:00,220 --> 00:06:04,642
For this explanation section, I'll keep
the background and

116
00:06:04,642 --> 00:06:06,858
text the same colors as our body

117
00:06:06,858 --> 00:06:16,858
[BLANK_AUDIO]

118
00:06:35,852 --> 00:06:37,600
We're gonna wanna change that to be white.

119
00:06:37,600 --> 00:06:41,659
So I'll go up here and grab a sample of
our white, and

120
00:06:41,659 --> 00:06:45,826
head down to our participation H3 and
paste that in.

121
00:06:45,826 --> 00:06:55,826
[BLANK_AUDIO]

122
00:07:01,906 --> 00:07:03,134
Let's save and refresh.

123
00:07:03,134 --> 00:07:05,358
[BLANK_AUDIO]

124
00:07:05,358 --> 00:07:06,010
All right.

125
00:07:06,010 --> 00:07:07,810
Things are looking really nice here.

126
00:07:07,810 --> 00:07:09,510
So the div's, they're aligning well.

127
00:07:09,510 --> 00:07:12,950
And our measure is good because the
asterisks are falling on two

128
00:07:12,950 --> 00:07:14,190
different lines.

129
00:07:14,190 --> 00:07:18,920
These asterisks are here to help us make
decisions, not make decisions for us.

130
00:07:18,920 --> 00:07:22,260
If we felt like the measure needed to be
adjusted, then we should adjust it.

131
00:07:23,670 --> 00:07:25,320
Lastly, notice our links and

132
00:07:25,320 --> 00:07:28,493
our participation section could use some
nice styling.

133
00:07:28,493 --> 00:07:29,698
So let's go help them out.

134
00:07:29,698 --> 00:07:39,698
[BLANK_AUDIO]

135
00:08:05,305 --> 00:08:07,889
Now let's check it out.

136
00:08:07,889 --> 00:08:09,942
Great.
That's looking a whole lot better and

137
00:08:09,942 --> 00:08:11,170
jives more with the content.

138
00:08:12,330 --> 00:08:16,690
Lastly, notice this HTML and CSS are still
in all caps,

139
00:08:16,690 --> 00:08:21,020
because they're set in links and they
don't have ABBR tags around them.

140
00:08:21,020 --> 00:08:24,690
We can actually use some code to target
those two links and

141
00:08:24,690 --> 00:08:26,600
change them to be small caps.

142
00:08:26,600 --> 00:08:28,120
So let's check out how.

143
00:08:28,120 --> 00:08:30,430
I'm gonna grab our small-caps copy up
here.

144
00:08:32,920 --> 00:08:34,768
And then down here for our links,

145
00:08:34,768 --> 00:08:38,927
notice I'm using these pseudo-selectors to
select our last paragraph.

146
00:08:38,927 --> 00:08:41,610
And then our first link in the last
paragraph.

147
00:08:41,610 --> 00:08:44,520
And our second link in the last paragraph.

148
00:08:44,520 --> 00:08:48,970
These correspond to the HTML and CSS links
in that last paragraph.

149
00:08:48,970 --> 00:08:53,360
So I'll set these to be small caps with a
text transform of lower case.

150
00:08:53,360 --> 00:08:54,290
Let's save and check it out now.

151
00:08:55,370 --> 00:08:57,210
Great.
So now those links are styled in

152
00:08:57,210 --> 00:08:58,390
our small caps.

153
00:08:58,390 --> 00:08:59,950
This was just a minor touch.

154
00:08:59,950 --> 00:09:01,710
But I think it really helps style the
content.

155
00:09:02,820 --> 00:09:04,700
Great.
Our content is really starting to

156
00:09:04,700 --> 00:09:05,380
flow well.

157
00:09:05,380 --> 00:09:08,690
And through color and arrangement, we're
clearly presenting these

158
00:09:08,690 --> 00:09:12,410
different blocks of text in one and two
column layouts.

159
00:09:12,410 --> 00:09:14,250
Next, we're gonna take a look at our
footer.