Hi Lee,
Then first of all, let’s just port the page, as it is, to WordPress, so that you can see how all of the parts fit together.
Here are some instructions to follow:
[LIST=1]
[]Create a new folder in your WP themes folder. Name it test.
[]In this new folder (wp-content/themes/test), create the following files: header.php, index.php, footer.php, styles.php.
[]Copy and paste the following code into the respective files and save it.
[]Head to your WP dashboard -> Appearance -> Themes
[*]Activate the new theme - seem familiar??
[/LIST]Let me know when you’ve done that.
style.css
@charset "utf-8";
/* CSS Document */
/*
Theme Name: Lee sachs
Theme URI: http://www.leesachs.com
Author:Pullo
Tags: test
*/
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MENU</title>
<link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<ul class="toenails">
<li class="span7"><img src="http://www.leesachs.com/testing/logo_good5a.jpg"></li>
<li class="span5 pull-right"><h5>Lorem ipsum dolor et consecjsdf jfdsjo dsafj ra04n1 55lsjv0 jsdfirqw ffioi23 csdfjsf</h5></li>
<li class="span5 pull-right"><a href="#"><img src="http://www.leesachs.com/testing/Social_comp.jpg" /></a></li>
</ul>
</div><!--row-->
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li><a href="#"><img src="http://www.leesachs.com/testing/blog.jpg" /></a></li>
<li><a href="#"><img src="http://www.leesachs.com/testing/humor_new.jpg" /></a></li>
<li><a href="#"><img src="http://www.leesachs.com/testing/consulting.jpg" /></a></li>
<li><a href="#"><img src="http://www.leesachs.com/testing/contact_new.jpg" /></a></li>
</ul>
</div> <!-- navbar-special -->
</div><!-- navbar -->
index.php
<?php get_header(); ?>
<div class="span12">
<div class="row">
<h1>This is me.</h1>
<h3>Just launched, so I'm still figuring out what's going on here. But basically it's what you see up there, a Blog about things related to User Experience, Technology and various amusing musings on our Weird World. Humor is humor; Consulting is about my professional life. </h3>
<h3>Below are two highlights from the funny side of things. The Museum of Marketing Madness is my curated collection of Bad Advertising, Marketing and other messaging, I'd call it the Awkward Family Photos of Advertising and Marketing, a curated collection of ads I find that should be held aloft for observation and ridicule. </h3>
<h3>I am so smart, I'm an idiot is a fictional blog (F'BLOG, my own term). Did you ever read a blog written by someone you don't know talking about stuff you've never heard of and doing things you can't believe? Well, then this blog is for you. This is written by an obsessive blogger who, starting at the beginning of time, has been blogging about a bunch of stuff nobody cares about, nobody knows about and people no one ever knew. You may recognize some of the people, but that's only because you too have wandered into blogs written by someone you don't know talking about stuff you never heard of. </h3>
<p>then a p tag w/more stuff, rss feed, blah blah</p>
</div><!-- end row -->
</div><!-- end span12 -->
<div class="span12">
<div class="row">
<div class="span6"><a href="#"><img src="http://www.leesachs.com/testing/madnessmuseum.jpg" /></a></div>
<div class="span6"><a href="#"><img src="http://www.leesachs.com/testing/idiot.jpg" /></a></div>
</div><!--row -->
</div><!--span12 -->
<div class="span8 offset4">
<h6>This site is a the property and the sole creation of Lee Sachs, upon whom this domain is named and wherein all which therefore shall be mine all mine, so don't steal it. Be nice. I was here first. Please link here and let me know if you do, but don't plagiarize or I will hunt you down like the dog that you are. That is if you plagiarize. You are only a dog if you plagiarize. If you don't, then you can be any animal you want.</h6>
</div>
<?php get_footer(); ?>
footer.php
</div><!--container-->
</body>
</html>