Mechanicus

Designer's Comments

Look carefully for specific instructions

This is a layout featuring a heavily edited photograph of some wires that I took myself. It is coded using valid HTML 4.01 Strict and Valid CSS 2.1.

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Mechanicus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

/* MAIN */

html, body {
	width: 100%;
}

body {
	background: #dfdfe1;
	margin: 0; 
	padding: 0;
	text-align: center;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.8em; 
	line-height: 1.7em;
}

div#bottom {
	background: #7389a0 url('http://cbimg6.com/layouts/10/08/36493aa.jpg') repeat-x bottom center;
	width: 100%;
}

div#top {
	background: url('http://cbimg6.com/layouts/10/08/36493ab.jpg') repeat-x top center;
	width: 100%;
}

div#back {
	background: #AAD5DB url('http://cbimg6.com/layouts/10/08/36493ac.jpg') repeat-y;
	width: 950px;
	margin: 0 auto 0 auto;
}

div#header {
	background: url('http://cbimg6.com/layouts/10/08/36493ad.jpg') no-repeat;
	width: 570px;
	height: 70px;
	padding: 83px 50px 73px 330px;
}

div#header h1 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 3.7em;
	line-height: 53px;
	font-weight: normal;
	color: #6D6D6E;
	text-align: center;
}

div#tagline {
	line-height: 17px;
	text-align: right;
	color: #444444;
	font-style: italic;
}

div.clear {
	clear: both;
}

/* TOP NAVIGATION */

div#navi {
	background: url('http://cbimg6.com/layouts/10/08/36493ae.jpg') no-repeat;
	width: 830px;
	height: 20px;
	padding: 10px 60px 30px 60px;
	text-align: center;
}

div#navi ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-left: solid 1px #959596;
	display: inline;
	line-height: 20px;
}

div#navi ul li {
	display: inline;
	margin: 0;
	padding: 0 8px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	border-right: solid 1px #959596;
}

div#navi ul li a {
	display: inline-block;
	color: #4F4F4F;
	padding: 0 5px;
}

div#navi ul li.active a {
	background: #6D6D6E;
	color: #EEF0F1;
}

div#navi ul li a:hover {
	background: #B14866;
	color: #EEF0F1;
}

/* CONTENT SECTION */

div#main {
	background: url('http://cbimg6.com/layouts/10/08/36493af.jpg') no-repeat;
	float: left;
	width: 617px;
	padding: 10px 30px 72px 53px;
	color: #242424; 
	text-align: left;
}

#main h1 {
	font-size: 2.5em; 
	font-family: Verdana, Geneva, sans-serif;
	color: #777777; 
	text-align: center; 
	font-weight: normal; 
	background: #c5cbce url('http://cbimg6.com/layouts/10/08/36493ag.jpg') repeat-y;
	margin-left: -30px;
	margin-right: -30px;
	padding: 12px 20px 12px 20px;
	border-top: solid 2px #a1c9cc;
	border-bottom: solid 2px #a1c9cc;
}

h2 {
	font-size: 2em; 
	color: #ac1942; 
	text-align: left; 
	font-variant: small-caps; 
	font-weight: normal; 
}

h3 {
	font-size: 1.6em; 
	color: #986e47; 
	text-align: left; 
	font-weight: normal; 
}

.center {
	text-align: center;
}

img {
	border: 0;
}

a {
	color: #ac1942; 
	text-decoration: none;
}

a:hover	{
	color: #ea393b; 
}

ul {
	list-style-type: circle;
}

blockquote, .box {
	background: #c5cbce url('http://cbimg6.com/layouts/10/08/36493ag.jpg') repeat-y right;
	margin-left: 40px;
	margin-right: -30px;
	padding: 10px 30px 10px 20px;
	border: solid 2px #dce6ec;
	border-right: none;
}

code {
	background: #ced6da;
	border: solid 1px #babec1;
	padding: 1px 3px;
	font-size: 1.2em;
}

/* Forms */

form p {
	width: 497px;
	margin: 5px auto;
	text-align: right;
}

