Jordan Riane Miskowicz - Chicagoland Webdesigner

— Download this resume template —

The resume template you are viewing on this website, was created by me, Jordan Miskowicz. It boasts fully validated XHTML Strict 1.0 coding, and validated CSS. It is available under the Creative Commons License.

The template is using the Tabtastic javascript library. You may download the javascript libraries from Tabtastic and the contact form from Dagondesign.com.

— HTML Source Code —

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title>First and Last Name - Title of Your Resume</title>

<div id="navigation">
			<ul id="nav" class="tabset_tabs">
				<li><a href="#resume" class="active">Resume</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
	</div>

<div id="resume" class="tabset_content">
   <h2 class="tabset_label">Resume</h2>
	<div id="downloads">
				<ul id="dl">
					<li>Download as <a href="/" class="word">Word</a></li>
					<li>or <a href="/" class="pdf">PDF</a></li>
				</ul>
			<div class="clear"></div>
		</div>
			<h1>First &amp; Last Name</h1>
			<div class="address">123 Street Address<br />City, State Zip<br />http://website</div>
			<div class="phone">555-555-555 (cell)</div> <div class="email">email @ email.com</div>
			<div class="clear"></div>	
			<hr id="spacer" />

<h2>&#8212; <span>O</span>bjective &#8212;</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras in risus. In hac habitasse platea dictumst. Mauris ornare erat et elit. Fusce sodales justo. Praesent blandit odio ut elit. Duis nec dolor. Phasellus sem. Donec ac erat. Duis at neque sed augue semper egestas. Donec dictum. Ut augue diam, bibendum nec, rhoncus nec, faucibus et, dolor. Nullam faucibus pede at massa.</p>

<h2>&#8212; <span>W</span>ork Experience &#8212;</h2>

<div id="company1" class="listing">
			<div class="dates">Year &#8212; Year</div>
			<div class="desc"><h3>Company Name</h3> City, State<br /> <h4>Position in Company</h4>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
				<ul>
					<li>In lorem erat, eleifend faucibus, sollicitudin ut, convallis at, lorem.</li>
					<li>Phasellus ante lacus, tempus a, auctor quis, lobortis vel, est.</li>
				</ul>

</div>
			<div class="clear"></div>
			</div>

<div id="company2" class="listing">
			<div class="dates">Year &#8212; Year</div>
			<div class="desc"><h3>Company Name</h3> City, State<br /> <h4>Position in Company</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
				<ul>
					<li>In lorem erat, eleifend faucibus, sollicitudin ut, convallis at, lorem.</li>
					<li>Phasellus ante lacus, tempus a, auctor quis, lobortis vel, est.</li>
				</ul>	
			</div>
			<div class="clear"></div>
			</div>

<div id="company3" class="listing">
			<div class="dates">Year &#8212; Year</div>
			<div class="desc"><h3>Company Name</h3> City, State<br /> <h4>Position in Company</h4>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
				<ul>
					<li>In lorem erat, eleifend faucibus, sollicitudin ut, convallis at, lorem.</li>
					<li>Phasellus ante lacus, tempus a, auctor quis, lobortis vel, est.</li>
				</ul>
			</div>
			<div class="clear"></div>
			</div>

<h2>&#8212; <span>S</span>kills &#8212;</h2>

<div id="columns">
		<div class="columna">
				<ul>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
				</ul>
		</div>
		<div class="columnb">
				<ul>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
				</ul>
		</div>
		<div class="columnc">
				<ul>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
					<li>Eleifend faucibus</li>
				</ul>
		</div>
	</div>

<h2>&#8212; <span>E</span>ducation &#8212;</h2>

<div id="school1" class="listing">
			<div class="dates">Year</div>
			<div class="desc"><h3>School Name</h3> City, State &#8212; Program Focus / Degree</div>
			<div class="clear"></div>
			</div>

<div id="school2" class="listing">
			<div class="dates">Year</div>
			<div class="desc"><h3>School Name</h3> City, State &#8212; Program Focus / Degree</div>
			<div class="clear"></div>
			</div>	
</div>

<div id="contact" class="tabset_content">
   <h2 class="tabset_label">Contact</h2>
<h2>&#8212; <span>C</span>ontact &#8212;</h2>

</div>

<div id="footer">First Last Name | 123 Address Street, City, State Zip | 555-555-5555 | email @ email.com</div>

</body>
</html>

— Stylesheet source code —

* {
	padding: 0;
    margin: 0;
	}
body{
 	font: 10pt/1.8em georgia, verdana, arial, sans-serif;
	text-align: center;
	color: #555;
	background: #a5ebf1;
	}
p{
	padding-bottom: 5px;
	}
a:link{
	color: #302424;
	background: inherit;
	text-decoration: none;
	}
a:active{
	color: #389298;
	background: inherit;
	text-decoration: none;
	}
