Free Template -- Website Design X

Modern_Media · 12-26-2011, 04:10 PM

Merry Christmas Everybody -

I created a 3 column website that has a sticky footer technique applied to it.

This is free to use, just copy and paste the code (or upload to your web server). Once you have it uploaded, there is a link which provides all the image files needed to make this website work.
*Note: just make sure you put the images in a directory called "images" ( /images ).

Features of this free template:

Minimal graphics = fast page load speeds
3 Column Layout
Footer Stays at the bottom of browser
Once uploaded, there is a link to download original artwork files
It's FREE! (Just don't rebrand it as your own)

See it live here:
http://woodlandsadagency.com/websitedesignx/

Here is the xHTML code:

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>Website Design X</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

	<div id="header">
    
    <div class="header-logo">
      <h1>YOUR LOGO</h1></div>
        <div class="header-links">
        	<a href="#" class="first">Link <strong>One</strong></a>
            <a href="#">Link <strong>Two</strong></a>
            <a href="#">Link <strong>Three</strong></a>
            <a href="#">Link <strong>Four</strong></a>
        </div>
        <div class="header-phone">
          <h3>555.555.1212</h3></div>
    
    </div><!-- header -->
    
    <div id="banner">
    	<img src="http://woodlandsadagency.com/images/freeware/banner-image.jpg" width="960" height="356" alt="banner image" />
    </div><!-- banner -->
    
    <div id="content">
    
    	<div class="content-left">
    	  <ul class="menu">
    	    <li><a href="#">Navigation Link 1</a></li>
    	    <li><a href="#">Navigation Link 2</a></li>
    	    <li><a href="#">Navigation Link 3</a></li>
    	    <li><a href="#">Navigation Link 4</a></li>
    	    <li><a href="#">Navigation Link 5</a></li>
  	      </ul>
    	</div>
        
        <div class="content-right">
        	<p>To create your own top banner images, download the photoshop source file by clicking the link below:</p>
        	<p>&nbsp;</p>
        	<p><a href="http://woodlandsadagency.com/images/freeware/banner-photoshop.zip">download website design files</a></p>
        </div>
        
      <div class="content-center">
        <h1>Website Design X - Custom Layout Design</h1>
        <p>This layout is a free open source layout to use for any project. There are no rules to this layout - use it as you see fit as long as you do not put it up for sale.</p>
        <p>&nbsp;</p>
        <h2>Open Source Template</h2>
        <p>Keep this free and open source. Hope you enjoy it!</p>
        <p>Remember, you can download the top banner template file to your right!</p>
        </div>
    
    </div><!-- content -->
    
</div><!-- wrapper -->

<div id="footer">
	
  <div class="footer-content">
  	<div class="footer-left"><img src="http://woodlandsadagency.com/images/freeware/social-icons.jpg" width="199" height="53" alt="social icons" /></div> 
    
    <div class="footer-right"><h3>555.555.1212</h3></div> 
    
    <div class="footer-center"><p>Footer content goes here</p></div>
    
  </div>
  <div class="copyright">
    <p>Copyright 2010. Company Name or Business Name | <a href="http://woodlandsadagency.com/">Website Design | Advertising Agency</a></p></div>
</div><!-- footer -->

<!-- Layout Design by http://woodlandsadagency.com Advertising | Website Design | Graphic Design -->

</body>
</html>

Here is the CSS code:

Code:

@charset "utf-8";
/* 	CSS Site designed by Woodlands Ad Agency - http://woodlandsadagency.com 
	This code is open source and free to use as you wish as long as you do
	not try to sell or brand it as your own.
*/


/* CSS RESET LAYOUT */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
}

/* BASIC HTML STRUCTURE */
body { 	background: url(images/bkg.jpg) repeat-x center top #fff; color: #303030; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 14px; margin: 0; padding: 0; text-align: center; }
html, body { position: relative; height: 100%!important; }

h1, h2, h3, h4, h5, h6 { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 1.5em; line-height: 1.6em; color: #09F; }

a, a:link { text-decoration: none; color: #900; }
a:hover { text-decoration: underline; }

#wrapper { position: relative; width: 960px; min-height: 100%!important; margin: 0 auto; }
* html #wrapper { height: 100%; }

/* HEADER */
#header { position: relative; height: 130px; line-height: 130px; padding-top: 8px; }
.header-logo { position: absolute; width: 230px; height: 130px; left: 0; top: 8px; }
.header-links { width: 480px; margin: 0 auto; }
.header-links a { display: block; float: left; color: #222; width: 118px; height: 80px; line-height: 80px; margin: 15px 0; border-right: solid 1px #222; }
.header-links a.first { border-left: solid 1px #222; }
.header-phone { position: absolute; width: 230px; height: 130px; right: 0; top: 8px; }
.header-logo h1, .header-phone h3 { line-height: 120px; }

/* BANNER */
#banner { height: 358px; }

/* CONTENT */
#content { overflow: hidden; padding-bottom: 120px; clear: both; }

.content-left { width: 235px; float: left; }
ul.menu { width: 200px; list-style: none; margin: 10px 0; padding: 0; }
ul.menu li { text-align: right; line-height: 30px; color: #777; font-size: 130%; }
ul.menu li a { color: #777; font-weight: bold; }
.content-right { width: 215px; float: right; padding: 10px; text-align: left; }
.content-center { margin: 10px 240px; border-left: solid 1px #333; border-right: solid 1px #333; text-align: left; padding: 10px; }

/* FOOTER STICK METHOD */
#footer { clear: both; position: relative; width: 100%; height: 120px; margin-top: -120px;  background: url(images/footer-bkg.jpg) repeat-x center top; }
#footer a { color: #ccc; font-weight: bold; }
.footer-content { position: relative; width: 960px; height: 70px; margin: 0 auto; padding-top: 10px; }
.footer-left { float: left; display: block; width: 235px; height: 70px; line-height: 60px; left: 0; }
.footer-right { float: right; display: block; width: 235px; height: 70px; line-height: 70px; }
.footer-center { margin: 5px 240px; }
.copyright { color: #ccc; height: 40px; line-height: 40px; }

If you use this template, post a follow up link here. I would love to see what you did with it!

Modern_Media · 12-27-2011, 11:07 PM

Someone asked me if they can change the footer information -- The answer is ABSOLUTELY! When I say just don't rebrand it as your own, that means don't go passing this around as your creation. You can modify it to make it custom to you or your clients!

Enjoy!

saber mogaddas · 01-02-2012, 07:27 AM

I like It ..Configuration..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

12-27-2011, 11:07 PM	#2
Modern_Media Silver Member Join Date: May 2009 Location: Houston & The Woodlands Posts: 110	Someone asked me if they can change the footer information -- The answer is ABSOLUTELY! When I say just don't rebrand it as your own, that means don't go passing this around as your creation. You can modify it to make it custom to you or your clients! Enjoy! __________________ Woodlands Ad Agency Website Design \| Advertising Agency Woodlands Graphic Design

01-02-2012, 07:27 AM	#3
saber mogaddas New Member Join Date: Dec 2011 Location: Iran Posts: 8	I like It ..Configuration.. __________________ My Web Site : Pars Click