label {
	display: block;
	background: #C3E2E5;
	float: left;
	width: 90px;
	padding: 2px 5px;
	margin: 3px 0 0 0;
	text-align: left;
}

input, select, textarea {
	background: #c5cbce url('http://cbimg6.com/layouts/10/08/36493ah.jpg');
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1em;
	font-weight: normal;
	text-align: left;
	color: #454545;
	border: solid 2px #dce6ec;
	padding: 2px 5px;
	margin: 2px 0;
	width: 372px
}

p.formbuttons input {
	width: 80px;
	text-align: center;
	background: #B14866;
	color: #EEF0F1;
}

/* SIDEBAR */

div#sidebar {
	background: url('http://cbimg6.com/layouts/10/08/36493ai.jpg') no-repeat;
	float: right;
	clear: right;
	width: 197px;
	padding: 10px 32px 90px 21px;
	font-size: 0.9em; 
	line-height: normal;
	color: #777777; 
	text-align: left;
}

div#sidebar h2 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.3em; 
	color: #909294; 
	background: #ece6d3;
	text-align: right; 
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.05em; 	
	border: none;
	margin-left: -10px;
	margin-right: -10px;
	padding: 0 20px 0 20px;
}

div#sidebar ul {
	list-style-type: none;
	margin: 0 0 0 -21px;
	padding-left: 0;
}

div#sidebar ul li {
	letter-spacing: 0.1em;
	margin: 4px 0 4px 0;
	line-height: 1.85em;
}

div#sidebar ul li a { 
	display: block;
	width: 182px;
	color: #626262;
	border-bottom: solid 1px #d0c7ab;
	border-left: solid 10px #cdd2bd;
	padding-left: 13px;
	padding-right: 13px;
}

div#sidebar ul li a:hover {
	border-left: solid 10px #b47986;
	background: #ebe2c1;
}

/* FOOTER */

div#footer {
	background: url('http://cbimg6.com/layouts/10/08/36493aj.jpg') no-repeat bottom;
	width: 950px;
	position: relative;
}

/* Footer Content */

div#footcontent {
	width: 780px;
	margin: 0 auto 0 auto;
	padding-bottom: 20px;
	text-align: left;
	font-size: 0.9em;
	line-height: normal;
}

/* Bottom Tab */

div#bottomtab {
	position: absolute;
	bottom: 0;
	left: 49px;
	z-index: 1;
	width: 106px;
	height: 52px;
	font-size: 0.9em;
}

div#bottomtab a {
	display: block;
	margin: 0;
	width: 106px;
	line-height: 32px;
	padding: 0 0 20px 0;
	background: url('http://cbimg6.com/layouts/10/08/36493ak.jpg') no-repeat;
	color: #4F4F4F;
}

div#bottomtab a:hover {
	background: none;
	color: #EEF0F1;
}

</style

