CodePen

HTML

            
              <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta NAME='ProgId' content='FrontPage.Editor.Document'>
<meta HTTP-EQUIV='imagetoolbar' CONTENT='no'>
<meta HTTP-EQUIV='Page-Enter' CONTENT='RevealTrans (Duration=1, Transition=12)'>
<meta HTTP-EQUIV='Page-Exit' CONTENT='RevealTrans (Duration=1, Transition=12)'>
<title>ISO Documentation</title>
<style> 
BODY 
{ 
scrollbar-face-color:#D5D5D7; 
scrollbar-shadow-color: #CCCCCC; 
scrollbar-highlight-color: #CCFFFF;
scrollbar-3dlight-color: #3300FF; 
scrollbar-darkshadow-color: #999999;
scrollbar-track-color: #0066FF; 
scrollbar-arrow-color: #6666FF; 
} 
<!-- /* $WEFT -- -- */
  @font-face {
    font-family: Braggadocio;
    font-style:  normal;
    font-weight: normal;
    src: url(../BRAGGAD0.eot);
  }
//-->
</style>
<STYLE TYPE='text/css'>
<!-- /* $WEFT -- -- */
  @font-face {
    font-family: BibleScrT;
    font-style:  normal;
    font-weight: normal;
    src: url(../BIBLESC0.eot);
  }
  @font-face {
    font-family: BlackChancery;
    font-style:  normal;
    font-weight: normal;
    src: url(../BLACKCH0.eot);
  }
//-->
</STYLE>
<style type=""text/css"">

<!--
                   html
                   {
                           overflow: hidden;
                   }
                   .TopLeft
                   {
                           position: absolute;
                           top: 0px;
                           left: 0px;
                           height: 116px;
                           width: 287px;
                           overflow: hidden;
                           background: #ffffff;
                           background-color: transparent;
                           background-image: url(../images2/bg_1x1.gif);
                           z-index: 1;
	               }
	               .TopCenter
	               {
	                       position: absolute;
	                       top: 0px;
	                       left: 287px;
	                       height: 116px;
						   width: 562px;
                           overflow: hidden;
	                       background: #ffffff;
                           background-color: transparent;
						   background-repeat: no-repeat;
                           -ms-background-repeat: repeat-x;
	                       background-image: url(../images2/bg_1x2.gif);
                           background-size: 100%;
						   z-index: 1;
                    }
	               .TopRight
	               {
	                       position: absolute;
	                       top: 0px;
	                       left: 849px;
	                       height: 203px;
	                       width: 151px;
                           overflow: hidden;
	                       background: #ffffff;
                           background-color: transparent;
						   background-repeat: no-repeat;
	                       background-image: url(../images2/bg_1x3.gif);
	                       z-index: 1;
	               }
	               .LeftMiddle
	               {
	                       position: absolute;
	                       top: 116px;
	                       left: 0px;
	                       height: 123px;
	                       width: 287px;
                           overflow: hidden;
	                       background: #ffffff;
                           background-color: transparent;
						   background-repeat: no-repeat;
	                       background-image: url(../images2/bg_2x1.gif);
	                       z-index: 1;
	               }
	               .MenuBG
	               {
	                       position: absolute;
	                       top: 239px;
	                       left: 0px;
	                       height: 100%;
	                       width: 152px;
                           overflow-x: hidden;
                           overflow-y: auto;
	                       background: #ffffff;
                           background-color: transparent;
						   background-repeat: repeat;
	                       background-image: url(../images2/bg_3x1.gif);
	                       z-index: 1;
	               }
	               .Menu2BG
	               {
	                       position: absolute;
	                       top: 239px;
	                       left: 0px;
	                       height: 100%;
	                       width: 152px;
                           overflow-x: hidden;
                           overflow-y: auto;
	                       background: #ffffff;
                           background-color: transparent;
						   background-repeat: repeat;
	                       background-image: url(../images2/bg_3x1.gif);
                           visibility: hidden;
	                       z-index: 11;
	               }      
				   .MenuButton
	               {
	                       position: absolute;
	                       left:8px;
	                       width: 141px;
	                       background-image: url(../images2/rbcbtnhlt.png);
	                       text-align: center;
	                       z-index: 2;
						   display: block;
	                       font-family: BibleScrT;
	                       margin: 0px;
	                       padding: 0px;
	               }
	               .MenuButton a
	               {
                           display: block; 
	                       font-size: 16px;
	                       width: 141px;
	                       height: 40px;
	                       display: block;
	                       float: left;
	                       text-align: center;
	                       text-decoration: none;
	                       z-index: 2;
	               }
	               .MenuButton img
	               {
                           top: 0px;
	                       width: 141px;
	                       height: 40px;
	                       border: 0px;
	                       z-index: 7;
	               }
	               * html a:hover
	               {
                                visibility: visible;
	               }
	               .MenuButton a:visited
	               {
                                color: #e7e3e3;
	               }
	               .MenuButton a:link
	               {
                                color: #e7e3e3;
	               }
	               .MenuButton a:active
	               {
                                color: #000000;
	               }
	               .MenuButton a:hover
	               {
                                color: #000000;
	               }
	               .MenuButton a:hover img
	               {
                                visibility: hidden;
	               }
	               .MenuButton span
	               {
                           position: absolute;
	                       left: 0px;
	                       top: 10px;
	                       height: 40px;
						   width: 141px;
	                       margin: 0px;
	                       padding: 0px;
	                       cursor: pointer;
	                       text-align: center;
	                       font-weight: bold;
	                       z-index: 2;
	               } 
	               .Logo
	               {
	                       position: absolute;
	                       top: 7px;
	                       left: 7px;
	                       height: 131px;
						   width: 230px;
	                       background-image: url(../images2/logo.png);
						   background-repeat: no-repeat;
						   z-index: 2;
	               }
	               .Title
	               {
	                       position: absolute;
	                       top: 35px;
	                       left: 275px;
	                       height: 100%;
						   width: 100%;
	                       background-image: url(../images2/edcinet.png);
						   background-repeat: no-repeat;
         				   z-index: 2;
	               }

	               //-->

