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.

            
              <article id="washington">
        <img src="http://www.davidhurwich.com/des117/codepen/washington.jpg" alt="George Washington">
        <h2>George Washington</h2>
        <p>George Washington was an American politician and soldier who served as the first President of the United States from 1789 to 1797 and was one of the Founding Fathers of the United States. He served as Commander-in-Chief of the Continental Army during the American Revolutionary War, and later presided over the 1787 convention that drafted the United States Constitution. He is popularly considered the driving force behind the nation's establishment and came to be known as the "father of the country," both during his lifetime and to this day.</p>
        <a href="#">George Washington</a>
    </article>
    <article id="kennedy">
        <img src="http://www.davidhurwich.com/des117/codepen/kennedy.jpg" alt="JFK">
        <h2>John Kennedy</h2>
        <p>John Fitzgerald "Jack" Kennedy (May 29, 1917 – November 22, 1963), commonly referred to by his initials JFK, was an American politician who served as the 35th President of the United States from January 1961 until his assassination in November 1963. The Cuban Missile Crisis, the Bay of Pigs Invasion, the Nuclear Test Ban Treaty, the establishment of the Peace Corps, developments in the Space Race, the building of the Berlin Wall, the Trade Expansion Act to lower tariffs, and the Civil Rights Movement all took place during his presidency. Kennedy was a member of the Democratic Party, and his New Frontier domestic program was largely enacted as a memorial to him after his death. Kennedy also established the Presidential Medal of Freedom in 1963.</p>
        <a href="#">John F. Kennedy</a>
    </article>
    <article id="lincoln">
        <img src="http://www.davidhurwich.com/des117/codepen/lincoln.jpg" alt="Abe Lincoln">
        <h2>Abraham Lincoln</h2>
        <p>Abraham Lincoln  was an American politician and lawyer who served as the 16th President of the United States from March 1861 until his assassination in April 1865. Lincoln led the United States through its Civil War—its bloodiest war and perhaps its greatest moral, constitutional, and political crisis. In doing so, he preserved the Union, abolished slavery, strengthened the federal government, and modernized the economy.</p>
        <a href="#">Abraham Lincoln</a>
    </article>
    <article id="nixon">
        <img src="http://www.davidhurwich.com/des117/codepen/nixon.jpg" alt="Nixon">
        <h2>Richard Nixon</h2>
        <p>Richard Milhous Nixon (January 9, 1913 – April 22, 1994) was an American politician who served as the 37th President of the United States from 1969 until 1974, when he became the only U.S. president to resign from office. He had previously served as a U.S. Representative and Senator from California and as the 36th Vice President of the United States from 1953 to 1961 under the presidency of Dwight D. Eisenhower.
        </p>
        <p>

