HTML and CSS Reference
In-Depth Information
ue.jpg
. (For reference, these images may be found on
ht-
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:
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
Speaker">
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:
1.
.teaser img {
2.
border-radius: 5px;
3.
display: block;
4.
margin-bottom: 22px;
5.
max-width: 100%
6.
}
Search WWH ::
Custom Search