</style>
<script language='javascript'>
  <!-- 
	function ShowMoreDocs() {
	  var ele;
	  ele = document.getElementById('Menu2');
	  ele.style.visibility = 'visible';
	}
  //--> 
</script>
<script language='javascript'>
  <!-- 

     function closeMenu() {
     var ele;
       ele = documentgetElementById('Menu2');
       ele.style.visibility = 'hidden';
      }
  //--> 
</script>
</head>
<body bgcolor='#ffffff' text='#000000'>
     <div class='TopLeft'></div>
     <div class='TopCenter'></div>
     <div class='TopRight'></div>
	 <div class='LeftMiddle'></div>
	 <div class='MenuBG'>
	    <div style='Top: 0px' class='MenuButton'><a title='Quality Manual' HREF='http://hvnet/Quality_Manual'><img alt='' src='../images2/rbcbtn.png'><span>Quality Manual</span></a></div>
	    <div style='Top: 50px' class='MenuButton'><a title='Procedures' HREF='http://hvnet/Procedures'><img alt='' src='../images2/rbcbtn.png'><span>Procedures</span></a></div>
	    <div style='Top: 100px' class='MenuButton'><a title='Work Instructions' href='http://hvnet/work_instructions'><img alt='' src='../images2/rbcbtn.png'><span>Work Instructions</span></a></div>
	    <div style='Top: 150px' class='MenuButton'><a title='Control Plans' href='http://hvnet/Control_Plans'><img alt='' src='../images2/rbcbtn.png'><span>Control Plans</span></a></div>
	    <div style='Top: 200px' class='MenuButton'><a title='Internal Specs' HREF='http://hvnet/Internal_Specs'><img alt='' src='../images2/rbcbtn.png'><span>Internal Specs</span></a></div>
	    <div style='Top: 250px' class='MenuButton'><a title='Lists' HREF='http://hvnet/Lists'><img alt='' src='../images2/rbcbtn.png'><span>Lists</span></a></div>
	    <div style='Top: 300px' class='MenuButton'><a title='More' HREF='' onClick='ShowMoreDocs();return false;'><img alt='' src='../images2/rbcbtn.png'><span id='More'>Show More Docs</span></a></div>
	 </div>
	 <div class='Menu2BG' id='Menu2'>
	    <div style='Top: 0px' class='MenuButton'><a title='External Specs' HREF='http://hvnet/External_Specs'><img alt='' src='../images2/rbcbtn.png'><span>External Specs</span></a></div>
	    <div style='Top: 50px' class='MenuButton'><a title='External Docs' HREF='http://hvnet/External_Docs'><img alt='' src='../images2/rbcbtn.png'><span>External Docs</span></a></div>
	    <div style='Top: 100px' class='MenuButton'><a title='Ref. Docs' href='http://hvnet/Ref_Docs'><img alt='' src='../images2/rbcbtn.png'><span>Ref. Docs</span></a></div>
	    <div style='Top: 150px' class='MenuButton'><a title='Visual Ref.' href='http://hvnet/Visual_Ref'><img alt='' src='../images2/rbcbtn.png'><span>Visual Refs.</span></a></div>
	    <div style='Top: 200px' class='MenuButton'><a title='Training Guides' HREF='http://hvnet/Training_Guides'><img alt='' src='../images2/rbcbtn.png'><span>Training Guides</span></a></div>
	    <div style='Top: 250px' class='MenuButton'><a title='Work Flows' HREF='http://hvnet/Work_Flows'><img alt='' src='../images2/rbcbtn.png'><span>Work Flows</span></a></div>
	    <div style='Top: 300px' class='MenuButton'><a title='Less' HREF='' onClick='closeMenu();return false;'><img alt='' src='../images2/rbcbtn.png'><span id='More'>Show Less Docs</span></a></div>
	 </div>
 	 <div class='Logo'></div>
	 <div class='Title'></div>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................