Beatles Tribute Page

Code Feedback
1

Hope you like The Beatles! I went all out with the colors for the extra challenge and to keep it congruent with the Sgt. Pepper ethos.

https://codepen.io/pshaw92/full/OJVQVvN

3 Likes
2

It looks good, just one comment padding: 10px 250px 20px 250px; on img-caption works great on big screens and not small ones, consider using width
and @media queries properties.

1 Like
3

The View and colors looks greats: Congrats!

I’m not an expert but I tried in padding with the attribute: auto and fit when you resize your screen.

#img-caption {
text-align: center;
font-family: Abel;
padding: auto;
}

Maybe you could import some fonts from : Google Fonts

Saludos!!

4

Welcome to the forums @pshaw92. Your page looks good. The only thing to mention is I noticed you have <strong> tags around the dates but the dates do not display as such. It’s because the font that you chose only has one font weight, browsers don’t know how to interpret so it gets ignored.
To see what I mean, go to Google Fonts and look at Open Sans for instance. When you open it Embed is shown by default. Click on Customize and notice you have the ability to choose different weights. If you choose to use this font for your page you’d leave the default of 400 but also click to choose Bold 700 so you’d have the heavier weight when using strong.
Hope that makes sense.

5

Looks pretty good.

  1. For the #img-caption I’d suggest using the same technique as you are for the ul, max-width and margin auto to limit the element length (or % width and margin auto). The caption text also gets a little big on small screens in proportion to the image, maybe lower the font size in a media query.

  2. On line 7 you have a comma in the margin that should not be there.

  3. I would remove the default padding on the ul.

  4. Maybe try a different color for the wiki link (maybe the yellow color you already have would work on the blue background).

Keep it up!

6

Thanks everyone for the feedback! Now it’s time to get to fixing it.