css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <div class="container">
  <div class="jumbotron text-center" id="stage">
    <div class="row">
      <div class="col-xs-12">
        <h1>Arnold Daniel Palmer</h1>
        <h4>September 10, 1929 - September 25, 2016</h4>
        <h2><em>A Legacy built on golf.</em></h2>
        <div class="col-xs-2"></div>
        <div class="col-xs-8">
          <div><img src="https://bit.ly/2014_Masters_AP" alt="Arnold teeing it up" style="width: 100%"></div>

          <!--Caption text for Arnold Palmer picture-->
          <div class="caption">Arnold Palmer placing the ball on the tee during the par three tounament at the 2014 Masters Championship in Augusta, Georgia.
            </br>
            <cite>-Picture taken by Michael Fantacone</cite>
          </div>
        </div>
        <div class="col-xs-2"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <div class="col-xs-2"></div>
        <div class="col-xs-8">

          <!--bootstrap panel for early life section-->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>Early Life</h></div>
            <div class="panel-body">
              <ul>
                <li>1929 Arnold Palmer was born in Latrobe, Pennsylvania</li>
                <li>1948 He attended Wake Forest College on a golf scholarship.</li>
                <li>1950 Palmer enlisted in the U.S. Coast gaurd for three years.</li>
                <li>1953 He returned to school and to competitive golf play.</li>
                <li>1954 Arnold was Married to Winifred Walzer Palmer (1934-99).</li>
                <li>1954 November, 17 Arnold Palmer turned pro and began his legacy.</li>
              </ul>
            </div>
           </div>
   
          <!--bootstrap panel for career section-->
           <div class="panel panel-default">
             <div class="panel-heading"><h4>Career</h4></div>
            <div class="panel-body">
              <ul>
                <li>Palmer had 92 professional wins overall.</li>
                <ul>
                  <li>62 U.S. PGA Tour Wins</li>
                  <li>18 International/Foreign Wins</li>
                  <li>12 Senior Tour Wins.</li>
                </ul>

                <li>He had seven major championship victories.</li>
                <ul>
                  <li>Masters Tournament (1958, 1960, 1962, 1964)</li>
                  <li>U.S. Open (1960)</li>
                  <li>The Open Championship (1961, 1962)</li>
                </ul>
                <li>2006 Arnold Palmer retired from professional golf.</li>
              </ul>
              <!--button link to arnoldpalmer.com website for wins-->
              <a href="http://www.arnoldpalmer.com/golf/professional-victories" target="blank" class="btn btn-info btn-block" role="button" style="color: black;"><strong>Click for a full list of wins.</strong></a>
            </div>
          </div>

          <!--bootstrap panel for achievments and awards section-->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>Achievements and Awards</h4></div>
            <div class="panel-body">
              <table class="table table-condensed">
                <thead>
                  <tr>
                    <th>Award</th>
                    <th>Dates</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Sports Illustrated</br>Sportsman of the year</td>
                    <td>1960</td>
                  </tr>
                  <tr>
                    <td>PGA Tour Money Leader</td>
                    <td>1958, 1960, 1962, 1963</td>
                  </tr>
                  <tr>
                    <td>PGA Player Of The Year</td>
                    <td>1960, 1962</td>
                  </tr>
                  <tr>
                    <td>Vardon Trophy</td>
                    <td>1961, 1962, 1964, 1967</td>
                  </tr>
                  <tr>
                    <td>Bob Jones Award</td>
                    <td>1971</td>
                  </tr>
                  <tr>
                    <td>World Golf Hall of Fame</td>
                    <td>1974</td>
                  </tr>
                  <tr>
                    <td>Old Tom Morris Award</td>
                    <td>1983</td>
                  </tr>
                  <tr>
                    <td>PGA Tour Lifetime</br>Achievement Award</td>
                    <td>1998</td>
                  </tr>
                  <tr>
                    <td>Payne Stewart Award</td>
                    <td>2000</td>
                  </tr>
                  <tr>
                    <td>Presidential Medal of Freedom</td>
                    <td>2004</td>
                  </tr>
                  <tr>
                    <td>Congressional Gold Medal</td>
                    <td>2009</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!--bootstrap panel for personal activities section-->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>Personal Activities</h4></div>
            <div class="panel-body">
              <ul>
                <li>Owner of Arnold Palmer Design Company</li>
                <ul>
                  <li>Palmer designed 300 Golf Courses in 37 Sates, 25 Countries, and five continents.</li>
                </ul>
                <li>2005 Palmer married Kathleen Gawthrop. His first wife Winnie died in 1999.</li>
                <li>Palmer was an avid pilot and logged nearly 20,000 hours of flight time.</li>
              </ul>
            </div>
          </div>

          <!--bootstrap well for Palmer quote-->
          <div class="well">"The most rewarding things you do in life are often the ones that look like they cannot be done."
            </br><cite>-Arnold Palmer</cite></div>
          <div>
            <p>To find the complete souce of information on Arnold Palmer and his amazing life please visit this link:
              <a href="https://en.wikipedia.org/wiki/Arnold_Palmer" target="blank">Wikipedia</a></p>
          </div>
          <div class="col-xs-2"></div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <footer class="text-center">Designed by Michael Fantacone</br>Information sourced from www.arnoldpalmer.com and Wikipedia.</footer>
</div>
            
          
!
            
              /*gives space between top of browser and stard of page*/

body {
  padding-top: 40px
}


/*positions image and sets border, radius, and shadow attributes*/

img {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px;
  box-shadow: 1px 1px 15px #999999;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 15px #999999;
  -webkit-border-radius: 10px;
}


/*Sets design characteristics for h4 attribute*/

h4 {
  text-decoration: underline;
  font-weight: bold;
  color: black;
}


/*sets general text color to black for entire page*/

#stage {
  color: black;
}


/*Aligns text left in columns of table*/

table {
  text-align: left;
}


/*Gives room between caption and early life panel*/

.caption {
  padding-bottom: 30px;
}


/*Sets unordered list text to left*/

ul {
  text-align: left;
}
            
          
!
            
              //Over-rides jumbotron default bg-color
$("#stage").css("background-color", "#e6f2e6");
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console