Arbenting-MinimalistResumeTemplate : Design 2 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 2

Arbenting-MinimalistResumeTemplate

     

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
/*  Colors
 * 
 *  bg & title - #d6c2a8               base
 *  h3bg & borders & links - #e1d2bf   +2
 *  shadows & main border - #cbb191    -2
 *  
 */


/*  Reset  */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  padding: 0;
  margin: 0;
  }
table {
  border-collapse: collapse;
  border-spacing: 0;
  }
fieldset,img { 
  border: 0;
  }
ol,ul {
  list-style: none;
  }
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  font-size: 100%;
  }
abbr,acronym { border: 0;
  }

/*  General   */

body {
  background: #d6c2a8;
  font-size: 16px;
  color: #000;
  font-family:Palatino,"Palatino Linotype",Georgia,"Times New Roman",Times,serif;
  letter-spacing: .02em;
}

a, a:hover, a:visited {
  color: #4b3924;
}

h1 {
  font-weight: bold;
  font-size: 58px;
  color: #4b3924;
  letter-spacing: .05em;
}

h2 {
  font-weight: bold;
  font-size: 22px;
  color: #4b3924;
}

h3 {
  font-weight: bold;
  font-size: 20px;
  background: #e1d2bf;
  padding: 10px 40px;
  margin-left: -40px;
  width: 450px;
  color: #000;
}

h4 {
  font-weight: bold;
  font-size: 18px;
  margin-top: 20px;
}

/*  Content   */

#wrapper {
  background-color: #fff;
  width: 800px;
  margin: 60px auto;
  padding: 40px;
  box-shadow: 10px 10px 5px #cbb191;
  -moz-box-shadow: 10px 10px 5px #cbb191;
  -webkit-box-shadow: 10px 10px 5px #cbb191;
  border: 1px solid #cbb191;
}

#header {
  padding-bottom: 100px;
  border-bottom: 2px solid #e1d2bf;
  height: 100%;
  margin-bottom: 40px;
}

#title {
  float: left;
  margin-top: -20px;
}

#contact {
  float: right;
  margin-right: 40px;  
}

#contact td {
  padding-right: 10px;
}

#background {
  clear: both;
}

#background p {
  margin: 20px 60px 20px 40px;
}

#experience {
  margin-bottom: 40px;
}

.exp {
  margin: 10px 40px;
}

.year {
  float: right;
  margin-top: -40px;
  font-weight: bold;
  margin-right: 40px;
}

.gpa {
  float: right;
  margin-top: -20px;
  margin-right: 40px;
}

.description {
  clear: both;
  margin: 20px 40px;
}

#education .exp {
  margin-bottom: 30px;
}

#skills {
  border-bottom: 2px solid #e1d2bf;
  padding-bottom: 100px;
}

#skills ul {
  margin: 20px;
}

#skills li {
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  width: 210px;
  padding-bottom: 10px;
  font-size: 14px;
}

#footer {
  clear: both;
  font-size: 12px;
  text-align: center;
  padding-top: 20px;
}

</style>


    <!-- ATTN!! change stylegray.css to whichever stylesheet you want to use, 
    styleblue.css, stylegreen.css, styletan.css or print.css -->
    
    <title>Jan Dougherty | Web Design &amp; Development</title>
    
