CodePen

HTML

            
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
	<head>

	<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
	</head>
<html style="height:640px;">
<body>
	<div id="canvas">
		<div id="header">
			<a href="index.html"><div id="logo"><img src="images/acclogo.png" BORDER=0></div></a>
			
				<div id="headermenu"> 
				<ul>
					<a href="index.html"><li>Home</li></a>
					<a href="about.html"><li>About</li></a>
					<a href="events.html"><li>Events</li></a>
					<a href="stories.html"><li>ACC Warriors</li></a>
					<a href="watch.html"><li>Watch</li></a>
					
				</ul>
				<div id="social">
<a href="https://www.facebook.com/groups/217974704953646/"><img src="images/facebook.png" BORDER=0 width="33" height="33"></a>&nbsp;&nbsp;<a href="watch.html"><img src="images/youtube.png" BORDER=0 width="35" height="35"></a></div>
				</div>			
			</div> <!--END HEADER-->
		<div id="content">
			<div id="maincontentwatch">
			<h1 style="color: #20929e; margin-bottom:-10px;">Click On a Video To View & Learn</h1>
					<table width="640" border="0">
  <tr>
    <td width="202" height="150"><a href="http://www.youtube.com/watch?v=dZm0wXYzcd4"><img src="images/1.png"></a></td>
    <td width="211"><a href="http://www.youtube.com/watch?v=XNZVU9AA-Uo&feature=relmfu"><img src="images/2.png"></a></td>
    <td width="226"><a href="http://www.youtube.com/watch?v=Snc8bZ7gSHo&feature=relmfu"><img src="images/3.png"></a></td>
  </tr>
  <tr>
    <td>&quot;Fight ACC With Everything We've Got&quot;</td>
    <td>&quot;Adrenal Cancer with Gary&quot; Hammer, M.D.</td>
    <td>&quot;Adrenal Cancer Genetics&quot; with Gary Hammer, M.D.</td>
  </tr>
  <tr>
    <td height="74"><a href="http://www.youtube.com/watch?v=__tqST3lq_A"><img src="images/4.png"></a></td>
    <td>&nbsp;<a href="http://www.cancer.med.umich.edu/cancertreat/endocrine/adrenal_cancer.shtml"><img src="images/5.png"></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&quot;Adrenal Cancer Research&quot; with Gary Hammer, M.D.</td>
    <td>&nbsp;"Adrenal Cancer" with Gary Hammer, M.D.</td>
    <td>&nbsp;</td>
  </tr>
</table>
	</div>
			</div>
			
			<div id="leftbarwatches">
				<a href="https://www.facebook.com/groups/217974704953646/">
        <div class="leftbarone"><img src="images/facebooklike.png" BORDER=0></div></a>
				<a href="resources/Run4cure.pdf" target="_blank"><div class="leftbartwo"><img src="images/accrun.png" BORDER=0></div></a>
				<div class="leftbarthree"><img src="images/relatedlinks.png" >
					<tr>
    <td><a href="http://www.uofmhealth.org/news/archive/201209/researchers-find-2-gene-mutat" target="_blank">uofmhealth.org</a></td>
  </tr>
  <tr>
    <td><a href="http://www.ur.umich.edu/update/archives/120904/brazil" target="_blank">ur.umich.edu</a></td>
  </tr>
  <tr>
    <td><a href="http://atterocor.com/" target="_blank">attercor.com</a></td>
  </tr>
				<br />
					<br />
					<br />
					<br />
					<br />
					<table width="400" border="0">
  
</table>
				<div class="donate">	
				<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="QGN9Z5PQ9W9GW">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></div>
				</div>
			</div>
			
<div id="footerwatch">
				<ul>
					<a href="mailto:acc.cure@gmail.com"><li>CONTACT US</li></a>
					<a href="privacy_policy.html"><li>PRIVACTY POLICY & LEGAL</li></a>
				
				</ul>
			<p>2012 A.C.C. Cure Foundation. Site Created & Designed By SGW Marketing <a href="http://www.sgw.com">www.sgw.com</a></p>
			
			</div>
			
		</div>
	
	
	
	
	
	</div>






</body>






</html>
            
          
!
via HTML Inspector

CSS

            
              body {
  font-family: arial;
	margin-top: 25px;
	background-image:url('images/background.png') no-repeat;
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	height: 750px;
	
}

#canvas {
	height: auto;
	width: 960px;
	height: 650px;
	margin: auto;
	
}

#logo {
	height: 128px;
	width: 236px;
	margin-left: 10px;
	position: relative;
	float: left;
	
	
}

#header {
	height: 150px;
	width: 960px;

}

#headermenu {
	position: relative;
	float: right;
	display: inline;
	padding-right: 169px;



}

#headermneu ul {
	font: bold 13px arial;
	padding-left: 0px;
	margin-left: 0px;
	height: 20px;
	font-weight: 400;
	
	
	
}

#headermenu ul li {
	display: inline;
	padding-right: 20px;
	list-style-type: none;
	color: #000;
	text-decoration: none;
}

#headermenu a {
	text-decoration: none;
}

#headermenu li:hover {
	text-decoration: underline;

}

#social {
	height: 45px;
	width: 100px;
	float: right;
	position: relative;
	margin-left: 40px;
	top: -35px;
	right: -164px;
	display: inline;
	z-index: 999;
	
}


#maincontentdonate {
	
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	top: -8px;
	left: 1px;
	padding: 10px;
}

#social a {
	text-decoration: none;
	color: grey;
}

