I have completed the Tribute Page Challenge and am now just editing and messing around with the extra things to make it look better and see what else can be done to the page.
The text in the boxes seems to be a little bit off the left of the page and I can’t quite figure out how to get them to be either in the center or have the boxes around the text only and not the width of the page.
Excuse the code being a mess lol.
Any guidance would be appreciated!
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The history of Andrew Watson, Scotland's first Black football player" >
<title id="subject">Andrew Watson</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">The history of Andrew Watson, Scotland's first black football player</h1>
<div id="img-div">
<a id="tribute-link" href="" target="_blank"></a>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9c/Andrew_Watson_Footballer_%28cropped%29.jpg" alt="Watson (above) in 1882">
<figcaption id="img-caption">"Watson (above) in 1882"</figcaption>
<h1 id="early-life">Early life
<ul> <h2 class="paragraph" id="early-life"><li>Andrew Watson was born in British Guiana (now Guyana) on the 24th of May 1856. He was the son of Peter Miller Watson, a wealthy Scottish sugar planter and former slave owner, and a Guyanese woman named Hannah Rose. Watson was sent to England for his education, where he attended the prestigious Heath Grammer School in Halifax, West Yorkshire</li></h2></ul>
</h1>
<h1 id="club-career">Club career</h1>
<ul> <h2 class="paragraph" id="tribute-info"><li>Andrew Watson was a Scottish football player who is widely considered to be the first black football player in association football at international level.</li></h2></ul>
<ul>
<h2 class="paragraph" id="first-team"><li>After first playing for <a href="https://en.wikipedia.org/wiki/Maxwell_F.C.">Maxwell </a> in 1876, Watson signed for local side <a href="https://en.wikipedia.org/wiki/Parkgrove_F.C.">Parkgrove</a>, where he was additionally their match secretary, making him the first black administrator in football.At Parkgrove he played alongside another black player, <a href="https://en.wikipedia.org/wiki/Robert_Walker_(Third_Lanark_footballer)">Robert Walker </a>.</li>
</h2>
</ul>
<ul> <h2 class="paragraph" id="club-career"><li>Watson would go on to also play for Queen's Park, Swifts, Corinthian FC, and Bootle. Watson played for Queen's Park twice in his career and won 3 Scottish Cups in his time there (1880-81, 1881-82, 1885-86).</li></h2></ul>
<h1 id="int-career">International career</h1>
<ul> <h2 class="paragraph" id="scotland"><li>Watson won 3 caps for Scotland. On his first appearance for Scotland on March 12th 1881 he captained the side to a 6-1 victory against England. This is still a record home defeat for England (as of 20/03/2024). A few days later Watson captained the side once again, this time in a 5-1 victory against Wales. In his final appearance for Scotland on March 11th 1882 he took part in a 5-1 victory against England in Glasgow. </li></h2></ul>
<ul> <h2 class="paragraph" id="int-career-end"><li>Watson moved to London in the summer of 1882 and this effectively ended his international career as the Scottish Football Association only selected players based in Scotland at the time.</li></h2></ul>
<h1 id="later-life">Later life</h1>
<ul> <h2 class="paragraph" id="later-life"><li>Watson retired in London around 1910 and died of Pneumonia in 1921, aged 64. In 2012 he was inducted in to the Scottish Football Hall of Fame. After a fundraising campaign in 2020, Watsons headstone in Richmond Cemetary was renovated around the 100th anniversary of his death. It can be viewed <a href="https://cdn.theathletic.com/app/uploads/2023/10/09105424/IMG_9035-scaled.jpg">here</a>.</li></h2></ul>
</div>
</main>
<footer>Information and images sourced from <a href="https://www.wikipedia.org">Wikipedia</a>,<a href="https://www.bbc.co.uk">BBC</a>, <a href="https://www.theathletic.com"> The Athletic </a>, <a href="https://www.scottishfa.co.uk">The Scottish FA </a> .
</body>
CSS
img {
display: block;
max-width: 100%;
height: auto;
image-align: center;
margin-left: auto;
margin-right: auto;
padding-top: 100px;
padding-bottom: 10px;
}
h1 {
font-weight: 800;
font-family: Tahoma;
text-align: center;
}
h2 {
padding: 5px 5px 5px 5px;
color: #d0d1d1;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Tahoma;
font-size: 1rem;
border: 1px solid rgba(255,255,255, 0.1);
font-weight: 500;
float: center;
}
body {
background-color: #121519;
}
h1, h2 {
color: #D0D1D1;
margin-left: auto;
margin-right: auto;
text-align: center;
}
figcaption {
padding: 5px 5px 5px 5px;
color: #d0d1d1;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Tahoma;
font-style: italic;
}
footer, footer a {
color: #d0d1d1;
background-color: #121519;
display: flex;
justify-content: center;
}
footer a:link {
color: blue;
}
footer a:visited {
color: purple;
}
footer a:hover {
color: hotpink;
}
footer a:active {
color: red;
}
h2 a:link {
color: blue;
}
h2 a:visited {
color: purple;
}
h2 a:hover {
color: hotpink;
}
h2 a:active {
color: red;
}
ul {
list-style-type: none;
}