Ytdyklly

I'm following the project found here. I'm sure I forced some flexboxes where they didn't need to be. Tried to apply some accessibility topics that were discussed in earlier lessons. Overall its a very plain static page, but I'm trying to get the basics down in terms of structuring my html page correct before moving on to more complicated topics. I'm looking mostly for tips on how I'm structuring/nesting the HTML, as well as adding accessibility, and if my CSS structurally makes sense.

Solution

Note: this was wrote in Codepen so head/body tags are missing.

HTML:

<main id="main">

  <h1 id="title">Philip Drury Dawson</h1>

  <div id="img-div">

    <img id="image" src="http://media.cleveland.com/shaw_impact/photo/dawson-tiphelmet-2012-ccjpg-ad91451e0875bce2.jpg" alt="Phil Dawson greeting fans in First Energy Stadium">

    <p id="img-caption"><em>Phil greeting his fans</em></p>

  </div>

  <!-- END img id="image" -->



  <div id="tribute-info">

    <p>Phil was the best. <a href="https://www.reddit.com/r/Browns" target="_blank" id="tribute-link">We love him.</a>

    </p>



    <article>

      <h2>Cleveland Browns</h2>

      <p>The Cleveland Browns signed him as a free agent in March 1999, and he remained with the team for 14 years until he was signed by the San Francisco 49ers on March 19, 2013. (He was the only player left from the 1999 Browns squad). Dawson holds the

        Browns record for most consecutive field goals made (29) and most field goals in a game (6). Dawson is currently the 7th most accurate kicker in the NFL. On October 10, 2010, Dawson tied Lou Groza for the Browns' career field-goal record with

        234. The two are tied for 35th in NFL history. Dawson scored the first points in the history of the "new" Cleveland Browns in 1999. On October 10 of that year, he scored the only touchdown of his career on a fake field goal against the Bengals

        in an 18-17 loss. His official career long was a 56-yard field goal on November 17, 2008, which would prove to be the game-winner against the Buffalo Bills on Monday Night Football. However, he did hit a 59-yard field goal in an August 14, 2010

        preseason game. Dawson would have become an unrestricted free agent at the end of the 2010 season, but he was given the franchise tag on February 22, keeping him for the 2011 season.

      </p>

    </article>

    <article>

      <h2>The Phil Dawson Rule</h2>

      <p>Dawson had a rule named after him after a missed call by referees. On November 18, 2007, Dawson attempted a 51-yard field goal in the closing seconds of the fourth quarter to tie the game against the Baltimore Ravens. The kick carried through the

        air and hit the left upright and then the rear curved support post (stanchion), which bounced the football over the crossbar and into the end zone, in front of the goalpost. The kick was originally ruled no good. Under NFL rules, the play was

        not reviewable.

        <a href=#references><sup>[1]</sup></a> Officials discussed the play among themselves for several minutes and decided that, since the ball had indeed crossed the crossbar within the goal, whatever happened afterward to the ball did not matter.

        The kick was considered good, as announced by referee Pete Morelli. However, as the play is not technically reviewable, referee Pete Morelli announced that the play was reversed "after discussion," as opposed to "after further review," as is usually

        stated. At this point the Ravens, already celebrating in the locker room (they would have won 30-27 if the field goal was no good), were called back out onto the field to proceed to an overtime period. The Browns went on to win the game, 33-30

        in overtime, as Dawson came through again with a more visible 33-yard field goal. Dawson finished 4 for 5 in FGs whereas fellow Lake Highlands High School alumnus Matt Stover finished 3 for 3 in FGs for the Ravens.<a href=#references><sup>[2]</sup></a>        Notably, later in the season on December 16, in driving snow and wind gusts up to 40 mph, Dawson kicked another field goal, an improbable 49-yarder, that hit the same center support post. This field goal helped the Browns achieve an 8-0 win over

        the Buffalo Bills in blizzard conditions. Hitting this same structure twice in the same season has led some members of the Cleveland press to begin referring to the support post as "The Dawson Bar."<a href=#references><sup>[3]</sup></a> Prior

        to the 2008 season, the rule was changed to allow field goal and extra point attempts that hit the uprights or crossbar to be reviewed. This new rule is dubbed the "Phil Dawson Rule."

      </p>

    </article>

  </div> <!-- END div id="tribute-info" -->



</main>

<footer>

  <div id="references">

    <h2>References</h2>

    <ol>

      <li> <a href="http://www.espn.com/nfl/columns/story?columnist=sando_mike&id=3120230">http://www.espn.com/nfl/columns/story?columnist=sando_mike&id=3120230</a> </li>

      <li> <a href="http://www.espn.com/nfl/boxscore?gameId=271118033">http://www.espn.com/nfl/boxscore?gameId=271118033</a> </li>

      <li> <a href="https://halftimeadjustments.wordpress.com/2007/12/20/the-dawson-bar/">https://halftimeadjustments.wordpress.com/2007/12/20/the-dawson-bar/</a> </li>

    </ol>

  </div>

</footer>



<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS:

html,

body {

  font-family: verdana, arial, helvetica, sans-serif;

}



body {

  background-color: #444;

}



#main {

  color: #efefef;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0px 5%;

}



#img-div {

  background-color: #ff3c00;

  display: flex;

  flex-direction: column;

  justify-conent: flex-end;

  align-items: center;

  padding: 0px 0px 0px;

}



#image {

  max-width: 100%;

  height: auto;

}



#tribute-info {

  color: #222;

  background-color: #efefef;

  margin: 30px 0px;

  padding: 10px 5%;

  text-align: center;

}



#tribute-info h2 {

  border-bottom: 1px solid rgb(2, 2, 2, 0.2);

  padding-bottom: 10px;

  margin: 10px 0px;

  font-size: 1.5em;

}



p {

  font-size: 0.88em;

  line-height: 1.5;

}



sup {

  vertical-align: top;

  line-height: 1;

  font-size: 75%;

}



footer {

  color: #efefef;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0px 5%;

}



footer h2 {

  border-bottom: 1px solid rgb(239, 239, 239, 0.2);

  padding-bottom: 10px;

  margin: 10px 0px;

  font-size: 1.5em;

  text-align: center;

}



footer ol {

  columns: 2;

  column-width: 15em;

  font-size: 0.84em;

  list-style-position: inside;

}



footer a {

  color: #efefef;

  font-style: italic;

}