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

              
                <header>

  <h1>This is Edward Morbius's version of a motherfucking website.</h1>


  <aside>And it's <em>even still</em> more fucking perfect than the last guy's. </aside>
  
  <img src="https://picsum.photos/600/400">

</header>

<h2>Seriously, it takes <strike>minimal</strike> a small fucking effort to improve this shit.  </h2>

<p> <strong>14 fucking style rulesets.</strong> </p>

<p>That's how much CSS it took to turn that <a href="http://bettermotherfuckingwebsite.com/">earnest but underachieving shitty attempt</a> into this vastly superior masterpiece. It's so fucking simple and it <em>still </em> has all the glory of the original
  perfect-ass website.</p>

<ul>
  <li>Shit's <em>still </em> lightweight and loads fast </li>
  <li> <em>Still </em> fits on all your shitty screens </li>
  <li> <em>Still </em> looks the same in all your shitty browsers </li>
  <li>The motherfucker's <em>still </em> accessible to every asshole that visits your site </li>
  <li>Shit's <em>still </em> legible and gets your fucking point across </li>
</ul>

<h3>And guess what, motherfucker: </h3>

<p>We stick with the basics of a better motherfucking website, and add just a bit more polish.</p>

<h2>Your motherfucking user knows what motherfucking font they want. Or they're just stupid.</h2>

<p>So fucking give it to them. Set <code>html { font-size: medium; }</code> and use <code>rem</code> units for the rest of your elements. The users who've selected their motherfucking font sizes will appreciate it, and the motherfucking idiots who don't
  know how to will just zoom your site like they would any other.</p>


<h2>Let it breathe &mdash; in text-relative units.</h2>

<p>Yeah, yeah, motherfucker, so you've got your 1.4 unitless line height, and you've specified page margins. But what the fuck are you doing giving content width in <em>motherfucking pixels</em>? Scannable line length is determined by the <em>fucking text content</em>.
  So use <em> fucking text-based units</em>. Those are <code>em</code> units. No, motherfucker, not <code>rem</code>, this isn't some fucking page-relative size, it's relative <em>to the motherfucking current text</em></p>


<h2>For fucks, sake, white isn't "a little less contrast"</h2>

<p>So set that motherfucking background color to something other than straight white. Grey's depressing. #fffff6 is pretty fucking sweet. And I'm not fucking obsessing over "just 7 rules", so bite me.</p>


<h2>Details Fucking Matter</h2>

<p>You don't have to turn into a motherfucking graphics design weenie, but some small touches make a difference.</p>

<h3>Distinguish your fucking headers</h3> A little color, some extra breathing room, and styles to distinguish your <code>&lt;h1&gt;</code> from <code>&lt;h6&gt;</code> headers doesn't hurt.

<h4>Subordinate headings should look subordinate</h4>

<p>I mean, this clearly isn't a level-one heading, right?</p>

<h5>And so on</h5>

<p>We're getting down the fucking stack.</p>

<h6>Your lowest fucking level heading should fucking look it.</h6>

<p>Right, motherfuckers?</p>


<h3>Going beyond the basics for links doesn't hurt</h3>

<p>Sure, a <a href="http://example.com/">standard hypertext anchor</a> is easy to spot if you don't hide it, but with minimal effort, additional hover and active effects give confidence that you're selecting what you actually think you're aiming for.</p>


<h2>Yes, this is <em>still</em> fucking satire, you fuck </h2>

<p>I love what the creator of <a href="http://motherfuckingwebsite.com/">this site's inspiration </a> did, and where <a href="http://bettermotherfuckingwebsite.com/">this motherfucker</a> ran with it. I'm <em>still</em> saying is that it's really simple
  to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.</p>

<h2>And no, you don't have to fucking love all my shit</h2>

<p>It's an illustration. What you can do with some pretty minimal rules, without totally fucking up a user's experience. I've left out some of my usual tricks, and there may be stuff here you don't fucking like.</p>

<p>Well fuck you. But you know, I'm OK with that.</p>

<p>Just fucking <em>think</em> when you're styling your own fucking pages, know when to tell your fucking clients to fucking fuck off, and remember: a fucking little goes one fucking long way.</p>
              
            
!

CSS

              
                html {
  font-size: medium;
}

body {
  background-color: #fffff6;
  color: #330;
  font-family: georgia, times, serif;
  margin: 2rem auto 8rem;
  max-width: 40em;
  padding: 0 2em;
  width: auto;
  font-size: 1rem;
  line-height: 1.4;
}

a {
  color: #1e6b8c;
  font-size: 1em;
  text-decoration: none;
  transition-delay: 0.1s;
  transition-duration: 0.3s;
  transition-property: color, background-color;
  transition-timing-function: linear;
}

a:visited {
  color: #6f32ad;
  font-size: 1em;
}

a:hover {
  background: #f0f0ff;
  font-size: 1em;
  text-decoration: underline;
}

a:active {
  background-color: #427fed;
  color: #fffff6;
  color: white;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #703820;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 2em;
}

h1 {
  font-size: 2.2em;
  text-align: center;
}

h2 {
  font-size: 1.8em;
  border-bottom: solid 0.1rem #703820;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.3em;
  text-decoration: underline;
}

h5 {
  font-size: 1.2em;
  font-style: italic;
}

h6 {
  font-size: 1.1em;
  margin-bottom: 0.5rem;
  color: #330;
}

pre,
code,
xmp {
  font-family: courier;
  font-size: 1.1rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

img {
  margin: 2em auto;
  padding: 1em;
  outline: solid 1px #ccc;
  max-width: 90%;
  }
              
            
!

JS

              
                
              
            
!
999px

Console