HTML and CSS Reference
In-Depth Information
46.
background: #f0f0f2;
47.
border-top: 1px solid #c6c7cc;
48.
padding: 20px;
49.
}
50.
.account-action .btn {
51.
background: -webkit-linear-gradient(#49708f, #293f50);
52.
background:
-moz-linear-gradient(#49708f, #293f50);
53.
background:
linear-gradient(#49708f, #293f50);
54.
border: 0;
55.
color: #fff;
56.
cursor: pointer;
57.
font-weight: bold;
58.
float: left;
59.
padding: 8px 16px;
60.
}
61.
.account-action label {
62.
color: #7c7c80;
63.
font-size: 12px;
64.
float: left;
65.
margin: 10px 0 0 20px;
66.
}
In Practice
With an understanding of how to build forms in place, let's create a registration page for
our Styles Conference website so that we can begin to gather interest and sell tickets for
the event.
1.
Jumping into our
register.html
file, we'll begin by following the same lay-
out pattern we used on our Speakers and Venue pages. This includes adding a
<section>
element with a class attribute value of
row
just below the registra-
tion lead-in section and nesting a
<div>
element with a class attribute value of
grid
directly inside the
<section>
element.
Our code just below the lead-in section for the Register page should look like this:
1.
<section class="row">
2.
<div class="grid">
3.
...
4.
</div>
5.
</section>
As a refresher, the
class
attribute value of
row
adds a white
background
and
provides some vertical
padding
, while the class attribute value of
grid
centers
our content in the middle of the page and provides some horizontal
padding
.
2.
Inside the
<div>
element with a class attribute value of
grid
we're going to cre-
ate two columns, one covering two-thirds of the page width and one covering one-
Search WWH ::
Custom Search