HTML and CSS Reference
In-Depth Information
on the <section> element with the class attribute value of venue-
theatre .
4. Now it's time to create the two columns within each of the new <section> ele-
ments. We'll start by adding a <div> element with a class attribute value of
col-1-3 to establish a one-third column. After it we'll add an <iframe> ele-
ment with a class attribute value of col-2-3 to establish a two-thirds column.
Keeping in mind that the column classes make both the <div> and <iframe>
elements inline-block elements, we need to remove the empty space that will ap-
pear between them. To do so we'll open an HTML comment directly after the clos-
ing <div> tag, and we'll close the HTML comment immediately before the open-
ing <iframe> tag.
In all, our HTML for the columns looks like this:
Click here to view code image
1. <section class="row">
2. <div class="grid">
3.
4. <section class="venue-theatre">
5.
6. <div class="col-1-3"></div><!--
7.
8. --><iframe class="col-2-3"></iframe>
9.
10. </section>
11.
12. <section class="venue-hotel">
13.
14. <div class="col-1-3"></div><!--
15.
16. --><iframe class="col-2-3"></iframe>
17.
18. </section>
19.
20. </div>
21. </section>
5. Within each of the <div> elements with a class attribute value of col-1-3
let's add the venue's name within an <h2> element, followed by two <p> ele-
ments. In the first <p> element let's include the venue's address, and in the second
<p> element let's include the venue's website (within an anchor link) and phone
number.
Search WWH ::




Custom Search