https://codepen.io/rram/pen/rEOVGM

Code Feedback
1

https://codepen.io/rram/pen/rEOVGM

this is my tribute page
any suggestions for making it more effective
can anyone help me in passing 10th test in this tribute page

1 Like
2

why you didn’t fork the fcc cdn link to run the tests

1 Like
3

@Eslamafifi
oh! sorry
i don’t know how to do it .
can you help me out ?

1 Like
4

just press the button fork in link
and copy your code
then save it with a new name

it will be in your account now

1 Like
5

@EslamAfifi
thank you

1 Like
6

add this to the inside of your html.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

also, some extra spacing between

elements would help the whole aesthetic. kinda looks bunched up and crowded.

1 Like
7

@silfredoespinosa
thank you for suggestion
it you have time,
have a look please
https://codepen.io/rram/pen/VJLvMw

1 Like
8

nice job! If you want to make it better, I would suggest coloring the background a bit and adding some margins and paddings on the side.

9

@ConnerOw1115
yeah! i will try it

10

  1. Remove the <style> elements from the CSS, they are only used when you have your CSS inside the HTML.

  2. Give the image a max-width: 100%; and display: block;. This will let you pass the test. Also, the image isn’t that big so it will just pixilate if you let it scale up.

#image{
  display: block;
  max-width:100%;
}

  1. Remove the background color on the #img-div it is covering up the caption text.

  2. Remove the two unclosed divs you have inside the figure element and move the ids to the figure and figcaption.

<figure id="img-div">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/15/Statue_of_Unity_in_2018.jpg" alt="Sardar Vallabhai Patel Statue of Unity in Gujarat, India">
      <figcaption id="img-caption">Sardar Vallabhai Patel Statue of Unity in Gujarat </figcaption>
</figure>
  1. I would increase the font size on the body and maybe pick a font you like.
11

@lasjorg
thank you
can you help out in passing the 10 test
https://codepen.io/rram/pen/rEOVGM

12
  1. You have a typo in the img selector.

You have:
displat

Should be:
display

  1. To center the image you can use margin auto.
img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
13

@lasjorg
thank you for corrections
i have done it