123

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">
      <div class="row">
        <div class="col-xs-12">
          <h1 class="text-center"><strong>The Beatles</h1></strong>
<h4 class="text-center"><em>The Beatles were an English rock band formed in Liverpool in 1960. With members John Lennon, Paul McCartney, George Harrison and Ringo Starr, they became widely regarded as the foremost and most influential act of the rock era.</em></h4>
       <div class="thumbnail">
             <img class="img-responsive" src="https://cdn.theconversation.com/files/134077/wide_article/width1356x668/f7mhb4rg-1471247346.jpg"</img>
         
        <div class="caption-text text-center"><h5>The Beatles are the best-selling band in history, with estimated sales of over 600 million records worldwide. They have had more number-one albums on the British charts and sold more singles in the UK than any other act. According to the RIAA, the Beatles are also the best-selling music artists in the United States, with 178 million certified units.<h5></div>
          </div>
          <h2 class="title"><strong>The band that shaped Rock & Roll</h1></strong>
          <hr class="divider">
  
            
            <div class="timeline">
              
              <h1 class="text-center"><strong>Timeline</h1></strong>
         <li><h2>December 17, 1960</h2><font size="4.5"> - First British performance as The Beatles, at the Casbah Coffee Club, Liverpool. </li></font>
         <br>
         <li><h2> January 1, 1962</h2><font size="4.5"> - They audition for Decca records but are turned down because "groups of guitars are on the way out". Record shop owner Brian Epstein becomes their manager. </font></li>
         <br>
         <li><h2> October 1962</h2><font size="4.5"> - "Love Me Do", their first single as The Beatles, enters the British chart and reaches number 17</font></li>
         <br>
         <li><h2>February 11, 1963</h2><font size="4.5"> - Recording of their first album, "Please Please Me", is completed in one day.</font></li>
         <br>
         <li><h2>February 7-22, 1964</h2><font size="4.5"> - The Beatles tour United States for the first time, break TV viewing records on the "Ed Sullivan Show".</font></li>
         <br>
         <li><h2>December 4, 1964</h2><font size="4.5"> - The fourth album, "Beatles For Sale", is released topping the charts immediately.</font></li>
         <br>
         <li><h2>December 3, 1965</h2><font size="4.5"> - The Beatles start their final British tour. The last live concert in Britain takes place on May 1, 1966. Final concert of all is in San Francisco on Aug. 29, 1966.</font></li>
         <br>
         <li><h2>August 1966</h2><font size="4.5"> - The "Revolver" album is released.</font></li>
         <br>
         <li><h2>June 1, 1967</h2><font size="4.5"> - "Sgt Pepper's Lonely Hearts Club Band" is released and was British number one for 27 weeks. It becomes the highest selling British album of all time. It was one of the most innovative albums of its time and sounded like a continuous show.</font></li>
         <br>
         <li><h2>November 27, 1967</h2><font size="4.5"> - Magical Mystery Tour is released in the U.S. as an album and days later as two Extended Play records in Britain. The television film was first shown on Dec. 26, 1967 and also starred Scottish actor and poet Ivor Cutler.</font></li>
         <br>
         <li><h2>January 22, 1968</h2><font size="4.5"> - Apple Corp, a record company founded by the Beatles, opens offices in London.</font></li>
         <br>
         <li><h2>February 1968</h2><font size="4.5"> - The group flies to India to meditate with the Maharishi Mahesh Yogi. As divisions appear, for the first time the group works separately on tracks for The White Album.</font></li>
         <br>
         <li><h2>October 1968</h2><font size="4.5"> - Premiere of animated film "Yellow Submarine". The album was released in Jan. 1969.</font><li>
         <br>
         <Li><h2>May 26-June 2, 1969</h2><font size="4.5"> - John Lennon and Yoko Ono hold "bed-in" protest at Amsterdam hotel and record "Give Peace a Chance".</font></li>
         <br>
         <li><h2>July/August 1969</h2><font size="4.5"> - "Abbey Road" album recorded - the first recorded solely in stereo. Traffic outside studio was stopped for the cover photo of the group on a pedestrian crossing. The final mix on August 20 was the last day all four were together in a recording studio. It is released on Sept. 26.</font></li>
         <br>
         <li><h2>April 1970</h2><font size="4.5"> - Final studio session for a Beatles record -- but with only Ringo Starr there. No formal announcement is made, but news that the Beatles are no more appears on April 10. The thirteenth and last album "Let it be" is released on May 8 and the film was premiered in London on May 20.</font></li>
          <br>
          <br>
          <br>
          
           <div class="row">
          <div class="col-xs-12 col-sm-5 col-sm-offset-1 col-md-5 col-md-offset-3">  
              
           <p><center>"Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one."</center></p>
                <footer><center><cite><center>John Lennon</center></cite></footer>
                
            
                <hr class="divider">
                <h2 class="title">&nbsp &nbsp ~ Albums ~</h2>
            <ul>
            <li class="li-title"><a href="https://www.beatlesbible.com/albums/please-please-me/">Please Please Me</li></a>
              <li class="li-title"><a href="https://www.beatlesbible.com/albums/with-the-beatles/">With The Beatles</li></a>
             <li class="li-title"><a href="https://www.beatlesbible.com/albums/a-hard-days-night/">A Hard Day's Night</li></a>
          <li class="li-title"><a href="https://www.beatlesbible.com/albums/beatles-for-sale/">Beatles For Sale</li></a>
         <li class="li-title"><a href="https://www.beatlesbible.com/albums/help/">Help!</li></a>
          <li class="li-title"><a href="https://www.beatlesbible.com/albums/rubber-soul/">Rubber Soul</li></a>
        <li class="li-title"><a href="https://www.beatlesbible.com/albums/revolver/">Revolver</li></a>
      <li class="li-title"><a href="https://www.beatlesbible.com/albums/sgt-peppers-lonely-hearts-club-band/">Sgt Pepper's Lonely Heart Club Band</li></a>
  <li class="li-title"><a href="https://www.beatlesbible.com/albums/the-beatles-white-album/">The Beatles "White Album"</li></a>
<li class="li-title"><a href="https://www.beatlesbible.com/albums/yellow-submarine/">Yellow Submarine</li></a>
<li class="li-title"><a href="https://www.beatlesbible.com/albums/abbey-road/">Abbey Road</li></a>
<li class="li-title"><a href="https://www.beatlesbible.com/albums/let-it-be/">Let It Be</li></a>
<li class="li-title"><a href="https://www.beatlesbible.com/albums/magical-mystery-tour/">Magical Mystery Tour</li></a>

            
         
        
            
        
       

</div>
            
          
!
            
              .text-center {
  font-family: 'Georgia', Serif;
}

body {
  margin-top: 60px;
}
h2 {
  display: inline;
}

li {
  list-style: none;
}
.timeline {
  padding-top: 0px;
  padding-bottom: 10px;
  font-family: 'Georgia', serif;
}
.title {
  font-family: 'Georgia', Serif; 
  font-weight: 700px;
  text-align: center;
  display: block;
}
.li-title {
  font-family: 'Georgia', Serif; 
  font-weight: 700px;
  text-align: center;
  display: block;
  font-size: 35px;
}
.divider {
  width: 500px;
  border: 1px solid #181818;
}
p {
  font-family: 'Serif', Avant-Garde;
  font-weight: 600;
  color: #A9A9A9;
 
}
.light {
  font-weight: lighter;
}
/* This text is in Avant Garde */
.class { 
	font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
}

            
          
!
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