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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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

              
                <html>
  <!--
Greetings Coders!

Here my objective is not to create a Pretty 404 page.
But rather provide a quick and dirty example of a [Useful] 404 page.

The assumption of this example is that the user is logged
into a corporate sales automation tool but have pasted into the web browser address bar, or clicked on a link someone sent them in an email, which, although it goes to the site ok, does not go to an actual existing page.

First of all, displaying "404" on the page might mean something to us computer nerds, but not much anybody else.

404 messages (or others like it) intimidate ordinary people.
It means "Page not Found" so, the page should display in plain english that the page was not found! ...

Next, that can still be an anxious moment for the user. The page was not found. The first thing that pops in their mind is: "What SHOULD the page be?"

Provide the common navigation links of your site on your 404 page at the very least!

Provide contextual links based on who the user is to things that are probably important to them at the moment such as links to the recently edited proposals they have been working on. There is an extremely high probability that one of these items is what they were intending to go to on your site in the first place!

Another thought is to provide the users a bit of empowerment...

If, when considering the URL they placed in the browser seems to them that it Should work (and who knows just maybe it should), they can click a button and type in why they think it should be a valid link and that can get submitted to a message queue.

The messages in this queue can be evaluated by staff to determine if anything on the site needs updating.

Clicking the button in this page brings up a mock-up dialog for submitting a reason.
-->
<body onload="pageSetup()" onresize="pageResize()" id="bdy">
  
  <div id="pageHdr">
    Rain Maker Silly Sales Marketing Tool
  </div>
  
  <div id="pageSidebar">
    &nbsp;&nbsp;Site Navigation:
    <ul class="sidebarLinks">
      <li class="sidebarLink">DASHBOARD</li>
      <li class="sidebarLink">PROPOSALS</li>
      <li class="sidebarLink">OPPORTUNITIES</li>
      <li class="sidebarLink">ORDERS</li>
      <li class="sidebarLink">INVOICES</li>
    </ul>
  </div>
  
  <div id="pageContent">
    
    <p class="uhoh">Uh Oh!</p>
    
  This page (the page you are looking at right now)

  does not exist!

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="ithink" onclick="reportLink()">I think it <i>Should</i> Exist!</button>
    
    
    
    <p>Here are some other pages you might want to check out:
    </p>
    
    <table style="width:1060px; height:220px;">
      <tr valign="top">
        <td nowrap width="48%"><b>Your Recent Proposals:</b><br>
        <table style="margin-left:10px;width:500px;">
          <tr>
            <td width="80" class="tblhdr">Prop#</td>
            <td width="*" class="tblhdr">Proposal Name</td>
          </tr>
          <tr>
            <td class="innerCell">09918</td>
            <td class="innerCell"><a href="">Acme Widgets - Structured Deal 2018</a></td>
          </tr>
          <tr>
            <td class="innerCell">03047</td>
            <td class="innerCell"><a href="">Headly Enterprises - Fall Rollout 2018</a></td>
          </tr>
          <tr>
            <td class="innerCell">03061</td>
            <td class="innerCell"><a href="">Codepen LLC - Web Server Deal 2018</a></td>
          </tr>
          <tr>
            <td class="innerCell">02918</td>
            <td class="innerCell"><a href="">Farrara Pan - Atomic Fire Ball Package 2018</a></td>
          </tr>
          <tr>
            <td class="innerCell">01342</td>
            <td class="innerCell"><a href="">AT&amp;T - Router Switch Package 2017</a></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
    </td>
        <td nowrap><b>Your Recent Opportunities:</b><br>
    <table style="margin-left:10px;width:500px;">
          <tr>
            <td width="80" class="tblhdr">Opp#</td>
            <td width="*" class="tblhdr">Opportunity Name</td>
          </tr>
          <tr>
            <td class="innerCell">10928</td>
            <td class="innerCell"><a href="">Microsoft - New Server Rollout 2018</a></td>
          </tr>
      <tr>
            <td class="innerCell">09457</td>
            <td class="innerCell"><a href="">Forest Park Chamber of Commerce - Site 2018</a></td>
          </tr>
      <tr>
            <td class="innerCell">01768</td>
            <td class="innerCell"><a href="">Oracle - Marketing Package 2018</a></td>
          </tr>
      <tr>
            <td class="innerCell">05547</td>
            <td class="innerCell"><a href="">Karnatz Tax Accounting - Web Opp 2018</a></td>
          </tr>
      <tr>
            <td class="innerCell">05549</td>
            <td class="innerCell"><a href="">Downes Hotel Management - Tracking Opp 2018</a></td>
          </tr>
      
        </table>
    </td>
    
      </tr>
    <tr valign="top">
    
      <td nowrap><b>Your Recently Viewed Orders:</b><br>
      <table style="margin-left:10px;width:500px;">
          <tr>
            <td width="80" class="tblhdr">Order#</td>
            <td width="*" class="tblhdr">Order Name</td>
          </tr>
          <tr>
            <td class="innerCell">01963</td>
            <td class="innerCell"><a href="">Highland Park Hospital - Tongue Depressors</a></td>
          </tr>
        <tr>
            <td class="innerCell">01939</td>
            <td class="innerCell"><a href="">Basil Growth Marketing - Multi Process Package</a></td>
          </tr>
        <tr>
            <td class="innerCell">02001</td>
            <td class="innerCell"><a href="">Kubric Direction - Finalcut Server Farm</a></td>
          </tr>
        <tr>
            <td class="innerCell">02900</td>
            <td class="innerCell"><a href="">Starrick Contracting - Solidworks Licenses</a></td>
          </tr>
        <tr>
            <td class="innerCell">04998</td>
            <td class="innerCell"><a href="">Whole Paycheck - Amazon Rainforest Servers</a></td>
          </tr>
        </table>
    </td>
      <td nowrap><b>Your Recently Viewed Invoices:</b><br>
      <table style="margin-left:10px;width:500px;">
          <tr>
            <td width="80" class="tblhdr">Inv#</td>
            <td width="*" class="tblhdr">Invoice Name</td>
          </tr>
          <tr>
            <td class="innerCell">00978</td>
            <td class="innerCell"><a href="">Bootsies Scratching Posts - Inventory Management System</a></td>
          </tr>
        <tr>
            <td class="innerCell">01541</td>
            <td class="innerCell"><a href="">Joe &amp; Ian's Sports Equipment - Soccer Score Mgr</a></td>
          </tr>
        <tr>
            <td class="innerCell">01545</td>
            <td class="innerCell"><a href="">Notibart Liquidation - Call Center Closing Kits</a></td>
          </tr>
        <tr>
            <td class="innerCell">11002</td>
            <td class="innerCell"><a href="">Lund LLC - Elmo Armature Sets</a></td>
          </tr>
        <tr>
            <td class="innerCell">11003</td>
            <td class="innerCell"><a href="">Yvonne's Occupational Therapy - Splints</a></td>
          </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
    </td>
      </tr>
    </table>    
  </div><!-- end of pageContent block -->
  
  <div id="pageFooter">
    <center>
    &copy; Copyright <span id="">2018</span> 
    Rain Maker Marketing, All Rights Reserved.
    </center>
  </div>
  
  
  <div class = "tint" id="tint"></div>
    <div id="reportLnkDia">
      
      <span class="lblOffurl">Offending URL:</span>
      <input id="pgUrl" readonly>
      <span class="lblReason">Type in why you think this should be a real link:</span>
      <textarea id="txtEntry" rows="12" cols="65"></textarea>
      <button class="btnCancel" onclick="cancelSub()">CANCEL</button>
      <button class="btnSubmit" onclick="doSubmit()">SUBMIT</button>
    
    </div>