Nixon was born in Yorba Linda, California. After completing his undergraduate studies at Whittier College, he graduated from Duke University School of Law in 1937 and returned to California to practice law. He and his wife Pat moved to Washington in 1942 to work for the federal government. He subsequently served on active duty in the U.S. Navy Reserve during World War II. Nixon was elected to the House of Representatives in 1946 and to the Senate in 1950. His pursuit of the Hiss Case established his reputation as a leading anti-communist, and elevated him to national prominence. He was the running mate of Dwight D. Eisenhower, the Republican Party presidential nominee in the 1952 election. Nixon served for eight years as vice president. He waged an unsuccessful presidential campaign in 1960, narrowly losing to John F. Kennedy, and lost a race for Governor of California to Pat Brown in 1962. In 1968, he ran for the presidency again and was elected by defeating incumbent Vice President Hubert Humphrey.</p>
        <a href="#">Richard Nixon</a>
    </article>
    <article id="jefferson">
        <img src="http://www.davidhurwich.com/des117/codepen/thomasjefferson.jpg" alt="Jefferso">
        <h2>Thomas Jefferson</h2>
        <p>Thomas Jefferson (April 13 [O.S. April 2] 1743 – July 4, 1826) was an American Founding Father who was the principal author of the Declaration of Independence and later served as the third President of the United States from 1801 to 1809. Prior thereto, he was elected the second Vice President of the United States, serving under John Adams from 1797 to 1801. A proponent of democracy, republicanism, and individual rights motivating American colonists to break from Great Britain and form a new nation, he produced formative documents and decisions at both the state and national level.
        </p>
        <a href="#"> Thomas Jefferson</a>
    </article>
    <article id="wilson">
        <img src="http://www.davidhurwich.com/des117/codepen/woodrow.jpg" alt="Woodrow Wilson">
        <h2>Woodrow Wilson</h2>
        <p>homas Woodrow Wilson  was an American politician and academic who served as the 28th President of the United States from 1913 to 1921. Born in Staunton, Virginia, he spent his early years in Augusta, Georgia and Columbia, South Carolina. Wilson earned a PhD in political science at Johns Hopkins University, and served as a professor and scholar at various institutions before being selected as President of Princeton University, a position he held from 1902 to 1910. In 1910, he was the New Jersey Democratic Party's gubernatorial candidate and was elected the 34th Governor of New Jersey, serving from 1911 to 1913. In the 1912 presidential election, Wilson benefited from a split in the Republican Party to win the presidency, gaining a large majority in the Electoral College and a 42% plurality of the popular vote in a four–candidate field. He was the first Southerner elected as president since Zachary Taylor in 1848, and Wilson was a leading force in the Progressive Movement, bolstered by his Democratic Party's winning control of both the White House and Congress in 1912.</p>
        <a href="#"> Woodrow Wilson</a>
    </article>
    <article id="reagan">
        <img src="http://www.davidhurwich.com/des117/codepen/reagan.jpg" alt="Ronald Reagan">
        <h2>Ronald Reagan</h2>
        <p>Entering the presidency in 1981, Reagan implemented sweeping new political and economic initiatives. His supply-side economic policies, dubbed "Reaganomics", advocated tax rate reduction to spur economic growth, control of the money supply to curb inflation, economic deregulation, and reduction in government spending. In his first term he survived an assassination attempt, spurred the War on Drugs, and fought public sector labor. Over his two terms, the economy saw a reduction of inflation from 12.5% to 4.4%, and an average annual growth of real GDP of 3.4; while Reagan did enact cuts in domestic discretionary spending, tax cuts and increased military spending contributed to increased federal outlays overall, even after adjustment for inflation. During his re-election bid, Reagan campaigned on the notion that it was "Morning in America", winning a landslide in 1984 with the largest electoral college victory in history. Foreign affairs dominated his second term, including ending of the Cold War, the bombing of Libya, and the Iran–Contra affair. Publicly describing the Soviet Union as an "evil empire", and during his famous speech at the Brandenburg Gate, President Reagan challenged Gorbachev to "tear down this wall!". He transitioned Cold War policy from détente to rollback, by escalating an arms race with the USSR while engaging in talks with Soviet General Secretary Mikhail Gorbachev, which culminated in the INF Treaty, shrinking both countries' nuclear arsenals.[1] Reagan's presidency came during the decline of the Soviet Union and just ten months after the end of his term, the Berlin Wall fell, and on December 26, 1991, nearly three years after he left office, the Soviet Union collapsed.</p>
        <a href="#">Ronald Reagan</a>
    </article>
    <article id="obama">
        <img src="http://www.davidhurwich.com/des117/codepen/obama.jpg" alt="Barack Obama">
        <h2>Barack Obama</h2>
        <p>Obama was born in Honolulu, Hawaii, two years after the territory was admitted to the Union as the 50th state. He grew up mostly in Hawaii, but also spent one year of his childhood in Washington State and four years in Indonesia. After graduating from Columbia University in 1983, he worked as a community organizer in Chicago. In 1988 Obama enrolled in Harvard Law School, where he was the first black president of the Harvard Law Review. After graduation, he became a civil rights attorney and professor, teaching constitutional law at the University of Chicago Law School from 1992 to 2004. Obama represented the 13th District for three terms in the Illinois Senate from 1997 to 2004, when he ran for the U.S. Senate. Obama received national attention in 2004, with his unexpected March primary win, his well-received July Democratic National Convention keynote address, and his landslide November election to the Senate. In 2008, Obama was nominated for president, a year after his campaign began, and after a close primary campaign against Hillary Clinton. He became president-elect after defeating Republican nominee John McCain in the general election, and was inaugurated on January 20, 2009. Nine months later, Obama was named the 2009 Nobel Peace Prize laureate.</p>
        <a href="#">Barack Obama</a>
    </article>
            
          
!
            
              body { 
  width: 1000px;
  background-color: lightgrey;
  padding: 0px;
  margin: 0px;
}

#washington { 
  width: 470px;
  float: left;
  border: 5px solid brown;
  padding: 5px; 
  margin:  5px; 
}

#kennedy { 
  width: 470px; 
  float: left;
  padding: 5px; 
  border: 5px solid brown;
  margin: 5px;
}

#lincoln { 
  width: 303px; 
  float: left;
  border: 5px solid brown;
  padding: 5px; 
  margin:  5px; 
  clear: both;
}

#nixon { 
  width: 303px; 
  float: left; 
  clear: right;
  border: 5px solid brown;
  padding: 5px; 
  margin: 5px; 
}

#wilson { 
  clear:left;
  width: 720px;
  float: left;
  border: 5px solid brown;
  padding: 5px; 
  margin: 5px; 
}

#jefferson { 
  width: 303px;
  float: left;
  border: 5px solid brown;
  padding: 5px; 
  margin: 5px; 
}

#reagan { 
  width: 220px;
  float: left;
  border: 5px solid brown;
  padding: 5px; 
  margin: 5px; 
}

#obama { 
  width: 970px; 
  clear: both;
  border: 5px solid brown;
  padding: 5px; 
  margin: 5px; 
  clear: both; 
}
            
          
!
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