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.

            
              <!-- comment example -->
<html>
  <head>
    <title>Jimi Hendrix</title>
    <meta name="description" 
          content="Jimi Hendrix tribute page"/>
    <meta name="keywords" 
          content="music, guitarist, rock, henrix"/>
    <meta http-equiv="author" 
          content="silvanoshei"/>
  </head>
  <body>
    
    <div class="sektor">
    <h1 id="top">Jimi Hendrix</h1>
    
    <img id="fot" src="http://rockworld.com.pl/wp-content/uploads/2017/07/z3.jpg">
    </div>
    
    <div class="sektor nawigacja">
      <ul id="nav" class="nav">
        <li><a href="#begin"><button type="button">Born</button></a></li>
        <li><a href="#childhood"><button type="button">Childhood</button></a></li>
        <li><a href="#education"><button type="button">Education</button></a></li>
        <li><a href="#army"><button type="button">Army</button></a></li>
        <li><a href="#career"><button type="button">Career</button></a></li>
        <li><a href="#experience"><button type="button">Experience</button></a></li>
        <li><a href="#gypsys"><button type="button">Gypsys</button></a></li>
        <li><a href="#disco"><button type="button">Discography</button></a></li>
        <li><a href="#death"><button type="button">Death</button></a></li>
        <li><a href="#legacy"><button type="button">Legacy</button></a></li>
        <li><a href="#timeline"><button type="button">Timeline</button></a></li>
        <li><a href="#gallery"><button type="button">Gallery</button></a></li>
        <li><a href="#song"><button type="button">Listen</button></a></li>
        <li><a href="#end"><button type="button">End</button></a></li>
      </ul>
    </div>
    <div class="sektor">
    <h2 id="begin">Jimi Hendrix is considered as one of the greatest electric guitarists that the music world has ever witnessed.</h2>
    <p>Born in 1942, in Seattle, Washington, Jimi Hendrix learned to play guitar as a teenager and grew up to become a rock legend who excited audiences in the 1960s with his innovative electric guitar playing. One of his most memorable performances was at Woodstock in 1969, where he performed "The Star Spangled Banner." Hendrix died in 1970 from drug-related complications, leaving his mark on the world of rock music and remaining popular to this day.<br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
    <h2 id="childhood">Childhood</h2>
    <p>Johnny Allen Hendrix was born on 27th November in 1942. He was born to father James Allen "Al" Hendrix (1919-2002) and mother Lucille Jeter (1925-1958) in Seattle, Washington. His father was originally from Vancouver, British Columbia whereas his mother was born in Seattle, Washington. Hendrix was the eldest of their five children. His father was a gifted jazz dancer who initially shuffled between lots of job before joining as a United States Army at Fort Sill, Oklahoma. He was sent to France during the World War II. His father was discharged with honor from the U.S. army on 1st September, 1945. On his return from there Al Hendrix legally changed his son's name to James Marshall Hendrix in 1946. Both Al Hendrix and Lucille were going through a rough patch in their marriage and thereafter they got divorced in 1951. Hendrix was just nine years old when his parents went through a bitter divorce. He lost his mother at the age of fifteen. His mother died of liver cirrhosis on 2nd February, 1958 owing to her excessive drinking habits.
 
His father Al Hendrix won the child custody over them but Hendrix always worshipped his mother in her absence. Hendrix was raised among his two brothers, Leon and Joseph, and his two sisters, Kathy and Pamela. His brother, Joseph was born physically challenged and was placed in foster care at the age of three. His other two sisters were also raised in foster care at a young age. Kathy was born blind and Pamela suffered minor physical difficulties. They had a very strict upbringing during their childhood. He was raised under the care of his paternal grandmother in Vancouver, British Columbia.<br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
    <h2 id="education">Education and Early Life</h2>
    <p>As a young boy, Hendrix was shy and sensitive by nature. He was badly influenced by his parent’s split. Hendrix was enrolled in a junior school at Washington Junior High School. He passed his school leaving exam with ease. During his high school days he got a chance to mix along with African Americans, European Americans, and Asian Americans. He was exposed to a variety of cultures and music. At the age of 15, he bought his first acoustic guitar for $5 from an acquaintance of his father. Initially Hendrix had no proper formal training in strumming the guitar. He learned to play it by watching others how to play it, by listening to records and got valuable tips from experienced players. By the middle of 1959, his father bought him a white Supro Ozark, which was his first electric guitar ever. He then learned the great songs by Blues by B.B. King and Muddy Waters.
