Photo gallery

Animals emoji_nature

Discover explore

Web: HTML and CSS

In a web browser go to:
Find <head> . Click on the ▼ arrow to hide the <head>.
Find <h1> </h1>.
Add a heading inside: <h1> Photos of animals </h1>
Photos of animals Four images of animals
Find <img class="" src="empty.jpg">.

Replace empty.jpg with any of butterfly.jpg, chicken.jpg, monkey.jpg, panda.jpg.

repeat Repeat for the other images.

Find and change these lines:
  • <header class="border-bottom secondary">.
  • <main class="page">.
  • <section class="wrap xcenter">.
  • <img class="photo"> x 4
  • <footer class="border-top secondary">.

swipe Hover over a photo and see what happens.

Screenshot of webpage with the title Photos of animals and the four images of animals. Screenshot of the completed webpage that you can create following this tutorial.
Extra: Create two new sections with animal-themed emoji. Add one above and one below the <section> </section> containing the photos:

<section class="primary bigfont xcenter">
    🐵 📷 🐼

travel_explore Find and copy emoji from rpf.io/emoji