blog_graphic_design
<!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=iso-8859-1" />
<title>Home</title>
<style type='text/css'>
/* CSS Document */
#main{
margin-left:70px;
margin-right:70px;
background-color:#F8F8F8;
border: 1px solid #996633;
height:2270px;
}
#header{
margin:10px;
background-image:url(blog_graphic_design-images/banner057.jpg);
height:205px;
padding:2px;
}
#navigation{
margin-left:11px;
margin-right:10px;
background-color:#F8F8F8;
border-top: 1px solid #996633;
border-bottom: 1px solid #996633;
letter-spacing:2px;
padding:2px;
}
#navigation a{
color:#996600;
text-decoration:none;
}
#navigation a:hover{
color:#996677;
text-decoration:underline;
}
#left-box{
float:left;
margin-top:5px;
margin-bottom:5px;
background-color:#F8F8F8;
border-right: 1px solid #996633;
padding:2px;
width:120px;
text-align:center;
}
#left-box a{
color:#996600;
text-decoration:none;
}
#left-box a:hover{
color:#996677;
text-decoration:underline;
}
#links{
padding-top:8px;
border-top: 1px solid #996633;
margin-top:5px;
}
#blog-content{
margin-left:5px;
margin-top:5px;
width:483px;
background:#F8F8F8;
float:left;
}
#blog-content a{
color:#996600;
text-decoration:none;
}
#blog-content a:hover{
color:#996677;
text-decoration:underline;
}
#right-box{
float:right;
margin-top:5px;
margin-bottom:5px;
background-color:#F8F8F8;
border-left: 1px solid #996633;
padding:4px;
width:189px;
text-align:left;
}
#right-box a{
color:#996600;
text-decoration:none;
}
#right-box a:hover{
color:#996677;
text-decoration:underline;
}
#footer{
margin-left:70px;
margin-right:70px;
background-color:#F8F8F8;
float:right;
padding:2px;
letter-spacing:2px;
border-left: 1px solid #996633;
border-right: 1px solid #996633;
border-bottom: 1px solid #996633;
clear: both;
text-align:center;
width:829px;
height:20px;
}
</style>
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="navigation"><a href="#?show=home">Home</a> | <a href="#?show=about-our-blog">About Our Blog</a> | <a href="#?show=popular-posts">Popular Posts</a> | <a href="#?show=news">News</a> | <a href="#?show=tutorials">Tutorials</a> | <a href="#?show=tools">Tools</a> | <a href="#?show=resources">Resources</a> | <a href="#?show=site-map">Site Map</a></div>
<div id="left-box">
<div id="categories"><strong>Categories
</strong>
<p><a href="#?show=blog-design">Blog Design</a></p>
<p><a href="#?show=bloging">Blogging</a></p>
<p><a href="#?show=css">CSS</a></p>
<p><a href="#?show=design">Design</a></p>
<p><a href="#?show=design-process">Design Process</a></p>
<p><a href="#?show=galleries">Galleries</a></p>
<p><a href="#?show=seo">SEO</a></p>
<p><a href="#?show=socia-media">Social Media</a></p>
<p><a href="#?show=tools">Tools</a></p>
<a href="#?show=web-development">Web Development</a> </div>
<div id="links"><strong>Links
</strong>
<p><a href="http://www.easy-upload.x10hosting.com">Easy-Upload</a></p>
<p><a href="http://www.youtube.com">YouTube</a></p>
<p><a href="http://www.metacafe.com">Metacafe</a></p>
<p><a href="http://www.facebook.com">FaceBook</a></p>
<p><a href="http://www.bebo.com">Bebo</a></p>
<p><a href="http://www.phpvideotutorials.com">PHPVT</a></p>
<p><a href="http://www.google.com">Google</a></p>
<a href="http://www.yahoo.com">Yahoo</a></div>
</div>
<div id="blog-content">
<h2>5 Websites With Unique Layouts</h2>
<p>When you are creating a new website you may be inspired by seeing other sites that feature unique layouts. The 5 sites listed here don’t simply use a typical two or three column layout. Many of them use background images to interact with and control the layout in some unique way. Some of them I really like, and some I’m not sold on, but all are unique in one way or another.</p>
<p><strong><a href="http://www.popmatik.co.uk/">Popmatik</a></strong> - Freelance web designer Rob Leach uses a unique layout for his portfolio site. The site uses a background image of a bottle and the content of the site appears to be on the label of the bottle.</p><p><a href="http://www.popmatik.co.uk/"><img src="blog_graphic_design-images/pop.gif" alt="pop" width="450" height="278" border="0" /></a></p><p><strong><a href="http://www.digitalmash.com/">Digitalmash.com</a></strong> - Digital Mash is the home of Australian web designer Rob Morris. What makes the layout unique is the background image of Rob holding the content of the page.</p><p><a href="http://www.digitalmash.com/"><img src="blog_graphic_design-images/digitalmash.gif" alt="mash" width="450" height="262" border="0" /></a></p><p><strong><a href="http://melissahie.com/">Melissahie.com</a></strong> - A portfolio site with a different twist, MelissaHie.com leads the visitor through a series of different sections of one page that include links to websites in a portfolio, a brief bio, and contact information. As you click on links, you will slide to a different section of the page.</p>
<p><a href="http://melissahie.com/"><img src="blog_graphic_design-images/melissahie.gif" border="0" /></a></p><p><strong><a href="http://www.evanescenceuk.co.uk/index4.php">Evanescenceuk.co.uk</a></strong> - The British website of American rock band Evanescence uses a horizontal layout and a navigational scheme similar to MelissaHie.com, where the visitor slides across the site when using the navigation rather than being taken to a separate page.</p>
<p><a href="http://www.evanescenceuk.co.uk/index4.php"><img src="blog_graphic_design-images/evan.gif" border="0" /></a></p><p><strong><a href="http://www.sitotis.hr/">Sitotis.hr</a> </strong>- The background image for Sitotis is a binder that contains the content of the page. Tabs in the binder are used for navigation.</p>
<p><a href="http://www.sitotis.hr/"><img src="blog_graphic_design-images/sitotis.gif" border="0" /></a></p>
</div>
<div id="right-box">
<strong>Popular Posts</strong>
<p><a href="#"><img src="blog_graphic_design-images/draw.jpg" alt="Compass" width="50" height="50" border="0" /></a><a href="#"><strong>77 Resources to Simplify Your Life as a Web Designer</strong></a><br />
A collection of time-saving tools and resources that will improve efficiency.</p>
<p><a href="#"><img src="blog_graphic_design-images/color.jpg" alt="Colored Pencils" width="50" height="50" border="0" /></a><a href="#"><strong>Find the Perfect Colors for Your Website</strong></a><br />
Color choices made easier, plus links to useful tools.</p>
<p><a href="#"><img src="blog_graphic_design-images/eggs.jpg" alt="Unique Egg" width="50" height="50" border="0" /></a><a href="#"><strong>21 First Impression Factors</strong></a><br />
Improve the critical first impression and draw more repeat visitors by focusing on these 21 factors.</p>
<p><a href="#"><img src="blog_graphic_design-images/monitor.jpg" alt="Monitor" width="50" height="50" border="0" /></a><a href="#"><strong>What Makes Good Blog Design?</strong></a><br />
A guide to successful blog design for usability and attractiveness that will help your blog to standout. </p>
<p><a href="#"><img src="blog_graphic_design-images/lighting.jpg" alt="Lighting Effects Tutorials for Photoshop" border="0" width="50" height="50" /></a><strong><a href="#">Photoshop Tutorials for Lighting and Abstract Effects</a></strong><br />
Learn how to create stunning effects with light in Photoshop. </p>
<p><a href="#"><img src="blog_graphic_design-images/web20.jpg" alt="Web 2.0 Badge" width="50" height="50" border="0" /></a><a href="http://vandelaydesign.com/blog/design/web-20-design/"><strong>99 Resources for Web 2.0 Design</strong></a><br />
Buttons, badges, gradients, backgrounds, logos & more. These tools will give you the trendy web 2.0 look with ease.</p>
<p><a href="#"><img src="blog_graphic_design-images/psnav.jpg" alt="Nav Menu" width="50" height="50" border="0" /></a><a href="http://vandelaydesign.com/blog/design/photoshop-navigation-tutorials/"><strong>Photoshop Tutorials for<br />
Better Navigation</strong></a> <br />
Enhance your site's visual appeal by creative attractive navigation. </p>
</div>
</div>
<div id="footer">Copy Right Stuff here</div>
</body>
</html>
Related examples in the same category