He also performed in various local bands and played in gigs in neighboring village city areas around New York City’s Greenwich and in Vancouver, British Columbia. He performed his first gig with an unknown band in the basement of a synagogue, Seattle's Temple De Hirsch. The first formal band he played in was The Velvetones. He then joined a band called the Rocking Kings and played as a professional guitarist at the Birdland. He played the guitar between his legs, behind his back and over his head and could charm the audience with ease. Soon he became a favorite with the audience.
Meanwhile, he took admission in the Garfield High School in Seattle but he did not complete his graduation owing to his musical career and attendance problem. He was later awarded an honorary diploma in the 1990s.<br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
    <h2 id="army">Army</h2>
    <p>At the age of 17, he dropped out of Garfield High School to join the army to avoid a jail sentence for riding in stolen cars. Hendrix got into trouble with the law twice for riding in stolen cars. He had to choose between spending two years in prison or join the Army instead. Hendrix chose the latter option. On completion of his basic training, he was assigned to the 101st Airborne Division and was posted in Fort Campbell, Kentucky. There he volunteered as a para-trooper in the army.<br /><a href="#nav"><button type="button">Back</button></a></p>
     </div>
    <div class="sektor">
    <h2 id="career">Musical Career</h2>
    <p>He met a soldier named Billy Cox who was originally a bass player. Both of them formed a band together named King Kasuals and performed regularly at a club in Nashville, Tennessee. By this time, he had drawn popularity as a renowned guitarist and emulated the late rocker Little Richard on-stage. Hendrix performed with the Isley Brothers and also with saxophonist King Curtis, and later with friend Curtis Knight. He then signed a contract with Knight's manager, Ed Chalpin and later formed his own group, Jimmy James & the Blue Flames, and shifted base to New York.<br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
    <h2 id="experience">The Jimi Hendrix Experience</h2>
    <p>In September 1966, Hendrix came to London with the help of Chas Chandler, who was a member of the rock band the Animals. Michael Jeffery helped him manage the band and Chandler helped him form the new band The Jimi Hendrix Experience along with Noel Redding as the bass player and John "Mitch" Mitchell on the drums. The group then performed its first hit single, titled "Hey Joe” in a stage show at London.

The first album from the band was named Are You Experienced? The band's next album was titled Axis: Bold as Love. His third and last album was Electric Ladyland.<br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="sektor">
    <h2 id="gypsys">Band of Gypsys</h2>
    <p>In 1967, the band, The Jimi Hendrix Experience broke apart due to a contractual dispute between Jimi and his producer Ed Chalpin in 1965. Hendrix then chose to record a live album, the Band of Gypsys.<br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="sektor">
    <h2 id="disco">Discography</h2>
      <ul class="discography">
        <li>The Jimi Hendrix Experience
          <ul>
            <li>Are You Experienced (1967)</li>
            <li>Axis: Bold as Love (1967)</li>
            <li>Electric Ladyland (1968)</li>
          </ul>
        </li>
        <li>Jimi Hendrix/Band of Gypsys
            <ul>
                <li>Band of Gypsys (1970)</li>
            </ul>
        </li>
        <li>Posthumous studio albums
          <ul>
            <li>The Cry of Love (1971)</li>
            <li>Rainbow Bridge (1971)</li>
            <li>War Heroes (1972)</li>
            <li>Loose Ends (1974)</li>
            <li>Crash Landing (1975)</li>
            <li>Midnight Lightning (1975)</li>
            <li>Nine to the Universe (1980)</li>
            <li>Radio One (1988)</li>
            <li>First Rays of the New Rising Sun (1997)</li>
            <li>South Saturn Delta (1997)</li>
            <li>Valleys of Neptune (2010)</li>
          </ul>
        </li>
      </ul>
      <p><br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="sektor">
    <h2 id="death">Death</h2>
    <p>Jimi died at the age of 27 on 18th September, 1970 in London due to an overdose of sleeping pill.</p>
    <blockquote cite="https://www.goodreads.com/author/quotes/7268.Jimi_Hendrix">
      <p class="cytat">Life is quicker than a blink of an eye. - Jimi Hendrix<br /><a href="#nav"><button type="button">Back</button></a></p>
    </blockquote>
      </div>
    <div class="sektor">
    <h2 id="legacy">Legacy</h2>
    <p>Hendrix won many prestigious rock music awards in his lifetime. His name was inducted in the US Rock and Roll Hall of Fame in 1992 and the UK Music Hall of Fame in 2005. He was the first person whose name was included in the list of the Native American Music Hall of Fame and in 1994 a star was also dedicated to him in the Hollywood Walk of Fame. He is in the top ten lists of 100 greatest guitarists in the world in 2003. In 1992, Hendrix was awarded the Grammy Lifetime Achievement Award.<br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="sektor">
    <h2 id="timeline">Timeline</h2>
    
      <table>
        <tr>
          <td>1942</td>
          <td>Hendrix was born on 27th November in Seattle, Washington, U.S.

