Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <div class="imgcontainer" >
  <img src="https://d1u4oo4rb13yy8.cloudfront.net/article/ejfjpuhhmt-1533792286.jpg" height="560" width="1339" >
  <div class="topnav">
    <a class="active">Home</a>
    <a href="#about">About</a>
    <a href="#cast">Amy Adams</a>
    <a href="#Soundtrack">Soundtrack</a>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container"><br>
  <h id="about">It’s Hard to Watch <em>Sharp Objects</em>, and Even Harder to Look Away</h>
  <br>
  <br>
  <center><iframe width="640" height="360" src="https://www.youtube.com/embed/JyGOrtpi0WE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center>
  <br>
  <p><u><a href="https://en.wikipedia.org/wiki/Amy_Adams">Amy Adams</a></u> still has cuts on her thumb from where she would rub the screen of a cracked iPhone on the set of her new series <u id="fiction"><a href="https://gillianflynn.fandom.com/wiki/Camille_Preaker">Sharp Objects</a></u>,
    premiering July 8 on <u id="fiction"><a href="https://www.hbo.com/sharp-objects">HBO</u></a>. At first glance, the miniseries looks like a straightforward thriller: Adams plays Camille, an intrepid reporter who returns to her small Missouri hometown
    to investigate the murders of two girls.
    <br>
    <br> But Sharp Objects, based on the first novel by<u id="fiction"><a href="https://en.wikipedia.org/wiki/Gone_Girl_(film)"> Gone Girl author</u></a><u><a href="https://en.wikipedia.org/wiki/Gillian_Flynn"> Gillian Flynn</a></u>, turns out to be something
    much darker and more ambitious than your average whodunit. The true mystery isn’t what happened to the missing girls–it’s what’s haunting Camille, who must confront the ghosts in her relationships with her domineering mother<u><a href="https://en.wikipedia.org/wiki/Patricia_Clarkson"> (Patricia Clarkson)</u></a>
    and estranged half sister <u><a href="https://en.wikipedia.org/wiki/Eliza_Scanlen">(Eliza Scanlen).</u></a>
    <br>
    <br> An alcoholic and a cutter, Camille sustains herself throughout the day by taking sips from a water bottle she covertly fills with vodka and pressing her fingers into those small iPhone fissures. She wears long sleeves to cover bigger wounds:
    the words she has literally carved into her skin. When the first episode of the show premiered at the ATX Television Festival in Austin, the sight of Camille’s exposed and scarred flesh drew gasps from the audience.
    <br>
    <br> During a conversation at a nearby hotel, the series’ director, <u><a href="https://en.wikipedia.org/wiki/Jean-Marc_Vallée">Jean-Marc Vallée</u></a>, reflects on how wearing those prosthetics might affect an actor. “You started the day for three
    hours almost naked in front of a team of special effects and makeup people getting the scars put on,” he says to Adams. “You’ve said that made you very vulnerable.”
    <br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">
  <br>
  <h id="cast"><u id="normal">Spotlight</u>-Amy Adams as Camille Preaker</h>
  <br>
  <br>
  <center><img src="https://d1u4oo4rb13yy8.cloudfront.net/xuridwtyll-1533822251.gif">
  </center>
  <br>
  <h><em>Sharp Objects:</em> The Poignant Story Being Told by Amy Adams’s
    <center>Scars</center>
  </h>
  <br>
  <p>During the first four episodes of Sharp Objects, audiences caught periodic glimpses of Camille Preaker’s scars—words carved into her skin which the character, played by Amy Adams, keeps covered under long sleeves. But on Sunday’s episode,<u id="quote"><a> “Closer,”</a></u>    Camille reveals the horrific extent of her self-harming. After being poked and prodded by her overbearing mother Adora (Patricia Clarkson) during a family shopping trip, Camille finally bursts out of her dressing room in her bra and underwear.
    <br>
    <br> “This is what you wanted, right?” Camille asks Adora, standing nearly naked in the store—her body carved, from neck to ankles, with inflamed words encapsulating her pain. <u id="quote"><a>“Wrong”</a></u> etched across her chest, ugly, primal
    etchings that juxtapose the Laura Ashley pastel florals worn by Camille’s mother and sister.
    <br>
    <br> In Gillian Flynn’s 2006 novel, makeup-effects department head Adrien Morot counted about 50 specific words that Flynn had described as being etched into Camille. In order to completely cover Camille’s body in terms that would be legible to viewers,
    though, Morot calculated that he needed <u id="quote"><a>350 to 400 words total</a></u>—and asked the writers of HBO’s Sharp Objects to generate an additional list that would fit the psychic pain afflicting the show’s protagonist. <u id="quote"><a> “They are words. They are not just cuts,”</a></u>    pointed out Adams’s makeup artist Kate Biscoe. <u id="quote"><a> “They are a meta-narrative, and they have their own story. These words themselves are a road map to this woman’s pain . . . for her, it is a body armor.”</a></u></p>
  <br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">
  <br>
  <h id="Soundtrack">Soundtrack</h>
  <br>
  <br>
  <center><iframe width="640" height="360" src="https://www.youtube.com/embed/DfHtAUy1Rys" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
  <br>
  <br>
  <h>Popular</h>
  <br>
  <table>
    <tr>
      <th>Image</th>
      <th>Artist</th>
      <th>Song</th>
    </tr>

    <tr>
      <td><img id="tableimg" src="https://http2.mlstatic.com/quadro-a4-led-zeppelin-logo-D_NQ_NP_954164-MLB29133486233_012019-F.jpg"></td>
      <td><a href="https://en.wikipedia.org/wiki/Led_Zeppelin">Led Zepplin</a></td>
      <td>In The Evening, I Can't Quit You Baby, Thank You, What Is And What Should Never Be</td>
    </tr>

    <tr>
      <td><img id="tableimg" src="https://media.pitchfork.com/photos/5929a8f513d197565213979d/1:1/w_320/5430784d.jpg"></td>
      <td><a href="https://en.wikipedia.org/wiki/The_Acid">The Acid</a></td>
      <td>Ghost, Tumbling Lights</td>
    </tr>

    <tr>
      <td><img id="tableimg" src="https://www.alexandrastreliski.com/wp-content/uploads/2018/05/inscape-cover-digital-800x800-638x638.png"></td>
      <td><a href="https://www.alexandrastreliski.com/">Alexandra Streliski</a></td>
      <td>Plus Tôt</td>
    </tr>

    <tr>
      <td><img id="tableimg" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d7/Agnes-Obel-Aventine.jpg/220px-Agnes-Obel-Aventine.jpg"></th>
        <td><a href="https://en.wikipedia.org/wiki/Agnes_Obel">Agnes Obel</a></td>
        <td>Chord Left</td>
    </tr>
  </table>
  <br>
  <br>
              
            