<!--[if lte IE 7]>
<style type="text/css">
#header {padding-bottom: 20px;}
#skills {padding-bottom: 20px;
</style>
<![endif]-->

  </head>
  <body>
    
  <div id="wrapper">
    
    <div id="header">
      
      <div id="title">
        <h1>Jan Dougherty</h1>
        <h2>Web Design &amp; Development</h2>
      </div><!-- end title -->
      
      <div id="contact">
        
        <table summary="Contact Info">
          <tr>
            <td>Twitter</td>
            <td> | </td>
            <td><a href="http://twitter.com/jandougherty">@jandougherty</a></td>
          </tr>
          <tr>
            <td>Website</td>
            <td> | </td>
            <td><a href="http://yoursite.com">My Portfolio</a></td>
          </tr>
          <tr>
            <td>Email</td>
            <td> | </td>
            <td><a href="mailto:jan@janswebdev.com">jan@janswebdev.com</a></td>
          </tr>
          <tr>
            <td>Phone</td>
            <td> | </td>
            <td>(555)555-5555</td>
          </tr>
        </table>
                
      </div><!-- end contact -->
      
    </div><!-- end header -->
    
    <div id="background">
      <h3>Background</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ullamcorper ipsum, at laoreet justo vestibulum vel. Nam quis tortor id nibh suscipit dignissim. Suspendisse cursus fringilla varius. Etiam et augue enim, id commodo metus. Maecenas fringilla odio et leo tincidunt mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac velit tortor, et eleifend velit.</p>
    </div><!-- end bio -->
    
    <div id="experience">
      <h3>Experience</h3>
      
      <div class="exp">
        <h4>Business Name</h4>
        <h5>Job Title</h5>
        <p class="year">2000-2005</p>
        <p class="description">Nunc blandit, justo ut pulvinar tempor, purus sapien condimentum lorem, a egestas ipsum dui in turpis. Vestibulum odio lacus, aliquet non laoreet eu, euismod eu ipsum. Integer in justo a magna mattis ullamcorper et sit amet justo. Sed non est neque, sit amet gravida est. Vivamus vestibulum tortor vitae metus consequat luctus.</p>
      </div>
      
      <div class="exp">
        <h4>Business Name</h4>
        <h5>Job Title</h5>
        <p class="year">2000-2005</p>
        <p class="description">Nunc blandit, justo ut pulvinar tempor, purus sapien condimentum lorem, a egestas ipsum dui in turpis. Vestibulum odio lacus, aliquet non laoreet eu, euismod eu ipsum. Integer in justo a magna mattis ullamcorper et sit amet justo. Sed non est neque, sit amet gravida est. Vivamus vestibulum tortor vitae metus consequat luctus.</p>
      </div>
      
      <div class="exp">
        <h4>Business Name</h4>
        <h5>Job Title</h5>
        <p class="year">2000-2005</p>
        <p class="description">Nunc blandit, justo ut pulvinar tempor, purus sapien condimentum lorem, a egestas ipsum dui in turpis. Vestibulum odio lacus, aliquet non laoreet eu, euismod eu ipsum. Integer in justo a magna mattis ullamcorper et sit amet justo. Sed non est neque, sit amet gravida est. Vivamus vestibulum tortor vitae metus consequat luctus.</p>
      </div>
      
      <div class="exp">
        <h4>Business Name</h4>
        <h5>Job Title</h5>
        <p class="year">2000-2005</p>
        <p class="description">Nunc blandit, justo ut pulvinar tempor, purus sapien condimentum lorem, a egestas ipsum dui in turpis. Vestibulum odio lacus, aliquet non laoreet eu, euismod eu ipsum. Integer in justo a magna mattis ullamcorper et sit amet justo. Sed non est neque, sit amet gravida est. Vivamus vestibulum tortor vitae metus consequat luctus.</p>
      </div>
      
    </div><!-- end experience -->
    
    <div id="education">
      <h3>Education</h3>
      
      <div class="exp">
        <h4>College Name | College Location</h4>
        <h5>Major/Minor/Degree Earned</h5>
        <p class="year">2000-2005</p>
        <p class="gpa">3.7 GPA</p>
      </div>
      
      <div class="exp">
        <h4>College Name | College Location</h4>
        <h5>Major/Minor/Degree Earned</h5>
        <p class="year">2000-2005</p>
        <p class="gpa">3.7 GPA</p>
      </div>
      
    </div><!-- end education -->
    
    <div id="skills">
      <h3>Skills</h3>
      
      <ul>
        <li>Photoshop</li>
        <li>Illustrator</li>
        <li>XHTML/HTML/CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Cross Browser Compatability</li>
        <li>PHP</li>
        <li>Flash</li>
        <li>Standards Compliancy</li>
      </ul>
      
    </div><!-- end skills -->
    
    <div id="footer">
      <p>Jan Dougherty | <a href="mailto:jan@janswebdev.com">jan@janswebdev.com</a> | (555)555-5555 | <a href="print.html">Print my Resume</a></p>
    </div><!-- end footer -->
  
  </div><!-- end wrapper -->
  
  </body>
</html>








Related examples in the same category

1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.aboutfruts
28.abrasive
29.abscond
30.abstraction
31.acallia-development
32.accomplishable
33.actualbiz
34.adhesive
35.adios
36.advantage
37.aero-solutions
38.aerolyk
39.affection
40.agency
41.ahoy
42.al-infolabs
43.alexx-c
44.alieninvasion
45.alpha
46.altered
47.altruism
48.ambiance
49.amoreira
50.angryhornet
51.anibanner01
52.AnotherSquare
53.anther
54.anthropod
55.Antikoerperchen
56.antiquity
57.aphotic
58.applique
59.aprilshowers
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic