Resume

Plan, plan, plan! Good resumes, like all web projects, begin with a great plan, typed in an organized way that can be later used to create your html page. You can download the RESUME PLAN document to the right and use it to write your resume before you create your html docoument.

Download the code to work with a template of my resume. Open the Resume Code 3 document and COPY ALL the code. Paste into a new Text Wrangler file and delete Mr. Sommer's resume information and insert your own. Note all the CSS code within the <head> element that makes this resume project really look professional when opened below.

<!DOCTYPE html>

<html>

<head>

<title>Mr. Sommer - Curriculum Vitae</title>

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,bl

ockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,

kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,

li,fieldset,form,label,legend,table,caption,tbody,tfoot

,thead,tr,th,td,article,aside,canvas,details,figcaption

,figure,footer,header,hgroup,menu,nav,section,summary,t

ime,mark,audio,video {

border:0;

font:inherit;

font-size:100%;

margin:0;

padding:0;

vertical-align:baseline;

}

article,aside,details,figcaption,figure,footer,header,h

group,menu,nav,section {

display:block;

}

html, body {background: #181818; font-family: 'Lato',

helvetica, arial, sans-serif; font-size: 16px; color:

#222;}

.clear {clear: both;}

{

font-size: 1em;

line-height: 1.4em;

margin-bottom: 20px;

color: #444;

}

#cv {

width: 90%;

max-width: 800px;

background: #f3f3f3;

margin: 30px auto;

}

.mainDetails {

padding: 25px 35px;

border-bottom: 2px solid #cf8a05;

background: #ededed;

}

#name h1 {

font-size: 2.5em;

font-weight: 700;

font-family: 'Rokkitt', Helvetica, Arial,

sans-serif;

margin-bottom: -6px;

}

#name h2 {

font-size: 2em;

margin-left: 2px;

font-family: 'Rokkitt', Helvetica, Arial,

sans-serif;

}

#mainArea {

padding: 0 40px;

}

#name {

float: left;

}

#contactDetails {

float: right;

}

#contactDetails ul {

list-style-type: none;

font-size: 0.9em;

margin-top: 2px;

}

#contactDetails ul li {

margin-bottom: 3px;

color: #444;

}

#contactDetails ul li a, a[href^=tel] {

color: #444;

text-decoration: none;

-webkit-transition: all .3s ease-in;

-moz-transition: all .3s ease-in;

-o-transition: all .3s ease-in;

-ms-transition: all .3s ease-in;

transition: all .3s ease-in;

}

#contactDetails ul li a:hover {

color: #cf8a05;

}

section {

border-top: 1px solid #dedede;

padding: 20px 0 0;

}

section:first-child {

border-top: 0;

}

section:last-child {

padding: 20px 0 10px;

}

.sectionTitle {

float: left;

width: 25%;

}

.sectionContent {

float: right;

width: 72.5%;

}

.sectionTitle h1 {

font-family: 'Rokkitt', Helvetica, Arial,

sans-serif;

font-style: italic;

font-size: 1.5em;

color: #cf8a05;

}

.sectionContent h2 {

font-family: 'Rokkitt', Helvetica, Arial,

sans-serif;

font-size: 1.5em;

margin-bottom: -2px;

}

.subDetails {

font-size: 0.8em;

font-style: italic;

margin-bottom: 3px;

}

.keySkills {

list-style-type: none;

-moz-column-count:3;

-webkit-column-count:3;

column-count:3;

margin-bottom: 20px;

font-size: 1em;

color: #444;

}

.keySkills ul li {

margin-bottom: 3px;

}

@media all and (min-width: 602px) and (max-width:

800px) {

#headshot {

display: none;

}

.keySkills {

-moz-column-count:2;

-webkit-column-count:2;

column-count:2;

}

@media all and (max-width: 601px) {

#cv {

width: 95%;

margin: 10px auto;

min-width: 280px;

}

#name, #contactDetails {

float: none;

width: 100%;

text-align: center;

}

.sectionTitle, .sectionContent {

float: none;

width: 100%;

}