a:visited{
	color: #6d054e;
	background: inherit;
	text-decoration: none;
	}
a:hover{
	color: #555;
	background: inherit;
	text-decoration: none;
	}
a.pdf:link, a.pdf:active, a.pdf:visited, a.pdf:hover {
	background: #fff url('../images/pdf.gif') no-repeat top left;
	padding-bottom: 3px;
	padding-left: 20px;
	}
a.word:link, a.word:active, a.word:visited, a.word:hover {
	background: #fff url('../images/word.gif') no-repeat top left; 
	padding-bottom: 3px;
	padding-left: 20px;
	}
a.source:link, a.source:active, a.source:visited, a.source:hover {
	background: #a5ebf1 url('../images/source.gif') no-repeat top left; 
	padding-bottom: 3px;
	padding-left: 20px;
	}
h1{
	font: 18pt/1.5em "Lucida Grande", "Times New Roman", serif;
	text-align: center;
	color: #322;
	background: inherit;
	margin: 0px 0px 0px 0px;
	padding-bottom: 4px;
	}
h2{
	font: 13pt/1.5em georgia, "Times New Roman", serif;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-align: center;
	color: #600846;
	background: inherit;
	margin: 20px 0px 0px 0px;
	padding-bottom: 4px;
	}
h2 span{
	font-weight: bold;
	font-size: 15pt;
	}
h3{
	display: inline;
	font: bold 11pt/1.5em georgia, "Times New Roman", serif;
	text-align: left;
	color: #411d36;
	background: inherit;
	margin: 0px;
	padding-bottom: 4px;
	padding-right: 5px;
	}
h4{
	font: 8pt/1.5em georgia, "Times New Roman", serif;	
	margin: 0;
	padding-bottom: 2px;
	}
ul,ol{
	margin-left: 2.6em;
	list-style: square inside;
	}
fieldset{
	border: 0px;
	}
form{
	padding: 20px;
}
label{
	display: block;
	float: left;
	clear: left;
	text-align: right;
	width: 20%;
	padding-top: 0.25em;
	margin: 1em 5px 0 0;
	}
input, select,textarea{
	margin: 1em 0 0 0;
	width: 60%;
	border: 1px solid #cbcbcb;
	padding: 5px;
	font: 8pt verdana, arial, sans-serif;
	color: #222;
	background: #f5f5f5;
	}
input:hover, textarea:hover {
	background: #fff;
	border: 1px solid #571137;
}
input:focus, textarea:focus {
	background: #ededed;
	border: 1px solid #14aebc;
}
#buttons{
	margin: 0 auto;
	text-align: center;
	}
input.button{
	font: 8pt verdana, arial, sans-serif;
	width: auto;
	color: #222;
	background: #f5f5f5;
	border: 1px solid #cbcbcb;
	}

/* general classes and id's */
.clear{
	clear: both;
	}
.address{
	margin: 0 auto;
	text-align: center;
	font: 12pt/1.3em georgia, arial, sans-serif;
	}
.phone{
	float: left;
	padding-left: 60px;
	text-align: left;
	width: 40%;
	}
.email{
	float: right;
	padding-right: 60px;
	text-align: right;
	width: 40%;
	}
.listing{
	width: 90%;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 20px;
	}
.dates{
	float: left;
	text-align: left;
	width: 15%;
	}
.desc{
	float: right;
	text-align: left;
	width: 80%;
	}
hr#spacer{
	border: none 0; 
	border-top: 3px double #333;
	width: 100%;
	height: 3px;
	}
#columns{
	width: 90%;
	margin: 0 auto;
	padding-bottom: 20px;
	}
.columna{
	float: left;
	width: 30%;
	}
.columnb{
	float: left;
	width: 30%;
	}
.columnc{
	float: right;
	width: 40%;
	}
/* */

#wrap{
	width: 700px;
	margin: 0 auto;
	padding: 9px;
	color: #555;
	background: #fff;
	border: 1px solid #e3e3e3;
	text-align: left;
	}
#navigation{
	width: 700px;
	height: 24px;
	margin: 0 auto;
	margin-top: 20px;
	text-align: left;
	}
ul#nav{
	list-style: none;		
	}
	ul#nav li{
		display: inline;
		}	
		ul#nav li a:link, ul#nav a:visited, ul#nav a:active{
			padding: 5px 8px 5px 8px;
			color: #777;
			background: #fff;
			border-top: 1px solid #e3e3e3;
			border-left: 1px solid #e3e3e3;
			border-right: 1px solid #e3e3e3;
			}
#downloads{
	width: 100%;
	height: 30px;
	text-align: right;
	}
	ul#dl{
		list-style: none;
		}
		ul#dl li{
			font: 8pt verdana, arial, sans-serif;
			display: inline;
			}