Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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

            
              <!DOCTYPE html>
<html>

<head>
  <title>Paper</title>
  <link href="https://fonts.googleapis.com/css?family=Charmonman|Open+Sans|Rouge+Script|Tangerine" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="paper">
      <div class="text-container">
        <div class="header"><b>IN CONGRESS, JULY 4, 1776.</b></div>
        <div class="subtitle"><b>The unanimous Declaration of the thirteen united States of America,</b></div>
        <div class="text-block">
          <div class="text-block-1"><b>When</b> in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws
            of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. <b style="font-family: serif">————</b> We hold these truths to be self-evident,
            that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. <b style="font-family: serif">—</b> That to secure these rights, Governments
            are instituted among Men, deriving their just powers from the consent of the governed, <b style="font-family: serif">—</b> That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to
            abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments
            long established should not be changed for light and transient causes; and accordingly all experience hath shewn that mankind are more disposed to suffer, while evils are sufferable than to right themselves by abolishing the forms to which
            they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide
            new Guards for their future security. <b style="font-family: serif">-</b> Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history
            of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world. <b style="font-family: serif">——</b>            <b>He</b> has refused his Assent to Laws, the most wholesome and necessary for the public good. <b style="font-family: serif">——</b> He has forbidden his Governors to pass Laws of immediate and pressing importance, unless suspended in their
            operation till his Assent should be obtained; and when so suspended, he has utterly neglected to attend to them. <b style="font-family: serif">——</b> He has refused to pass other Laws for the accommodation of large districts of people, unless
            those people would relinquish the right of Representation in the Legislature, a right inestimable to them and formidable to tyrants only. <b style="font-family: serif">——</b> He has called together legislative bodies at places unusual, uncomfortable,
            and distant from the depository of their Public Records, for the sole purpose of fatiguing them into compliance with his measures. <b style="font-family: serif">——</b> He has dissolved Representative Houses repeatedly, for opposing with manly
            firmness his invasions on the rights of the people. <b style="font-family: serif">——</b> He has refused for a long time, after such dissolutions, to cause others to be elected, whereby the Legislative Powers, incapable of Annihilation, have
            returned to the People at large for their exercise; the State remaining in the mean time exposed to all the dangers of invasion from without, and convulsions within. <b style="font-family: serif">——</b> He has endeavoured to prevent the population
            of these States; for that purpose obstructing the Laws for Naturalization of Foreigners; refusing to pass others to encourage their migrations hither, and raising the conditions of new Appropriations of Lands. <b style="font-family: serif">——</b>            He has obstructed the Administration of Justice by refusing his Assent to Laws for establishing Judiciary Powers. <b style="font-family: serif">——</b> He has made Judges dependent on his Will alone for the tenure of their offices, and the
            amount and payment of their salaries. <b style="font-family: serif">——</b> He has erected a multitude of New Offices, and sent hither swarms of Officers to harass our people and eat out their substance. <b style="font-family: serif">——</b>            He has kept among us, in times of peace, Standing Armies without the Consent of our legislatures. <b style="font-family: serif">——</b> He has affected to render the Military independent of and superior to the Civil Power. <b style="font-family: serif">——</b>            He has combined with others to subject us to a jurisdiction foreign to our constitution, and unacknowledged by our laws; giving his Assent to their Acts of pretended Legislation: <b style="font-family: serif">-</b> For quartering large bodies
            of armed troops among us: <b style="font-family: serif">-</b> For protecting them, by a mock Trial from punishment for any Murders which they should commit on the Inhabitants of these States: <b style="font-family: serif">-</b> For cutting
            off our Trade with all parts of the world: <b style="font-family: serif">-</b> For imposing Taxes on us without our Consent: <b style="font-family: serif">-</b> For depriving us in many cases, of the benefit of Trial by Jury: <b style="font-family: serif">-</b>            For transporting us beyond Seas to be tried for pretended offences: <b style="font-family: serif">-</b> For abolishing the free System of English Laws in a neighbouring Province, establishing therein an Arbitrary government, and enlarging
            its Boundaries so as to render it at once an example and fit instrument for introducing the same absolute rule into these Colonies: <b style="font-family: serif">——</b> For taking away our Charters, abolishing our most valuable Laws and altering
            fundamentally the Forms of our Governments: <b style="font-family: serif">-</b> For suspending our own Legislatures, and declaring themselves invested with power to legislate for us in all cases whatsoever. <b style="font-family: serif">-</b>            He has abdicated Government here, by declaring us out of his Protection and waging War against us. <b style="font-family: serif">——</b> He has plundered our seas, ravaged our coasts, burnt our towns, and destroyed the lives of our people.
            <b style="font-family: serif">——</b> He is at this time transporting large Armies of foreign Mercenaries to compleat the works of death, desolation, and tyranny, already begun with circumstances of Cruelty & Perfidy scarcely paralleled in
            the most barbarous ages, and totally unworthy the Head of a civilized nation. <b style="font-family: serif">——</b> He has constrained our fellow Citizens taken Captive on the high Seas to bear Arms against their Country, to become the executioners
            of their friends and Brethren, or to fall themselves by their Hands. <b style="font-family: serif">—</b> He has excited domestic insurrections amongst us, and has endeavoured to bring on the inhabitants of our frontiers, the merciless Indian
            Savages whose known rule of warfare, is an undistinguished destruction of all ages, sexes and conditions. In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered
            only by repeated injury. A Prince, whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people. Nor have We been wanting in attentions to our British brethren. We have warned them from time
            to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have
            conjured them by the ties of our common kindred to disavow these usurpations, which would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce
            in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends. <b style="font-family: serif">——</b></div>

          <div class="text-block-2"><b>We, therefore, the Representatives of the united States of America, in General Congress, Assembled,</b> appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People
            of these Colonies, solemnly <b>publish</b> and <b>declare</b>, That these united Colonies are, and of Right ought to be Free and Independent States, that they are Absolved from all Allegiance to the British Crown, and that all political connection
            between them and the State of Great Britain, is and ought to be totally dissolved; and that as <b>Free and Independent States</b>, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other
            Acts and Things which
            <b>Independent States</b> may of right do. <b style="font-family: serif">——</b> <b>And</b> for the support of this Declaration, with a firm reliance on the protection of Divine Providence, we mutually pledge to each other our Lives, our Fortunes,
            and our sacred Honor.</div>
        </div>
        <div class="SouthCarolina">
          <p>Button Gwinnett</p>
          <p>Lyman Hall</p>
          <p>George Walton</p>
        </div>
        <div class="NorthCarolina">
          <p>William Hooper</p>
          <p>Joseph Hewes</p>
          <p>John Penn</p>
        </div>
        <div class="Massachusetts">
          <p class="Hancock"><b>John Hancock</b></p>
          <p>Samuel Chase</p>
          <p>William Paca</p>
          <p>Thomas Stone</p>
          <p>Charles Carroll of Carrollton</p>
        </div>
        <div class="Pennsylvania">
          <p>Robert Morris</p>
          <p>Benjamin Rush</p>
          <p>Benjamin Franklin</p>
          <p>John Morton</p>
          <p>George Clymer</p>
          <p>James Smith</p>
          <p>George Taylor</p>
          <p>James Wilson</p>
          <p>George Ross</p>
          <p>Caesar Rodney</p>
          <p>George Read</p>
          <p>Thomas McKean</p>
        </div>
        <div class="NewYork">
          <p>William Floyd</p>
          <p>Philip Livingston</p>
          <p>Francis Lewis</p>
          <p>Lewis Morris</p>
        </div>
        <div class="NewHampshire">
          <p>Josiah Bartlett</p>
          <p>William Whipple</p>
          <p>Samuel Adams</p>
          <p>John Adams</p>
          <p>Robert Treat Paine</p>
          <p>Elbridge Gerry</p>
          <p>Stephen Hopkins</p>
          <p>William Ellery</p>
          <p>Roger Sherman</p>
          <p>Samuel Huntington</p>
          <p>William Williams</p>
          <p>Oliver Wolcott</p>
          <p>Matthew Thornton</p>
        </div>
        <div class="SouthCarolina2">
          <p>Edward Rutledge</p>
          <p>Thomas Heyward, Jr.</p>
          <p> Thomas Lynch Jr.</p>
          <p>Arthur Middleton</p>
        </div>
        <div class="Virginia">
          <p>George Wythe</p>
          <p>Richard Henry Lee</p>
          <p>Thomas Jefferson</p>
          <p>Benjamin Harrison</p>
          <p>Thomas Nelson, Jr.</p>
          <p>Francis Lightfoot Lee</p>
          <p>Carter Braxton</p>
        </div>
        <div class="NewJersey">
          <p>Richard Stockton</p>
          <p>John Witherspoon</p>
          <p>Francis Hopkinson</p>
          <p>John Hart</p>
          <p>Abraham Clark</p>
        </div>
      </div>
    </div>
    <footer><a href="https://catalog.archives.gov/id/1656604" target="_blank" rel="noopener noreferrer">Compare to the Original</a></footer>
  </div>
