Tribute Page

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

<main id="main">
  <h1 id="title">The Arsenal Football Club</h1>

  <h2 id="subtitle">Arsenal have won 45 trophies in their illustrious history.</h2>

  <div id="img-div">
    <img src="https://www.arsenal.com/sites/default/files/styles/large/public/images/newdressingroom.jpg?itok=7kz5dQ0z" alt="Manager Mikel Arteta and few squad members celebrating with the trophy in the Wembely dressing room" id="image" />

    <div id="img-caption">Arsenal celebrate at Wembley after winning the FA Cup. <i>(Image courtesy https://www.arsenal.com)</i></div>
  </div>

  <div id="tribute-info" class="text-center">

    <!-- Tribute Info to come here -->

    <p>
      The 2020 FA Cup Final, known officially as the Heads Up FA Cup Final, was the final match of the 2019–20 FA Cup and the 139th final of the FA Cup. It was played at Wembley Stadium, London, England on 1 August 2020 due to being delayed due to the COVID-19 pandemic in the United Kingdom.</p>

    <p>The match was contested between Arsenal and Chelsea. As winners, Arsenal will enter the group stage of the 2020–21 UEFA Europa League.</p>
    <p>The match was officially named the Heads Up FA Cup Final by The Football Association as part of a campaign around mental health awareness promoted by The FA president, Prince William, Duke of Cambridge.The match was held behind closed doors.</p>

    Read more about all the honors at <a href="https://www.arsenal.com/men/honours" target="_blank" id="tribute-link">www.arsenal.com</a>

  </div>

</main>

style.css

:root {
  --red: #f00000;
  --grey:  #f1f2f3;
  --black: #222;
}


html, body {
  font-family: 'Open Sans', sans-serif;
  background: var(--grey, #f1f2f3);
  font-size: 14px;
}



main {
  padding: 10px 15px;
}

h1 {
  color: var(--red, #f00000);
  font-size: 2.75rem;
}

#title, #subtitle, #img-caption {
  text-align: center;
}

#image {
  margin: 15px auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--red, #f00000);
  text-decoration: underline;
}

a:hover, a:visited, a.active {
  color: var(--black, #222222);
  
}



#tribute-info {
  max-width: 760px;
  margin: 25px auto;
}

p {
  font-size: 1.2rem;
  line-height: 2rem;
}

tribute-page.markdown

Tribute Page

A Pen by neil-coutinho on CodePen.

License.