1
rpf.io/web-discover-forests

Photo gallery

Forests forest

Discover explore

Web: HTML and CSS

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

Replace empty.jpg with any of india.jpg, scotland.jpg, tenerife.jpg, wales.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 forests and the four images of forests. Screenshot of the completed webpage that you can create following this tutorial.
Extra: Create two new sections with nature-themed emoji. Add one above and one below the <section> </section> containing the photos:

<section class="primary bigfont xcenter">
    🌳 📷 🌴
</section>


travel_explore Find and copy emoji from rpf.io/emoji