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

              
                <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

<!--<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">-->

<div class="container-fluid col-md-8 col-md-offset-2">
  <img class="img-responsive center-block" src="https://coverfiles.alphacoders.com/143/14392.jpg" alt="Michael Jordan walpaper!">
  <h4 class="text-center text-danger">A tribute page to <span id="mj">Michael Jordan!</span></h4>
  <div id="text-container">
    <div id="whois">
      <h5>Michael Jordan personified greatness on the court, and redefined superstar athlete off it. Jordan entered the NBA Draft and was selected third overall by the Chicago Bulls. The young superstar began stockpiling NBA hardware. The court was his and the world soon followed. His unmistakable style helped make the 14-time All Star the most recognizable person on the planet. In 1991, the Jordan-led Bulls launched an all-out assault on the rest of the league winning three straight world championships. Michael won Olympic gold again in 1992 and then in 1993 abruptly retired from the Bulls to play minor league baseball. He returned to the NBA full-time in 1995 and the Bulls promptly won three consecutive titles. Jordan was named Finals MVP each time.</h5>
    </div>
    <div id="honors">
      <h2 class="text-danger">Michael Jordan's Honors <span>(select your top 5)</span></h2>
      <form action="#">
        <label><input type="checkbox" name="honors-all"> NBA 50th Anniversary All-Time Team (1996)</label><br>
        <label><input type="checkbox" name="honors-all"> Member of six NBA championship teams (1991-93, 1996-98)</label><br>
        <label><input type="checkbox" name="honors-all"> Five-time NBA Most Valuable Player (1988, 1991-92, 1996, 1998)</label><br>
        <label><input type="checkbox" name="honors-all"> Six-time NBA Finals Most Valuable Player (1991-93, 1996-98)</label><br>
        <label><input type="checkbox" name="honors-all"> Ten-time All-NBA First Team (1987-93, 1996-98)</label><br>
        <label><input type="checkbox" name="honors-all"> All-NBA Second team (1985)</label><br>
        <label><input type="checkbox" name="honors-all"> Nine-time NBA All-Defensive First Team (1987-93, 1996-98)</label><br>
        <label><input type="checkbox" name="honors-all"> NBA Defensive Player of the Year (1988)</label><br>
        <label><input type="checkbox" name="honors-all"> NBA Rookie of the Year (1985)</label><br>
        <label><input type="checkbox" name="honors-all"> NBA All-Rookie Team (1985)</label><br>
        <label><input type="checkbox" name="honors-all"> Two-time IBM Award winner, for all-around contribution to team's success (1985, 1989)</label><br>
        <label><input type="checkbox" name="honors-all"> Three-time NBA All-Star Game MVP (1988, 1996, 1998)</label><br>
        <label><input type="checkbox" name="honors-all"> Participated in 11 NBA All-Star Games (1985, 1987-1993, 1996-98), starting 10 times, and missed another due to injury</label><br>
        <label><input type="checkbox" name="honors-all"> Holds the NBA All-Star Game career record for highest scoring average (21.3 ppg)</label><br>
        <label><input type="checkbox" name="honors-all"> Recorded only triple-double in All-Star Game history, with 14 points, 11 rebounds and 11 assists, in the 1997 NBA All-Star Game in Cleveland</label><br>
        <label><input type="checkbox" name="honors-all"> Won the Nestle Crunch Slam Dunk in 1987 and 1988, also participating in 1985</label><br>
        <label><input type="checkbox" name="honors-all"> Passed Kareem Abdul-Jabbar to become the NBA's all-time leading playoff scorer (5,762 points) during the 1998 Eastern Conference Finals</label><br>
        <label><input type="checkbox" name="honors-all"> Passed Dennis Johnson into fourth place on the NBA's all-time playoff assists list (1,006), in an 88-83 victory over the Indiana Pacers in Game 7 of the Eastern Conference Finals in 1997-98</label><br>
        <label><input type="checkbox" name="honors-all"> Scored his 29,000th career point, posting a game-high 41 points, 6 rebounds and 4 assists, in a 107-93 win over the Minnesota Timberwolves on 4/3</label><br>
        <label><input type="checkbox" name="honors-all"> Broke Kareem Abdul-Jabbar's NBA record by scoring in double-digits for the 788th consecutive game, scoring a game-high 33 points, against the Minnesota Timberwolves on 12/30/97</label><br>
        <label><input type="checkbox" name="honors-all"> Scored a career-high 69 points in a 117-113 overtime win at Cleveland on 3/28/90</label><br>
        <label><input type="checkbox" name="honors-all"> Chicago Bulls all-time leader in scoring (29,277 points), assists (5,012) and steals (2,306)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds the NBA record for most seasons leading league in scoring -- 10; highest points per game average (minimum 400 games or 10,000 points) -- 31.5; most seasons leading league in field goals made -- 10; and most seasons leading league in field goals attempted -- 10</label><br>
        <label><input type="checkbox" name="honors-all"> Shares the NBA career record for most seasons with 2,000 or more points -- 11; and most consecutive seasons leading league in scoring --7 (1986-87 through 1992-93)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds single-game records for most free throws made in one half -- 20 (December 30, 1992, at Miami); and most free-throws attempted in one half -- 23 (December 30, 1992, at Miami)</label><br>
        <label><input type="checkbox" name="honors-all"> Shares single-game records for most free throws made in one quarter -- 14 (December 30, 1992, at Miami); and most free-throws attempted in one quarter -- 16 (December 30, 1992, at Miami)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds the NBA Finals record for highest single-series scoring average -- 41.0 ppg (1993)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds NBA Finals record for most three-point field goals made -- 42; and most consecutive games with 20 or more points -- 35 (June 2, 1991-June 14, 1998)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds the NBA Finals single-game record for most points in one half -- 35 (June 3, 1992 vs. Portland)</label><br>
        <label><input type="checkbox" name="honors-all"> Shares NBA Finals single-game records for most field goals made in one half -- 14; and most three-point field goals made in one half -- 6 (June 3, 1992, vs. Portland); most free throws made in one quarter -- 9 (June 11, 1997 vs. Utah); and most free throws attempted in one half -- 15 (June 4, 1997, vs. Utah)</label><br>
        <label><input type="checkbox" name="honors-all"> Holds the NBA Playoffs record for most points -- 5,987; highest points-per-game average (minimum 25 games or 625 points) -- 33.4 ppg; most field goals attempted -- 4,497; most free throws made -- 1,463; most free throws attempted -- 1,766; and most steals -- 376</label><br>
        <label><input type="checkbox" name="honors-all"> Scored a career playoff-high 63 points against the Boston Celtics on 4/20/86, setting an NBA record for most points in a playoff game</label><br>
        <label><input type="checkbox" name="honors-all"> Holds single-game playoff records for most free throws made in one quarter -- 13; and most free throws attempted in one quarter -- 14 (May 21, 1991, vs. Detroit)</label><br>
        <label><input type="checkbox" name="honors-all"> Shares single-game playoff records for most field goals made -- 24 (May 1, 1998, vs. Cleveland); most field goals attempted in one half -- 25 (May 1, 1988, vs. Cleveland); and most three-point field goals made in one half -- 6 (June 6, 1992, vs. Portland)</label><br>
        <label><input type="checkbox" name="honors-all"> Recorded two playoff career triple-doubles, both against the New York Knicks (May 9, 1989 and June 2, 1993)</label><br>
        <label><input type="checkbox" name="honors-all"> Notched 28th career triple-doubles, the last being a 30 point, 11 rebound and 10 assist effort against the Toronto Raptors on 4/14/97</label><br>
        <label><input type="checkbox" name="honors-all"> Member of the gold-medal-winning U.S. Olympic team (1984, 1992)</label><br>
        <label><input type="checkbox" name="honors-all"> As a freshman at the University of North Carolina, hit the game-winning shot in the 1982 NCAA Championship game</label><br>
        <label><input type="checkbox" name="honors-all"> Named College Player of the Year by The Sporting News in both 1983 and 1984 and won the Naismith and Wooden Awards in 1984</label>
        <button type="submit" class="btn btn-danger btn-block">Submit your top 5</button>
      </form>
    </div>
    <div id="quote">
      <p align="right">"I can accept failure, everyone fails at something. But I can't accept not trying."</p>
      <p align="right"><em>Michael Jordan</em></p>
    </div>
    <div id="more-info">
      <p>If you want to find more information about Michael Jordan, <a href="https://en.wikipedia.org/wiki/Michael_Jordan" target="_blank">Click Here</a></p>
    </div>
    <div class="buttons row">
      <div class="col-md-1">
        <a href="https://www.facebook.com/michael1jordan" target="_blank" align="center" class="btn btn-block btn-primary"><i class="fab fa-facebook-square"></i></a>
      </div>
      <div class="col-md-1">
        <a href="https://twitter.com/MichaelJordanFC" target="_blank" class="btn btn-block btn-info"><i class="fab fa-twitter"></i></a>
      </div>
      <div class="col-md-1">
        <a href="https://www.instagram.com/theofficialmichaeljordan/?hl=en" target="_blank" class="btn btn-block btn-danger"><i class="fab fa-instagram"></i></a>
      </div>
      <p>Designed by Konstantin Stamov ©</p>
  </div>
