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.

              <!DOCTYPE HTML5>
<html lang="en">


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

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

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

  <title> Miles Davis Tribute </title>


  <div id="main">
    <h1 id="title">Miles Davis</h1>
    <h2> The Prince of Darkness </h2>
    <div id="img-div">
      <img id="image" src='https://cdn-images-1.medium.com/max/2000/1*BWfo2QHhNpCQeLWDIPocFw.jpeg' alt='Miles Davis, resting in performance break.'>
      <h4 id="img-caption">Grammy Award winner Miles Davis was a major force in the jazz world, as both a trumpet player and a bandleader</h4>
    <div id="tribute-info">
      <h2>Timeline of Miles Davis's life:</h2>
      <ul class="liststyle">
        <li>1926 – May 26 Miles Dewey Davis Ⅲ was born in Alton, Illinois, to an African American affluent family. His father was a dentist. His mother was a music lover.</li>
        <li>1935 – Got first his trumpet sent by father’s friend.</li>
        <li>1939 – His father was present a new trumpet to Miles.</li>
        <li>1943 – Began playing professionally at the Elks Club.</li>
        <li>1944 – The Billy Eckstine Band visited St. Louis. The members of the band included Dizzy Gillespie and Charlie Parker.Moved to New York City to study music at the Juilliard School. Got acquainted with Charlie Parker.</li>
        <li>1945 – Participated the Charlie Parker Quintet as replacement of Dizzy Gillespie.‘First Miles’, First Recording on a member of Herbie Fields Sextet.</li>
        <li>1948 – Miles Davis Nonet, includes J. J. Johnson, Lee Konitz, Gerry Mulligan and Gil Evans, performed at the Royal Roost. (Cool Jazz)</li>

        <li>1949 – ‘Birth of the Cool’ First european tour with Tadd Dameron.</li>

        <li>1950 – Played together with Art Blakey, witch led Hard Bop style.</li>

        <li>1951 – ‘Dig’ with Sonny Rollins and Art Blakey.</li>

        <li>1953 – Returned to St. Louis to recover from drug intoxication.</li>

        <li>1954 – Came back to New York Jazz scene. ‘Walkin’’ A Peak of Hard Bop style. ‘Bags’ Groove’ with Thelonious Monk and Milt Jackson.</li>

        <li>1955 – Formed ‘visionary quintet’ with Sonny Rollins, Red Garland, Paul Chambers and Philly Joe Jones. Formed ‘first great quintet’ added John Coltrane.</li>

        <li>1956 – ‘Marathon Session’ Recording of the ‘Hard Bop bible’: ‘Cookin’, ‘Relaxin’, ‘Workin’ and ‘Steamin’. Major debut by ‘Round About Midnight’, Columbia Records.</li>

        <li>1957 – Discharged John Coltrane and Philly Joe Jones, because of their drug intoxication and the limit of quintet Jazz style. ‘Miles Ahead’ with Gil Evans Orchestra.</li>

        <li>1958 – Adopted Modal Jazz, and released ‘Milestones’. Bill Evans joined Miles’s Sextet. Cannonball Adderley ‘Somethin’ Else’ Virtually leader album of Miles.</li>

        <li>1959 – ‘Kind of Blue’ It was the proclamation and completion of Modal Jazz.</li>

        <li>1960 – Miles Davis (with Gil Evans) ’Sketches of Spain’</li>

        <li>1964 – Formed the ‘second great quintet’, the members of which are Herbie Hancock, Wayne Shorter, Ron Carter and Tony Williams.</li>

        <li>1965 – ‘E.S.P.’ A sprout of New Mainstream.</li>

        <li>1967 – ‘Miles Smiles’ A masterpiece of New Mainstream.</li>

        <li>1968 – Adopted electronic sounds and rhythm of Rock music on his album ‘Miles in the Sky’. In this album Miles made Herbie Hancock play a electronic piano, George Benson play a electric guitar.</li>

        <li>1969 – ‘In a Silent Way’ The title track was composed by Joe Zawinul.</li>

        <li>1970 – ‘Bitches Brew’, Adopted Rock and Electronic sound earnestly.</li>

        <li>1972 – ‘On the Corner’ Adopted Funk sound and folk instruments.</li>

        <li>1975 – Stopped his activity.</li>

        <li>1981 – Came back music scene. Collaborated with Marcus Miller, Bill Evans (saxophonist) and heavy guitar sound of Mike Stern, and released a live album ‘We Want Miles’.</li>

        <li>1985 – ‘Your Under Arrest’ Adopted Pop arrangement and features two pop songs: ‘Time After Time’ by Cyndi Lauper and ‘Human Nature’ by Michael Jackson.</li>

        <li>1986 – Miles Davis ‘Tutu’ produced by Marcus Miller and Tommy LiPuma. This album featured Marcus Miller as producer and multi-player. It was like duet of Miles and Miller.</li>

        <li>1991 – Died on September 28 by the combined effect of a pneumonia and stroke.</li>

        <li>1992 – ‘Doo-Bop’ featured Hip Hop and rap.</li>

      <footer> If you'd like to know more information about Miles Davis you can visit <a id="tribute-link" href="https://en.wikipedia.org/wiki/Miles_Davis" target="_blank"> official Wikipedia Page</a></footer>

              * {
  text-align: center;
  font-family: "Tenor Sans", sans-serif;
  box-sizing: border-box;

#title {
  font-family: "Archivo Black", sans-serif;
  font-size: 3em;
  text-shadow: 3px 3px #a6a6a6;
  font-style: oblique;
  letter-spacing: 2px;

#main {
  background-color: #f0f0f0;
  border: 5px solid;
  border-radius: 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  height: auto;

#img-div {
  margin: 30px;

#image {
  width: 100%;
  max-width: 1000px;
  display: block;
  height: auto;
  margin: 0 auto;
  border-radius: 30px;

#img-caption {
  padding: 0 10px;

.liststyle {
  padding: 0 70px;
  text-align: left;
  display: grid;

@media (min-width: 800px) {
  .liststyle {
    grid-template-columns: auto auto;
    grid-column-gap: 30px;

li {
  padding: 5px 5px;
  text-align: left;

#tribute-info {
  width: 100%;
  max-width: 1000px;
  display: block;
  height: auto;
  margin: 0 auto;
  position: center;

footer {
  padding: 0 0 10px 0;

              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

🕑 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.