2022-05-26 16:20:33 +00:00
---
id: 6153a3ebb4f7f05b8401b716
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
2022-08-02 11:46:54 +00:00
L'attributo `alt` dovrebbe descrivere il contenuto di un'immagine. I lettori di schermo leggono del testo alternativo al posto delle immagini. Se un'immagine non può essere caricata, il testo viene mostrato al suo posto.
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
Per completare il progetto, aggiungi un attributo `alt` a tutte le nove immagini di gatti per descriverle. Utilizza almeno cinque caratteri per ognuna.
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
# --hints--
2022-05-26 16:20:33 +00:00
2022-08-02 11:46:54 +00:00
Tutti i nove elementi `img` dovrebbero avere un attributo `alt` con un testo che descrive ogni immagine, e ogni descrizione dovrebbe contenere almeno `5` lettere.
2022-05-26 16:20:33 +00:00
```js
2022-08-02 11:46:54 +00:00
const images = [...document.querySelectorAll('img')];
assert(images.every(image => image.getAttribute('alt')));
assert(images.every(image => image.getAttribute('alt').length >= 5));
2022-05-26 16:20:33 +00:00
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
2022-08-02 11:46:54 +00:00
< html lang = "en" >
2022-05-26 16:20:33 +00:00
< 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 >
2022-08-02 11:46:54 +00:00
< header class = "header" >
< h1 > css flexbox photo gallery< / h1 >
< / header >
< div class = "gallery" >
--fcc-editable-region--
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" >
--fcc-editable-region--
2022-05-26 16:20:33 +00:00
< / div >
< / body >
< / html >
```
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
2022-08-02 11:46:54 +00:00
font-family: sans-serif;
background: #f5f6f7 ;
2022-05-26 16:20:33 +00:00
}
.header {
text-align: center;
2022-08-02 11:46:54 +00:00
text-transform: uppercase;
2022-05-26 16:20:33 +00:00
padding: 32px;
2022-08-02 11:46:54 +00:00
background-color: #0a0a23 ;
color: #fff ;
border-bottom: 4px solid #fdb347 ;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery {
2022-05-26 16:20:33 +00:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
2022-08-02 11:46:54 +00:00
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery img {
width: 100%;
max-width: 350px;
2022-05-26 16:20:33 +00:00
height: 300px;
object-fit: cover;
border-radius: 10px;
}
2022-08-02 11:46:54 +00:00
.gallery::after {
content: "";
width: 350px;
2022-05-26 16:20:33 +00:00
}
```
# --solutions--
```html
<!DOCTYPE html>
2022-08-02 11:46:54 +00:00
< html lang = "en" >
2022-05-26 16:20:33 +00:00
< 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 >
2022-08-02 11:46:54 +00:00
< header class = "header" >
< h1 > css flexbox photo gallery< / h1 >
< / header >
< div class = "gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt = "Gallery" >
< img src = "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt = "Gallery" >
2022-05-26 16:20:33 +00:00
< / div >
< / body >
< / html >
```
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
2022-08-02 11:46:54 +00:00
font-family: sans-serif;
background: #f5f6f7 ;
2022-05-26 16:20:33 +00:00
}
.header {
text-align: center;
2022-08-02 11:46:54 +00:00
text-transform: uppercase;
2022-05-26 16:20:33 +00:00
padding: 32px;
2022-08-02 11:46:54 +00:00
background-color: #0a0a23 ;
color: #fff ;
border-bottom: 4px solid #fdb347 ;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery {
2022-05-26 16:20:33 +00:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
2022-08-02 11:46:54 +00:00
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
2022-05-26 16:20:33 +00:00
}
2022-08-02 11:46:54 +00:00
.gallery img {
width: 100%;
max-width: 350px;
2022-05-26 16:20:33 +00:00
height: 300px;
object-fit: cover;
border-radius: 10px;
}
2022-08-02 11:46:54 +00:00
.gallery::after {
content: "";
width: 350px;
2022-05-26 16:20:33 +00:00
}
```