!

CSS

              
                body {
  background-color: rgba(0, 0, 0, 0.3);
}
.imgcontainer {
  position: fixed;
}
.container {
  position: relative;
  background-color: #2f2f2f;
}
p {
  margin-left: 200px;
  margin-right: 200px;
  font-family: Times New Roman;
  font-size: 1.5em;
  line-height: 1.7em;
  color: white;
}
h {
  margin-left: 100px;
  margin-right: 100px;
  font-family: Times New Roman;
  font-size: 2em;
  line-height: 1.7em;
  color: white;
}
.topnav {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  height: 5%;
  padding: 1px 1px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  padding-right: 1.5em;
  position: fixed;
  font-size: 1.5em;
  font-family: Century Schoolbook;
  color: white;
}

a {
  text-decoration: none;
  color: white;
}
u {
  color: #00b7eb;
}
#normal {
  color: white;
}
#fiction {
  color: #f8de7e;
}
#quote {
  color: #f06291;
}
table {
  font-family: sans-serif;
  border-collapse: collapse;
  width: 60%;
  margin-left: 230px;
  margin-right: 200px;
  padding: 10px;
}
td,
th {
  border: 1px solid #f1c0e7;
  text-align: left;
  padding: 8px;
  color: white;
}
#tableimg {
  height: 70px;
  width: 70px;
}

              
            
!

JS

              
                /*This is an example of parallax scrolling using only HTML and CSS. I do not own any of the content or the images shown here. Hope you find this helpful!*/
              
            
!
999px

Console