Photo gallery

Space rocket_launch

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 from space </h1>
Photos from Space Four images of Earth from space
Find <img class="" src="empty.jpg">.

Replace empty.jpg with any of bay.jpg, clouds.jpg, coast.jpg, mountains.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 from Space and the four images from space. Screenshot of the completed webpage that you can create following this tutorial.
Extra: Add two new sections with space-themed emoji. Add one above and one below the <section> </section> with photos in:

<section class="primary bigfont xcenter">
    🚀 📷 ☄️

travel_explore Find and copy emoji from rpf.io/emoji