octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

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

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console