Build a tribute page

[ayushpandeyv172050]

Here’s my take on the tribute page I was asked to make for the 2nd certification project:

gOQppNO

I set a simple goal: to keep the aesthetics as close to the given example as possible. The example in case being: https://tribute-page.freecodecamp.rocks/

After looking at my page and code, please let me know how it looks to you. Did I make any mistakes, or did I forget something? What would you change to make it better? I passed all the tests, but I don’t know if I’m satisfied with what I made.

Also, there’s one thing I spent hours on but couldn’t figure out despite trying multiple solutions from stack-overflow and even after looking at the source of the example. In the tribute page shared as an example by freeCodeCamp, there’s even space on all 4 sides of the image, however, I am getting some unwanted space between my img and figcaption in the figure. What can I do to remove it? It looks hideous, tbh. Also, unlike the tribute page of freeCodeCamp, my tribute page isn’t optimized for different screen sizes, for instance, if the screen width is too less, the caption gets on top of image. Even after spending my entire morning, I couldn’t figure out how to improve the figure element.

[bappyasif]

check this out How do I know which test cases are not passed (for projects)?

or this if you want to know how to add that test checkers How to run test on codepen?

happy learning

[ayushpandeyv172050]

I passed all the tests actually because there are no tests for CSS. The problem I have is that my figcaption is lying at the bottom of the figure. I spent hours trying to get in the middle of the bottom white space around the image, but nothing worked. I don’t like the way it looks.

See, how the caption is at the bottom and looks so non-uniform?

[Cody_Biggs]

I can take a look when I get back to my computer later today, and see whats up if no one else has provided a solution.

Is the codepen link your up to date code?

[ayushpandeyv172050]

Yes, it’s what I have settled for after trying for hours. I’d be very grateful. Thanks a lot!

[Cody_Biggs]

So, correct me if I am wrong but you are just trying to get space around the fig caption so its not sitting at the very bottom correct? Something like

[ayushpandeyv172050]

Yes, exactly. That looks way better!

[Cody_Biggs]

You just want to add the height style to your figure . May have to play around with the number to get it exactly how you want it, but thats all I did

[ayushpandeyv172050]

Worked after I did this:

figure {
  background-color: white;
  width: 90%;
  margin: 0 auto;
  position: relative;
}

figcaption {
  text-align: center;
  position: absolute; 
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px;
}

Is this like an actual solution, or did it just work somehow?
Had to take a little help from ChatGPT too, ngl.