#menu {
	margin: 0px;
	height: 15px;
	margin-left: -10px;
	z-index: 1;
	width: 103%;
	position: relative;
	left: -12px;
	
}

#menu li {
	float: left;
	display: block;
	color: #000;
}

#menu li a {
	background-image: url(images/sprite.png);
	display: block;
	outline: none;
	position: relative;
	height: 70px;
	text-decoration: none;
	width: auto;
}

#menu .uac {
	background: url('images/sprite.png') no-repeat -23px -280px;
	width: 268px;
	height: 31px;
}

#menu .events {
	background: url('images/sprite.png') no-repeat -23px -201px;
	width: 126px;
	height: 28px;
}

#menu .accwarrior {
	background: url('images/sprite.png') no-repeat -23px -111px;
	width: 186px;
	height: 31px;
	padding-right: 10px;
}

#menu .support {
	background: url('images/sprite.png') no-repeat -23px -21px;
	width: 186px;
	height: 31px;
	padding-right: 20px;
}

#menu .watch {
	background: url('images/sprite.png') no-repeat -23px -376px;
	width: 72px;
	height: 31px;
}

#menu a .hover {
	background: transparent url('images/sprite.png') no-repeat;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	
}

#menu .uac:hover {
	background: url('images/sprite.png') no-repeat -15px -313px;
	width: 268px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -8px;
}

#menu .events:hover {
	background: url('images/sprite.png') no-repeat -8px -229px;
	width: 126px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -15px;
}

#menu .accwarrior:hover {
	background: url('images/sprite.png') no-repeat -17px -144px;
	width: 186px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -6px;
}

#menu .support:hover {
	background: url('images/sprite.png') no-repeat -13px -59px;
	width: 186px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -10px;
}

#menu .watch:hover {
	background: url('images/sprite.png') no-repeat -13px -412px;
	width: 131px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -11px;
}

#content {
	height: 800px;
	width: 960px;
	position: relative;
	top: 6px;
}

#maincontent {
	height: 434px ;
	width: 663px;
	margin: 10px;
	background: url('images/content.png') no-repeat;
	position: relative;
	top: -8px;
	padding: 10px;
}

#maincontentslider {
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	top: -12px;
	left: -9px;
	padding: 10px;

}

#maincontentevents {
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	top: -8px;
	left: 1px;
	padding: 10px;
	background: url('images/content.png') no-repeat;

}

#stuff {
overflow: auto;
height: 445px;
position: relative;
bottom: 8px;
z-index: 999;
}


#maincontentwatch {
	height: 434px ;
	width: 663px;
	margin: 10px;
	padding: 10px;
	background: url('images/content.png') no-repeat;
	position: relative;
	top: -6px;

}

#leftbar {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -466px;
	left: -27px;
}

#leftbarslider {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -466px;
	left: -27px;
}

#leftbarstories {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarabout {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarevents {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarwatches {
	height: 300px;
	width: 260px;
	float: right;
	position: relative;
	bottom: 800px;
	left: 0px;
	z-index: 999;
}

.leftbarone {
	
	height: 140px;
	width: 232px;
	padding-bottom: 15px;
  background: #BAD22A;

}

.leftbartwo {
	height: 140px;
	width: 232px;
	padding-bottom: 17px;
  background: #BAD;
}

.leftbarthree {
	
	height: 140px;
	width: 232px;
	z-index: 999;
  background: #BADA55;
}

.leftbarthree a {
	text-decoration: none;
	color: #20929e;
	margin-left:65px;
	position: relative;
	top: -80px;
	text-align: center;
}

#footer {
	height: 100px;
	width: 835px;
	margin: auto;
	padding-left: 218px;

}

#footer ul {
	position: relative;
	left: 60px;
}

#footer a {
	text-decoration: none;
	color: #000;
	font-size: 11px;
}

#footer  ul li {
	display: inline;
	padding-right: 10px;
}

#footer li:hover {
	text-decoration: underline;
}

#footer p {
	font-size: 11px;
}

#footer a:hover {
	text-decoration: underline;
}


#footerwatch {
	height: 100px;
	width: 835px;
	margin: auto;
	padding-left: 218px;
	position: relative;
	top: -339px;

}

#footerwatch ul {
	position: relative;
	left: 60px;
	
}

#footerwatch a {
	text-decoration: none;
	color: #000;
	font-size: 11px;
}

#footerwatch  ul li {
	display: inline;
	padding-right: 10px;
}

#footerwatch li:hover {
	text-decoration: underline;
}

#footerwatch p {
	font-size: 11px;
}

#footerwatch a:hover {
	text-decoration: underline;
}

::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #20929e); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #20929e; 
    -webkit-box-shadow: inset 0 0 6px #20929e); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #000; 
}

.accimage {
	margin: auto;
	margin-top: 10px;
	padding-left: 155px;
	position: relative;
	top: -10px;
}

.runtext{
	width: 500px;
	margin-left: 10px;
	margin: auto;
	position: relative;
	top: -15px;

}

.schedule {
	width: 442px;
	height: auto;
	margin-left: 90px;
	position: relative;
	top: -10px;
}

.blue {
	font-size: 21px;
	color: #20929e;
}

.grey {
	font-size: 21px;
	color: #3c3c3e;
}

.bluesmall {
	font-size: 14px;
	color: #20929e;
	font-weight: 400;
	display: inline;
}

.donate {
	position: relative;
	bottom: 130px;
	left: 67px;
}

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

JS

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