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

Packages

Add 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 or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <div id="header" class="header">
  <div class="overlay">
    <class="container clearfix">
      <div class="hero-text">
        <div>
          <h1>Demo of Links</h1>
        </div>
        <div>
          <h2>to Sections of the Same Page</h2>
        </div>
        <div class="separator"></div>
        <div>
          <a title="#main" class="button" href="#main">Learn More</a>
        </div>
      </div>
  </div>
</div>
<main id="main">
  <div class="container clearfix">
    <div class="column-1">
      <h2>Main</h2>
      <p><a title="#subsection-1" href="#subsection-1">Skip to Subsection 1</a></p>
      <p>
        Lorem ipsum dolor amet adaptogen VHS tbh, banjo you probably haven't heard of them lomo woke craft beer hella crucifix polaroid humblebrag beard tote bag cray. Kale chips helvetica VHS, DIY next level tacos health goth +1 tumeric iceland. Trust fund paleo
        yuccie, lumbersexual 8-bit raw denim brooklyn marfa lomo. Franzen chia hexagon try-hard. Cardigan unicorn pour-over pok pok helvetica air plant biodiesel gentrify wolf hot chicken marfa williamsburg farm-to-table. Kitsch etsy tattooed hot chicken
        poke aesthetic next level, flannel occupy unicorn put a bird on it. Flannel snackwave fashion axe vegan put a bird on it YOLO church-key raclette enamel pin gochujang tousled. Art party hell of chicharrones aesthetic, everyday carry PBR&B roof
        party 3 wolf moon polaroid humblebrag edison bulb air plant DIY quinoa. Scenester beard glossier food truck, hot chicken tbh vegan authentic selvage. Jianbing tilde PBR&B, squid photo booth hell of selfies hot chicken deep v kogi single-origin
        coffee polaroid. Brunch polaroid vegan pug kombucha af tilde selvage iPhone. Bicycle rights kinfolk swag live-edge etsy fashion axe keytar, tote bag food truck organic paleo. La croix bitters art party, forage seitan shoreditch yr microdosing.
      </p>
      <p>
        Hot chicken fanny pack vaporware, keytar woke selfies hella aesthetic slow-carb everyday carry four dollar toast gentrify normcore letterpress. 8-bit neutra green juice photo booth, tacos hoodie pabst. Cold-pressed hashtag sriracha lumbersexual health
        goth PBR&B listicle tattooed actually small batch man braid.
      </p>
      <h3 id="subsection-1">Subsection 1</h3>
      <p><a title="#subsection-2" href="#subsection-2">Skip to Subsection 2</a></p>

      <p>
        Tacos viral mlkshk beard. Asymmetrical pour-over cronut DIY microdosing. Schlitz lyft poutine, tofu cred man bun PBR&B church-key twee pickled enamel pin taxidermy kale chips narwhal. Kitsch synth mlkshk, offal man braid VHS stumptown skateboard seitan
        hexagon try-hard XOXO blue bottle food truck. Marfa fashion axe ennui tumeric, pinterest prism coloring book pork belly YOLO austin brooklyn. Meggings raw denim distillery enamel pin jean shorts, before they sold out disrupt 3 wolf moon tofu try-hard.
        Marfa narwhal flexitarian chambray ethical.
      </p>
    </div>
  </div>
  <div class="container clearfix">
    <div id="ytown-hero" class="body-hero">
    </div>
  </div>
  <p>
    <pre>st columba cathedral youngstown, ohio by mark l chaves</pre>
  </p>

  <div class="container clearfix">
    <div class="column-1">
      <h3 id="subsection-2">Subsection 2</h3>
      <p>
        Meggings lumbersexual brooklyn hot chicken paleo stumptown cronut taiyaki keffiyeh. Synth irony salvia wayfarers etsy. Shabby chic try-hard poutine mlkshk blog seitan. Helvetica lyft letterpress vape pabst portland. Mixtape shaman franzen taxidermy kogi,
        kale chips gochujang. Forage offal paleo +1 etsy hoodie twee shabby chic master cleanse before they sold out viral. Jean shorts affogato kale chips, brooklyn meggings swag la croix authentic. Blue bottle kinfolk banjo sartorial godard synth typewriter
        pabst waistcoat brunch everyday carry. Quinoa enamel pin pitchfork fixie meggings mixtape deep v banjo mumblecore snackwave actually helvetica. You probably haven't heard of them pug yr, chillwave taxidermy occupy health goth humblebrag pinterest.
        Keytar typewriter taiyaki franzen drinking vinegar, occupy whatever man braid migas.
      </p>
      <p>
        Adaptogen tousled venmo put a bird on it, squid quinoa biodiesel heirloom franzen whatever polaroid chicharrones la croix post-ironic. Four dollar toast chia quinoa thundercats pok pok selvage hexagon locavore twee tilde activated charcoal vape semiotics.
        Trust fund taiyaki craft beer keffiyeh, raclette sriracha lo-fi. Chicharrones unicorn coloring book food truck scenester vice locavore. Sustainable enamel pin flannel farm-to-table letterpress 8-bit venmo. Yr coloring book retro iPhone poke neutra
        selvage. Marfa intelligentsia food truck shoreditch williamsburg. Affogato YOLO pinterest, 8-bit narwhal knausgaard jean shorts deep v. Art party chia etsy fam keffiyeh, biodiesel photo booth shaman chambray. Yuccie shaman stumptown iceland lyft
        sustainable, poutine farm-to-table. Beard quinoa wolf selvage, fanny pack hot chicken wayfarers irony sartorial tofu waistcoat.
      </p>
    </div>
  </div>
