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 id="nav">
  <a id="nav-home"> Home </a>
  <a id="nav-about"> About </a>
  <a id="nav-hamilton"> Hamilton </a>
  <a id="nav-french"> French </a>
</div>
<div id="home" class="container">
  
  <h1>Cami Redford</h1>
  
  <p>
    Welcome to the website all about Cami Redford!
  </p>
  
  <br> 
  
  <p class="accent">
    <i>Fast Facts about Cami Redford:</i>
  </p>
  
  <p>
    <ul>
      <li>Age: 14</li>
      <li>Siblings: 3</li>
    </ul>
  </p>
  
</div> <!-- ends first div -->

<!-- begins second div -->

<div id="about" class="container">
  <h2>About the author</h2>
  <img src="http://charlottemagazine-images.dashdigital.com/images/cache/cache_0/cache_9/cache_1/Hamilton400-aafdb190.jpeg?ver=1453860567&aspectratio=1"/>
  <p>
    My name is <strong>Cami Redford</strong> and I love Hamilton, spaghetti, and Harry Potter.
  </p>
</div>

<div id="hamilton" class="container">
  
  <h1>ALEXANDER HAMILTON</h1>
  <img src="https://d2npu017ljjude.cloudfront.net/images/custom/w350/17344-2.jpg" alt="lin-manuel miranda">
  <h4>Guns and Ships</h4>
  <p><strong>Key:</strong><br>
    <span class="burr">blue</span> = Aaron Burr<br>
    <span class="ensemble">black</span> = Ensemble<br>
    <span class="lafayette">red</span> = Marquis de Lafayette<br>
    <span class="washington">purple</span> = George Washington</p>
  <p><span class="burr">How does a ragtag volunteer army in need of a shower somehow defeat a global superpower? How do we emerge victorious from the quagmire, leave the battlefield waving Betsy Ross' flag higher? Yo. Turns out we have a secret weapon, an immigrant you know and love who's unafraid to step in. He's constantly confusing confounding the British henchmen. Everyone give it up for America's favorite fighting Frenchman!</span> <span class="ensemble">LAFAYETTE!</span> <span class="lafayette">I'm taking this horse by the reins making redcoats redder with bloodstains.</span> <span class="ensemble">LAFAYETTE!</span> <span class="lafayette">And I'm never gonna stop until I make 'em drop and burn 'em up and scatter their remains I'm <span class="ensemble">LAFAYETTE!</span> <span class="lafayette">Watch me engagin' 'em, escapin' 'em, enragin' 'em I'm</span> <span class="ensemble">LAFAYETTE!</span> <span class="lafayette">I go to France for more funds!</span> <span class="ensemble">LAFAYETTE!</span> <span class="lafayette">I come back with more</span> <span class="ensemble">guns and ships and so the balance shifts.</span> <span class="washington">We rendezvous with Rochambeau consolidate their gifts.</span> <span class="lafayette">We can war at Yorktown cut them off at sea but for this to succeed there is someone else we need.</span> <span class="washington">I know.</span> <br>
    <span class="ensemble">HAMILTON!</span> <span class="lafayette">Sir he knows what to do in a trench, ingenuitive and fluent in French, I mean</span> <span class="ensemble">HAMILTON.</span> <span class="lafayette">Sir you're gonna have to use him eventually, what's he gonna do on the bench, I mean</span> <span class="ensemble">HAMILTON</span> <span class="lafayette">no one has more resilience or matches my practical tactical brilliance.</span> <span class="ensemble">HAMILTON</span> <span class="lafayette">you want to fight for your land back?</span> <span class="ensemble">HAMILTON</span> <span class="washington">I need my right hand man back.</span> <span class="lafayette">Yeah, uh get your right hand man back. Ya know ya gotta get yo right hand man back. I mean you gotta put some thought into the letter but the sooner the better to get yo right hand man.</span> <br>
  <span class="washington">Alexander Hamilton, troops are waiting in the field for you. If you join us right now, together, we can turn the tide, oh, Alexander Hamilton I have soldiers that will yield for you. If we manage to get this right, they'll surrender by early light, the world will never be the same, Alexander...</p>
  
    
    <h4>The Schuyler Sisters</h4>
    <p><strong>Key:</strong><br>
      <span class="burr">blue</span> = Aaron Burr<br>
      <span class="ensemble">black</span> = Ensemble<br>
      <span class="angelica">orange</span> = Angelica Schuyler<br>
      <span class="eliza">light blue</span> = Eliza Schuyler<br>
      <span class="peggy">pink</span> = Peggy Schuyler<br>
      <span class="sisters">yellow</span> = Schuyler Sisters<br>
      <span class="younger">light green</span> = Peggy and Eliza<br>
      <span class="men">gray</span> = Men</p>
    <p><span class="burr">There's nothing rich folks love more than going downtown and slummin' it with the poor. They pull up in their carriages and gawk at the students in the common just to watch 'em talk. Take Phillip Schuyler, the man is loaded. Uh oh, but little does he know that his daughters Peggy, Angelica, Eliza sneak into the city just to watch all the guys at</span> <span class="ensemble">Work, work!</span> <span class="angelica">Angelica!</span> <span class="ensemble">Work, work!</span> <span class="eliza">Eliza!</span>  <span class="peggy">And Peggy!</span> <span class="sisters">The Schuyler sisters.</span> <span class="angelica">Angelica.</span> <span class="peggy">Peggy.</span> <span class="eliza">Eliza!</span> <span class="ensemble">Work!</span> <span class="peggy">Daddy said to be home by sundown.</span> <span class="angelica">Daddy doesn't need to know.</span> <span class="peggy">Daddy said not to go downtown.</span> <span class="eliza">Like I said, you're free to go.</span> <span class="angelica">But- look around, look around, the revolution's happening in New York.</span> <span class="younger">New York!</span> <span class="ensemble">Angelica...work!</span> <span class="peggy">It's bad enough Daddy wants to go to war.</span> <span class="eliza">People shouting in the square.</span> <span class="peggy">It's bad enough there'll be violence on our shore.</span> <span class="angelica">New ideas in the air! Look around, look around--</span> <span class="eliza">Angelica, remind me what we're looking for.</span> <span class="men">She's looking for me!</span> <span class="angelica">Eliza, I'm looking for a mind at work!</span> <span class="ensemble">Work, work!</span> <span class="angelica">I'm looking for a mind at work!</span> <span class="ensemble">Work, work!</span> <span class="angelica">I'm looking for a mind at work!</span> <span class="ensemble">Work, work!</span> <span class="angelica">Woah!</span> <span class="sisters">Woah! Work!</span> 
    <span class="burr">Wooh, there's nothing like summer in the city. Someone in a rush next to someone looking pretty. Excuse me miss, I know it's not funny, but your perfume smells like your daddy's got money. Why you slumming in the city in your fancy heels? You searching for an urchin who can give you ideals?</span> <span class="angelica">Burr, you disgust me.</span> <span class="burr">Ah, so you've discussed me. I'm a trust fund, baby you can trust me.</span> <span class="angelica">I've been reading 'Common Sense' by Thomas Paine. So men say that I'm intense or I'm insane. You want a revolution? I want a revelation. So listen to my declaration:</span> <span class="sisters">"We hold these truths to be self-evident that all men are created equal."</span> <span class="angelica">And when I meet Thomas Jefferson</span> <span class="ensemble">(unh!)</span> <span class="angelica">I'mma compel him to include women in the sequel,</span> <span class="sisters">work!</span>
    <span class="eliza">Look around, look around, at how lucky we are to be alive right now.</span> <span class="younger">Look around, look around, at how lucky we are to be alive right now.</span> <span class="sisters">History is happening in Manhattan and we just happen to be in the greatest city in the world. In the greatest city in the world!</span>
    <span class="angelica">Cause I've been reading Common Sense by Thomas Paine</span> <span class="younger">(look around, look around).</span> <span class="angelica">So men say that I'm intense or I'm insane</span> <span class="younger">(the revolution's happening in)</span> <span class="angelica">You want a revolution? I want a revelation. So listen to my declaration</span> <span class="younger">(New York! In New York!)</span> <span class="sisters">We hold these truths to be self-evident, that all men are created equal. Look around, look around, at how lucky we are to be alive right now. History is happening in Manhattan and we just happen to be in the greatest city in the world. In the greatest city in the world!</span>
    <span class="ensemble">(Work, work)</span> <span class="angelica">Angelica!</span>
    <span class="ensemble">(Work, work)</span> <span class="eliza">Eliza!</span>
    <span class="ensemble">(Work, work)</span> <span class="peggy">And Peggy!</span> 
    <span class="sisters">The Schuyler sisters! We're looking for a mind at work. Hey! Hey!</span> <span class="angelica">Woah!</span> <span class="sisters">In the greatest city in the greatest city in the world!</span> <span class="ensemble">In the greatest city in the world!</span> 
