HTML and CSS Reference
In-Depth Information
ue.jpg . (For reference, these images may be found on ht-
tp:// . )
Then, inside our index.html file, each teaser section has an <a> element wrap-
ping both an <h3> and an <h5> element. Let's move the <h5> element above the
<a> element and replace it with an <img> element. The src attribute value for
each <img> element will correspond to the folder structure and filename we set
up, and the alt attribute value will describe the contents of each image.
The HTML for our first teaser, for the Speakers page, will look like this:
Click here to view code image
1. <section class="teaser col-1-3">
2. <h5>Speakers</h5>
3. <a href="speakers.html">
4. <img src="assets/images/home/speakers.jpg" alt="Professional
5. <h3>World-Class Speakers</h3>
6. </a>
7. <p>Joining us from all around the world are over twenty fantastic
speakers, here to share their stories.</p>
8. </section>
Let's continue this pattern for both the Schedule and Venue page teasers, too.
2. Now that we've added a few images to our home page, we'll need to clean up their
styles a bit and make sure they properly fit into the layout of our page.
Since images are inline-level elements by default, let's change our images within
the teaser sections to block-level elements. Let's also set their maximum width to
100% to ensure they don't exceed the width of their respective columns. Changing
this width value is important as it allows our images to adjust with the width of
the columns as necessary.
Lastly, let's round the corners of the images slightly and apply 22 pixels of bottom
margin to the images, providing a little breathing room.
Once we add these new styles to our existing home page styles (using the teaser
class as a qualifying selector for the <img> elements), our CSS will look like this:
Click here to view code image
1. .teaser img {
2. border-radius: 5px;
3. display: block;
4. margin-bottom: 22px;
5. max-width: 100%
6. }
Search WWH ::

Custom Search