added template

mak0t0san · May 28, 2011 · ffee667 · ffee667
1 parent a4dc5de
commit ffee667
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/default.css b/default.css
@@ -0,0 +1,57 @@
+		body{
+			margin:0;
+			padding:0;
+			line-height: 1.5em;
+		}
+
+		b{font-size: 110%;}
+		em{color: red;}
+
+		#maincontainer{
+			width: 840px; /*Width of main container*/
+			margin: 0 auto; /*Center container on page*/
+		}
+
+		#topsection{
+			background: #EAEAEA;
+			height: 90px; /*Height of top section*/
+		}
+
+		#topsection h1{
+			margin: 0;
+			padding-top: 15px;
+		}
+
+		#contentwrapper{
+			float: left;
+			width: 100%;
+		}
+
+		#contentcolumn{
+			margin-left: 200px; /*Set left margin to LeftColumnWidth*/
+		}
+
+		#leftcolumn{
+			float: left;
+			width: 200px; /*Width of left column*/
+			margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
+			background: #C8FC98;
+		}
+
+		#footer{
+			clear: left;
+			width: 100%;
+			background: black;
+			color: #FFF;
+			text-align: center;
+			padding: 4px 0;
+		}
+
+		#footer a{
+			color: #FFFF80;
+		}
+
+		.innertube{
+			margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
+			margin-top: 0;
+		}
diff --git a/template.xhtml b/template.xhtml
@@ -0,0 +1,75 @@
+<!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" lang="en" xml:lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<link href="default.css" media="screen" rel="stylesheet" type="text/css" />
+
+		<!-- Title needs to be injected -->
+		<title>Products listing</title>
+	</head>
+	<body>
+		<div id="maincontainer">
+			<div id="topsection">
+				<div class="innertube"><h1>Company Title .....</h1></div>
+			</div>
+			<div id="contentwrapper">
+				<div id="contentcolumn">
+
+					<!-- Page name needs to be injected -->
+					<div><h2>Producs listing</h2></div>
+					<div class="innertube">
+
+						<!-- The content that is unique for each page -->
+
+						<table>
+
+							<!-- The products -->
+							<tr>
+								<td>
+									<!-- This part/layout of each product needs to be made as a custom component, so that it can be reused at other pages -->
+									<div class="product">
+										<img src="1.jpg" />
+										<span class="productname">A name of product1....</span>, <span class="price">$150</span>
+									</div>
+								</td>
+
+								<!-- The associated categories of each product -->
+								<td>category4, category2, category9, category23</td>
+							</tr>
+
+							<tr>
+								<td>
+									<div class="product">
+										<img src="2.jpg" />
+										<span class="productname">A name of product2....</span>, <span class="price">$9140</span>
+									</div>
+								</td>
+								<td>category51, category38, category93, category4</td>
+							</tr>
+
+							<tr>
+								<td>
+									<div class="product">
+										<img src="3.jpg" />
+										<span class="productname">A name of product3....</span>, <span class="price">$8970</span>
+									</div>
+								</td>
+								<td>category1, category8, category31, category3</td>
+							</tr>
+
+						</table>
+					</div>
+				</div>
+			</div>
+
+			<div id="leftcolumn">
+				<div class="innertube">
+					<h3>Side bar.....</h3>
+				</div>
+			</div>
+
+			<div id="footer">footer.....</div>
+		</div>
+	</body>
+</html>