Just finished my first ever website from scratch via the Tribute Page challenge. Feedback, criticism, and suggestions are welcome1

Code Feedback
1

Here is the link to the page: https://codepen.io/MonkeySpasms112/full/weyJRq/

2

Good content and choice of colors. I would probably pick a higher contrast color for the text just under the main logo and the text at the very bottom of the page. Also watch your font sizes on the rest of your text to make sure they don’t go to small and be unreadable for older eyes or people with vision imparements.

Give your images a little bit of margin around them so they don’t feel crowded and try to work on aligning the widths of the boxes if you can for consistency.

WIthin the markup, move all your css over to the CSS box in codepen for easier maintenance.
You’re content organization is wrong from a document outline perspective. For example these two elements shouldn’t follow each other like this.

`

History

Titles

`

One of those headings belongs to one section of content and the other to another section of content. Each section of content should immediately proceed each heading.

You’re misusing <body>. Code pen already provides a body tag for you. The body encapsulates the whole page, not just sections. If you want to mark sections of content you can use the <section> tag.

There’s no such thing as a p2, p3 tag. It’s just <p>. You can add classes to differentiate.

Your timeline

<div>
    <p>Timeline</p>
    <p2>1880-</p2>
    <p3>St. Mark's Football Club founded</p3>
</div>
<div>
    <p2>1887-</p2>
    <p3>Name changed to Ardwick Association Football Club</p3>
</div>

This would lend itself very well to a description list (aka definition list) and also fixes the incorrect use of p2, p3 tags.

<h4>Timeline</h4>
<dl>
    <dt>1880-</dt>
    <dd>St. Mark's Football Club founded</dd>
    <dt>1887-</dt>
    <dd>Name changed to Ardwick Association Football Club</dd>
</dl>

Lastly, wrap all your form fields in just a single <form> tag and make sure that your button is inside that form as well. Otherwise it might not work consistently (or at all).

3

Awesome, thank you for the suggestions!