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:
Click here to view code image
1. <aside class="col-1-3">
2. <div class="speaker-info">
4. <img src="assets/images/speakers/shay-howe.jpg"
alt="Shay Howe">
6. <ul>
7. <li><a href="">@shayhowe</a></li>
8. <li><a href=""></a></li>
9. </ul>
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