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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console