How to Convert a Slick PSD Design to XHTML/CSS

Our #content Area

Our main content area has a lot of content to handle so I am going to take it into two parts. The first part you will learn how to handle the about us/others say section and the second part you will learn to handle the four separate services section.

About Us/What Others Say

In this section you will learn how to code two separate div‘s that each take up 50% of the container width (with padding/margins). Each one will have a heading, followed my a short one or two sentences wrapped in paragraph tags.

<div id="about_us">
	<h3>A little about us...</h3>
	<p>We are a full service production company that is your one stop needs, either it be family photographs, a college sport exposure video, senior pictures or.</p>
</div>
<div id="others_say">
	<h3>What others think...</h3>
	<p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.
		<br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite>
	</p>
</div>

Available Services Section

In this section we will code up 4 identical(besides text) divs with a class of .box that will take up about 25% of the container each. They will contain a basic picture preview, heading, then some text.

<ul id="services">
	<!-- Photography -->
	<li>
		<img src="style/images/service_preview_1.gif" alt="placeholder" />
		<h4>Photography</h4>
		<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
	</li>

	<!-- Commercials -->
	<li>
		<img src="style/images/service_preview_2.gif" alt="placeholder" />
		<h4>Commercials</h4>
		<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
	</li>

	<!-- Sports -->
	<li>
		<img src="style/images/service_preview_3.gif" alt="plceholder" />
		<h4>Sports</h4>
		<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
	</li>

	<!-- Exposure Videos -->
	<li>
		<img src="style/images/service_preview_1.gif" alt="placeholder" />
		<h4>Exposure Videos</h4>
		<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
	</li>
</ul>

Finally the #footer

Now, we are onto the footer, it will take just about the same layout as the services section but it also has a small copyright & back to top underneath it.

<ul id="footer-widgets">
	<li>
		<h5>Contact Us</h5>
		<ul>
			<li>3352 Street name rd.</li>
			<li>Commerce Township, MI, 48382.</li>
			<li>&nbsp;</li>
			<li>Tell: (248)838-9823</li>
			<li>Fax: (248)942-2342</li>
			<li>Email: johnnywaller@me.com</li>
		</ul>
	</li>
	<li>
		<h5>Services</h5>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Photography</a></li>
			<li><a href="#">Commercials</a></li>
			<li><a href="#">Sports</a></li>
			<li><a href="#">Exposure Videos</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</li>
	<li>
		<h5>About Johnny</h5>
		<p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
	</li>
	<li>
		<h5>About Amber</h5>
		<p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
	</li>
</ul>

<!-- Positioning Fix -->
<br class="clear" />
<br /><br />

<!-- Copyright -->
<div id="copyright">
	<span>&copy; Copywright 2010 TutToaster.com. All Rights Reserved.</span>
	<a href="#">Back to top</a>
</div>

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Live demo View it online Download Take the source files

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

    Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

    Very good tutorial, It covered a lot of things, thanks

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

    i’m going to have to take time on this one.thanks for sharing

    Reply to this comment