HTML and CSS Reference
In-Depth Information
1.
.row,
2.
.row-alt
{
3.
min-width: 960px;
4.
}
5.
.row {
6.
background: #fff;
7.
padding: 66px 0 44px 0;
8.
}
9.
.row-alt {
10.
background: #cbe2c1;
11.
background: -webkit-linear-gradient(to right, #a1d3b0, #f6f1d3);
12.
background: -moz-linear-gradient(to right, #a1d3b0, #f6f1d3);
13.
background: linear-gradient(to right, #a1d3b0, #f6f1d3);
14.
padding: 44px 0 22px 0;
15.
}
2.
With our
row-alt
styles in place, let's put them to use on all of our interior
pages. Currently, all of our interior pages have a
<section>
element with a class
of
container
. Then, inside each
<section>
element is an
<h1>
element con-
taining the heading of the page.
We're going to alter these
<section>
elements much like we did the teaser
<section>
element on our home page. We'll wrap each
<section>
element
with a class of
container
in a
<section>
element with the class of
row-
alt
. We'll then change each
<section>
element with a class of
container
to a
<div>
element for better semantic alignment.
Each of our interior pages should now include the following:
1.
<section class="row-alt">
2.
<div class="container">
3.
4.
<h1>...</h1>
5.
6.
</div>
7.
</section>
3.
Because we are updating our interior pages, let's make their introductions, or
leads, a little more appealing. We'll begin by adding a paragraph introducing each
page just below the
<h1>
element in each
<section>
element with a class of
row-alt
. Our
speakers.html
page, for example, may now include the fol-
lowing lead section:
Search WWH ::
Custom Search