</td>
        </tr>
        <tr>
          <td>1945</td>
          <td>His father was discharged with honor from the U.S. army

</td>
        </tr>
        <tr>
          <td>1946</td>
          <td>Al Hendrix legally changed his son's name to James Marshall Hendrix

</td>
        </tr>
        <tr>
          <td>1951</td>
          <td>Both Al Hendrix and Lucille got divorced</td>
        </tr>
        <tr>
          <td>1958</td>
          <td>Hendrix lost his mother</td>
        </tr>
        <tr>
          <td>1966</td>
          <td>He formed the Jimi Hendrix Experience</td>
        </tr>
        <tr>
          <td>1967</td>
          <td>He recorded his second album AxisBold as Love</td>
        </tr>
        <tr>
          <td>1968</td>
          <td>He recorded his third album Electric Ladyland</td>
        </tr>
        <tr>
          <td>1970</td>
          <td>He died at the age of 27 on 18th September, in London</td>
        </tr>
        <tr>
          <td>1992</td>
          <td>Hendrix was awarded the Grammy Lifetime Achievement Award</td>
        </tr>
        <tr>
          <td>1992</td>
          <td>His name was inducted in the US Rock and Roll Hall of Fame</td>
        </tr>
        <tr>
          <td>1992</td>
          <td>Hendrix was awarded the Grammy Lifetime Achievement Award</td>
        </tr>
        <tr>
          <td>1994</td>
          <td>A star was also dedicated to him in the Hollywood Walk of Fame</td>
        </tr>
        <tr>
          <td>2003</td>
          <td>He was ranked in the top ten lists of 100 greatest guitarists in the world</td>
        </tr>
        <tr>
          <td>2005</td>
          <td>His name is included in the UK Music Hall of Fame</td>
        </tr>
        
        
      </table>
      <p><br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="sektor">
    <h2 id="gallery">Gallery</h2>
      
      <img class="galeria" src="https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/jimi-hendrix-live-halo-chris-walter.jpg"></img>
      
      <img class="galeria" src="https://s3.amazonaws.com/vf-images/wp-content/uploads/2013/09/jimi_hendrix_miami.png"></img>
      
      <img class="galeria" src="http://societyofrock.com/wp-content/uploads/2016/01/jimi-hendrix-bold-as-love-live-audio-735x413.jpg" />
  
      
      
      <p><br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
    <h2 id="song">Listen now</h2>
    <p>Here are few notable songs:</p>
    
      <iframe class="filmik" width="560" height="315" src="https://www.youtube.com/embed/TLV4_xaYynY?rel=0" frameborder="0" allowfullscreen></iframe>
    
    <iframe class="filmik" width="560" height="315" src="https://www.youtube.com/embed/sXjJhm7KBII?rel=0" frameborder="0" allowfullscreen></iframe>
    
    <iframe class="filmik" width="560" height="315" src="https://www.youtube.com/embed/rXwMrBb2x1Q?rel=0" frameborder="0" allowfullscreen></iframe>
      <p><br /><a href="#nav"><button type="button">Back</button></a></p>
    </div>
    <div class="sektor">
      <form action="/ation-page.php"> 
        <fieldset>
          <legend>Quick form</legend>
        <div class="liniaform">
        <label for="nazwa" class="tytul">Name:</label>
        <input type="text" name="nazwa"</input>
        </div>
        
        <div class="liniaform">
        <label for="mail" class="tytul">E-mail:</label>
        <input type="email" name="mail"</input>
        </div>
        
          <div class="liniaform">
        <label for="from" class="tytul">How did you found this site?</label>
        <select name="from">
          <option value="google">Google</option>
          <option value="codepen">Codepen</option>
          <option value="freecodecamp">Freecodecamp</option>
          <option value="other">Other</option>
        </select>
          </div>
        
          <div class="liniaform">
            <label class="tytul">Do you like this site?</label>
        <label class="radio">
          <input type="radio" name="ocena" value="yes" /> Yes
        </label>
        <label class="radio">
          <input type="radio" name="ocena" value="no" /> No
        </label>
        
        <br/>
          </div>
          <div class="liniaform">
        <label for="comment" class="tytul">Comment:</label>
          
          <textarea name="comment"></textarea>
          <br/>
          </div>
          <div class="liniaform">
        <label class="tytul">
          I want spam on my email.
        <input type="checkbox" name="subscribe" checked="checked" />
          </label>
          <br/>
          </div>
          <div class="liniaform">
          <input type="submit" value="Send"></input>
          </div>
        </fieldset>
      </form>
     <br/>
    <p id="end">This is a copy paste(text), you can find source <a href="https://www.thefamouspeople.com/profiles/jimi-hendrix-183.php" target="_blank">here</a>.</p>
    <p>&copy;noone<br /><a href="#nav"><button type="button">Back</button></a></p>
      </div>
    <div class="db">
    </div>
  </body>