.sectionTitle {

margin-left: -2px;

font-size: 1.25em;

}

.keySkills {

-moz-column-count:2;

-webkit-column-count:2;

column-count:2;

}

@media all and (max-width: 480px) {

.mainDetails {

padding: 15px 15px;

}

section {

padding: 15px 0 0;

}

#mainArea {

padding: 0 25px;

}

.keySkills {

-moz-column-count:1;

-webkit-column-count:1;

column-count:1;

}

#name h1 {

line-height: .8em;

margin-bottom: 4px;

}

@media print {

#cv {

width: 100%;

}

@-webkit-keyframes reset {

0% {

opacity: 0;

}

100% {

opacity: 0;

}

@-webkit-keyframes fade-in {

0% {

opacity: 0;

}

40% {

opacity: 0;

}

100% {

opacity: 1;

}

@-moz-keyframes reset {

0% {

opacity: 0;

}

100% {

opacity: 0;

}

@-moz-keyframes fade-in {

0% {

opacity: 0;

}

40% {

opacity: 0;

}

100% {

opacity: 1;

}

@keyframes reset {

0% {

opacity: 0;

}

100% {

opacity: 0;

}

</style>

</head>

<h1 class="quickFade

delayOne">Mr. Sommer</h1>

<h2 class="quickFade

delayOne">Product Manager</h2>

</div>

<div id="contactDetails"

class="quickFade delayOne">

<ul>

<li><a

href="mailto:sommers1@milwaukee.k12.wi.us"

target="_blank">Mr. Sommer@milwaukee.k12.wi.us</a></li>

<li> <a

href="http://www5.milwaukee.k12.wi.us/school/bradleytec

h/">www.bradleytech</a></li>

</ul>

</div>

</div>

<div

class="sectionTitle">

<h1>Personal

Profile</h1>

</div>

<div

class="sectionContent">

<p>I have over

20 years of experience in business, including managing

my own business, and working for small and large

corporations with responsibilities that include product

development, sales, service, and training. My past

professional careers, which include business and

economic reporting in Milwaukee and Argentina, and

international business experiences working with

partners in Canada, China and Europe, have all served

me well in the classroom. I am now a high school and

college instructor, and apply real-world examples to

connect meaning to the classroom learning.</p>

</div>

</article>

</section>

<h1>Work

Experience</h1>

</div>

<h2>Bradley Tech High School</h2>

<p class="subDetails">September 2005 -

Present</p>

<p>Computer programming, economics, and

business instructor.</p>

</article>

<p

class="subDetails">February 2004 - Present</p>

<p>Economics

instructor, classroom and on-line.</p>

</article>

<h2>White Bear

Sales Inc.</h2>

<p

class="subDetails">October 1989 - December 2003</p>

<p>U.S.

distributor of a three-wheel police vehicle, off-road

vehicles and other utility equipment. Earned majority

market share within five years and built sales to over

$3.5 million. Responsible for product development,

technical support, parts and field service, promotion,

computer information systems and website, sales to the

U.S. General Service Administration, business

administration, accounting, dealer and supplier

relations.</p>

</article>

</div>

</section>

<h1>References</h1>

</div>

<li>Casey Gill<br>(262) 333-4545</li>

</ul>

</div>

</section>

<h1>Key Skills</h1>

</div>

<li>Web/App

development</li>

<li>Visual

Basic and C++</li>

<li>Firefighter</li>

<li>Product service</li>

<li>Product

development</li>

<li>Heavy

equipment operator</li>

</ul>

</div>

</section>

<h1>Education</h1>

</div>

<h2>South

Dakota State University</h2>

<p

class="subDetails">BS-Economics</p>

<p>Assistant

editor for college newspaper, men's swim and soccer

teams. Minor in journalism.</p>

</article>

<h2>Concordia

University Wisconsin</h2>

<p

class="subDetails">MS-Computer Science, Education</p>

<p>Languages:

Visual basic, C++. Education certification in business,

computer science and economics. GPA: 3.92.</p>

</article>

</div>

</section>

</div>

</body>

</html>