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.

            
              <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<main>
  <img src="angelina-jolie.jpg" style="float:left" alt="Photograph of Angelina Jolie in her role as Jane Smith in the movie Mr. & Mrs. Smith" class="headerimg"><img src="brad-pitt.jpg" style="float:right" alt="Photograph of Brad Pitt in his role as John Smith in the movie Mr. & Mrs. Smith"
    class="headerimg">
  <h1>Mr. <span>&amp;</span> Mrs. Smith</h1>

  <h2>1<sup>st</sup> November, 2013</h2>
  <h2>Review by Dudley Storey</h2>
  <p>While perhaps best remembered as the movie in which Angelina Jolie and Brad Pitt became star-crossed lovers, <cite>Mr. &amp; Mrs. Smith</cite> deserves more attention than your typical A-list action movie. In particular, the film’s trenchant critique
    of suburbia, marriage, and the lies we tell each other every day make it a relevant, contemporary movie.
    <p>As the film is now almost 10 years old, I will be revealing some mild spoilers in this review, but it should not be enough to disturb enjoyment of the movie.

      <h3>A Slow Death In Suburbia</h3>
      <p>The very first scene of the movie with John (Pitt) and Jane (Jolie) Smith features them in the modern suburban torture chamber: therapy in the office of a marriage counsellor. While denying that they need any kind of help (“Just a maintenance checkup”
        John claims) it is obvious that they are deeply uncomfortable in each other’s presence, a rawness helped by the fact that this was the first scene shot in the film.<sup><a href="#footnote">*</a></sup>
        <p>As told in flashback, the couple originally met under dramatic and emotionally heightened circumstances in Panama, framing both their attraction and the cause of their self-destruction. Each is an assassin for a rival company, but instinctively
          uses their cover as a civilian contractor from the moment they meet, successfully fooling each other for the first six years of their relationship. It is this same deceit that threatens the end of their marriage.
          <p>In this way the film is very similar to <cite><a href="http://imdb.com/title/tt0111503">True Lies</a></cite>, the action-comedy film directed 10 years earlier by James Cameron. However, in that film the deceit was almost entirely one-sided,
            the manipulation significantly more disturbing, and (being a Cameron-Schwarzenegger film) focused much more on spectacle.
            <p>While seeing each other as equals, it quickly becomes apparent that John and Jane are very different people. Jane is reserved, precise, analytical, poised; her husband is rough-and-tumble, raw and improvisational. Every remaining bit of their
              energy is devoted to maintaining a successful cover: a fine house, the latest model cars. But it is only in danger and risk that they come alive: life in suburbia is boredom and ennui, and it’s clear that they can’t wait to escape the prison
              they have built for themselves each day.

              <h3>Marching Orders</h3>
              <p>When their respective employers discover who they work for, John and Jane are set to kill each other. While these first attempts fail, the seething resentment of both wife and husband fuels a series of mounting revenge attacks. Their destruction
                comes almost gleeful – you can see them actually <em>enjoying</em> themselves when they are hunting each other, in stark contrast to the the passive-aggressive competition of their marriage – and ultimately frees them from the web of lies
                they have spun.
                <p><img src="gunfight-in-the-department-store.jpg" alt="Photograph of the climactic gunfight in the department store in the film Mr. & Mrs. Smith" class="full-width">Having failed in eliminating their rival, the previously inimical companies
                  contracting John and Jane temporarily put aside their differences to end the problem of the Smiths, driving them closer together in survival instinct. The last third of the movie is the fight of John and Jane against the joined forces
                  of their companies, culminating in a final showdown reminiscent of the climax in <cite><a href=http://imdb.com/title/tt0064115/>Butch Cassidy and the Sundance Kid</a></cite>.

                  <h3>Conclusion</h3>
                  <p>While it is not without its faults (in particular Vincent Vaughn’s misogynistic, eternally frustrated character has become all too familiar in too many movies), the film also has a significant share of charm. The chemistry between Pitt
                    and Jolie is natural and unfeigned, and the film mixes great action sequences with a barded critique of modern suburban life, and it remains, on the whole, one of my favourite films.</p>

                  <p>Rating: &#9733; &#9733; &#9733; &#9733; &#9733;

                    <p id="footnote"><sup>*</sup> Sadly, the rest of the film was not shot chronologically: I was feel that doing so imparts an extra emotional verisimilitude to an actor’s performance, as they can express the emotional arc of their character in the same
                      sequence that the audience experiences it.</p>
</main>
            
          
!
            
              main {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-family: Adobe Garamond Pro, Georgia, serif;
  font-weight: 100;
  font-size: 5rem;
  text-align: center;
  line-height: 1;
}

h1 span {
  color: red;
}

h2,
h3 {
  font-size: 1.3rem;
  margin-top: 0;
}

sup {
  line-height: 0;
}

sup a {
  text-decoration: none;
}

h2,
h3,
p {
  font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
  font-weight: 300;
}

h3 {
  font-weight: 400;
  font-size: 1.6rem;
}

p {
  line-height: 1.5;
  font-size: 1.3rem;
}

p,
h2,
h3 {
  margin-left: 21%;
  margin-right: 21%;
}

.full-width {
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
}

.headerimg {
  width: 21vw;
  height: auto;
}

@media all and (max-width: 600px) {
  h2 {
    clear: both;
  }
  p,
  h2,
  h3 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  h2 {
    padding-top: 1rem;
  }
}

@media all and (max-width: 500px) {
  h1 {
    margin-bottom: 0;
  }
}
            
          
!
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