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