1
rpf.io/web-discover-sunsets

Photo gallery

Sunsets wb_twilight

Discover explore

Web: HTML and CSS

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

Replace empty.jpg with any of bridge.jpg, lake.jpg, mountain.jpg, people.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 sunsets and the four images of sunsets from around the world. Screenshot of the completed webpage that you can create following this tutorial.
Extra: Create two new sections with sunset-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