</div>

    
    
<div id="french" class="container">
  <h2>French</h2>
  <p>Bonjour, readers. I've been learning French on Duolingo for a few weeks now. So far I haven't learned much useful phrases, but I can say <span title="I eat butter" class="translate">je mange du buerre</span>.
    <br><img src="https://light-house.co.uk/wp-content/uploads/2013/03/French-Flag.jpg"/>
</div>


            
          
!
            
              body {
  background: url('http://static6.depositphotos.com/1069468/624/i/950/depositphotos_6244550-stock-photo-spaghetti-noodles-in-tomato-sauce.jpg');
  background-size: cover;
  margin-top: 50px;
  text-align: center;
  font-family: 'Verdana';
  font-size: 30px;
  color: darkgreen; /* default text color */
}

/* when class="container" */
.container {
  margin: 0 auto; /* centers the div */
  margin-bottom: 50px; /* adds space below */
  width: 75%; /* can also be in pixels (px) */
  padding: 10px; /* adds space inside edges */
  background-color: lightblue;
  border: 15px solid purple;
}

/* for hyperlinks */
a {
  color: darkblue;
}
a:hover {
  color: white;
  background-color: darkgreen;
}

/* when class="accent" */
.accent {
  color: hotpink;
  font-weight: bold;
}

ol {
  text-align: left;
}