</head>
<body>
<div id="bottom">
	<div id="top">
		<div id="back">
			<div id="footer">
				<div id="header">
				
				
				
					<h1>Your Site Title</h1>
					<div id="tagline">A short description of your site goes here. Keep it to one line.</div>
				
				
				
				</div>
				<div id="navi">
				
				
				
					<ul>
						<li class="active"><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Contact</a></li><li><a href="">Links</a></li>
					</ul>
				
				
				
				</div>
				
				<div id="main">
				
				
				
					<h1>Welcome</h1> 
					
					<h2>About</h2> 
					<p>This layout was originally concieved as a layout for my now-defunct blog, LastSong.net. I made a few changes in order to turn it into a premade, including widening the layout from its original 770px width and increasing the font size for easier readability. I like this layout quite a bit, and I didn't expect to be able to turn what was originally a rather ugly picture into an interesting and unique layout. Give it a good home.</p> 
 
					<h2>Use</h2> 
					<p>You'll see <code>&lt;!-- --&gt;</code> tags that indicate the begining and end of the content and sidebar sections, so you'll only have to deal with the code between these markers. Basically, just delete this text and add your own. You shouldn't have too much trouble copying/pasting any necessary codes from what I have written.</p> 
					<p>The navigation buttons at the top of the page can changed by editting the code between the tags <code>&lt;!-- BEGIN TOP NAVIGATION --&gt;</code> and <code>&lt;!-- END TOP NAVIGATION --&gt;</code>. I can't imagine that you'd need more links than the layout can accomodate, but please keep the links to 1 line. To make a link highlighted (as in "Home" above), add <code>class="active"</code> to the <code>&lt;li&gt;</code> tag.</p> 
					<blockquote><p>This is a <code>blockquote</code>. You can also make content appear in a box like this by adding <code>class="box"</code> to any block-level element. For example, you can use <code>&lt;p class="box"&gt;</code> or <code>&lt;div class="box"&gt;</code>.</p></blockquote> 
					
					<h3>Stylesheets</h3>
					<p>Stylesheets are in the <strong>style.css</strong> file, if you want to edit anything. This layout is designed for 1024x768 resolution or higher and was tested with IE 8, Firefox 2, and Google Chrome.</p> 
					<p class="center">Valid <a href="http://validator.w3.org/check?uri=referer">HTML</a> and Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p> 
 
					<h2>Form</h2> 
					<form action=""> 
						<p><label for="name">Name:</label> <input name="name" id="name"></p> 
						<p><label for="email">Email:</label> <input name="email" id="email"></p> 
						<p><label for="message">Message:</label> <textarea name="message" id="message" rows="9" cols="50"></textarea></p> 
						<p class="formbuttons"> 
							<input type="submit" value="Submit"> 
							<input type="reset" value="Reset"> 
						</p> 
					</form> 
					
					<h2>Credits</h2> 
					<p>This layout features a photograph of some wires that I took myself, as well as several self-generated patterns and textures.</p>

</div>

<p>This is the sidebar. You can put a little profile or something here. You can also put your navigation here. Whatever you want is fine.</p> 
 
					<h2>Header</h2> 
					<ul> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
					</ul> 
					
					<h2>Header</h2> 
					<ul> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
						<li><a href="">Linkage</a></li> 
					</ul> 
					
					<h2>Credits</h2> 
					<ul> 
						<li><a href="http://www.neogrotesque.net" title="Layout: Neogrotesque">Neogrotesque</a></li> 
					</ul>

</div>
				
				<div class="clear"></div>
				<div id="bottomtab"><a href="#top">Back to Top</a></div>
			</div>
		</div>
	</div>
</div>

<p class="center">Layout was designed by Yui Wu of <a href="http://www.neogrotesque.net">Neogrotesque</a>. Site content belongs to <a href="mailto:YOUR EMAIL">YOUR NAME</a>.</p>

</div>

</body>
</html>

Layout Comments

Showing latest 6 of 6 comments

Order 3 item, save 5%
Order 4 items, save 6%
Order 5 items, save 8%
More than 5 items, Pls contact us, more discount will be given to you!

We can supply the best price for the ugg boots.

All the ugg boots are 75% off

You can get free shipping and fast delivery
please visit our website://ugglowprices.com

By Amazonsen on Nov 26, 2011 9:55 am

Very nice layout, but one of the 'Style' closing tags isn't fully closed. In Dreamweaver, it's line 339.

Just thought you should know!

By fctarts on Sep 15, 2011 6:02 pm

This one doesn't work =( It is so beautiful I wanted to use it but for some reason it just doesn't work on my site.

By beautifulflawsxx on Jul 5, 2011 6:52 pm

I was looking around for inspiration and this is just beautiful. Wonderful job you did!

By tehmiminator on Feb 1, 2011 3:04 pm

beautiful

By biasadibrata on Dec 4, 2010 8:46 pm

This is amazing, its very beautiful and very professional looking i love it alot you did an amazing job!

By Victoria322821 on Sep 8, 2010 1:09 pm

Layout Details

Designer	yuiness
Submitted on	Aug 19, 2010
Page views	5,263
Favorites	37
Comments	6
Reviewer	jiyong
Approved on	Aug 30, 2010

Layout Colors

Layout Tags

abstract, colorful, fantasy, mecha, wires, mechanics