</body>
</html>
              
            
!

CSS

              
                
body {
  font-family: Lato, sans-serif;
}

a:visited { color:red;}


#pageHdr {
  position:absolute;
  top:0px;
  left:0px;
  height:119px;
  border:solid black 1px;
  background-color:black;
  color:white;
  -webkit-font-smoothing: antialiased;
  font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
  font-size: 19.5px;
  font-weight: normal;
  padding-top: 15px;
  padding-left: 60px;
}

#pageSidebar {
  position:absolute;
  top:120px;
  left:0px;
  width:159px;
  border:solid black 1px;
  background-color:#1A1B1F;
  padding-top:6px;
  color:#FEEBEB;
}

#pageContent {
  position:absolute;
  top:120px;
  left:160px;
  padding-left:18px;
  border:black 1px;
  overflow:auto;
  background-color:#36383F;
  color:white;
  z-index:100;
}

#pageFooter {
  position:absolute;
  left:0px;
  border:solid white 1px;
  height:80px;
  background-color:white;
  border-top:solid red 2px;
}

#pgUrl {
  color:red;
}

.sidebarLinks {
  padding:10px;
  margin:0;
  list-style-type:none;
}

.sidebarLink {
  font-weight:normal;
  line-height:22pt;
  color:#A9ACB7;
  cursor:pointer;
  text-decoration:underline;
}

.tblhdr {
  background-color:black;
  padding-left:6px;
}

td.innerCell {
  color:black;
  background-color:white;
  padding-left:6px;
  margin:0;
}

