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="row">
<section class="col-4 column">
  <img src="http://davidhurwich.com/des117/codepen/earthquakes.jpg" alt="San Jose Earthquakes" />
  <h2>San Jose Earthquakes</h2>
  <p>
    The San Jose Earthquakes are an American professional soccer team based in San Jose, California, United States, that competes as a member of the Western Conference of Major League Soccer (MLS). The franchise began play in 1996, (originally as the San Jose Clash), as one of the charter clubs of the league. The Earthquakes took part in the first game in MLS history, defeating D.C. United 1–0. The Earthquakes have won two MLS Cup titles, in 2001 and 2003, and two Supporters' Shields in 2005 and 2012. In 2002, the team played in its first CONCACAF Champions Cup (now called the CONCACAF Champions League), making it to the quarterfinals. The team holds a fierce rivalry with the LA Galaxy known as the California Clásico
  </p>
</section>
<section class="col-4 column">
  <img src="http://davidhurwich.com/des117/codepen/galaxy.jpg" alt="LA Galaxy" />
  <h2>LA Galaxy</h2>
  <p>
  The LA Galaxy, also known as the Los Angeles Galaxy, is an American professional soccer franchise based in the Los Angeles suburb of Carson, California, that competes in Major League Soccer (MLS), as a member of the Western Conference of the league. The club began play in 1996 as a charter team in the league.
  </p>
  <p>
The Galaxy was founded in 1994 and is owned by Anschutz Entertainment Group. In their early years, the club played their home games at the Rose Bowl in Pasadena, California. Since 2003, they have played at the StubHub Center in Carson, California. The team holds a fierce rivalry with the San Jose Earthquakes in the California Clásico, and used to play the SuperClasico against city rivals Chivas USA before they folded in 2014.
  </p>
</section>
<section class="col-4 column">
  <img src="http://davidhurwich.com/des117/codepen/sounders.jpg" alt="Seattle Sounders" />
  <h2>Seattle Sounders</h2>
  <p>
  Seattle Sounders FC is an American professional soccer club based in Seattle, Washington. The Sounders compete as a member of the Western Conference of Major League Soccer (MLS) and are the league's current defending champions, having won the 2016 MLS Cup. The club was established on November 13, 2007, and began play in 2009 as an MLS expansion team. The Sounders are the third Seattle soccer club to share the Sounders name being part of a legacy which traces back to the original team of the NASL in 1974.
  </p>
  <p>
The club's majority owner is Adrian Hanauer, and its minority owners are Joe Roth, Paul Allen and Drew Carey. Former USL Sounders coach and assistant coach Brian Schmetzer took over as interim head coach in July 2016 after the departure of Sigi Schmid; Schmetzer was made permanent head coach in November. The Sounders play their home matches at CenturyLink Field. Along with several organized groups, a 53-member marching band called 'Sound Wave' supports the club at each home match. Seattle competes with rival MLS clubs Portland and Vancouver for the Cascadia Cup.
  </p>
</section>
</div>
<div class="row">

<section class="col-4 column">
  <img src="http://davidhurwich.com/des117/codepen/timbers.jpg" alt="Portland Timbers" />
  <h2>Portland Timbers</h2>
  <p>
  The Portland Timbers are an American professional soccer club based in Portland, Oregon. The Timbers compete in Major League Soccer (MLS) as a member club of the league's Western Conference.The Timbers play their home games at Providence Park since 2011 when the team began play as an expansion team in the league.
  </p>
  <p>
The club was founded in 2009, when the city of Portland was awarded an expansion berth to Major League Soccer. The team is owned by Merritt Paulson who acquired the then USL Pro team in 2007. The club is the fourth soccer franchise based in Portland to share the legacy of the Timbers name, which originated with the original team, in the North American Soccer League in 1975.
  </p>
</section>
<section class="column col-4">
  <img src="http://davidhurwich.com/des117/codepen/dynamo.jpg" alt="Houston Dynamo" />
  <h2>Houston Dynamo</h2>
  <p>
  The Houston Dynamo is an American professional soccer club based in Houston, Texas. The franchise competes in Major League Soccer (MLS), as a member of the Western Conference. The Dynamo had first played their home games at Robertson Stadium on the University of Houston campus until 2011. Since 2012, the Dynamo has played home matches at BBVA Compass Stadium, a soccer-specific stadium located in Houston. The team's head coach is Wilmer Cabrera.
  </p>
  <p>
The Dynamo was established on December 15, 2005 when the then owner of the San Jose Earthquakes, Anschutz Entertainment Group, announced that the team was relocating to Houston, Texas after failed attempts in securing a soccer specific stadium in San Jose. The club would then be an expansion team of the league, which began play in 2006. The Dynamo is owned by Gabriel Brener, Jake Silverstein, Ben Guill, and world Olympic boxing champion Oscar De La Hoya.
  </p>
</section>
<section class="column col-4">
  <img src="http://davidhurwich.com/des117/codepen/revolution.jpg" alt="New England Revolution" />
  <h2>New England Revolution</h2>
  <p>
  The New England Revolution is an American professional soccer club based in the Greater Boston area that competes in Major League Soccer (MLS), in the Eastern Conference of the league. It is one of the ten charter clubs of MLS, having competed in the league since its inaugural season.
  </p>
  <p>
The club is owned by Robert Kraft, who also owns the New England Patriots along with his son, Jonathan Kraft and Dr. Giancarlo Perez, who is a major investor of the club. The name "Revolution" refers to the New England region's significant involvement in the American Revolution that took place from 1775-1783.
  </p>
</section>
</div>
            
          
!
            
              .row {
  clear: both;
}

.column {
  float:left;
}


img { max-width: 100%; }

@media screen and (min-width: 955px){
  .col-4 {
    width: 33.33%;
  }
}

@media screen and (min-width:450px) and (max-width: 954px){
  .col-4 {
    width: 50%;
  }
}

@media screen and (max-width:449px){
  .col-4 {
    width: 100%;
  }
}
            
          
!
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