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
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
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
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.
@silfredoespinosa
thank you for suggestion
it you have time,
have a look please
https://codepen.io/rram/pen/VJLvMw
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.
Remove the <style>
elements from the CSS, they are only used when you have your CSS inside the HTML.
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%;
}
Remove the background color on the #img-div
it is covering up the caption text.
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>
img
selector.You have:
displat
Should be:
display
img {
display: block;
max-width: 100%;
margin: 0 auto;
}