</div>
              
            
!

CSS

              
                body {
  margin: 60px;
  background-image: url(http://i.ebayimg.com/images/i/121831737743-0-1/s-l1000.jpg);
  background-repeat: no-repeat; 
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
h4 {
  font-family:'Permanent Marker', cursive; 
  background-color: #d3d3d3; 
  padding: .5em;
  margin: 0;
}
#mj {
  font-size: 1.4em;
}
#text-container {
  border-style: solid;
  border-width: 2px;
  border-color: #d3d3d3;
  text-align: justify;  
}

#whois h5 {
  margin: 5px;
  line-height: 150%;
}

#honors h2 {
  margin: 15px 5px 10px 20px; 
  font-family:'Permanent Marker', cursive;
}

#honors span {
  font-size: .7em;
  color: #000
}

form {
  margin: 20px;
  text-align: justify;
}

label {
  font-weight: normal;
}

#quote {
  margin-right: 20px;
}
#quote p:nth-child(1) {
  font-size: 130%;
}
#quote p:nth-child(2) {
  font-family:'Permanent Marker', cursive;
}

#more-info {
  margin: 20px;
  padding-top: 15px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #fcc;
  font-size: 140%;
}

.buttons {
  margin-left: 10px;
  margin-right: 20px;
}

.buttons p {
  margin-top: 5px;
  font-family:'Permanent Marker', cursive;
  text-align: right;
}
              
            
!

JS

              
                
              
            
!
999px

Console