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.

            
              <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Musicians</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Musicians</h1>
  <div class="row"> 
<section id="muddywaters" class="col-6 column">
    <img src="http://www.davidhurwich.com/des117/codepen/muddywaters.jpg" />
    <h2>Muddy Waters</h2>
    <p> McKinley Morganfield (April 4, 1913 — April 30, 1983), better known as Muddy Waters, was an American blues musician who is often cited as the "father of modern Chicago blues".

Waters grew up on Stovall Plantation near Clarksdale, Mississippi, and by age 17 was playing the guitar and the harmonica, emulating local blues artists Son House and Robert Johnson.[ He was recorded in Mississippi by Alan Lomax for the Library of Congress in 1941. In 1943, he moved to Chicago to become a full-time, professional musician. In 1946, Muddy Waters eventually recorded his first record for Columbia Records and then for Aristocrat Records, a newly formed label run by the brothers Leonard and Phil Chess.</p> 
</section>
<section id="elvis" class="col-6 column">
    <img src="http://www.davidhurwich.com/des117/codepen/elvis.jpg" />
    <h2>Elvis</h2>
    
<p>

Presley was born in Tupelo, Mississippi, and relocated to Memphis, Tennessee with his family when he was 13 years old. His music career began there in 1954, when he recorded a song with producer Sam Phillips at Sun Records. Accompanied by guitarist Scotty Moore and bassist Bill Black, Presley was an early popularizer of rockabilly, an uptempo, backbeat-driven fusion of country music and rhythm and blues. RCA Victor acquired his contract in a deal arranged by Colonel Tom Parker, who managed the singer for more than two decades. Presley's first RCA single, "Heartbreak Hotel", was released in January 1956 and became a number-one hit in the United States. He was regarded as the leading figure of rock and roll after a series of successful network television appearances and chart-topping records. His energized interpretations of songs and sexually provocative performance style, combined with a singularly potent mix of influences across color lines that coincided with the dawn of the Civil Rights Movement, made him enormously popular—and controversial.

    </p>
</section>
  </div> 
  <div class="row"> 
<section id="joplin" class="col-12 column">
<img src="http://www.davidhurwich.com/des117/codepen/janisjoplin.jpg" />
    <h2>Janis Joplin</h2>
    <p>
        Janis Lyn Joplin was an influential American singer of the 1960s; her raw, powerful and uninhibited singing style, combined with her turbulent and emotional lifestyle, made her one of the biggest female stars in her lifetime. She died of an accidental drug overdose in 1970, aged 27, after releasing three albums. A fourth album, Pearl, was released a little more than three months after her death, reaching number 1 on the charts.
    </p>
</section>
  </div> 
  <div class="row"> 
<section id="jacksonfive" class="col-6 column">
   <img src="http://www.davidhurwich.com/des117/codepen/jacksonfive.jpg" />
    <h2>Jackson Five</h2>
    <p>
        The Jackson 5, or Jackson Five, also known as The Jacksons in later years, is an American popular music group. Formed in 1964 under the name the Jackson Brothers, the founding members were elder brothers Jackie, Tito and Jermaine. Younger brothers Marlon and Michael would join soon after. After participating in talent shows and the chitlin' circuit, they entered the professional music scene in 1967, signing with Steeltown Records and releasing two singles with the Steeltown label. In 1969, the group left Steeltown Records and signed with Motown.
    </p>
</section>
<section id="estefan" class="col-6 column">
   <img src="http://www.davidhurwich.com/des117/codepen/gloraiaestefan.jpg" />
    <h2>Gloria Estefan</h2>
    
    <p>
        Gloria Estefan (born Gloria María Milagrosa Fajardo García; September 1, 1957) is a Cuban-American singer, songwriter, actress, and businesswoman. She started off her career as the lead singer in the group called "Miami Latin Boys" which was eventually known as Miami Sound Machine.

Estefan's breakthrough success with "Conga" in 1985 made her known worldwide. It won the grand prix in the 15th annual Tokyo Music Festival in Japan. This is her signature song. In the middle of 1988 she and the band got their first number-one hit for the song "Anything for You". She is a contralto.
    </p>
</section>
  </div> 
    
  <div class="row"> 
<section id="nirvana" class="col-6 column">
   <img src="http://www.davidhurwich.com/des117/codepen/nirvana.jpg" />
    <h2>Nirvana</h2>
    <p>
        Nirvana was an American rock band formed by singer and guitarist Kurt Cobain and bassist Krist Novoselic in Aberdeen, Washington, in 1987. Nirvana went through a succession of drummers, the longest-lasting being Dave Grohl, who joined the band in 1990. Despite releasing only three full-length studio albums in their seven-year career, Nirvana has come to be regarded as one of the most influential and important alternative bands in history. Though the band dissolved in 1994 after the suicide of frontman Kurt Cobain, their music continues to maintain a popular following and to inspire and influence modern rock and roll culture.
    </p>
</section>
<section id="katyperry" class="col-6 column">
   <img src="http://www.davidhurwich.com/des117/codepen/katyperry.jpg" />
    <h2>Katy Perry</h2>
    <p>
        Katheryn Elizabeth Hudson (born October 25, 1984), known professionally as Katy Perry, is an American singer and songwriter. After singing in church during her childhood, she pursued a career in gospel music as a teenager. Perry signed with Red Hill Records and released her debut studio album Katy Hudson under her birth name in 2001, which was commercially unsuccessful. She moved to Los Angeles the following year to venture into secular music after Red Hill ceased operations and she subsequently began working with producers Glen Ballard, Dr. Luke, and Max Martin. After adopting the stage name Katy Perry and being dropped by The Island Def Jam Music Group and Columbia Records, she signed a recording contract with Capitol Records in April 2007.
    </p>
</section>
  </div> 
<section id="chancerapper" class="col-12 column">
   <img src="http://www.davidhurwich.com/des117/codepen/chancetherapper.jpg" />
    <h2>Chance the Rapper</h2>
    <p>
        Chancelor Johnathan Bennett (born April 16, 1993), known professionally as Chance the Rapper, is an American rapper, singer, songwriter, record producer, and actor from the West Chatham neighborhood of Chicago, Illinois.[3] In 2013, he began to gain recognition following the release of his second mixtape, Acid Rap.[4] Apart from his solo career, he is also a member of the Chicago collective Save Money (along with frequent collaborator Vic Mensa), and has worked as the lead vocalist for the band The Social Experiment. They released the widely lauded album Surf in May 2015.
    </p>
</section>
    
    
</body>
</html>
            
          
!
            
              /* Make sure to open and fill out wireframe.ai FIRST 
   The entire website is based on 1200px total
*/

* { 
  box-sizing: border-box;
}

h1 { 
  text-transform: uppercase;
  text-align: center; 
  font-family: "IMPACT", sans-serif; 
  font-size: 50pt; 
  letter-spacing: 3px; 
}

.row { 
  clear: both; 
}

.col-6 p { 
  text-align: left; 
}

.col-6 { 
  width: 50%; 
}

.col-12{ 
  width: 100%; 
  padding: 0px 20% 0px 20%;
} 
 
.column { 
    float: left; 
 }

section { 
  padding: 30px;   
  text-align: center; 
}

section p { 
  text-align: justify;
}

img { 
  max-width: 100%; 
  margin: auto; 
}
            
          
!
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