</body>

</html>
            
          
!

CSS

            
              body {
  background-color: #DCDCDC;
  font-family: 'Charmonman', cursive; 
}

.container {
  display: grid;
  grid-template-columns: 1vw repeat(23, 1fr) 1vw;
  grid-template-rows: 1vw repeat(29, 1fr) 4vw;
  justify-items: center;
}

.paper {
    grid-column: 2/25;
    grid-row: 2/31;
    background-color: #F7F5E8;
    color: #413937;
    border-radius: 2px;
    padding: 1vw 3.5vw 0.5vw 3.5vw;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    minmax(8fr, 8fr);
}

.paper:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.text-container {
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: repeat(2, 1fr) auto;
  justiy-content: center;
  justiy-items: center;
}

.header {
  grid-column: 4/15;
  grid-row: span 1;
  font-size: 3.55vw;
  word-spacing: 2vw;
}

.subtitle {
  grid-column: 1/17;
  grid-row: span 1;
  font-size: 4vw;
  font-family: 'Rouge Script', cursive;
}

.text-block {
  grid-column: 1/17;
  font-family: 'Tangerine', cursive;
}

.text-block-1 {
  text-indent: 15vw;
  line-height: 1.7vw;
  font-size: 2.1vw;
}

.text-block-2 {
  text-indent: 4vw;
  line-height: 1.6vw;
  font-size: 2.1vw;
}