.uhoh {
  font-size:26pt;
  font-weight:bold;
  margin-bottom:2px;
  color:red;
}

#reportLnkDia {
  position:absolute;
  top:105px;
  left:175px;
  width:500px;
  height:260px;
  background-color:#EEAFAF;
  color:black;
  border:solid red 3px;
  padding:5px;
  opacity: 1;
  z-index:2001;
  display:none;
}



.lblOffurl {
  position:absolute;
  top:8px;
  font-size:11pt;
}

#pgUrl {
  position:absolute;
  left:112px;
  width:369px;
  border:solid gray 1px;
}

.lblReason {
  position:absolute;
  top:45px;
  left:6px;
  font-size:11pt;
}
#txtEntry {
  position:absolute;
  left:6px;
  top:65px;
}

.btnCancel {
  position:absolute;
  left:6px;
  top:238px;
}

.btnSubmit {
  position:absolute;
  left:80px;
  top:238px;
}

.tint {
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color:black;
  z-index:2000;
  opacity: 0.7;
  display:none;
}
              
            
!

JS

              
                var pg = {};

function pageSetup() {
  var pgUrl = $("#pgUrl")[0];
  var pageHdr = $("#pageHdr")[0];
  var pageSidebar = $("#pageSidebar")[0];
  var pageContent = $("#pageContent")[0];
  var pageFooter = $("#pageFooter")[0];
  var t;
  
  pg.headerHeight = 60;
  pg.footerHeight = 60;
  pg.sidebarWidth = 159;
  //pgUrl.innerHTML = document.location+""
  
  pageHdr.style.height = (pg.headerHeight)+"px";
  pageSidebar.style.width = (pg.sidebarWidth)+"px";
  pageFooter.style.height = (pg.footerHeight)+"px";
  pageFooter.style.lineHeight = pageFooter.style.height;
  
  t = pg.headerHeight + 17;
  pageSidebar.style.top = (t)+"px";
  pageContent.style.top = pageSidebar.style.top;
  
  pageResize();
} // end of function pageSetup()


function pageResize() {
  var pageHdr = $("#pageHdr")[0];
  var pageSidebar = $("#pageSidebar")[0];
  var pageContent = $("#pageContent")[0];
  var pageFooter = $("#pageFooter")[0];
  var bdy = $("#bdy")[0];
  var w = window.innerWidth-65;
  var h = window.innerHeight-2;
  var t;
  var w2,h2;
  
  pageHdr.style.width = w +"px";
  w2 = w - pg.sidebarWidth;
  pageContent.style.width = w2+"px";
 // h2= h-120-83;
  //      119 80
  h2= h-pg.headerHeight-1-pg.footerHeight-25;
  pageContent.style.height = h2+"px";
  pageSidebar.style.height = pageContent.style.height;
  pageFooter.style.width = pageHdr.style.width;
  t= h - pg.footerHeight - 1;
  pageFooter.style.top = t +"px";
}


function reportLink() {
  var tint = $("#tint")[0];
  var reportLnkDia = $("#reportLnkDia")[0];
  var ithink = $("#ithink")[0];
  var pgUrl = $("#pgUrl")[0];
  
  ithink.style.display = "none";
  reportLnkDia.style.display = "block";
  tint.style.display = "block";
  pgUrl.value = document.location+"";
}

function cancelSub() {
  var tint = $("#tint")[0];
  var reportLnkDia = $("#reportLnkDia")[0];
  var ithink = $("#ithink")[0];
  
  ithink.style.display = "";
  reportLnkDia.style.display = "none";
  tint.style.display = "none";
}

function doSubmit() {
  var reportLnkDia = $("#reportLnkDia")[0];
  var s=[];
  
  s[s.length] = "<br>&nbsp;<br>";
  s[s.length] = "<h4>Thankyou for your feedback!</h4>";
  s[s.length] = "<p>";
  s[s.length] = "We will take a look at what you ";
  s[s.length] = "have said and see what we think. ";
  s[s.length] = "</p>";
  s[s.length] = "<p>";
  s[s.length] = "In the mean-time, "
  s[s.length] = "click OK below and see if any of the "
  s[s.length] = "links display will be of help to you. "
  s[s.length] = "</p>";
  s[s.length] = "<button onclick='finishUp()'>OK</button>"
  reportLnkDia.innerHTML = s.join("");
}

function finishUp() {
  var tint = $("#tint")[0];
  var reportLnkDia = $("#reportLnkDia")[0];
  
  reportLnkDia.style.display = "none";
  tint.style.display = "none";
}
              
            
!
999px

Console