HTML and CSS Reference
In-Depth Information
3.
Next up, let's add images of all of the speakers to the Speakers page. We'll begin
by creating a “speakers” folder within our “images” folder and placing images of
all of the speakers there.
Within the
speakers.html
file, let's add an
<img>
element within each of the
speaker information
<aside>
elements. Let's place each
<img>
element inside
the
<div>
element with the
class
attribute value of
speaker-info
, just
above the
<ul>
element.
The
src
attribute value of each image will correspond to the “speakers” folder we
set up and the speaker's name; the
alt
attribute value will be the speaker's name.
The
<aside>
element for myself, as a speaker, will look like this:
1.
<aside class="col-1-3">
2.
<div class="speaker-info">
3.
4.
<img src="assets/images/speakers/shay-howe.jpg"
alt="Shay Howe">
5.
6.
<ul>
7.
<li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>
8.
<li><a href="http://learn.shayhowe.com/">
learn.shayhowe.com</a></li>
9.
</ul>
10.
11.
</div>
12.
</aside>
This same pattern for adding an image should then be applied to all other speakers.
4.
As we did with the images on our home page, we'll want to apply some styles to
the images on the Speakers page.
Let's begin by applying the
border-radius
property with a value of
50%
,
turning our images into circles. From there, let's set a fixed
height
of
130
pixels
to each image and set them to be vertically aligned to the
top
of the line they
reside within.
With the
height
and vertical alignment in place, let's apply vertical margins to
the images. Using a negative
66
-pixel
margin
on the top of the images, we'll
pull them slightly out of the
<aside>
element and make them vertically centered
with the top
border
of the
<div>
element with a
class
attribute value of
speaker-info
. Then, applying a
22
-pixel
margin
on the bottom of the image
provides space between the image and the
<ul>
element below it.
Search WWH ::
Custom Search