.SouthCarolina {
  grid-column-start: 1;
  grid-column-end: span 3;
  font-size: 1.3vw;
  line-height: 0.5vw;
  padding-top: 2vw;
  padding-left: 3vw
}

.NorthCarolina {
  grid-column-start: 4;
  grid-column-end: span 2;
  font-size: 1.3vw;
  line-height: 0.5vw;
  padding-top: 0.8vw;
}

.Hancock {
  font-size: 2.6vw;
}

.Massachusetts {
  grid-column-start: 7;
  grid-column-end: span 3;
  font-size: 1.2vw;
  line-height: 0.3vw;
  padding-left: 0.5vw;
}

.Pennsylvania {
  grid-column: 10 / span 3;
  grid-row: 4 / span 2;
  font-size: 1.3vw;
  line-height: 0.7vw;
  padding-left: 2vw;
}

.NewYork {
  grid-column-start: 13;
  grid-column-end: span 2;
  font-size: 1.3vw;
  line-height: 1vw;
}

.NewHampshire {
  grid-column: span 2 / 17;
  grid-row: span 2;
  font-size: 1.3vw;
  line-height: 0.5vw;
}

.SouthCarolina2 {
  grid-column: 4 / span 3;
  font-size: 1.3vw;
  line-height: 1vw;
}

.Virginia {
  grid-column: 7 / span 3;
  font-size: 1.3vw;
  line-height: 0.8vw;
  padding-top: 2vw;
}

.RhodeIsland {
  grid-column-start: 1;
  grid-column-end: span 2;
  font-size: 1.3vw;
  line-height: 0vw;
}

.Connecticut {
  grid-column: span 2 / 17;
  font-size: 1.3vw;
  line-height: 0.8vw;
}

.NewJersey {
  grid-column: span 2 / 15;
  font-size: 1.3vw;
  line-height: 0.8vw;
  padding-top: 2vw;
}

footer {
  grid-column: 1/ span 31;
  grid-row-start: 32;
  font-size: 1vw;
  background: #205493;
  color: white;
  font-family: 'Open Sans', sans-serif;     
  margin: 1vw 1vw 1vw 1vw;
  padding: 1vw 1vw 1vw 1vw;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    minmax(8fr, 8fr);
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

footer:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
            
          
!

JS

            
              
            
          
!
999px

Console