Purple Tech Layout

Parrappa · Mar 23, 2007 at 10:21 PM

Name of template: Purple Tech

Types of users meant for/What you should know(newbies to HTML or need to know javascript, etc...): Newbies to HTML

Rules for Template(is credit due? what needs to be upheld?):Leave the Copyright box

Template:

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #cccccc;
}
-->
</style>
<link href="mm_lodging1.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Documents and Settings/The 32 Man/My Documents/csscool.css" rel="stylesheet" type="text/css" />
<link href="csscool.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #FF6600;
}
a:active {
	text-decoration: none;
}
.style2 {
	font-family: "Century Gothic", Abstract;
	font-size: 12px;
}
.style4 {color: #FFFFFF}
.style6 {font-size: 10}
-->
</style>
<script type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>
<div align="center">[img]http://i22.photobucket.com/albums/b341/parrappa32/PPT.png[/img]</div>
<div align="center">[img]http://i22.photobucket.com/albums/b341/parrappa32/dots.png[/img]</div>
<table width="698" height="56" border="0" align="center" cellpadding="0" cellspacing="0" background="http://i22.photobucket.com/albums/b341/parrappa32/navigation.png">
  <tr>
    <th class="subtitle style2" scope="row"> [url="http://z11.invisionfree.com/GFXunderground"]Link Here [/url] &raquo; [url="http://z11.invisionfree.com/GFXunderground"]Link Here [/url] &raquo; [url="http://z11.invisionfree.com/GFXunderground"]Link Here [/url] &raquo; [url="http://z11.invisionfree.com/GFXunderground"]Link Here [/url]&raquo; [url="http://z11.invisionfree.com/GFXunderground"]Link Here [/url]</th>
  </tr>
</table>
<table width="717" height="390" border="0" align="center" cellpadding="0" cellspacing="0" background="http://i22.photobucket.com/albums/b341/parrappa32/cb2.png">
  <tr>
    <th valign="baseline" class="pageName" scope="row">

</p>
    

</p>
    

[u]Welcome to my first Fully code layout! [/u]</p>
    <p class="calendarText">I know, it isn't so great, but I'm new to this so </p>
    <p class="calendarText">live with it. This is my first fulled coded site and I </p>
    <p class="calendarText">hope to make more and hopefully improve. </p>
    <p class="calendarText">-Parrappa/Mystery </p></th>
  </tr>
  <tr>
    <th valign="baseline" class="pageName" scope="row"></th>
  </tr>
</table>


</p>
<table width="717" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" bgcolor="#FFFFFF" class="dingbat">
  <tr>
    <td><div align="center">&copy;Full Layout Copyright of Parrappa/Mystery of [url="http://z11.invisionfree.com/GFXunderground"]The Underground Realm[/url]</div></td>
  </tr>
</table>


</p>
</body>
</html>

Code:

body {
	background-color: #DCDCDC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #336699;
}

td, th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #333333;
}

a {
	color: #3366CC;
	text-decoration: none;
}

form {
	background-color: #CCCC99;
}

.title {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
	line-height: 30px;
  background-color: #006666;
	color: #DCDCDC;
}

.subtitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: bold;
  color: #006666;
}

.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	background-color: #006666;
  color: #DCDCDC;
}

.nav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
  font-weight: bold;
	background-color: #CCCCCC;
}

.navLink {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	background-color: #DEDECA;
}

.sidebar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFFFF;
}

.sidebarHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	background-color: #339999;
}

.sidebarFooter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	background-color: #CCCCCC;
}

.footer {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	color: #333333;
	background-color: #CCCCCC;
}

.legal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333333;
}

.box1 {
	border-color: #CCCCCC #333333 #333333 #CCCCCC;
	border-width: medium;
  border-style: ridge;
}

.promo {
	font-family: "Times New Roman", Times, serif;
	color: #000033;
}

.titlebar {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #FFFFFF;
  background-color: #336699;
}

.dingbat {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #99CC99;
  color: #006666; 
	font-weight: bolder;
	font-size: medium;
}

a:hover {
	text-decoration: underline;
}

input.big {
	width: 100px;
}

input.small {
	width: 50px;
}

Code:

/* Global Styles */

body {
	margin:0px;
	}
	
td {
	font:11px arial;
	color:#333333;
	}
	
a {
	color: #cc0000;
	text-decoration:none;
	font-weight:bold;
	}
	
a:hover {
	color: #990000;
	text-decoration:underline;
	}
	
/* ID Styles */
	
#navigation a {
	font:10px arial;
	color: #336666;
	text-decoration:none;
	letter-spacing:.1em;
	}
	
#navigation a:hover {
	color: #993300;
	text-decoration:underline;
	}

#padding {
	padding:20px 5px 20px 5px;
	}
	
#weekdays th {
	font:10px arial;
	color: #ffffff;
	letter-spacing:.2em;
	}

#calheader td {
	font-weight:bold;
	}

[CODE]/* Class Styles */

.logo {
	font:18px times new roman;
	color: #333300;
	letter-spacing:.4em;
	font-weight:bold;
	}

.sidebarText {
	font:12px georgia;
	color: #336666;
	line-height:18px;
	}
	
.bodyText {
	font:11px arial;
	line-height:24px;
	color:#333333;
	}
	
.pageName {
	font:20px georgia;
	color: #CC3300;
	letter-spacing:.1em;
	line-height:26px;
	}
	
.subHeader {
	font:14px georgia;
	color: #669999;
	font-weight:bold;
	line-height:20px;
	letter-spacing:.1em;
	}
	
.navText {
	font:10px arial;
	color: #333300;
	letter-spacing:.1em;
	}
	
.calendarText {
	font:11px arial;
	line-height:14px;
	color:#333333;
	}

[/CODE]
Additional Notes: The first code is the HTML. Second is the CSS and third is the other CSS. Yes, 2 CSS's, how odd... First ever template, simple but it looks good. I will improve but for now I hope you like.

Preview: Link

If you want the .PSD for the banner, which I suggest you edit for your site name, here it is. The banner matches the site so I would suggest using it. Your choice though.
.PSD Link

Parrappa · Mar 25, 2007 at 12:36 AM

Bump

SubSir0 · Mar 25, 2007 at 12:56 AM

its good for your first i think man

the bottom bar i dont like the color and it seems to far away from the main content box and it dont match the rest of the layout and i dont like the font in the main content box

and the birds have 3 pixels below them? near there back-end

but much better than i could do lol

Parrappa · Mar 25, 2007 at 2:33 PM

Thanks

Konekokaze · Mar 27, 2007 at 7:10 AM

looks nice. i could proboly break that into a myspace DIV.

Log in or Sign up

Purple Tech Layout

Parrappa Member

Parrappa Member

SubSir0 Senior Member

Parrappa Member

Konekokaze Well-Known Member

Share This Page

Log in or Sign up

Purple Tech Layout

Parrappa Member

Parrappa Member

SubSir0 Senior Member

Parrappa Member

Konekokaze Well-Known Member

Share This Page

Useful Searches