Hey guys, i'm new in html/css coding and now i want to make a small "portfolio" website tryout. I only want a web with 3 squares on the middle of the website, a h1 header with "leo Design" and nice popups when clicking the boxes.

I copied the boxes scripts from http://css-tricks.com/fold-out-popups/


So far i have this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Leo Design</title>

<style>

body {
	font-family:"Courier New", Courier, monospace;
	background-color:#333;
	color:white;

}
p{
	font-weight:300;
	font-weight: bolder;
	font-size:20px;
}

#tablaprincipal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    
    margin-top: -200px;
    margin-left: -270px;
	
  }
  
<!-- Comienza el estilo PopUp -->
  label {
	      position: relative;
	  }

		.box {
			position:absolute;
			left: 0 ;
			top: 100%;
			z-index: 500;
			
			/* previene errores en safari 5.1 */
			-webkit-backface-visibility: hidden;
			
			background-color: #eeeeee;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
			background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
			background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
			background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
			background-image:      -o-linear-gradient(top, #eeeeee, #999999); 
							
			-moz-border-radius:    20px; 
			-webkit-border-radius: 20px; 
			border-radius:         20px; 
			  
			-moz-background-clip:    padding; 
			-webkit-background-clip: padding-box; 
			background-clip:         padding-box; 
			
			width: 260px; 
			padding: 20px;
			margin: 24px 0;
			opacity: 0;
					    
			-webkit-transform: scale(0) skew(50deg);
			-moz-transform:    scale(0) skew(50deg);
			-ms-transform:     scale(0) skew(50deg);
			-o-transform:      scale(0) skew(50deg);
			
			-webkit-transform-origin: 0px -30px;
			-moz-transform-origin:    0px -30px;
			-ms-transform-origin:     0px -30px;
			-o-transform-origin:      0px -30px;
			
			-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
			-moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
			-ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
			-o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
		}
		
		.box:after {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 30px;
			border-bottom: 20px solid #eee;
			border-left:   14px solid transparent;
			border-right:  14px solid transparent;
			width:  0;
			height: 0;
		}
		
		.popUpControl:checked ~ label > .box {
			opacity: 1;
			-webkit-transform: scale(1) skew(0deg);
			-moz-transform:    scale(1) skew(0deg);
			-ms-transform:     scale(1) skew(0deg);
			-o-transform:      scale(1) skew(0deg);
		}
		.popUpControl { 
		  display: none; 
		}
		
		.button {
			/*--
			background: blue;
			color: white;
			padding: 5px;
			border-radius: 5px;
			--*/
		}
		
		/* For dog example */
		.box img {
	  		-moz-border-radius:    10px; 
        -webkit-border-radius: 10px; 
        border-radius:         10px; 
	  }
		#doggiezzz:checked ~ label > span:first-child {
			display: none;
		}
		#doggiezzz:checked ~ label:before {
			content: "Less Dog!";
		}
		
		
		/* For link example */
		.link { color: white;  }
		.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
    .copy { color: black; text-decoration: none;  }
    

<!-- termina el popup -->

</style>

</head>

<body>

<h1 align="center">
Leo Design
</h1>
<table   id="tablaprincipal"  align="center" border="0px" bordercolor="" height="150px" width="540" cellspacing="6px" cellpadding="6" >
	<tr>
	
   <td bgcolor="#FF6666" width="135">	
   <div id="page-wrap">
	
		<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		<p align="center">About</p></span>
        
        
        
        
        		<!--<input type="checkbox" id="doggiezzz" class="popUpControl">
		<label for="doggiezzz" class="button">
		   <span>
		   <span class="box">
			   <img src="http://placedog.com/260/260">
		
        
        
        	</span>
		</label> 
        -->
        
        
			</td>
		<td bgcolor="#33CC66" width="135"><p align="center">
        Portfolio</p>
			</td>
        
		<td bgcolor="#3366FF" width="135">
   
		<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		<p align="center">Contact</p></span>
        
        
   
   
   </td>
	</tr>
</table>


	<div id="page-wrap">
			<!--
		<input type="checkbox" id="doggiezzz" class="popUpControl">
		<label for="doggiezzz" class="button">
		   <span></span>
		   <span class="box">
			   <img src="http://placedog.com/260/260">
			</span>
		</label>  
        -->

		<p>
		  
		  <input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		  </label> 
		 
		</p>
							
	</div>
</body>
</html>

awww snap, i caught a cold!