Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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;
  /*2d1709*/
}

#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;
  /*box-shadow: 0px 0px 55px 0px #777;*/
}

#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;
}



              
            
!

JS

              
                
              
            
!
999px

Console