HTML and CSS Reference
In-Depth Information
third of the page width. The two-thirds column will be a
<section>
element on
the left-hand side that tells users why they should register for our conference. The
one-third column, then, will be a
<form>
element on the right-hand side provid-
ing a way for users to register for our conference.
We'll add these two elements, and their corresponding
col-2-3
and
col-1-3
classes, directly inside the
<div>
element with a class attribute value of
grid
.
Since both of these elements will be inline-block elements, we need to open a
comment directly after the two-thirds column closing tag and then close that com-
ment directly before the one-third column opening tag.
In all, our code should look like this:
1.
<section class="row">
2.
<div class="grid">
3.
4.
<section class="col-2-3">
5.
...
6.
</section><!--
7.
8.
--><form class="col-1-3">
9.
...
10.
</form>
11.
12.
</div>
13.
</section>
3.
Now, inside our two-thirds column let's add some details about our event and why
it's a good idea for aspiring designers and front-end developers to attend. We'll do
so using a handful of different heading levels (along with their pre-established
styles), a paragraph, and an unordered list.
In our
<section>
element with a class attribute value of
col-2-3
, the code
should look like this:
1.
<section class="col-2-3">
2.
3.
<h2>Purchase a Conference Pass</h2>
4.
<h5>$99 per Pass</h5>
5.
6.
<p>Purchase your Styles Conference pass using the form to the
right. Multiple passes may be purchased within the same order,
so feel free to bring a friend or two along. Once your order is
finished we’ll follow up and provide a receipt for your
purchase. See you soon!</p>
Search WWH ::
Custom Search