HTML and CSS Reference
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">
4. <section class="col-2-3">
8. --><form class="col-1-3">
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">
3. <h2>Purchase a Conference Pass</h2>
4. <h5>$99 per Pass</h5>
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>