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>
  <a class="logo" id="logo" href="#0">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/noun_369802.svg" alt="" />
    Right Click Productions
 </a>
</header>

<main>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque saepe culpa explicabo! Aperiam adipisci quas recusandae dolorum obcaecati. In minus sunt modi assumenda laborum fuga molestias, error, facilis nobis autem libero amet, earum eaque, sit! Odit alias, sequi ratione repudiandae, libero, suscipit deleniti obcaecati amet nam nisi reiciendis eos. Culpa!</div>
  <div>Reiciendis ullam amet beatae expedita, iste omnis repudiandae delectus illum! Alias labore, velit soluta laborum voluptate consectetur optio impedit quia! Magni sapiente excepturi corporis adipisci consectetur voluptatum provident repellendus error odit ipsum vel reiciendis ipsam sequi optio quos molestiae, quia, placeat atque fugit veritatis labore. Ipsum, illo, eius? Praesentium, magnam!</div>
  <div>Quod accusamus asperiores quam, eos, et temporibus, ex illum quos ipsa suscipit cum nisi exercitationem quis ad vero libero necessitatibus beatae eum fugit molestias ipsum pariatur rerum dignissimos ab. Natus at repellendus, dolor nostrum officia cum expedita saepe laboriosam, architecto corporis beatae. Praesentium voluptas, tenetur asperiores incidunt impedit magnam non.</div>
  <div>Deserunt ab, doloribus, ut ex optio quasi temporibus odit dolorum amet molestiae officia hic harum nesciunt iusto. Amet, vitae molestias enim animi reiciendis delectus reprehenderit repellat rerum sed cum dolorem in, odit sit nobis doloremque neque, culpa error expedita natus minus saepe nemo illum. Sequi necessitatibus sint assumenda illum repellat.</div>
  <div>Delectus distinctio excepturi accusantium molestiae corrupti ex ipsum mollitia quod consequatur aperiam exercitationem minima, doloremque harum quo voluptatibus maxime blanditiis eveniet tempora est necessitatibus cumque ea repudiandae odit laborum consectetur. Id qui, saepe ratione culpa, maxime doloremque. Est, nostrum animi, reiciendis quia accusantium adipisci, magni cumque consectetur consequuntur tempore fugit?</div>
  <div>Perferendis pariatur officiis facere incidunt odio eveniet obcaecati, quidem deserunt, fugit quod voluptates necessitatibus possimus officia, sit cupiditate voluptatem eos in! Dolor nihil sapiente sequi unde. Odio ad quidem corporis error, officiis laborum. Amet cumque expedita ullam culpa itaque temporibus rerum, reprehenderit doloribus atque placeat debitis provident voluptatem consequuntur natus!</div>
  <div>Animi aliquam, similique, quidem amet enim omnis aliquid voluptatum necessitatibus hic et commodi deserunt at error laborum dolores quaerat ab quasi, laudantium vel repellendus voluptatem doloremque optio. Ex, accusamus, ipsum. Laudantium tenetur blanditiis neque velit doloremque et fugit ipsa molestias quae temporibus, consectetur tempore, cumque voluptatibus, delectus aliquam reprehenderit. Fugit.</div>
  <div>Quas laboriosam, explicabo iure. Eum error, saepe facilis sunt doloremque expedita impedit. Corporis, quidem alias voluptates assumenda blanditiis quos doloribus! Aperiam impedit veniam nulla commodi autem inventore ratione non distinctio nesciunt sequi! Aspernatur reprehenderit enim natus iure quaerat amet, doloribus quo sequi quae, necessitatibus dolores id ipsam. Dolore, tempora, sapiente.</div>
  <div>Maxime nesciunt molestias officia nobis voluptatum tempora. Fuga, voluptatibus cumque ratione odit repudiandae accusamus dicta soluta nisi, nobis vel reiciendis commodi, magnam odio officia? Vel ullam fugiat minima odio repellat laboriosam et veniam debitis ipsum totam officiis modi mollitia, aliquid minus alias facilis, quaerat magnam eligendi eum tenetur cupiditate corporis.</div>
</main>

<div class="overlay" id="overlay"></div>

<div class="modal" id="modal">
  <h3>Looking for our logo?</h3>
  <p>You clever thing. We've prepared a <a href="#0">.zip you can download</a>.</p>
  <p><button id="close-modal-button">Close</button></p>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Patua+One);
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Patua One', cursive;
}

header {
  padding: 20px;
  background: #eee;
}

.logo {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  font-size: 28px;
  text-decoration: none;
  color: inherit;
}
.logo >  img {
  width: 50px;
  margin-right: 15px;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 6%;
}
main  > div {
  min-width: 200px;
  max-width: 350px;
  flex: 1;
  background: #ccc;
  margin: 0 3% 3% 0;
  color: #666;
  padding: 20px;
}

.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.overlay.show {
  display: block;
}

.modal {
  position: fixed;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 100px;
  background: white;
  padding: 20px;
  text-align: center;
  display: none;
}
.modal.show {
  display: block;
}
.modal > h3 {
  font-size: 26px;
  color: #900;
}
              
            
!

JS

              
                var logo = document.querySelector("#logo");
var button = document.querySelector("#close-modal-button");
var overlay = document.querySelector("#overlay");
var modal = document.querySelector("#modal");

logo.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  overlay.classList.add("show");
  modal.classList.add("show");
}, false);

button.addEventListener('click', function(event) {
  event.preventDefault();
  overlay.classList.remove("show");
  modal.classList.remove("show");
}, false);

              
            
!
999px

Console