</html>
            
          
!
            
              
body {font-family: Helvetica, sans-serif;
      background-color: #0C0C0C;
      font-size: 16px;
}

h1,h2,p,ul,table {color: #F0F0F0}

h1 {text-transform: uppercase;
      letter-spacing: 0.2em;
      text-align: center;
      text-shadow: -2px -2px 2px #000000;}

h2 {text-shadow: -1px -1px 1px #000000;
    border-bottom: 2px solid #F0F0F0;
    padding-bottom: 2%;
    margin-bottom: 3%;}

.sektor {border: 2px solid #F0F0F0;
        background-color: #2C2C2C;
        margin: 50px auto 50px auto;
        padding: 50px 50px 100px 50px;
        width: 60%;
        min-width: 300px;
        border-radius: 20px;}

.nawigacja {
  padding: 50px 50px 50px 50px;
}

#fot {padding: 10px;
      display: block;
      max-height: auto;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-radius: 20px;}

.galeria {
  display: block;
  max-height: 500px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  margin-top: 50px;
}



.cytat {color: grey;
        font-style: italic;}

a:link {color: #E48BCB;}
a:visited {color: #B29AAB;}
a:hover {color: #D9B6D0;}

ul.nav > li {display: inline-block;}

ul.discography {list-style-type:none;}

ul.discography li {margin: 10px 0px 0px 0px;}

button {color:#F0F0F0;
        background-color:#2C2C2C;
        border: 2px solid #F0F0F0;
        margin: 5px;
        width:130px;
        height:60px;
        padding:4px;
        border-radius: 2px;}
button:hover {background-color: #3C3C3C;}

p button {float:right;
          margin-bottom: 50px;}


tr:nth-child(even) {background-color: #3C3C3C;}

tr, td {border-bottom:1px solid #F0F0F0;
        padding: 10px;}

.filmik {display: inline;
        border: 2px solid #F0F0F0;
        height:auto;
        width: 300px;
        min-width: 100px;
        margin: 10px;
}

fieldset {
  border:2px solid #F0F0F0;
  border-radius: 10px;
  padding: 20px;
  color: #F0F0F0;
  margin: 5px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

input {
  background-color: #2C2C2C;
  border-bottom: 1px solid #F0F0F0;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #F0F0F0;


}

input:hover {
  background-color: #3C3C3C
}



input[type="submit"] {
  border:2px solid #F0F0F0;
  border-radius: 5px;
  padding: 10px;
  width: 130px;
}

input[type="submit"]:hover {background-color: #3C3C3C;
}

select {
  background-color: #2C2C2C;
  border: 1px solid #F0F0F0;
  border-radius: 4px;
  color: #F0F0F0;

}
select:hover {
  background-color: #3C3C3C;
}

textarea:hover {
  background-color: #3C3C3C;
}

textarea {
  background-color: #2C2C2C;
  border: 1px solid #F0F0F0;
  border-radius: 4px;
  color: #F0F0F0;
}

legend {
  padding: 5px;
  border: 2px solid #F0F0F0;
  border-radius: 4px;
  width: 130px;

}

div.liniaform {
  margin: 5px;
  padding: 5px;
  width: 450px;
  margin-left: auto;
  margin-right: auto;
  
}

.tytul {
  float: left;
  margin-left: auto;
  margin-right: auto;
  width: 220px;
}

.radio {
  padding-right: 10px;
}


.db {
  width:100px;
  height:100px;
  position: fixed;
  bottom: 0px;
}

/*important stuff*/
.db:hover {
  background-image: url(https://image.spreadshirtmedia.com/image-server/v1/mp/compositions/1001879070/views/1,width=300,height=300,backgroundColor=E8E8E8,version=1473664654/dick-butt.jpg);
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
            
          
!
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.

Console