Learn CSS Flexbox by Building a Photo Gallery - Step 21

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt=>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt>

<!-- User Editable Region -->

    </div>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Learn CSS Flexbox by Building a Photo Gallery - Step 21

Link to the challenge:

2

By adding an alt attribute to your img element you are causing a img description to appear if the img doesn’t load properly so that the user see what the img is about. The value of your alt attribute is the text that will appear on the screen. Add a alt attribute to each of your img elements with a value of at least 5 letters long enclosed in brackets so that your img elements will have a description if they are not loaded properly.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.