I wanna helppp
<!-- 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/4.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" >
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" >
<img 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 (Linux; Android 12; SAMSUNG SM-T860) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/23.0 Chrome/115.0.0.0 Safari/537.36
Challenge Information:
Learn CSS Flexbox by Building a Photo Gallery - Step 24https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-24
I have given the alt value but it is not working. Can anyone help me?
1 Like
Hello @rajdipdeycoder !
There are still three more img that need alt attributes added to them.
And all of the alt attibutes need values to describe the respective photo.
As long as the value is at least 5 characters long it will be good for the value.
Example: <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/.jpg" alt ="pinkpansy">
Notice how the alt attribute at the end of the img has the description "pinkpansy" as a value.
This is how you should enter a short description of the cat photo for each of the nine photos.
I hope this helps you!
Happy coding!
1 Like
Welcome to the Forum.
Here kindly put the alt attribute to your remaining img element
Second kindly put some value in your before alt values.
Hope you understand.
2 Likes
hello there,
Hey.