</main>
<footer>
  <div class="container clearfix">
    <div class="column-1">
      <h2 id="bottom-nav">Bottom Nav</h2>
      <p>
        <strong>Go to</strong>
        <a title="#header" class="nav-link" href="#header">Top</a>
        <a title="#main" class="nav-link" href="#main">Main</a>
        <a title="#subsection-1" class="nav-link" href="#subsection-1">Subsection 1</a>
        <a title="#ytown-hero" class="nav-link" href="#ytown-hero">Image of Youngstown</a>
        <a title="#subsection-2" class="nav-link" href="#subsection-2">Subsection 2</a>
      </p>
    </div>
  </div>
</footer>
            
          
!
            
              /* Default Formatting */

body {
  text-align: center;
  padding: 0;
  margin: 0;
  font: 1em Helvetica Neue Light, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

p {
  text-align: left;
  margin: 0 0 1em 0;
}

h1,
h2 {
  font-weight: 100;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback if no flexbox support. */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.column-1 {
  float: left;
  width: 70%;
}
.column-2 {
  float: left;
  width: 50%;
}

.column-3 {
  float: left;
  width: 33.333%;
}

.separator {
  padding: 5% 0;
}

/* End Default Formatting */

@media screen and (max-width: 1023.998px) {
  .header {
    background-image: url(https://marklchaves.com/wp-content/uploads/2019/07/arizona-phoenix-art-emily-high-res-ed-cr-wb.jpg);
  }
}

@media screen and (min-width: 1024px) {
  .header {
    background-image: url(https://marklchaves.com/wp-content/uploads/2019/03/rina-jendela-warung-sepeda-motor-1-ed-1024x655.jpg);
    background-attachment: fixed;
  }
}
.header {
  background-size: cover;
  background-position: center;
}
.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
  background: rgba(244, 244, 244, 0.35);
}
.hero-text {
  position: absolute;
  top: 30%;
  left: 5%;
  margin: auto;
  padding: 2em;
  text-align: left;
}

.body-hero {
  padding: 30% 0;
  width: 1280px;
  height: auto;
  background-image: url(https://marklchaves.com/wp-content/uploads/2019/09/youngstown-st-columba-parking-lot-car-bw-md-1280w.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Links/Anchors Styling */

.button {
  padding: 3%;
  border-radius: 5%;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.button:hover {
  background-color: gray;
}

footer {
  margin: 5% 0;
  padding: 3% 0 10% 0;
  background-color: lightgray;
  border-top: 1px solid black;
}
.nav-link {
  padding: 0 3%;
  text-decoration: none;
  color: maroon;
}
.nav-link:hover {
  border-bottom: 2px solid maroon;
}

            
          
!
            
              $(document).ready(function() {
  $(".header").height($(window).height());
  $(".overlay").height($(window).height());
});

            
          
!
999px

Console