Learn CSS Flexbox by Building a Photo Gallery - Step 21

HTML-CSS
1

5 letters alt

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

<!-- 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 Edg/115.0.1901.203

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

Link to the challenge:

2

please read tasks carefully
your alt artibutes should describe images and cant be just cat. and they cant be identical, because all cat photos are different.
because task also mentions that they should be at least 5 letters long

should be like
sleepy cat
happy cat
playful little one
adhd cat
evil :cat:

stuff like that

1 Like
3

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