/* when class="source" */
.source {
  font-size: 14px;
}

/* for all images */
img {
  width: 50%;
}
#nav {
  text-align: right;
  margin: 50px;
  background: pink;
  text-align: center;
}
#nav-home, #nav-about, #nav-hamilton, #nav-french {
  margin: 50px;
  cursor: pointer;
}

.translate {
  color: blue;
}

.burr {
  color: blue;
}
.ensemble {
  color: black;
}
.lafayette {
  color: red;
}
.washington {
  color: purple;
}
.angelica {
  color: orange;
}
.eliza {
  color: cyan;
}
.peggy {
  color: fuchsia;
}
.sisters {
  color: yellow;
}
.younger {
  color: limegreen;
}
.men {
  color: gray;
}
            
          
!
            
              $("#about").hide();
$("#hamilton").hide();
$("#french").hide();

$("#nav-about").click(function(){
  $("#about").fadeIn();
  $("#home").hide();
  $("hamilton").hide();
  $("#french").hide();
});

$("#nav-home").click(function(){
  $("#about").hide();
  $("#hamilton").hide();
  $("#home").show();
  $("#french").hide();
});

$("#nav-hamilton").click(function(){
  $("#about").hide();
  $("#home").hide();
  $("#hamilton").show();
  $("#french").hide();
});

$("#nav-french").click(function(){
  $("#about").hide();
  $("#home").hide();
  $("#hamilton").hide();
  $("#french").show();
});

            
          
!
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