12+ Html & CSS Resume Templates

This post contains a total of 12+ Html & CSS Resume Template Examples with Source Code. All these Resume Templates are made using Html and CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Html & CSS Resume Templates

1. By Mark McMurray

Made by Mark McMurray. CSS Grid Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

a {
  color: #333;
  font-weight: 550;
}

a:hover {
  color: #b2cf3d;
}

.wrapper {
  width: 100%;
  max-width: 960px;
  margin: auto;
  background-color: #fff;
}

.name {
  border-bottom: 5px solid #333;
  padding: 2rem 1rem;
}

.name__heading {
  margin: 0;
  padding: 0;
  font-size: 40px;
}

.name__color {
  color: #b2cf3d;
}

.introduction {
  border-bottom: 5px solid #333;
  padding: 1rem;
}

.introduction__link-container {
  text-align: right;
}

.contact-information {
  border-bottom: 1.5rem solid #b2cf3d;
  padding: 1rem;
}

.contact-information__phone {
  font-size: 1.25em;
}

.skills {
  border-bottom: 5px solid #333;
  padding: 1rem;
}

.skills__list {
  list-style-type: none;
  padding: 0;
}

.education {
  border-bottom: 5px solid #333;
  padding: 1rem;
}

.institution {
  padding-bottom: 1rem;
}

.institution__degree, .institution__name, .institution__location, .institution__duration {
  margin: 0;
}

.experience {
  padding: 1rem;
  border-bottom: 5px solid #333;
}

.job {
  margin-bottom: 1rem;
}

.job__position {
  margin: 0;
}

.job__employer {
  margin: 0.25rem 0 0.5rem;
  font-weight: bold;
}

.job__description {
  margin: 0;
}

.job__duties {
  margin: 0;
}

.job__duty {
  font-size: 0.9em;
}

.footer__text {
  color: #ffffff;
  text-align: center;
}

.footer__link {
  color: #ffffff;
}

@media screen and (min-width: 840px) {
  body:before {
    content: "Sorry, it seems your browser doesn't support display: grid. Below is the fallback.";
    display: block;
    padding: 2rem;
    color: #ffffff;
    text-align: center;
  }

  @supports (display: grid) {
    body:before {
      display: none;
    }

    .resume {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto auto;
      grid-template-areas: "name name name" "intro intro contact" "skills experience experience" "education experience experience";
    }

    .name {
      grid-area: name;
      padding: 3rem 3rem 0 3rem;
    }

    .name__heading {
      font-size: 80px;
    }

    .introduction {
      grid-area: intro;
      padding: 0 1rem 0 3rem;
    }

    .contact-information {
      grid-area: contact;
      display: grid;
      grid-template-rows: 25% 25% 25% 25%;
      grid-template-areas: "contact-phone" "contact-email" "contact-website" "contact-location";
      border-bottom: 5px solid #333;
      border-left: 5px solid #333;
      padding: 0 3rem 0 1rem;
    }

    .contact-information__heading {
      display: none;
    }

    .contact-information__phone {
      grid-area: contact-phone;
    }

    .contact-information__email {
      grid-area: contact-email;
    }

    .contact-information__website {
      grid-area: contact-website;
    }

    .contact-information__location {
      grid-area: contact-location;
    }

    .skills {
      grid-area: skills;
      border-right: 5px solid #333;
      padding: 0 1rem 0 3rem;
      text-align: right;
    }

    .education {
      grid-area: education;
      border-right: 5px solid #333;
      border-bottom: none;
      padding: 0 1rem 0 3rem;
      text-align: right;
    }

    .experience {
      grid-area: experience;
      border-bottom: 1.5rem solid #b2cf3d;
      padding: 0 3rem 0 1rem;
    }
  }
}
</style>
</head>
<body>
  <div class='wrapper'>
  <div class='resume'>
    <div class='name'>
      <h1 class='name__heading'>MARK<span class="name__color">MCMURRAY</span></h1>
    </div>
    <div class='introduction'>
      <h2 class='introduction__heading'>PROFESSIONAL PROFILE</h2>
      <p class='introduction__content'>Ullum accusata at eos. Hinc vitae graece mel ex, ut nec nisl elitr interpretaris. Qui augue erant reprehendunt an, ex natum maiorum est. Dolores noluisse mediocritatem eos ex, utroque fuisset nostrum ius id, id vel libris semper everti. Id ipsum atqui mel, eum libris insolens tractatos in. Eu deleniti constituam concludaturque pro, his persius neglegentur.</p>
      <div class='introduction__link-container'>
        <a class='introduction__link' href="https://www.linkedin.com/in/example" target='_blank'>linkedin.com/in/example</a>
      </div>
    </div>
    <div class='experience'>
      <h2 class='experience__heading'>WORK EXPERIENCE</h2>
      <div class='experience__content'>
        <div class='job'>
          <h3 class='job__position'>JOB POSITION / TITLE</h3>
          <p class='job__employer'>
            <span class="job__employer-name">Company Name</span> / <span class="job__employer-location">Location</span> / <span class="job__duration">2014 - Present</span>
          </p>
          <p class='job__description'>Lorem ipsum dolor sit amet, illud dignissim ad vel, ad nam pertinax adversarium. Duo vituperata accommodare id, duo timeam gloriatur ad, ea pri iracundia interesset. Laoreet impedit volutpat quo te, his eu amet qualisque.</p>
          <ul class='job__duties'>
            <li class='job__duty'>His velit tritani persequeris ei, atqui erant molestie nam ex, pro ei nisl prodesset.</li>
            <li class='job__duty'>Falli indoctum scripserit id duo, mei no maluisset laboramus, te ius alia dicta expetendis.</li>
            <li class='job__duty'>Eu probatus tractatos definitiones nec, sit at quem essent. Harum eruditi has in, pro quod dolor mentitum et, mea assum recteque at.</li>
          </ul>
        </div>
        <div class='job'>
          <h3 class='job__position'>JOB POSITION / TITLE</h3>
          <p class='job__employer'>
            <span class="job__employer-name">Company Name</span> / <span class="job__employer-location">Location</span> / <span class="job__duration">2009 - 2014</span>
          </p>
          <p class='job__description'>Lorem ipsum dolor sit amet, illud dignissim ad vel, ad nam pertinax adversarium. Duo vituperata accommodare id, duo timeam gloriatur ad, ea pri iracundia interesset. Laoreet impedit volutpat quo te, his eu amet qualisque.</p>
          <ul class='job__duties'>
            <li class='job__duty'>His velit tritani persequeris ei, atqui erant molestie nam ex, pro ei nisl prodesset.</li>
            <li class='job__duty'>Falli indoctum scripserit id duo, mei no maluisset laboramus, te ius alia dicta expetendis.</li>
            <li class='job__duty'>Eu probatus tractatos definitiones nec, sit at quem essent. Harum eruditi has in, pro quod dolor mentitum et, mea assum recteque at.</li>
          </ul>
        </div>
        <div class='job'>
          <h3 class='job__position'>JOB POSITION / TITLE</h3>
          <p class='job__employer'>
            <span class="job__employer-name">Company Name</span> / <span class="job__employer-location">Location</span> / <span class="job__duration">2006 - 2009</span>
          </p>
          <p class='job__description'>Lorem ipsum dolor sit amet, illud dignissim ad vel, ad nam pertinax adversarium. Duo vituperata accommodare id, duo timeam gloriatur ad, ea pri iracundia interesset. Laoreet impedit volutpat quo te, his eu amet qualisque.</p>
          <ul class='job__duties'>
            <li class='job__duty'>His velit tritani persequeris ei, atqui erant molestie nam ex, pro ei nisl prodesset.</li>
            <li class='job__duty'>Falli indoctum scripserit id duo, mei no maluisset laboramus, te ius alia dicta expetendis.</li>
            <li class='job__duty'>Eu probatus tractatos definitiones nec, sit at quem essent. Harum eruditi has in, pro quod dolor mentitum et, mea assum recteque at.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class='skills'>
      <h2 class='skills__heading'>KEY SKILLS</h2>
      <ul class='skills__list'>
        <li class='skills__skill'>Communication / Teamwork</li>
        <li class='skills__skill'>Creativity / Problem Solving</li>
        <li class='skills__skill'>HTML5 / CSS3</li>
        <li class='skills__skill'>SASS / SCSS</li>
        <li class='skills__skill'>JavaScript</li>
        <li class='skills__skill'>REST / AJAX</li>
        <li class='skills__skill'>NodeJS</li>
        <li class='skills__skill'>GIT / Github</li>
        <li class='skills__skill'>GRUNT / GULP</li>
        <li class='skills__skill'>Adobe Creative Suite</li>
        <li class='skills__skill'>DotCMS / WordPress</li>
        <li class='skills__skill'>Bootstrap / Foundation</li>
      </ul>
    </div>
    <div class='education'>
      <h2 class='education__heading'>EDUCATION</h2>
      <div class='education__content'>
        <div class='institution'>
          <h3 class='institution__degree'>Degree Name / Major</h3>
          <p class='institution__name'>University Name</p>
          <p class='institution__location'>University Location</p>
          <p class='institution__duration'>August 2009 - May 2014</p>
        </div>
        <div class='institution'>
          <h3 class='institution__degree'>Degree Name / Major</h3>
          <p class='institution__name'>University Name</p>
          <p class='institution__location'>University Location</p>
          <p class='institution__duration'>August 2007 - May 2019</p>
        </div>
        <div class='institution'>
          <h3 class='institution__degree'>Degree Name / Major</h3>
          <p class='institution__name'>University Name</p>
          <p class='institution__location'>University Location</p>
          <p class='institution__duration'>August 2003 - May 2007</p>
        </div>
      </div>
    </div>
    <div class='contact-information'>
      <h2 class='contact-information__heading'>CONTACT INFORMATION</h2>
      <p class='contact-information__phone'>
        <a class='contact-information__link' href='#' target='_blank'>(555) 555-5555</a>
      </p>
      <p class='contact-information__email'>
        <a class='contact-information__link' href="#">[email protected]</a>
      </p>
      <p class='contact-information__website'>
        <a class='contact-information__link' href='http://www.example.com' target='_blank'>example.com</a>
      </p>
      <p class='contact-information__location'>City Name, State Name</p>
    </div>
  </div>
</div>
<footer class='footer'>
  <p class='footer__text'>CSS Grid Resume by <a href="//codepen.io/requestingmark/" class="footer__link" target="_blank">Mark McMurray</a></p>
</footer>
</body>
</html>
 

2. By John Lueders

Made by John Lueders. Professional Resume Design using Html, CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@charset "UTF-8";
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
/* Colors */
/* Sizes */
/* Media Query Breakpoint */
/* Header Arrow Effect */
/* Typography */
h1, h2, h3 {
  font-family: Bitter, serif;
}

h1 {
  color: #333;
  font-size: 190%;
}

h2 {
  color: #707070;
}

ul {
  list-style: none;
  margin-left: -1.1em;
}

li {
  margin-bottom: 10px;
  position: relative;
}
li:before {
  content: '✓';
  position: absolute;
  left: -20px;
}

a {
  color: #db4747;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a:hover, a:focus {
  color: #c82727;
}

.clearfix, header, .info {
  display: table;
  content: '';
  clear: both;
}

/* Box Model */
*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #CAE5E7;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

.resume {
  position: relative;
  background: white;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto 50px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 58em) {
  .resume {
    width: 96%;
  }
}

header {
  position: relative;
  background: #3b8fb8;
  width: 100%;
  overflow: hidden;
  height: 90px;
  text-shadow: 1px 2px 3px #304a63;
}
header h1 {
  position: relative;
  font-family: 'Bitter', serif;
  font-size: 250%;
  background: #28627d;
  color: white;
  margin: 0;
  height: 90px;
  padding-top: 15px;
  padding-left: 35px;
  padding-right: 30px;
  float: left;
  z-index: 2;
}
@media (max-width: 75em) {
  header h1 {
    width: 100%;
    padding-right: 5px;
  }
}
@media (max-width: 36em) {
  header h1 span {
    display: none;
  }
}
header h1:after {
  position: absolute;
  content: '';
  height: 100%;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  border-left: 20px solid #28627d;
  right: -20px;
  top: 0;
}
header div {
  position: relative;
  color: white;
  float: left;
  padding-top: 24px;
  padding-left: 60px;
  padding-right: 48px;
  height: 90px;
}
@media (max-width: 75em) {
  header div {
    width: 50%;
  }
}
@media (max-width: 36em) {
  header div {
    width: 100%;
    padding-left: 30px;
  }
}
header div:first-of-type {
  background: #2e779c;
  z-index: 1;
}
header div:first-of-type:after {
  position: absolute;
  content: '';
  height: 100%;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  border-left: 20px solid #2e779c;
  right: -20px;
  top: 0;
}
@media (max-width: 75em) {
  header div:first-of-type {
    padding-left: 30px;
  }
}
header a {
  color: white;
  padding: 0 3px;
  border-radius: 2px;
  text-decoration: none;
}
header a:hover, header a:focus {
  color: white;
  background: #00baa6;
}

.info {
  width: 100%;
}

section {
  float: left;
  width: 70%;
  padding: 0 30px;
}
section article {
  margin-bottom: 30px;
}
section h2 {
  font-size: 100%;
  text-transform: uppercase;
  margin-bottom: 0;
}
section h2 span {
  text-transform: none;
}
section p {
  line-height: 1.5;
}
section .education p {
  margin-top: 3px;
}
@media (max-width: 58em) {
  section {
    width: 100%;
  }
}

.work .block {
  margin-bottom: 30px;
}

aside {
  float: left;
  background: whitesmoke;
  border-left: 1px solid #ccc;
  width: 30%;
  padding-left: 30px;
  padding-right: 30px;
}
aside article {
  margin-bottom: 50px;
}
aside h1 {
  font-size: 150%;
  margin-top: 29px;
}
aside a {
  color: #333;
  text-decoration: none;
  border-bottom: 1px dashed gainsboro;
}
aside a:hover, aside a:focus {
  background: #e8e8e8;
}
@media (max-width: 58em) {
  aside {
    width: 100%;
    border-left: none;
    border-top: 1px solid #ccc;
  }
}
</style>
</head>
<body>
  <div class="resume">

<header>
  <h1>John <span>C.</span> Lueders</h1>
  <div class="job-titles">
    Software Architect<br/>
    Web Developer
  </div>
  <div class="contact-info">
    <a href="#">[email protected]</a><br/>
    <a href="#">484.341.8486</a>
  </div>
</header>
  
<div class="info">
  
  <section role="main"> 

    <article class="work">
      <h1>Work Experience</h1>
      <div class="block">
        <h2>2004-Present: Elm Software LLC | Chester Springs, PA</h2>
        <p>Elm Software specializes in software products for the wedding industry, including bridal couples and wedding and event professionals.</p>
        <p><em>Roles:</em> Founder and Owner</p>
        <p><em>Responsibilities:</em> Independently started and managed every aspect of Elm Software, including but not limited to software development (UI and backend), web design, marketing, sales, and accounting.</p>
        <p><em>Highlights:</em></p>
        <ul>
          <li>Awarded 5 star rating from CNET Download.com for iDo Wedding Couple Edition</li>
          <li>Awarded top rated wedding software on Top10Reviews.com</li>
          <li>Elm Software products have been downloaded over 250,000 times and
sold in 95 countries with $800,000 in sales since 2004</li>
          <li>Secured national distribution deal with SummitSoft that placed iDo
Wedding Couple Edition, Tabula Rasa Couple Edition, and PrintJobs in
Target, Marriott, Barnes & Noble and other national chains</li>
          <li>Software sold by Bucks County Community College, Carlson Crafts,
Weston Distance Learning, Lovegevity, and other 400+ affiliates</li>
          <li>Software recommended by the Association of Bridal Consultants (ABC)</li>
          <li>Bucks County Community College designed its wedding planning
curriculum around iDo Wedding and Event Professional Edition</li>
          <li>Released cloud based version of iDo (<a href="#">idohq.com</a>). Uses the following technology: .Net 4.0, VB.Net WinForms, SQL Azure, Amazon S3, Stripe in-app purchasing, Markdown to create websites through software, Integrated outgoing email using Sendgrid</li>
        </ul>
      </div>
      <div class="block">
        <h2>2002-2004: Centocor, Inc. | Malvern, PA</h2>
        <p><em>Role:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Collaborated with the Head Statistician to create an application to organize clinical trial data through SAS data sets and prepare tables for submission to the Food and Drug Administration. The end product was implemented successfully and used by 50 statisticians at Centocor. Centocor continues to use this software today.</p>
      </div>
      <div class="block">
        <h2>2002: Lincoln Financial Group | Philadelphia, PA</h2>
        <p><em>Role:</em> Database Administrator and Reporter, Consultant</p>
        <p><em>Responsibilities:</em> Wrote SQL queries against the data warehouse to provide regional sales reports to upper management.</p>
      </div>
      <div class="block">
        <h2>2001-2002: The Vanguard Group, Inc. | Malvern, PA</h2>
        <p><em>Role:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Designed a Visual Basic application that served as a backend management tool enabling managers of Vanguard’s Operational Excellence Initiative to use the existing Microsoft Project add-in.</p>
      </div>
      <div class="block">
        <h2>2000-2001: Montgomery County Community College | Blue Bell, PA</h2>
        <p><em>Role:</em> Adjunct Professor</p>
        <p><em>Responsibilities:</em> Taught two semesters of coursework introducing students to Visual Basic and database design.</p>
      </div>
      <div class="block">
        <h2>1998-2001: Merck & Co. | West Point, PA</h2>
        <p><em>Roles:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Created a front-end program to keep track of the compounds and all studies in the pre-clinical division of Merck; created a frontend tool allowing pathologists and toxicologists to select and query a database and thereby track pre-clinical testing and study progress.</p>
      </div>
      <div class="block">
        <h2>1997-1998: Cahners Publications | Radnor, PA</h2>
        <p><em>Role:</em> Database Migrator, Consultant</p>
        <p><em>Responsibilities:</em> Wrote Access programs that pulled data from Access databases and push them into the Master SQL Server Database.</p>
      </div>
      <div class="block">
        <h2>1995-1997: FXpress | Bala Cynwyd, PA</h2>
        <p><em>Role:</em> Application Developer and Salesman</p>
        <p><em>Responsibilities:</em> Helped develop a frontend Visual Basic interface for derivatives accounting firm sold to Fortune 500 companies.</p>
      </div>
      <div class="block">
        <h2>1992-1995: D.C. Lueders Co. | Strafford, PA</h2>
        <p><em>Role:</em> Confectionery Broker</p>
        <p><em>Responsibilities:</em> Gave sales presentations to grocery chains and bulk distributors to secure orders for 15 confectionery companies including Just Born, Old Dominion Peanut Company, Claeys Candies, to name a few.</p>
      </div>
    </article>
    <article>
      <h1>Professional Presentations</h1>
      <ul>
        <li>Bucks County Community College, 2006-2011</li>
        <li>ABC National Conference, 2007, 2009, 2011</li>
        <li>ABC North Carolina Chapter Wedding Professionals Conference, 2008</li>
        <li>ABC Pennsylvania Chapter Wedding Professionals Conference, 2007</li>
        <li>Product Launch at Centocor, 2003</li>
        <li>Product Launch at Merck, 2001</li>
      </ul>
    </article>
    <article>
      <h1>Professional Development</h1>
      <ul>
        <li>One-on-one workshop with Chris Coyier of <a href="#">css-tricks.com</a>, 2012</li>
        <li>Windows 8 Launch, Philadelphia, PA, 2012</li>
        <li>Windows Azure Workshop, New York, NY, 2012</li>
        <li>Visual Studio 2010 Launch, Philadelphia, PA, 2010</li>
        <li>Windows 7 Launch, Philadelphia, PA, 2009</li>
        <li>Visual Studio 2008 Launch, Harrisburg, PA, 2008</li>
      </ul>
    </article>
    <article class="education">
      <h1>Education</h1>
      <div class="block">
        <h2>Bachelor of Arts <span>in</span> Management of Information Technology</h2>
        <p>Eastern University | St. David's, PA<br/>2003</p>
      </div>
      <div class="block">
        <h2>Certificate <span>in</span> Business Programming</h2>
        <p>CHUBB Institute | Springfield, PA<br/>1995</p>
      </div>
    </article>
  </section>
  
  <aside>
    <article>
      <h1>Technologies</h1>
      <p>Amazon Web Services (S3)</p>
      <p>ASP.Net / MVC</p>
      <p>C#</p>
      <p>CSS3</p>
      <p>Final Cut Pro X</p>
      <p>Fireworks</p>
      <p>GDI+</p>
      <p>HTML5</p>
      <p>Javascript / jQuery</p>
      <p>MySQL</p>
      <p>Office</p>
      <p>Oracle</p>
      <p>Photoshop</p>
      <p>PHP</p>
      <p>Responsive Web Design</p>
      <p>SASS + Compass</p>
      <p>SQL Server</p>
      <p>Stripe API</p>
      <p>T-SQL</p>
      <p>VB.Net</p>
      <p>Windows Azure</p>
      <p>Wordpress</p>
    </article>
    <article>
      <h1>Elm Software Products</h1>
      <p><a href="#">iDo in the Cloud</a></p>
      <p><a href="#">iDo Wedding Couple Edition</a></p>
      <p><a href="#">iDo Wedding and Event Professional Edition</a></p>
      <p><a href="#">Tabula Rasa Couple Edition</a></p>
      <p><a href="#">Tabula Rasa Professional Edition</a></p>
      <p><a href="#">PrintJobs</a></p>
      <p><a href="#">PasswordDock</a></p>
    </article>
    <article>
      <h1>Hobbies</h1>
      <p>Family time</p>
      <p>Playing the piano</p>
      <p>Home improvement projects</p>
      <p>Movie making with Final Cut Pro X</p>
      <p>Graphic Design with Photoshop / Fireworks</p>
      <p>Developing WordPress sites for church</p>
    </article>
  </aside>
   
  </div><!-- CV -->
  
</div><!-- That's a wrap -->
</body>
</html>

3. By Rajeshdn

Made by Rajeshdn. Resume/CV Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Montserrat", sans-serif;
}

body {
  background: #585c68;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
}

.bold {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.semi-bold {
  font-weight: 500;
  font-size: 16px;
}

.resume {
  width: 800px;
  height: auto;
  display: flex;
  margin: 50px auto;
}

.resume .resume_left {
  width: 280px;
  background: #0bb5f4;
}

.resume .resume_left .resume_profile {
  width: 100%;
  height: 280px;
}

.resume .resume_left .resume_profile img {
  width: 100%;
  height: 100%;
}

.resume .resume_left .resume_content {
  padding: 0 25px;
}

.resume .title {
  margin-bottom: 20px;
}

.resume .resume_left .bold {
  color: #fff;
}

.resume .resume_left .regular {
  color: #b1eaff;
}

.resume .resume_item {
  padding: 25px 0;
  border-bottom: 2px solid #b1eaff;
}

.resume .resume_left .resume_item:last-child,
.resume .resume_right .resume_item:last-child {
  border-bottom: 0px;
}

.resume .resume_left ul li {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.resume .resume_left ul li:last-child {
  margin-bottom: 0;
}

.resume .resume_left ul li .icon {
  width: 35px;
  height: 35px;
  background: #fff;
  color: #0bb5f4;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 16px;
  position: relative;
}

.resume .icon i,
.resume .resume_right .resume_hobby ul li i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.resume .resume_left ul li .data {
  color: #b1eaff;
}

.resume .resume_left .resume_skills ul li {
  display: flex;
  margin-bottom: 10px;
  color: #b1eaff;
  justify-content: space-between;
  align-items: center;
}

.resume .resume_left .resume_skills ul li .skill_name {
  width: 25%;
}

.resume .resume_left .resume_skills ul li .skill_progress {
  width: 60%;
  margin: 0 5px;
  height: 5px;
  background: #009fd9;
  position: relative;
}

.resume .resume_left .resume_skills ul li .skill_per {
  width: 15%;
}

.resume .resume_left .resume_skills ul li .skill_progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff;
}

.resume .resume_left .resume_social .semi-bold {
  color: #fff;
  margin-bottom: 3px;
}

.resume .resume_right {
  width: 520px;
  background: #fff;
  padding: 25px;
}

.resume .resume_right .bold {
  color: #0bb5f4;
}

.resume .resume_right .resume_work ul,
.resume .resume_right .resume_education ul {
  padding-left: 40px;
  overflow: hidden;
}

.resume .resume_right ul li {
  position: relative;
}

.resume .resume_right ul li .date {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.resume .resume_right ul li .info {
  margin-bottom: 20px;
}

.resume .resume_right ul li:last-child .info {
  margin-bottom: 0;
}

.resume .resume_right .resume_work ul li:before,
.resume .resume_right .resume_education ul li:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #0bb5f4;
}

.resume .resume_right .resume_work ul li:after,
.resume .resume_right .resume_education ul li:after {
  content: "";
  position: absolute;
  top: 14px;
  left: -21px;
  width: 2px;
  height: 115px;
  background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul {
  display: flex;
  justify-content: space-between;
}

.resume .resume_right .resume_hobby ul li {
  width: 80px;
  height: 80px;
  border: 2px solid #0bb5f4;
  border-radius: 50%;
  position: relative;
  color: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li i {
  font-size: 30px;
}

.resume .resume_right .resume_hobby ul li:before {
  content: "";
  position: absolute;
  top: 40px;
  right: -52px;
  width: 50px;
  height: 2px;
  background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li:last-child:before {
  display: none;
}
</style>
</head>
<body>
  <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>

<div class="resume">
   <div class="resume_left">
     <div class="resume_profile">
       <img src="https://i.imgur.com/eCijVBe.png" alt="profile_pic">
     </div>
     <div class="resume_content">
       <div class="resume_item resume_info">
         <div class="title">
           <p class="bold">stephen colbert</p>
           <p class="regular">Designer</p>
         </div>
         <ul>
           <li>
             <div class="icon">
               <i class="fas fa-map-signs"></i>
             </div>
             <div class="data">
               21 Street, Texas <br /> USA
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fas fa-mobile-alt"></i>
             </div>
             <div class="data">
               +324 4445678
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fas fa-envelope"></i>
             </div>
             <div class="data">
               <a href="#">Email</a>
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fab fa-weebly"></i>
             </div>
             <div class="data">
               www.stephen.com
             </div>
           </li>
         </ul>
       </div>
       <div class="resume_item resume_skills">
         <div class="title">
           <p class="bold">skill's</p>
         </div>
         <ul>
           <li>
             <div class="skill_name">
               HTML
             </div>
             <div class="skill_progress">
               <span style="width: 80%;"></span>
             </div>
             <div class="skill_per">80%</div>
           </li>
           <li>
             <div class="skill_name">
               CSS
             </div>
             <div class="skill_progress">
               <span style="width: 70%;"></span>
             </div>
             <div class="skill_per">70%</div>
           </li>
           <li>
             <div class="skill_name">
               SASS
             </div>
             <div class="skill_progress">
               <span style="width: 90%;"></span>
             </div>
             <div class="skill_per">90%</div>
           </li>
           <li>
             <div class="skill_name">
               JS
             </div>
             <div class="skill_progress">
               <span style="width: 60%;"></span>
             </div>
             <div class="skill_per">60%</div>
           </li>
           <li>
             <div class="skill_name">
               JQUERY
             </div>
             <div class="skill_progress">
               <span style="width: 88%;"></span>
             </div>
             <div class="skill_per">88%</div>
           </li>
         </ul>
       </div>
       <div class="resume_item resume_social">
         <div class="title">
           <p class="bold">Social</p>
         </div>
         <ul>
           <li>
             <div class="icon">
               <i class="fab fa-facebook-square"></i>
             </div>
             <div class="data">
               <p class="semi-bold">Facebook</p>
               <p><a href="#">Email</a></p>
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fab fa-twitter-square"></i>
             </div>
             <div class="data">
               <p class="semi-bold">Twitter</p>
               <p><a href="#">Email</a></p>
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fab fa-youtube"></i>
             </div>
             <div class="data">
               <p class="semi-bold">Youtube</p>
               <p><a href="#">Email</a></p>
             </div>
           </li>
           <li>
             <div class="icon">
               <i class="fab fa-linkedin"></i>
             </div>
             <div class="data">
               <p class="semi-bold">Linkedin</p>
               <p><a href="#">Email</a></p>
             </div>
           </li>
         </ul>
       </div>
     </div>
  </div>
  <div class="resume_right">
    <div class="resume_item resume_about">
        <div class="title">
           <p class="bold">About us</p>
         </div>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis illo fugit officiis distinctio culpa officia totam atque exercitationem inventore repudiandae?</p>
    </div>
    <div class="resume_item resume_work">
        <div class="title">
           <p class="bold">Work Experience</p>
         </div>
        <ul>
            <li>
                <div class="date">2013 - 2015</div> 
                <div class="info">
                     <p class="semi-bold">Lorem ipsum dolor sit amet.</p> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                </div>
            </li>
            <li>
              <div class="date">2015 - 2017</div>
              <div class="info">
                     <p class="semi-bold">Lorem ipsum dolor sit amet.</p> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                </div>
            </li>
            <li>
              <div class="date">2017 - Present</div>
              <div class="info">
                     <p class="semi-bold">Lorem ipsum dolor sit amet.</p> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="resume_item resume_education">
      <div class="title">
           <p class="bold">Education</p>
         </div>
      <ul>
            <li>
                <div class="date">2010 - 2013</div> 
                <div class="info">
                     <p class="semi-bold">Web Designing (Texas University)</p> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                </div>
            </li>
            <li>
              <div class="date">2000 - 2010</div>
              <div class="info">
                     <p class="semi-bold">Texas International School</p> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="resume_item resume_hobby">
      <div class="title">
           <p class="bold">Hobby</p>
         </div>
       <ul>
         <li><i class="fas fa-book"></i></li>
         <li><i class="fas fa-gamepad"></i></li>
         <li><i class="fas fa-music"></i></li>
         <li><i class="fab fa-pagelines"></i></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

4. By Johnathon Holmes

Made by Johnathon Holmes. Online Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

body {
	border-top: 10px solid #E32636;
	margin: 0;
	color: #333333;
	background-color: #eee;
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4 {
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0.5em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	
	border-bottom: 3px solid #E32636;
	display: inline-block;
	color: #333333;
	font-weight: 600;
	text-transform: uppercase;		
}

ul {
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
	
	list-style: none;
}

.container {
	width: 50%;
	height: auto;

	margin: auto; 
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}

.row {
	padding-bottom: 15px;
	padding-left: 20px;
}

header {
	display: inline-block;
	margin-top: 50px;
}

header h1 {
	font-size: 40pt;
}

header ul { 

}

header ul li {
	height: 25px;
}

header ul li i {
	color: #E32636;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 18px;
}

article {
	margin-top: 20px;
}

article h2 {
	font-size: 20pt;
}

article .header {
	color: #E32636;
	font-weight: 600;
}

article .header span {
	font-size: 10pt;
	font-style: italic;
}

article .right{
	float: right;
	width: 10%;
	font-weight: 600;
	
}

article .description {
	font-style: italic;
	font-size: 9pt;
}

article .exp-list .fa {
	color: #E32636;
	padding-right: 5px;
	font-size: 12px;
}

article ul li {
	min-height: 25px;
	max-width: 80%;
}

article .reference {
	width: 40%;
	display: inline-block;
}

article .reference ul li {
	max-width: 100%;
}

article .spacer {
	height: 15px;
}

article .tech ul li {
	max-width: 100% !important;
}

article .tech span {
	font-weight: 600;
	color: #E32636;
}
</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>John Doh!</h1>
			
			<div class="row">
				<ul>
					<li class="address"><i class="fa fa-home fa-1x"></i>123 Some Address, SomeCity, Ontario A1B 2C3</li>
					<li class="phone">
						<span><i class="fa fa-phone fa-1x"></i>519 555 1234</span>
						<span><i class="fa fa-mobile fa-1x"></i>519 666 1234</span>	
					</li>
					<li class="email"><i class="fa fa-envelope fa-1x"></i><a href="#">Email</a></li>
				</ul>
			</div>
		</header>
		
		<article>
			<h2>Languages and Technologies</h2>
			
			<div class="row tech">
				<ul>
					<li><span>Communication</span>: English (fluent, native)</li>
					<li><span>Languages</span>: Java, PHP, SQL, HTML, CSS, LESS, JSON</li>
					<li><span>Exposure</span>: C, C++, C#, Objective-C, XML, UNIX Shell, JavaScript, Assembly</li>
					<li><span>SDKs</span>: Android, iOS</li>
					<li><span>IDE</span>: Eclipse, Aptana, Visual Studio, PhpStorm, Notepad++, Xcode</li>
					<li><span>Tools</span>: Photoshop, C Shell, GCC, SSH, FTP, MySQL, WAMP, LAMP stack, CodeIgniter, Drupal, Concrete5, Bootstrap</li>
					<li><span>Version Control</span>: Git, SVN</li>
					<li><span>Operating Systems</span>: Windows XP, Windows Vista, Windows 7, Windows 8, Ubuntu, Linux</li>
				</ul>
			</div>
		</article>
		
		<article>
			<h2>Education</h2>
			
			<div class="row">
				<ul>
					<li class="right">
						<ul>
							<li>Sept 2011</li>
							<li>Current</li>
						</ul>
					</li>
					<li class="header">Undergraduate, BSc (Hons) Computer Science</li>
					<li>University of SomeCity, SomeCity, United Kingdom</li>
					<li class="description">Concentration in Object Oriented Programming, Web Development, and Mathematics</li>
				</ul>
			</div>

			<div class="row">
				<ul>
					<li class="right">
						<ul>
							<li>Sept 2003</li>
							<li>June 2009</li>
						</ul>
					</li>
					<li class="header">Graduate, Ontario Secondary School Diploma</li>
					<li>AnotherCity Collegiate Institute, AnotherCity, Ontario, Canada</li>
				</ul>
			</div>
		</article>
		
		<article>
			<h2>Experience</h2>
			
			<div class="row exp-list">
				<ul>
					<li class="right">
						<ul>
							<li>Oct 2013</li>
							<li>May 2014</li>
						</ul>
					</li>
					<li class="header">Student Teaching Assistant, <span>University of SomeCity</span></li>
					<li><i class="fa fa-caret-right fa-1x"></i>Assisted instructors by providing additional aid to students during their practical sessions</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Reviewed materials prior to scheduled practical session to provide accurate answers to questions</li>
				</ul>
			</div>
					
			<div class="row exp-list">
				<ul>
					<li class="right">
						<ul>
							<li>Feb 2009</li>
							<li>Sept 2009</li>
                    <li></li>
							<li>June 2010</li>
							<li>Sept 2010</li>
						</ul>
					</li>
					<li class="header">IT Technical Support Agent, <span>Fake Computer Systems Corporation</span></li>
					<li><i class="fa fa-caret-right fa-1x"></i>Performed full system setups, including building and initial system configuration.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Installation of Windows or Linux Operating Systems.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Assisted clients in person, and over the phone, to troubleshoot their system’s technical issues. Followed up to verify there were no additional issues.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Installed software; provided technical support and guidance for the software.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Ensured client’s hard drives were backed up to prevent data loss.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Performed thin client setups, both onsite, and remotely using a Remote Desktop Protocol connection. Followed a set of strict guidelines</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Assisted in the launch of several websites, including launch-day troubleshooting, and weekly maintenance and updates.</li>					
				</ul>
			</div>
			
			<div class="row exp-list">
				<ul>
					<li class="right">
						<ul>
							<li>Aug 2013</li>
						</ul>
					</li>
					<li class="header">Website Development, and Administration, <span>SomeCompany</span></li>
					<li><i class="fa fa-caret-right fa-1x"></i>Held key responsibility to research, develop, and deploy a website for the company. Updated and maintained the website’s Sales section through documents provided routinely via email.</li>
					<li><i class="fa fa-caret-right fa-1x"></i>Provided custom-written procedural documentation to the business owner, on how to properly use their website’s core functions.</li>
				</ul>
			</div>		
		</article>
		
		<article>
			<h2>References</h2>
			
			<div class="row">References Available Upon Request</div>
		</article>
	</div>
</body>
</html>

5. By Kyle Shanks

Made by Kyle Shanks. Modern Looking Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
* {
  box-sizing: border-box;
  transition: 0.35s ease;
}
.rela-block {
  display: block;
  position: relative;
  margin: auto;
  top: ;
  left: ;
  right: ;
  bottom: ;
}
.rela-inline {
  display: inline-block;
  position: relative;
  margin: auto;
  top: ;
  left: ;
  right: ;
  bottom: ;
}
.floated {
  display: inline-block;
  position: relative;
  margin: false;
  top: ;
  left: ;
  right: ;
  bottom: ;
  float: left;
}
.abs-center {
  display: false;
  position: absolute;
  margin: false;
  top: 50%;
  left: 50%;
  right: false;
  bottom: false;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 88%;
}
body {
  font-family: 'Open Sans';
  font-size: 18px;
  letter-spacing: 0px;
  font-weight: 400;
  line-height: 28px;
  background: url("http://kingofwallpapers.com/leaves/leaves-016.jpg") right no-repeat;
  background-size: cover;
}
body:before {
  content: "";
  display: false;
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.92);
}
.caps {
  text-transform: uppercase;
}
.justified {
  text-align: justify;
}
p.light {
  color: #777;
}
h2 {
  font-family: 'Open Sans';
  font-size: 30px;
  letter-spacing: 5px;
  font-weight: 600;
  line-height: 40px;
  color: #000;
}
h3 {
  font-family: 'Open Sans';
  font-size: 21px;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 28px;
  color: #000;
}
.page {
  width: 90%;
  max-width: 1200px;
  margin: 80px auto;
  background-color: #fff;
  box-shadow: 6px 10px 28px 0px rgba(0,0,0,0.4);
}
.top-bar {
  height: 220px;
  background-color: #848484;
  color: #fff;
}
.name {
  display: false;
  position: absolute;
  margin: false;
  top: false;
  left: calc(350px + 5%);
  right: 0;
  bottom: 0;
  height: 120px;
  text-align: center;
  font-family: 'Raleway';
  font-size: 58px;
  letter-spacing: 8px;
  font-weight: 100;
  line-height: 60px;
}
.name div {
  width: 94%;
}
.side-bar {
  display: false;
  position: absolute;
  margin: false;
  top: 60px;
  left: 5%;
  right: false;
  bottom: 0;
  width: 350px;
  background-color: #f7e0c1;
  padding: 320px 30px 50px;
}
.mugshot {
  display: false;
  position: absolute;
  margin: false;
  top: 50px;
  left: 70px;
  right: false;
  bottom: false;
  height: 210px;
  width: 210px;
}
.mugshot .logo {
  margin: -23px;
}
.logo {
  display: false;
  position: absolute;
  margin: false;
  top: 0;
  left: 0;
  right: false;
  bottom: false;
  z-index: 100;
  margin: 0;
  color: #000;
  height: 250px;
  width: 250px;
}
.logo .logo-svg {
  height: 100%;
  width: 100%;
  stroke: #000;
  cursor: pointer;
}
.logo .logo-text {
  display: false;
  position: absolute;
  margin: false;
  top: 58%;
  left: ;
  right: 16%;
  bottom: ;
  cursor: pointer;
  font-family: "Montserrat";
  font-size: 55px;
  letter-spacing: 0px;
  font-weight: 400;
  line-height: 58.333333333333336px;
}
.social {
  padding-left: 60px;
  margin-bottom: 20px;
  cursor: pointer;
}
.social:before {
  content: "";
  display: false;
  position: absolute;
  margin: false;
  top: -4px;
  left: 10px;
  right: false;
  bottom: false;
  height: 35px;
  width: 35px;
  background-size: cover !important;
}
.social.twitter:before {
  background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") center no-repeat;
}
.social.pinterest:before {
  background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") center no-repeat;
}
.social.linked-in:before {
  background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") center no-repeat;
}
.side-header {
  font-family: 'Open Sans';
  font-size: 18px;
  letter-spacing: 4px;
  font-weight: 600;
  line-height: 28px;
  margin: 60px auto 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #888;
}
.list-thing {
  padding-left: 25px;
  margin-bottom: 10px;
}
.content-container {
  margin-right: 0;
  width: calc(95% - 350px);
  padding: 25px 40px 50px;
}
.content-container > * {
  margin: 0 auto 25px;
}
.content-container > h3 {
  margin: 0 auto 5px;
}
.content-container > p.long-margin {
  margin: 0 auto 50px;
}
.title {
  width: 80%;
  text-align: center;
}
.separator {
  width: 240px;
  height: 2px;
  background-color: #999;
}
.greyed {
  background-color: #ddd;
  width: 100%;
  max-width: 580px;
  text-align: center;
  font-family: 'Open Sans';
  font-size: 18px;
  letter-spacing: 6px;
  font-weight: 600;
  line-height: 28px;
}
@media screen and (max-width: 1150px) {
  .name {
    color: #fff;
    font-family: 'Raleway';
    font-size: 38px;
    letter-spacing: 6px;
    font-weight: 100;
    line-height: 48px;
  }
}
</style>
</head>
<body>
<!-- PAGE STUFF -->
<div class="rela-block page">
    <div class="rela-block top-bar">
        <div class="caps name"><div class="abs-center">Kyle J Shanks</div></div>
    </div>
    <div class="side-bar">
        <div class="mugshot">
            <div class="logo">
                <svg viewbox="0 0 80 80" class="rela-block logo-svg">
                    <path d="M 10 10 L 52 10 L 72 30 L 72 70 L 30 70 L 10 50 Z" stroke-width="2.5" fill="none"/>
                </svg>
                <p class="logo-text">kj</p>
            </div>
        </div>
        <p>123 My Place Drive</p>
        <p>Astoria, New York 11105</p>
        <p>1-800-CALLPLZ</p>
        <p><a href="#">[email protected]</a></p><br>
        <p class="rela-block social twitter">Twitter stuff</p>
        <p class="rela-block social pinterest">Pinterest things</p>
        <p class="rela-block social linked-in">Linked-in man</p>
        <p class="rela-block caps side-header">Expertise</p>
        <p class="rela-block list-thing">HTML</p>
        <p class="rela-block list-thing">CSS (Stylus)</p>
        <p class="rela-block list-thing">JavaScript & jQuery</p>
        <p class="rela-block list-thing">Killer Taste</p>
        <p class="rela-block caps side-header">Education</p>
        <p class="rela-block list-thing">Advanced potion making</p>
        <p class="rela-block list-thing">Degree in popping and locking</p>
        <p class="rela-block list-thing">Knitting game on point</p>
        <p class="rela-block list-thing">Culinary af</p>
    </div>
    <div class="rela-block content-container">
        <h2 class="rela-block caps title">Jr Front-End Developer</h2>
        <div class="rela-block separator"></div>
        <div class="rela-block caps greyed">Profile</div>
        <p class="long-margin">Lorem</p>
        <div class="rela-block caps greyed">Experience</div>

        <h3>Job #1</h3>
        <p class="light">First job description</p>
        <p class="justified">Lorem</p>
        
        <h3>Job #2</h3>
        <p class="light">Second Job Description</p>
        <p class="justified">Lorem</p>
        
        <h3>Job #3</h3>
        <p class="light">Third Job Description</p>
        <p class="justified">Lorem</p>
    </div>
</div>
</body>
</html>

6. By Ian Chen

Made by Ian Chen. Simple CSS Resume. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Resume</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:900,700,400|Karla:400'>
  
<style>
* {
  vertical-align: top;
  box-sizing: border-box;
  background-color: #f2f2e9;
  color: #24260f;
  font-family: lato, sans-serif;
  font-weight: 300;
  line-height: 36px;
  transition-duration: 0.5s;
}

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.top {
  height: 300px;
  background-color: #24260f;
}

.top-content {
  width: 1027px;
  height: 300px;
  background-color: #24260f;
  margin-right: auto;
  margin-left: auto;
}

.photo {
  width: 200px;
  height: 275px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 300px;
  background-color: #24260f;
}
.photo h1 {
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  position: relative;
  bottom: 15px;
  background-color: #24260f;
  color: #f2f2e9;
  margin-top: 30px;
}

img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.info {
  width: 450px;
  height: 275px;
  margin-top: 20px;
  background-color: #24260f;
}

.photo, .info {
  display: inline-block;
}

.title {
  width: 350px;
  height: 80px;
  margin-left: 50px;
  padding-top: 15px;
  text-align: center;
  font-size: 26px;
  line-height: 80px;
  border-bottom: solid 3px #90a955;
  background-color: #24260f;
  color: #f2f2e9;
}

.contact {
  display: inline-block;
  margin-left: 50px;
  margin-top: 20px;
}

.url {
  padding-left: 10px;
  padding-top: 10px;
  background-color: #24260f;
  color: #f2f2e9;
}
.url span {
  line-height: 36px;
  font-family: karla, sans-serif;
  padding-left: 10px;
  background-color: #24260f;
  color: #f2f2e9;
}

.max-width {
  width: 1027px;
  margin-right: auto;
  margin-left: auto;
}

.left, .right {
  display: inline-block;
  width: 49%;
  height: 700px;
}

.con-title {
  width: 450px;
  height: 50px;
  font-weight: 900;
  font-size: 20px;
  color: #90a955;
  margin-left: 30px;
  margin-top: 30px;
  padding-top: 15px;
  border-bottom: solid 1px #24260f;
}

.ex-con-left {
  display: inline-block;
  width: 50px;
  height: 250px;
  margin-left: 30px;
}
.ex-con-left .dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #24260f;
  margin-left: 20px;
  margin-top: 30px;
}
.ex-con-left .vertical-line {
  width: 3px;
  height: 170px;
  border-radius: 10%;
  background-color: #90a955;
  margin-left: 24px;
  margin-top: 5px;
}

.ex-con-right {
  display: inline-block;
  width: 400px;
  height: 250px;
}
.ex-con-right h3 {
  margin: 10px;
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
}
.ex-con-right h5 {
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #90a955;
}
.ex-con-right span {
  font-size: 16px;
  color: #24260f;
  margin: 10px;
}
.ex-con-right p {
  margin: 10px 10px 0px 10px;
  line-height: 20px;
  font-size: 16px;
}
.ex-con-right br {
  line-height: 26px;
}

.ed-con-left {
  display: inline-block;
  width: 50px;
  height: 250px;
  margin-left: 30px;
}
.ed-con-left .dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #24260f;
  margin-left: 20px;
  margin-top: 30px;
}
.ed-con-left .vertical-line {
  width: 3px;
  height: 170px;
  border-radius: 10%;
  background-color: #90a955;
  margin-left: 24px;
  margin-top: 5px;
}

.ed-con-right {
  display: inline-block;
  width: 400px;
  height: 250px;
}
.ed-con-right h3 {
  margin: 10px;
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
}
.ed-con-right h5 {
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #90a955;
}
.ed-con-right span {
  font-size: 16px;
  color: #24260f;
  margin: 10px;
}
.ed-con-right p {
  margin: 10px 10px 0px 10px;
  line-height: 20px;
  font-size: 16px;
}
.ed-con-right br {
  line-height: 26px;
}

.languages {
  height: 250px;
}

.la-title {
  margin-left: 10px;
}

.chinese {
  width: 150px;
  height: 150px;
  display: inline-block;
  border-radius: 100%;
  overflow: hidden;
  margin: 30px 15px 0px 10px;
  border: solid 5px #90a955;
}
.chinese h3 {
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
  font-size: 16px;
}
.chinese h4 {
  text-align: center;
  margin-top: -20px;
  color: #90a955;
}

.outer-jp {
  width: 150px;
  height: 150px;
  display: inline-block;
  background: #c1d7ae;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}

.sq1-jp {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 75px;
  background-color: #90a955;
}

.sq2-jp {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 75px;
  background-color: #90a955;
}

.sq3-jp {
  width: 75px;
  height: 75px;
  background-color: #90a955;
  transform-origin: bottom;
  transform: skewX(36deg);
}

.inner-jp {
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 100%;
  top: 5px;
  left: 5px;
  background-color: #f2f2e9;
  overflow: hidden;
}
.inner-jp h3 {
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
  font-size: 16px;
}
.inner-jp h4 {
  text-align: center;
  margin-top: -20px;
  color: #90a955;
}

.outer-eng {
  width: 150px;
  height: 150px;
  display: inline-block;
  background: #c1d7ae;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  margin-left: 10px;
}

.sq1-eng {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 75px;
  background-color: #90a955;
}

.sq2-eng {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 75px;
  background-color: #90a955;
}

.inner-eng {
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 100%;
  top: 5px;
  left: 5px;
  background-color: #f2f2e9;
  overflow: hidden;
}
.inner-eng h3 {
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
  font-size: 16px;
}
.inner-eng h4 {
  text-align: center;
  margin-top: -20px;
  color: #90a955;
}

.skills {
  height: 200px;
}

.sk-title {
  margin-left: 10px;
  margin-top: 0px;
}

.skill-con-left, .skill-con-right {
  display: inline-block;
  width: 230px;
  height: 130px;
  margin-top: 20px;
}

.skill-bar span {
  display: inline-block;
  font-weight: bold;
  margin-left: 10px;
  width: 90px;
}

.skill-level {
  display: inline-block;
  margin-left: 10px;
}

.yes {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #90a955;
  margin-top: 10px;
  margin-right: 2px;
}

.no {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #c1d7ae;
  margin-top: 10px;
  margin-right: 2px;
}

.portfolio {
  height: 200px;
}

.po-con-right {
  display: inline-block;
  transition-duration: 0.5s;
  width: 150px;
  height: 160px;
  margin-left: 10px;
  padding-top: 10px;
  opacity: 0.5;
  position: relative;
  top: 0px;
}
.po-con-right span {
  display: inline-block;
  font-weight: bold;
  width: 100px;
  text-align: center;
}
.po-con-right:hover {
  opacity: 1;
}
.po-con-right:active {
  top: 10px;
}

.po-con-middle {
  display: inline-block;
  width: 150px;
  height: 160px;
  margin-left: 10px;
  padding-top: 10px;
  opacity: 0.5;
  position: relative;
  top: 0px;
}
.po-con-middle span {
  display: inline-block;
  font-weight: bold;
  width: 100px;
  text-align: center;
}
.po-con-middle:hover {
  opacity: 1;
}
.po-con-middle:active {
  top: 10px;
}

.po-con-left {
  display: inline-block;
  width: 150px;
  height: 160px;
  margin-left: 10px;
  padding-top: 10px;
  opacity: 0.5;
  position: relative;
  top: 0px;
}
.po-con-left span {
  display: inline-block;
  font-weight: bold;
  width: 100px;
  text-align: center;
  padding-right: 15px;
}
.po-con-left:hover {
  opacity: 1;
}
.po-con-left:active {
  top: 10px;
}
</style>
</head>
<body>
  <div class="top">
  <div class="top-content">
    <div class="photo"><img src="https://secure.gravatar.com/avatar/a87c99d3d92ff7fd877688ef849201f4?s=128&amp;d=mm&amp;r=g" alt="photo"/>
      <h1>CHEN YI AN</h1>
    </div>
    <div class="info">
      <div class="title">Front-End Developing Learner</div>
      <div class="contact">
        <div class="url"><a href="https://www.facebook.com/ianchen0419" target="_blank"><i class="fa fa-facebook-official" style="font-size: 36px; color: #90A955;background-color: #24260f;"></i></a><span>fb.me/ianchen0419</span></div>
        <div class="url"><i class="fa fa-skype" style="font-size:36px;color:#90A955;background-color: #24260f;"></i><span>ianchen0419</span></div>
        <div class="url"><i class="fa fa-envelope-o" style="font-size:36px;color:#90A955;background-color: #24260f;"></i><span><a href="#">Email</a></span></div>
      </div>
    </div>
  </div>
</div>
<div class="content">
  <div class="max-width">
    <div class="left">
      <div class="experience">
        <div class="con-title ex-title">EXPERIENCE</div>
        <div class="ex-content">
          <div class="ex-con-left">
            <div class="dot"></div>
            <div class="vertical-line"></div>
          </div>
          <div class="ex-con-right">
            <h3>Japan EC Site Executive</h3>
            <h5>Uitox Taiwan<span>|2016.07 ~ 2017.02 </span></h5>
            <p>Take account of Japan EC Site operating.<br/>In terms of Fast Fashion, we export Taiwan online fashion brand to Japan.<br/>Duties: Japanese Meeting Interpretion, Japanese Translation, Documents making.</p>
          </div>
        </div>
      </div>
      <div class="education">
        <div class="con-title ed-title">EDUCATION</div>
        <div class="ed-content">
          <div class="ed-con-left">
            <div class="dot"></div>
            <div class="vertical-line"></div>
          </div>
          <div class="ed-con-right">
            <h3>Double Major:<br/>Japanese & International Business</h3>
            <h5>Soochow University<span>|2012.09 ~ 2016.06</span></h5>
            <p>Study Field:<br/>Japanese Languages, Japanese Culture, Japanese Grammer, English, Economics, Statistics, Accounting, Marketing, Management, Trade Practices.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="languagues">
        <div class="con-title la-title">LANGUAGES</div>
        <div class="la-content">
          <div class="chinese">
            <h3>CHINESE</h3>
            <h4>native</h4>
          </div>
          <div class="outer-jp">
            <div class="sq1-jp"></div>
            <div class="sq2-jp"></div>
            <div class="sq3-jp"></div>
            <div class="inner-jp">
              <h3>JAPANESE</h3>
              <h4>JLPT N1</h4>
            </div>
          </div>
          <div class="outer-eng">
            <div class="sq1-eng"></div>
            <div class="sq2-eng"></div>
            <div class="inner-eng">
              <h3>ENGLISH</h3>
              <h4>TOEIC 830</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="skills">
        <div class="con-title sk-title">SKILLS</div>
        <div class="skill-content">
          <div class="skill-con-left">
            <div class="skill-bar"><span>HTML</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
              </div>
            </div>
            <div class="skill-bar"><span>CSS</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
              </div>
            </div>
            <div class="skill-bar"><span>JavaScript</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="no"></div>
              </div>
            </div>
          </div>
          <div class="skill-con-right">
            <div class="skill-bar"><span>WordPress</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="no"></div>
              </div>
            </div>
            <div class="skill-bar"><span>Bootstrap</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="no"></div>
                <div class="no"></div>
              </div>
            </div>
            <div class="skill-bar"><span>PHP</span>
              <div class="skill-level">
                <div class="yes"></div>
                <div class="yes"></div>
                <div class="no"></div>
                <div class="no"></div>
                <div class="no"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portfolio">
        <div class="con-title sk-title">PROTFOLIO</div>
        <div class="po-content">
          <div class="po-con-right"><a href="https://codepen.io/ianchen0419/" target="_blank"><i class="fa fa-codepen" style="font-size:100px;"></i></a><span>CODEPEN</span></div>
          <div class="po-con-middle"><a href="http://ianchen.thisistap.com/" target="_blank"><i class="fa fa-wordpress" style="font-size:100px;"></i></a><span>WEBSITE</span></div>
          <div class="po-con-left"><a href="https://github.com/ianchen0419" target="_blank"><i class="fa fa-github" style="font-size:100px;"></i><span>GITHUB</span></a></div>
        </div>
      </div>
    </div>
  </div>
</div></body>
</html>
 

7. By Tim Daubenschütz

Made by Tim Daubenschütz. Paper Resume Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400,500,600,700,800,900">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Playfair+Display:400,700,900">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Open+Sans:300,400,600,900">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body, html {
  padding-top:2.5em;
  margin:0;
  background-color:#fafafa;
}

/* Header */

header {
  width:100%;
  vertical-align: middle;
  text-align: center;
 
}

.header-content {
  display: inline-block;
}

.pic {
  margin: 0 auto;
  margin-top:-2.5em;
  
  border-radius:10em;
  height:4em;
  width:4em;
  background-image: url(https://pbs.twimg.com/profile_images/529377948952834048/q9fhJEKd.jpeg);
  background-size: 100% auto;
  
  border: 2px solid #e0e0e0;
  transition : all 0.5s linear;
  
}

@-webkit-keyframes wiggle {
  0%   {
    transform: rotate(0deg);
  }
  25%  {
    transform: rotate(-30deg);
  }
  50%  {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.pic:hover {
  /*Webkit fix*/
  -webkit-transform: translateZ(0);
  
  cursor:pointer;
  
  -webkit-animation: wiggle 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.header-text {
  margin-top:0.5em;
  margin-left:1em;
}

header p {
  text-align:center;
  font-family: "Merriweather";
  
  margin:0;
  
  color: #212121;
}

.first-name {
   font-size: 1.05em;
}

.subtitle {
  font-family: "Merriweather";
  padding-top:.3em;
  font-size:0.55em;
  font-weight:500;
  color: #424242;
}

/* Information */

.paper {
  margin: 0 auto;
  margin-bottom:1em;
  
  background-color:white;
  width:60%;
  
  padding:0.5em 0 0.5em 0;
  
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 3px solid #e0e0e0;
  border-radius:3px;
}

/* Content Part */

.content-wrapper {
  padding-right:7.25%;
}

.content {
  display:table;
  width:100%;
  
  padding-top:1.5em;
  
  /*border-top: 1px solid #eeeeee;*/
}

.content:last-child {
  padding-bottom:1.5em;
}

.row {
    display:table-row;
}
.row div {
    display:table-cell;
}

.content-cat {
  font-family: "Merriweather";
  font-variant:small-caps;
  font-weight:300;
  letter-spacing: 1px;
  
  color: #212121;
  
  font-size:0.975em;
  
  text-align:center;
  vertical-align:middle;

  padding-left:6.66%;
  width:36.66%;
}

.content-cat p {
  font-size:0.55em;
  font-weight:600;
  
  margin-bottom:0;
}

.content-text {
  border-left:1px solid #e0e0e0;
  transition: border 0.66s ease-in;
}

.content-text:hover {
  border-left:1px solid #bdbdbd;
}

.big-text {
  vertical-align:top;
  
  padding-top:1.25em;
}

.content-text ul {
  padding:0;
  margin:0;
  margin-top:0.15em;
  
  width:85%;
  margin-left:1.5em;
}

.content-text ul:last-child {
  margin-bottom:0.5em;
}

.content-text ul li {
  font-family: "Open Sans";
  font-size:0.7em;
  
  display:inline-block;
  
}

.content-text ul li:first-child {
  width:35%;
  
  color: #424242;
  
  font-weight:600;
  font-size:0.75;
}

.content-text ul li a {
  text-decoration: none;
  color: #0277bd;
}

.content-text ul li a:hover {
  color:#4fc3f7;
}

.work-listing p {
  font-family: "Open Sans";
  font-size:0.7em;
  font-weight:400;
  
  line-height:1.5;
  
  color: #424242;
  
  margin-left:2em;
  margin-top:0.25em;
  margin-bottom:0.75em;
}

.work-listing .highlight, .content-text.skills-listing > ul > li > .highlight {
  font-family: "Open Sans";
  font-size:0.7em;
  font-weight:400;
  
  color: #424242;
  
  margin-left:3.25em;
  padding-left:0.5em;
  
  border-left:1px solid #e0e0e0;
  
}

.education-listing > .heading {
  font-weight:600;
  
  margin-top:0.75em;
  margin-left:2em;
}

.education-listing > .highlight {
  margin-left:3.25em;
}

.content-text.skills-listing > ul {
  display:table-row;
}

.content-text.skills-listing > ul:last-child {
  margin-bottom:0;
}

.content-text.skills-listing > ul > li {
  display:table-cell;
  vertical-align:top;
  
  padding-left:2em;
  
  width:50%;
  font-weight:600;
}

.content-text.skills-listing > ul > li span {
  font-weight:400;
  color: #616161;
}

.content-text.skills-listing > ul > li > .highlight {
  
  font-size:1em;
  font-weight:400;
  
  margin-left:1.25em;
}

.highlight {
  transition: border .33s ease-in;
}

.highlight:hover, .content-text.skills-listing > ul > li > .highlight:hover {
  border-left:1px solid #9e9e9e;
}
</style>
</head>
<body>
  <div class="resume-wrapper">
  <article class="paper">
    <header>
      <div class="header-content">
        <div class="header-pic" title="Wiggle Wiggle">
          <div class="pic"></div>
        </div>
        <div class="header-text">
          <p>
            <span class="first-name">Tim</span>
            Daubenschütz
          </p>
          <p class="subtitle">Bachelor of Science (almost)</p>
        </div>
      </div>
    </header>
    
    <div class="content-wrapper">
    
      <!-- CONTACT -->
      <section class="content">
        <div class="row">
          <div class="content-cat">
           Contact
          </div>
          <div class="content-text">
            <ul>
              <li>Website</li>
              <li>daubenschuetz.de</li>
            </ul>
            <ul>
              <li>Email</li>
              <li><a href="#">Email</a></li>
            </ul>
            <ul>
              <li>Phone</li>
              <li>+49 123 456 78</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- LOCATION -->
      <section class="content">
        <div class="row">
          <div class="content-cat">
           Location
          </div>
          <div class="content-text">
            <ul>
              <li>Address</li>
              <li>Some street</li>
            </ul>
            <ul>
              <li>Postal Code</li>
              <li>12345</li>
            </ul>
            <ul>
              <li>City</li>
              <li>Ulm</li>
            </ul>
            <ul>
              <li>Region</li>
              <li>Baden-Württemberg</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- PROFILES -->
      <section class="content">
        <div class="row">
          <div class="content-cat">
           Profiles
          </div>
          <div class="content-text">
            <ul>
              <li>Twitter</li>
              <li>
                <a href="https://twitter.com/TimDaub" target="_blank">@TimDaub</a>
              </li>
            </ul>
            <ul>
              <li>Codepen</li>
              <li>
                <a href="https://codepen.io/TimDaub/" target="_blank">@TimDaub</a>
              </li>
            </ul>
            <ul>
              <li>Github</li>
              <li>
                <a href="https://github.com/TimDaub" target="_blank">@TimDaub</a>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section class="content">
        <div class="row">
          <div class="content-cat big-text">
           Self-employed
            <p>2012-05-01 till today</p>
          </div>
          <div class="content-text work-listing">
            <p>Hondrt.de is a small business enterprise (dt. Kleingewerbe) specializing in serving technical needs of local customers. For example building corporate homepages, technical consulting and programming.</p>
            <p class="highlight">Implemented and marketed Timedoublr.com, a flexible time tracking app for Apple iOS</p>
             <p class="highlight">Consulted a medium-sized business in establishing their media presence</p>
          </div>
        </div>
      </section>
      <section class="content">
        <div class="row">
          <div class="content-cat big-text">
           Ulm University
            <p>2013-09-01 till today</p>
          </div>
          <div class="content-text work-listing">
            <p>Development of Module Management System (MMS), a content management system for studycourse module handbooks introduced as part of the Bologna Process. Feature requirements included: versioning of every resource, a complex editorial process, visual representation of high level data structures (e.g. trees) and a flexible, RESTful API.</p>
            <p class="highlight">Won the Software Construction (dt. Softwaregrundprojekt) class challenge for best usability and got employed by university</p>
          </div>
        </div>
      </section>

      <section class="content">
        <div class="row">
          <div class="content-cat">
            Education
            <p>2011-10-01 till</p>
            <p style="margin-top:0.25em;">2015-02-14</p>
          </div>
          <div class="content-text work-listing education-listing">
            <p class="heading">Ulm University</p>
            <p class="highlight">Media Informatics (Bachelor of Science)</p>
          </div>
        </div>
      </section>

      <section class="content">
        <div class="row">
          <div class="content-cat big-text">
            Awards
            <p>Best Usability</p>
            <p style="margin-top:0.25em;">2013-07-13</p>
          </div>
          <div class="content-text work-listing education-listing">
            <p class="heading">Faculty of Engineering and Computer Science at Ulm University:</p>
            <p class="highlight">For developing Module Management System (MMS) a content management system for module handbooks introduced as part of the Bologna Process.</p>
          </div>
        </div>
      </section>

      <section class="content">
        <div class="row">
          <div class="content-cat big-text">
            Skills
          </div>
          <div class="content-text skills-listing">
            <ul>
              <li>
                Web
                <span>(Master)</span>
                <p class="highlight">Node.js</p>
                <p class="highlight">Angular.js</p>
              </li>
              <li>
                Mobile
                <span>(Advanced)</span>
                <p class="highlight">Cocoa</p>
              </li>
            </ul>
            <ul>
              <li>
                Languages 
                <span>(Master)</span>
                <p class="highlight">Javascript</p>
              </li>
              <li>
                Software
                <span>(Advanced)</span>
                <p class="highlight">Adobe Photoshop</p>
                <p class="highlight">Adobe InDesign</p>
              </li>
            </ul>
          </div>
        </div>
      </section>
    
    </div>
      
  </article>
  
</div>
</body>
</html>

8. By Aadamski

Made by Aadamski. Live Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html
{
	font-size:100%;
}

body
{
	-webkit-font-smoothing:antialiased;
	color:#333332;
	font-family:Lora, serif;
	font-size:18px;
	font-weight:400;
	line-height:1.4;
	text-rendering:optimizeLegibility;
}

.skill-set li:hover
{
	background:#3498db;
}

h1
{
	color:rgba(0,0,0,.75);
}

.wrapper
{
	height:100%;
}

.left
{
	background-color:rgba(0,0,0,.025);
	border-right:1px solid rgba(0,0,0,.05);
	float:right;
	height:100%;
	margin-left:-1px;
	min-width:256px;
	position:fixed;
	width:33.33%;
  
}

.right
{
	float:right;
	height:100%;
	position:relative;
	width:66.66%;
}


.name-hero
{
	background:rgba(0,0,0,.001);
	bottom:0;
	height:290px;
	left:0;
	margin:auto;
	position:absolute;
	right:0;
	top:0;
	width:85%;
}

.me-img
{
	background:url(https://media-exp1.licdn.com/dms/image/C4E03AQGnLq_IB_mf8Q/profile-displayphoto-shrink_400_400/0/1631022739752?e=1648684800&v=beta&t=eICUjHeH_g9GQEItmEMK1j2gCADwqfjrlccSD_5za58) no-repeat center center ;
	background-size:100%;
  background-position:0px;
	border-radius:100%;
	height:150px;
	margin:0 auto;
	position:relative;
	width:150px;
}

.name-hero h1
{
	font-family:Open Sans, sans-serif;
	font-size:1.5em;
	text-align:center;
}

.name-hero h1 em
{
	color:rgba(0,0,0,.3);
	font-style:normal;
	font-weight:700;
}

.name-hero p
{
	color:rgba(0,0,0,.75);
	font-size:.75em;
	line-height:1.5;
	margin:0 8px 0 0;
	text-align:center;
}

.name-hero .name-text
{
	margin:0 auto;
	width:85%;
}

.inner
{
	margin:0 auto;
	max-width:975px;
	padding:3em;
}

.inner h1
{
	font-size:1.75em;
}

.inner p
{
	color:rgba(0,0,0,.5);
}

.inner p em
{
	color:rgba(0,0,0,1);
	font-style:normal;
}

.inner section
{
	margin:100px auto;
}

ul
{
	list-style-type:none;
	margin-top:-10px;
	max-width:570px;
	padding:0;
}

.skill-set li
{
	background:rgba(0,0,0,.75);
	border-radius:5px;
	color:#FFF;
	display:inline-block;
	list-style:none;
	margin:15px 15px 0 0;
	padding:10px;
	text-align:justify;
}

@media screen and (max-width: 48em) {
	.right,.left
	{
		float:none;
    position:relative !important;
		width:100%;
    min-height:500px;
	}
  .handmade {
  text-align:center !important;
  margin-top:0px !important;
}

@media screen and (max-width: 75em) {
    body
{ font-size:16px;}
}

@media screen and (max-width: 60em) {
    body
{ font-size:14px;}
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.handmade {
  text-align:right;
  margin-top:100px;
}
.handmade em {
  font-family: 'Shadows Into Light', cursive;
  font-size: 1.25em;
  margin-left:5px;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Open+Sans:300,400,500,700|Waiting+for+the+Sunrise|Shadows+Into+Light' rel='stylesheet' type='text/css'>

<div class="wrapper clearfix">
<div class="left">
    
    <div class="name-hero">
      
      <div class="me-img"></div>
      
      <div class="name-text">
        
        <h1>Anthony <em>Adamski</em></h1>
        <p>10 Iroquois St Boston, MA 02120</p>
        <p><a href="#">Email</a></p> 
        <p>(956) 500-5558</p>
     
      </div>
   
    </div>
    
  </div>
 <div class="right">
    
    <div class="inner">
      <section>
        <h1>Employment</h1>
        <p>Winter 2015 - Present <em>Grand Interactive, llc. | Mobile App Developer</em></p>
        <p>Raised $78,000 in early stage funding, created initial design
          concepts, and oversaw initial development. Currently oversee and maintain all front end code and server functionality.</p>
        <p>Spring 2012 - Winter 2015 | <em>PadMatcher Inc. | CTO, Co-Founder</em></p>
        <p>Raised $78,000 in early stage funding, created initial design
          concepts, and oversaw initial development. Oversaw and maintained all front end code and server functionality.</p>
        <p>Fall 2011 - Fall 2013 | <em>Penrose Realty llc. | Desinger & Assistant</em></p>
        <p>Responsible for all technical areas. Maintain servers, computers, and provide in office technical support. Rebranded company from ground up including a fully responsive website.  </p>
      </section>
      <section>
        <h1>Technical Skills</h1>
        <ul class="skill-set">
          <li>Mobile Development</li>
          <li>Xamarin</li>
          <li>CSS3</li>
          <li>Adobe Photoshop</li>
          <li>HTML5</li>
          <li>CSS3</li>
          <li>JQUERY</li>
          <li>UI Design</li>
          <li>Company Branding</li>
          <li>Responsive Web Design</li>
        </ul>
      </section>
      <section>
        <h1>References</h1>
        <p>William Grand | <em>Grand Interactive, llc. | CEO</em></p>
        <p>(617) 448-0910 | <a href="#">Email</a></p>
        <p>Eric Chauvin | <em>PadMatcher Inc. | CEO</em></p>
        <p>(617) 448-0910 | <a href="#">Email</a></p>
        <p>Chris Heller <em>Penrose Realty LLC. | Broker</em></p>
        <p>(617) 794-4554 | <a href="#">Email</a></p>
      </section>
            <section>
        <h1>Personal Interests</h1>
        <ul class="skill-set">
          <li>Faith</li>
          <li>Biblical Studies</li>
          <li>Playing Guitar</li>
          <li>Song Writing</li>
          <li>Health & Nutrition</li>
          <li>Reading</li>
        </ul>
      </section>
      <section>
        <div class="handmade">
          <p>handmade by <em> Anthony Adamski</em></p>
        </div>
      </section>
    </div>
  </div>
</div>
</body>
</html>

9. By Jared Pearce

Made by Jared Pearce. HTML5 Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Resume Typography */
html {font-size: 100.01%}
body {background-color: #DEDEDE; font: normal 0.75em/1.5 "Georgia", "Times New Roman", serif;} /*establish 12px font with verticle rhythm*/

/* =header font size */
h1, h2, h3, h4, h5, h6 {color: #111; font-family: "Tahoma", "Helvetica", "Droid Sans", sans-serif; letter-spacing: 1px;}
h1 {border-bottom: 0.07142855em double #444; color: #000; font: normal 3.5em/2 "Georgia", sans-serif; text-align: center;}
h2 {color: #000; font-size: 1.5em; letter-spacing: 0.07142855em; font-variant: small-caps;} /* 24px / 16px */
h3 {border-bottom: 0.07142855em solid #333; font-size: 1.25em; line-height: 1.42857em; margin-bottom: 0.375em; margin-top: 1.05357em; position: relative;}  /* 20px / 16px */
h4 {font-size: 1.1255em; line-height: 1.2857em; margin-bottom: 0.375em; margin-top: 1.0893em;}  /* 18px / 16px */

/* =p leading */
p {margin-bottom: 0.5em; margin-top: 1em;}
p + p {margin-top: 1.5em;}
p + ul {margin-top: 0.75em;}
footer p, footer p + p {margin: 0;}

/* Layout for Resume */
/* =header display */
header, footer {clear: both;}
header h2, header p {padding: 0 40px; width: 510px;}
header h1 {text-shadow: 2px 3px 2px #999;}

/* page holder */
.page {background: #fff; border: 0.07142855em solid #CECECE; margin: 0.35714286em auto 1em; padding-bottom: 1.5em; position: relative; width: 960px;}






/*h3 {display: inline-block; margin-top: 0; padding-top: 0;}*/
.time {font-size: 0.75em; font-weight: normal; float: right; margin-top: 0; padding-top: 0; position: absolute; right: 0;} /* 16 / 20 */

/* =ul style */
ul {margin: 0 2em 0.857em;}
ul li {list-style-type: square; position: relative;}
.technology li { }
.technology li > span {display: none;}


/* =a styles */
a:link, a:active, a:focus, a:visited, a:hover {color: #444; text-decoration: none;}

@media screen and (min-width: 320px) {
    html, body {margin: 0; padding: 0; text-shadow: none;}
	
    header, header h2, header p, .page, footer {background: #fff; margin: 0 auto; padding: 0; width: 93.75%;}
    header {margin-bottom: 1em;}
    header h2, header p {margin-left: 0; padding-left: 0;}
    .page .resume_content, .page .resume_skills {float: none; margin: 0; padding: 0; width: 100%;} 
    article, aside, .vcard {margin: 0 10px; padding: 0;}
    footer {font-size: inherit !important;}

	
    footer {margin-bottom: 1em;}
    .vcard {border: none; background-color: #fff; display: none; margin: 1em 10px 1em -3px !important; position: inherit; width: 100%;}
    .vcard p {padding: 0 10px 0 0; }
    .vcard h3 {display: block;}
    .vcard strong {display: inline-block;}
}

@media screen and (min-width: 767px) {
    html, body, .page {border: none !important; color: #444 !important; text-shadow: none !important; filter:none !important; margin: 0; padding: 0; -ms-filter: none !important;}
    body {background-color: rgb(110,110,110) !important;}
  
    /* page holder */
    .page {background: #fff; margin: 0.35714286em auto 1em; position: relative; width: 93.75%;} /* 960px / 1024px */
  /* 2 columm layout */
/* column 1: article */ .page .resume_content {float: left; margin-bottom: 0.35714286em; margin-top: 1em; width: 590px;}
/* column 2: aside */ .page .resume_skills {float: right; margin-top: 1em; width: 365px;}
/* layout padding*/
article {margin: 0 20px 0 40px; position: relative;}
aside {margin: 0 40px 0 20px; position: relative;}
aside h2 {margin-bottom: 1.05357em;}
  

    /* 2 columm layout */
    /* column 1: */ .page .resume_content {float: left; margin-bottom: 0.35714286em; width: 61.45833%;} /* 590px / 960px */
    /* column 2: */ .page .resume_skills {float: right; width: 34.375%;}  /* 270px / 960px */
    header p {width: 57.291667%}
      /* =footer placement */
    .vcard {
      background-color: #EAEAEA;
      border: 1px solid #DEDEDE;
      box-shadow: 2px 3px 6px #999;
      left: 66.145833%;
      margin: 10px;
      padding: 6px 10px;
      position: absolute;
      width: 26.666667%; 
      top:  9.0625em; 
    } /* 635px / 960px, 256px / 960px */
  .vcard h3, .vcard strong {display: none;}
b {font-weight: normal; margin-top: -2px; padding-top: 0; position: absolute; right: 0;}
      h3 + p { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media print {
      
    @page { margin: 0.5cm; }
  
    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
    }

    .page, .page .resume_content, .page .resume_skills, article, aside, header h2, header p {
		background-image: none;
		border: none;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-indent: inherit !important;
		width: auto !important;
    }
    .vcard {border: none; background-color: #fff; margin-left: 0; margin-top: 0; padding-left: 0; position: inherit !important; width: 100%;}
    .vcard h3, .vcard strong {display: inline-block;}
    
    header h1 {font-size: 30pt;}

    h1 {font-size: 24pt;}
    h2 {font-size: 14pt; margin-top: 25px;}
    
    a, a:visited { color: #444 !important; text-decoration: underline; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    
    p a[href^="http://"]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }

}
/* [email protected] */
</style>
</head>
<body>
  <main role="main">
  <div class="page">
  <!-- 1. Header -->
  <header>
      <h1>Jared A. Pearce</h1>
      <h2>Front-End Web Developer</h2>
      <p>Front end web developer enthusiastic about delivering a holistic, scalable approach to web development that not only meets industry best practices but also provides rich, engaging experiences for the end user. Expert strategist prepared for content interpretation, process integration, and software implementation that conforms to customer requirements and specifications. Contemporary artisan determined to decrease markup, incorporate consistent structure and produce elegant quality code for long-term product stability. </p>
  </header>
  <!-- 2a. Resume Content -->
  <section class="resume_content">
    <article>
      <h2>Professional Experience</h2>
      <section>
          <h3>Front End Web Developer <span class="time">
            <time datetime="2013-05-20" class="start">2013</time>
            &#8211; Present
            </span></h3>
        <p><strong><!-- http://mathworks.com -->The MathWorks, Inc.</strong> <b>Natick, MA</b></p>
        <ul>
          <li>Reduced software development delays and increased code quality by adapting the peer-to-peer code review process to leverage existing version control system functionality.</li>
          <li>Provided energetic and meticulous feedback when evaluating visual design mocks and usability wireframes for feasibility of responsive HTML5/CSS3 conversion. </li>
          <li>Contributed to the in-house front end community by demonstrating how standard practices for CSS commenting and CSS rule-set structure generates high quality  reusable code.</li>
          <li>Worked with Quality Engineering to deliver true to specification web experiences that resolved cross browser discrepancies and compatibility issues. </li>
        </ul>
      </section>
      <section>
          <h3>Lead Multimedia Developer <span class="time">
            <time datetime="2007-05-29" class="start">2007</time> &#8211; 
            <time datetime="2013-05-14" class="end">2013</time>
            </span></h3>
        <p><strong><!-- http://sandia.gov/ -->Sandia National Laboratories</strong> <b>Albuquerque, NM</b></p>
        <p>Established, in the final design specifications, visual layouts that conformed to a graphical user interface (GUI) framework, instituted strong typography and implemented appropriate color theory. </p>
        <ul>
          <li>Scoped, designed and deployed standardized learning templates programmed in HTML, CSS and JavaScript for consistent delivery of web-based training.</li>
          <li>Presented high fidelity prototypes using HTML, CSS and JavaScript to engage customers in interactive feedback sessions, promote rapid design exploration and identify user patterns.  </li>
          <li>Partnered in negotiating cost, schedule, and performance expectations with project leads and customers.  </li>
          <li>Provided technical support for colleagues and clients; resolving 31 formal customer support tickets in the past year.</li>
        </ul>
        <p>Assisted in defining and promoting technical avenues of growth, direction, vision and planning for the E-Learning Services Team.</p>
        <ul>
            <li>Promoted a clean, holistic, and scalable approach to the team's template architecture by using the Adobe Creative Suite. </li>
            <li>Incorporated jQuery as part of the e-learning infrastructure for DOM manipulation within Sandia's Online Learning Generation Application (OLGA).</li>
            <Li>Validated (X)HTML and HTML5 markup to ensure W3C conformance and Section 508 compliance.</li>
            <li>Produced Sandia's first responsive mobile prototype for web-based training through the use of CSS media queries, HTML5 and jQuery. </li>
        </ul>
        <p>Researched and implemented clean coding practices and industry-touted methodologies within software development processes to ensure software quality, stability and graceful degradation. </p>
        <ul>
            <li>Used the Firefox Web Developer extension to iterate rapidly through the software development life cycle and to ensure pixel-perfect design implementation.</li>
            <li>Hand coded design specifications for accurate display in Firefox modifying, as needed, for other browsers.</li>
        </ul>
      </section>
      <section>
          <h3>Web Technician <span class="time">
            <time datetime="2003-10-20" class="start">2003</time>
            &#8211;
            <time datetime="2007-05-29" class="end">2007</time>
            </span></h3>
        <p>Contracted to Sandia National Laboratories by <strong><!-- http://www.excelstaff.com/ -->Tactical Staffing Resources, LLC</strong> <b>Albuquerque, NM</b> </p>
        <ul>
          <li>Senior member of the E-Learning Services team responsible for developing and maintaining over 70 online training courses. </li>
          <li>Reduced employee training time by 88%, from 4 hours to 30 minutes, by converting instructor led training materials to web-based courses;  saving Sandia $350 per employee per online course taken. </li>
          <li>Pioneered implementation of AICC/SCORM industry standards within Sandia's e-learning culture using HTML/CSS and ensured the overall architecture conformed to Section 508 Compliance.</li>
        </ul>
      </section>
      <section>
          <h2>Summer Internships</h2>
        <h3>Assistant Graphic Designer <span class="time">
          <time datetime="2003-07-04">Summer 2003</time>
          </span></h3>
        <p><strong><!-- http://www.simplifiedgraphics.com/ -->Simplified Graphics Studio </strong> <b>Albuquerque, NM</b></p>
        <h3>Assistant Web Designer <span class="time">
          <time datetime="2002-06-03">Summer 2002</time>
          </span></h3>
        <p><strong><!-- http://nau.edu/sbs/ihd/ -->Institute for Human Development <abbr title="Northern Arizona University">NAU</abbr> </strong> <b>Flagstaff, AZ</b></p>
      </section>
    </article>
  </section>
  <!-- 2b. Resume Technical Knowledge/Skills -->
  <div class="resume_skills">
    <aside>
      <section>
        <h2>Sample Work</h2>
        <ul>
          <li><a href="https://codepen.io/jaredpearce/full/iBdxb">HTML5 Resume</a></li>
          <li><a href="https://mathworks.com/examples" target="_blank">MATLAB Examples</a></li>
          <li><a href="http://coursework.mathworks.com" target="_blank">Cody Coursework</a></li>
          <li><a href="http://blogs.mathworks.com" target="_blank">MATLAB Central Blogs</a></li>
          <li><a href="https://www.behance.net/jaredpearce" target="_blank">Sandia National Laboratories</a></li>
          <!-- <li><a href="https://prod.sandia.gov/wbt/HW100/" target="_blank">Hot Work Training (HW100)</a></li>-->
        </ul>
      </section>
      <section>
        <h2>Software</h2>
        <ul class="technology">
          <li>Adobe CS <span class="exp">11 years</span></li>
          <li>Captivate <span class="exp">7 years</span></li>
          <li>CSS <span class="exp">9 years</span></li>
          <li>CSS3 <span class="exp">2 years</span></li>
          <li>HTML <span class="exp">11 years</span></li>
          <li>HTML5 <span class="exp">2 years</span></li>
          <li>(X)HTML <span class="exp">9 years</span></li>
          <li>JavaScript <span class="exp">6 years</span></li>
          <li>jQuery <span class="exp">6 years</span></li>
          <li>SASS (SCSS)<span class="exp">1 year</span></li>
          <li>SCRUM<span class="exp">2 years</span></li>
        </ul>
      </section>
      <section>
        <h2>Formal Education</h2>
        <h3>Northern Arizona University<span class="time">
          <time datetime="2003-05-17">5/2003</time>
          </span></h3>
        <p>B.F.A. Visual Communication &#8211; Emphasis Graphic Design,<br />
          Minor: Russian Area Studies <b>Flagstaff, AZ</b></p>
        <h3>Mesa Community College <span class="time">
          <time datetime="2000-05-20">5/2000</time>
          </span></h3>
        <p>A.A. General Studies <b>Mesa, AZ</b></p>
      </section>
    </aside>
  </div>
  <!-- 3. Contact Information -->
  <footer>
    <div id="hcard-Jared-Pearce" class="vcard">
        <h3>Contact Jared A. Pearce</h3>
        <p class="adr"><strong>Address:</strong> <a href="#" title="View on Google Maps" rel="me"><span class="locality">Cary, NC</span></a></p>
        <p class="tel"><strong><span class="type">Home</span>:</strong> <a href="#" rel="me">919-234-1272</a></p>
        <p class="email"><strong>Email:</strong> <a href="#">Email</a></p>
    </div>
  </footer>
</div>
</main>
</body>
</html>

10. By Naman kalkhuria

Made by Naman kalkhuria. Minimalistic Resume Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: #eee;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #222;
  font-size: 14px;
  line-height: 26px;
  padding-bottom: 50px;
}

.container {
  max-width: 700px;
  background: #fff;
  margin: 0px auto 0px;
  box-shadow: 1px 1px 2px #DAD7D7;
  border-radius: 3px;
  padding: 40px;
  margin-top: 50px;
}

.header {
  margin-bottom: 30px;
}
.header .full-name {
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.header .first-name {
  font-weight: 700;
}
.header .last-name {
  font-weight: 300;
}
.header .contact-info {
  margin-bottom: 20px;
}
.header .email,
.header .phone {
  color: #999;
  font-weight: 300;
}
.header .separator {
  height: 10px;
  display: inline-block;
  border-left: 2px solid #999;
  margin: 0px 10px;
}
.header .position {
  font-weight: bold;
  display: inline-block;
  margin-right: 10px;
  text-decoration: underline;
}

.details {
  line-height: 20px;
}
.details .section {
  margin-bottom: 40px;
}
.details .section:last-of-type {
  margin-bottom: 0px;
}
.details .section__title {
  letter-spacing: 2px;
  color: #54AFE4;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.details .section__list-item {
  margin-bottom: 40px;
}
.details .section__list-item:last-of-type {
  margin-bottom: 0;
}
.details .left,
.details .right {
  vertical-align: top;
  display: inline-block;
}
.details .left {
  width: 60%;
}
.details .right {
  tex-align: right;
  width: 39%;
}
.details .name {
  font-weight: bold;
}
.details a {
  text-decoration: none;
  color: #000;
  font-style: italic;
}
.details a:hover {
  text-decoration: underline;
  color: #000;
}
.details .skills__item {
  margin-bottom: 10px;
}
.details .skills__item .right input {
  display: none;
}
.details .skills__item .right label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #C3DEF3;
  border-radius: 20px;
  margin-right: 3px;
}
.details .skills__item .right input:checked + label {
  background: #79A9CE;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>

<div class="container">
  <div class="header">
    <div class="full-name">
      <span class="first-name">John</span> 
      <span class="last-name">Doe</span>
    </div>
    <div class="contact-info">
      <span class="email">Email: </span>
      <span class="email-val"><a href="#">Emial</a></span>
      <span class="separator"></span>
      <span class="phone">Phone: </span>
      <span class="phone-val">111-222-3333</span>
    </div>
    
    <div class="about">
      <span class="position">Front-End Developer </span>
      <span class="desc">
        I am a front-end developer with more than 3 years of experience writing html, css, and js. I'm motivated, result-focused and seeking a successful team-oriented company with opportunity to grow. 
      </span>
    </div>
  </div>
   <div class="details">
    <div class="section">
      <div class="section__title">Experience</div>
      <div class="section__list">
        <div class="section__list-item">
          <div class="left">
            <div class="name">KlowdBox</div>
            <div class="addr">San Fr, CA</div>
            <div class="duration">Jan 2011 - Feb 2015</div>
          </div>
          <div class="right">
            <div class="name">Fr developer</div>
            <div class="desc">did This and that</div>
          </div>
        </div>
                <div class="section__list-item">
          <div class="left">
            <div class="name">Akount</div>
            <div class="addr">San Monica, CA</div>
            <div class="duration">Jan 2011 - Feb 2015</div>
          </div>
          <div class="right">
            <div class="name">Fr developer</div>
            <div class="desc">did This and that</div>
          </div>
        </div>

      </div>
    </div>
    <div class="section">
      <div class="section__title">Education</div>
      <div class="section__list">
        <div class="section__list-item">
          <div class="left">
            <div class="name">Sample Institute of technology</div>
            <div class="addr">San Fr, CA</div>
            <div class="duration">Jan 2011 - Feb 2015</div>
          </div>
          <div class="right">
            <div class="name">Fr developer</div>
            <div class="desc">did This and that</div>
          </div>
        </div>
        <div class="section__list-item">
          <div class="left">
            <div class="name">Akount</div>
            <div class="addr">San Monica, CA</div>
            <div class="duration">Jan 2011 - Feb 2015</div>
          </div>
          <div class="right">
            <div class="name">Fr developer</div>
            <div class="desc">did This and that</div>
          </div>
        </div>

      </div>
      
  </div>
     <div class="section">
      <div class="section__title">Projects</div> 
       <div class="section__list">
         <div class="section__list-item">
           <div class="name">DSP</div>
           <div class="text">I am a front-end developer with more than 3 years of experience writing html, css, and js. I'm motivated, result-focused and seeking a successful team-oriented company with opportunity to grow.</div>
         </div>
         
         <div class="section__list-item">
                    <div class="name">DSP</div>
           <div class="text">I am a front-end developer with more than 3 years of experience writing html, css, and js. I'm motivated, result-focused and seeking a successful team-oriented company with opportunity to grow. <a href="/login">link</a>
           </div>
         </div>
       </div>
    </div>
     <div class="section">
       <div class="section__title">Skills</div>
       <div class="skills">
         <div class="skills__item">
           <div class="left"><div class="name">
             Javascript
             </div></div>
           <div class="right">
                          <input  id="ck1" type="checkbox" checked/>

             <label for="ck1"></label>
                          <input id="ck2" type="checkbox" checked/>

              <label for="ck2"></label>
                         <input id="ck3" type="checkbox" />

              <label for="ck3"></label>
                           <input id="ck4" type="checkbox" />
            <label for="ck4"></label>
                          <input id="ck5" type="checkbox" />
              <label for="ck5"></label>

           </div>
         </div>
         
       </div>
       <div class="skills__item">
           <div class="left"><div class="name">
             CSS</div></div>
           <div class="right">
                          <input  id="ck1" type="checkbox" checked/>

             <label for="ck1"></label>
                          <input id="ck2" type="checkbox" checked/>

              <label for="ck2"></label>
                         <input id="ck3" type="checkbox" />

              <label for="ck3"></label>
                           <input id="ck4" type="checkbox" />
            <label for="ck4"></label>
                          <input id="ck5" type="checkbox" />
              <label for="ck5"></label>

           </div>
         </div>
         
       </div>
     <div class="section">
     <div class="section__title">
       Interests
       </div>
       <div class="section__list">
         <div class="section__list-item">
                  Football, programming.
          </div>
       </div>
     </div>
     </div>
  </div>
</div>
</body>
</html>
 

11. By Abhay

Made by Abhay. About page design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
#resume {
            float: left;
            background: url('http://leta.artrow.net/images/background.jpg');
            color: #333333;
            font: 14px/20px 'Open Sans',Helvetica,Arial,sans-serif;
            border-radius: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
            width: 100%;
            z-index: 0;
        }

            #resume .fill-blue {
                background: none repeat scroll 0 0 #2d7fb9;
                color: #FFFFFF;
                font-size: 30px;
                font-weight: 600;
                height: 45px;
                line-height: 45px;
                padding-left: 35px;
                text-transform: uppercase;
            }

            #resume .substrate {
                background: none repeat scroll 0 0 #FFFFFF;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
                display: block;
                margin-bottom: 30px;
                padding: 15px 20px;
                position: relative;
            }

                #resume .substrate:before {
                    bottom: 15px;
                    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
                    content: "";
                    height: 20%;
                    left: auto;
                    position: absolute;
                    right: 5px;
                    transform: rotate(3deg);
                    width: 80%;
                    z-index: -1;
                    -webkit-transform: rotate(3deg);
                    -moz-transform: rotate(3deg);
                    -o-transform: rotate(3deg);
                    transform: rotate(3deg);
                    -ms-transform: rotate(3deg);
                }

            #resume .left-column {
                float: left;
                margin: 20px 0 0 20px;
                padding: 15px;
                width: 270px;
            }

                #resume .left-column .substrate {
                    width: 230px;
                }

            #resume .right-column {
                float: right;
                margin: 20px 20px 0 0;
                padding: 15px;
                width: 490px;
            }

            #resume .substrate h2 {
                margin: 0 0 30px;
            }

            #resume h2 {
                font: 400 28px/28px 'Open Sans',Helvetica,Arial,sans-serif;
                margin-bottom: 10px;
            }


            #resume .right-column .substrate {
                padding-left: 30px;
                width: 440px;
            }



            #resume .gradient-blue {
                background: linear-gradient(to bottom, #479CD7 0%, #2C7EB8 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
            }

            #resume .substrate h2 {
                margin: 0 0 30px;
                font: 400 28px/28px 'Open Sans',Helvetica,Arial,sans-serif;
                margin-bottom: 10px;
            }

            #resume .font-blue h2, .font-yellow h2 {
                color: #FFFFFF;
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            }

            #resume .font-blue h3, .font-blue h4, .font-blue h5, .font-blue h6 {
                color: #D4EDFF;
            }

            #resume h3 {
                font-size: 20px;
                font-weight: 400;
                margin-bottom: 5px;
            }

            #resume h4 {
                color: #808080;
                font-size: 16px;
                font-weight: 400;
                margin-bottom: 10px;
            }



            #resume .p {
                margin-bottom: 20px;
                color: #A9DCFF;
            }

            #resume .main-info-list {
                list-style: none;
                margin: 20px 0 20px;
                padding: 0;
            }

                #resume .main-info-list li {
                    margin-bottom: 3px;
                    color: #333;
                    font-size: 14px;
                    vertical-align: baseline;
                    padding: 0;
                    -webkit-margin-before: 1em;
                    -webkit-margin-after: 1em;
                    -webkit-margin-start: 0px;
                    -webkit-margin-end: 0px;
                }

                    #resume .main-info-list li span {
                        width: 150px;
                        color: #666;
                        padding-left: 20px;
                    }

            #resume .info-period {
                padding-left: 100px;
            }

            #resume .time-period-right-blue {
                margin-left: 10px;
                padding: 2px 10px;
                border-radius: 3px;
                color: #fff;
                font-size: 14px;
            }


            #resume .time-period-right-blue {
                background: #2d7fb9;
            }

            #resume .left-blue {
                margin: 0 0 20px 10px;
                padding-left: 25px;
                border-left: 10px solid #2d7fb9;
            }

            #resume .time-period-left-blue {
                position: relative;
                float: left;
                width: 90px;
                font-weight: 600;
                color: #2d7fb9;
            }

                #resume .time-period-left-blue:before {
                    position: absolute;
                    top: -3px;
                    left: -44px;
                    width: 16px;
                    height: 16px;
                    border: 6px solid #2d7fb9;
                    border-radius: 15px;
                    background: #fff;
                    content: '';
                }

            #resume .skills {
                margin: 10px 0 20px;
                list-style: none;
                padding: 0;
            }

                #resume .skills li {
                    margin-bottom: 3px;
                    height: 40px;
                }

            #resume .skill span {
                float: left;
                width: 100px;
            }

            #resume .skill .b {
                float: left;
                width: 70%;
                margin-left: 10px;
                background: rgba(141,149,167,.2);
            }


            #resume .skills .b .eighty {
                height: calc(2em);
                background: #2D7FB9;
            }


            #resume .paper-clip {
                width: 60px;
                height: 85px;
                background: url('https://lh5.googleusercontent.com/-_VvJpGXP9N0/UwdDY7l-CQI/AAAAAAAABTI/xXPDe4i5lbQ/s330/paper-clip.png') repeat scroll 0% 0% transparent;
                position: absolute;
                top: -14px;
                right: -13px;
            }

        .profilepic {
            width: 100%;
        }

        @media screen and (max-width: 860px) {

            #resume {
                width: 620px;
            }



                #resume.left-column {
                    padding-left: 5px;
                    
                }

                #resume .right-column {
                    padding-left: 0;
                    width: 270px;
                }

                    #resume .right-column .substrate {
                        width: 230px;
                    }



                #resume .substrate {
                    margin-bottom: 20px;
                }


                #resume .time-period-left-blue {
                    position: relative;
                    float: left;
                    width: 50px;
                    font-weight: 600;
                }
        }
         @media screen and (max-width: 620px) {

            #resume {
                width: 320px;
            }



                #resume.left-column {
                  float: none;
		margin: 20px 20px 0;
		padding: 0 0 0 5px;

                }

                #resume .right-column {
                
		margin: 0 25px 0;
		padding: 10;

                }

                    #resume .right-column .substrate {
                        width:220px;
                    }



                #resume .substrate {
                    margin-bottom: 20px;
                }


                #resume .time-period-left-blue {
                    position: relative;
                    float: left;
                    width: 50px;
                    font-weight: 600;
                }
        }
</style>
</head>
<body>
  <div id="resume">
        <div class="fill-blue">
            CAREER
        </div>

        <div class="left-column">
            <div class="substrate">
                <h2>My Profile</h2>
                <img class="profilepic" src="https://lh3.googleusercontent.com/llUacYfeIZT3kEz_FCOe-3T3KObXzhrBrUzzAsrQJjE=w702-h527-no" alt="abhaymakadia" />
                <ul class="main-info-list">
                    <li>Name<span>Abhay Makadia</span><div class="floatlimit">
                    </div>
                    </li>
                    <li>Born<span>06 January 1990</span><div class="floatlimit">
                    </div>
                    </li>
                    <li>Address<span>India - Rajkot - Upleta</span><div class="floatlimit">
                    </div>
                    </li>
                    <li>Email<span><a href="#">Email</a></span><div class="floatlimit">
                    </div>
                    </li>
                </ul>
                <div class="paper-clip">
                </div>
            </div>
            <div class="substrate">
                <h2>Career</h2>
                <div class="left-blue">
                    <div class="time-period-left-blue">
                    </div>
                    <h3>
                        <span class="time-period-right-blue">2013 - Now</span></h3>
                    <h4>Work</h4>
                    <p>
                       I am turning at one Software Company in 2013 as Asp.net Developer.
                    </p>
                    <div class="time-period-left-blue">
                    </div>
                    <h3>
                        <span class="time-period-right-blue">2010 - 2013</span></h3>
                    <h4>M.C.A.</h4>
                    <p>
                        Learn  CSS, HTML, Javascript
                    </p>
                    <div class="time-period-left-blue">
                    </div>
                    <h3>
                        <span class="time-period-right-blue">2007 - 2010</span></h3>
                    <h4>B.C.A</h4>
                    <p>
                        I have Completed My Bachelors in Computer Application from Rajkot.
                    </p>
                </div>
            </div>
        </div>
        <div class="right-column">

            <div class="substrate gradient-blue font-blue">
                <h2>About Me</h2>
                <h3>Hay, I'm Abhay Makadia . . .</h3>
                <div class="p">Lorem
                </div>
            </div>

            <div class="substrate">
                <h2>Skill I</h2>
                <h3>Web Development</h3>
                <ul class="skills">
                    <li class="skill"><span>Asp.net C#</span>
                        <div class="b">
                            <span class="eighty" style="width: 90%"></span>
                        </div>
                    </li>
                    <li class="skill"><span>HTML</span>
                        <div class="b">
                            <span class="eighty" style="width: 70%"></span>
                        </div>
                    </li>
                    <li class="skill"><span>CSS</span>
                        <div class="b">
                            <span class="eighty" style="width: 60%"></span>
                        </div>
                    </li>
                    <li class="skill"><span>JavaScript</span>
                        <div class="b">
                            <span class="eighty" style="width: 50%"></span>
                        </div>
                    </li>
                    <li class="skill"><span>Jquery</span>
                        <div class="b">
                            <span class="eighty" style="width: 30%"></span>
                        </div>
                    </li>
                </ul>
                <div class="paper-clip">
                </div>
            </div>
        </div>

        <div class="floatlimit">
        </div>
    </div>
    </body>
</html>
 

12. By Sara Cope

Made by Sara Cope. HTML5 Resume with Sticky Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display+SC|Roboto:300,400,500,700,900);

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
/* End clearfix */

body {
  font: 12 Arial, sans-serif;
  font-weight: normal;
  position: relative;
  background: #efefef;
  line-height: 20px;
}

#maincontent {
  width: 80%;
  z-index: 5;
  margin: 0 auto;
  position: relative;
  padding-left: 20px;
  padding-right: 40px;
  margin-top: 130px;
  color: #666666;
  background: #fff;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #04c3a5;
  display: block;
  height: 100px;
  border-bottom: 1px solid rgba(255, 124, 110, 0.45);
  margin-bottom: 20px;
}

.header h1 {
  float: left;
  padding-left: 55px;
  line-height: 30px;
  font-weight: 700; 
  font-size: 22px;
}

.site-nav {
  min-width: 320px;
  letter-spacing: 1px;
}

.site-nav a:active {
  border-bottom: 2px solid #fff;
}

.site-nav ul {
  text-align: center;
  list-style: none;
}

.site-nav li {
  vertical-align: middle;
  display: inline-block;
  margin-right: 25px;
  padding: 10px;
}

.site-nav a {
  color: #444444;
  font-weight: bold;
  position: relative;
}

h1 {
  font-family: "Playfair Display SC", serif;
}

p {
  font-family: sans-serif; 
}

h5 {
  font-family: "Roboto", sans-serif; 
  font-weight: 700;
  font-size: 14px;
  color: #04c3a5;
  margin-bottom: 0;
}

h6 {
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
  margin: 0;
}

ul {
  font-family: "Roboto", sans-serif; 
}

a, a:active {
  text-decoration: none;
}

a:hover {
  color: #fff;
}

section {
  border-bottom: 1px solid #efefef;
  margin-bottom: 50px;
  margin-top: 30px;  
  padding-bottom: 25px;
}

section:last-child {
  border-bottom: none;
  padding-bottom: 35px;
  margin-bottom: 0px;
}

section:before {
  display: block;
  content: " ";
  margin-top: -100px;
  height: 100px;
  visibility: hidden;
}

.heading h2{
  text-transform: uppercase;
  float: left;
  width: 20%;
}

.content {
  float: right;
  width: 75%;
}

#experience h5{
  color: #04c3a5;
}

#experience h6{
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
}

#experience ul{
  margin-bottom: 55px; /*add space between jobs*/
}

#experience ul:last-child{
  padding-bottom: 35px;
  margin-bottom: 0;
}

#education h6{
  padding-bottom: 25px;
}

footer {
  width: 80%;
  margin: 0 auto;
  position: relative;
  padding-left: 20px;
  padding-right: 40px;
  margin-top: 50px;
  background: #666666;
  height: 100px;
}

footer h5 {
  text-align: center;
  padding-top: 40px;
  font-size: 13px;
}

footer a{
  color: #fff;
  letter-spacing: 2px;
}
</style>
</head>
<body>
  <html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Sally Smythe Resume</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <article>
        
    <!-- Begin Header Navigation-->  
    <header class="header">
      <h1>Sally Smythe</h1>
      <nav class="site-nav">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#experience">Experience</a></li>
          <li><a href="#education">Education</a></li>
          <li><a href="#interests">Interests</a></li>
        </ul>
      </nav>
    </header>
    <!-- End Header Navigation-->  
      
    <!-- Begin Main Content-->
    <div id="maincontent" class="clearfix">

      <!-- Begin About Me Section -->
      <section id="about" class="clearfix">
        <h2 class="heading">About Me</h2>
        <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </section>
      <!-- End About Me Section -->

      <!-- Begin Experience Section -->
      <section id="experience" class="clearfix">
        <h2 class="heading">Work Experience</h2>
        <div class="content">
        <h5>Project Manager at Company Name</h5>
        <h6>June 2011 - Present</h6>
        <ul class="generic-list">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci.</li>
          <li class="item">Adipisci, natus, commodi non doloremque voluptates officia praesentium qui eveniet!</li>
          <li class="item">Sunt, unde, sed illum dicta aperiam ex dolorum quis pariatur?</li>
          <li class="item">Nobis, maiores porro distinctio sapiente minima autem placeat voluptas vero.</li>
        </ul>
        <h5>Front-end Developer at Company Name</h5>
        <h6>Dec 2010 - May 2011</h6>
        <ul class="generic-list">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, non.</li>
          <li class="item">Inventore, iure, quisquam tempore harum alias culpa voluptates odio. Voluptates!</li>
          <li class="item">Sint, officiis incidunt itaque cum ducimus corporis mollitia libero voluptas.</li>
          <li class="item">Nobis, quidem tempora fugiat quibusdam officiis placeat nisi asperiores est.</li>
        </ul>
        <h5>Checkout Clerk at Company Name</h5>
        <h6>Jan 2009 - July 2009</h6>
        <ul class="generic-list">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, fugiat?</li>
          <li class="item">Officia, illum, perspiciatis ullam cupiditate rerum laboriosam corporis nobis fugit.</li>
          <li class="item">Libero, explicabo dignissimos sapiente officia voluptate iusto. Nemo, at ab.</li>
          <li class="item">Fuga, laboriosam facilis sed excepturi rerum optio reiciendis provident iure!</li>
        </ul>
        </div>
      </section>
      <!-- End Experience Section -->
      
      <!-- Begin Education Section -->
      <section id="education" class="clearfix">
        <h2 class="heading">Education</h2>
        <div class="content">
          <h5>BSB, Technical Communication</h5>
          <h6>The Ohio State University | 2002</h6>
        </div>
      </section>
      <!--  End Education Section -->
      
      <!-- Begin Interests Section -->
      <section id="interests" class="clearfix">
        <h2 class="heading">Interests</h2>
        <ul class="content">
          <li>Board games</li>
          <li>Hiking</li>
          <li>Photography</li>
        </ul>
      </section>
      <!-- End Interests Section -->

    </div>
  <!--End Main Content -->

    <footer>

     <!-- Begin Contact Section -->
      <h5><a href="#">Email</a> | <a href="www.linkedin.com">LinkedIn</a> | <a href="www.Twitter.com">Twitter</a>
      </h5>
      <!-- End Contact Section -->
    </footer>    
</body>
</html>

13. By Anupama Panchal

Made by Anupama Panchal. Resume with Sidebar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
			background: #eae8e7;
			color: #767270;
			padding: 1%;
			font-size: 14px;
			font-family: verdana, sans-serif;
		}
		
		.sidebar {
			width:30%;
			display: inline-block;
			margin-left: 10%;
			background: #5da4d9;
			color: white;
		}

		img {
			width: 100%;
		}

		.sidebar-top { position: relative; }

		.profile-basic {
			position: absolute;
			bottom: 0px;
			left: 50px;
		}

		.profile-info {
			padding: 20px 10px;
			border-bottom: 1px solid #4783c2;
		}

		 .profile-info p{
			margin-left: 10px;
			display: inline-block;
			vertical-align: top;
		}

		.profile-info .key{
			font-weight: bold;	
		}

		.profile-info .value{
		}
    
		.social-media:hover{
			cursor: pointer;
			color: white;
		}

		.content {
			width: 48%;
			margin-left: 2%;
			display: inline-block;
			vertical-align: top;
		}

		.work-experience, .education {
			margin-bottom: 30px;
			padding: 5% 2% 5% 10%;
			background: white;
			box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
		}

		.info {
			padding: 2% 1%;
			border-bottom: 1px solid #bdbdbd;
		}
    

		.sub-heading { 
      font-weight: bold;       
    }

		.duration {
			color: #5da4d9;
			font-size:12px;
		}
</style>
</head>
<body>
	<div class="container">
		<div class="sidebar">
			<div class="sidebar-top">
				<img class="profile-image" src="http://demo.deviserweb.com/cv/assets/images/profile-img.jpg" />
				<div class="profile-basic">
					<h1 class="name">Al Rayhan</h1>
					<h4 class="designation"> UI & UX Expert </h4>
				</div>
			</div>
			<div class="profile-info">
				<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 	
				</p>
			</div>
			<div class="profile-info">
				<p class="key">Contact : </p>
				<p class="value">9876543210</p>
			</div>

			<div class="profile-info">
				<p class="key" >Email : </p>
				<p class="value" ><a href="#">Emial</a></p>
			</div>

			<div class="profile-info">
				<p class="key" >Address : </p>
				<p class="value" >
					24 Golden Tower<br/>
					Amborkhana, Sylhet.<br/>
					SYL-3RF87W
				</p>
			</div>

			<div class="profile-info">
				<a class="social-media" href="https://facebook.com/anupama.panchal" target="_blank" >Facebook</a>
				<a class="social-media" href="https://facebook.com/anupama.panchal" target="_blank" >Linkedin</a>
				<a class="social-media" href="https://facebook.com/anupama.panchal" target="_blank" >Twitter</a>
				<a class="social-media" href="https://facebook.com/anupama.panchal" target="_blank" >Instagram</a>
			</div>
		</div>

		<div class="content">
			<div class="work-experience">
				<h1 class="heading"> Work Experience</h1>
				<div class="info">
					<p class="sub-heading">UI/UX Designer @Academy</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
				<div class="info">
					<p class="sub-heading">Creative Director @DeviserWeb</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
				<div class="info">
					<p class="sub-heading">Graphics Designer @Creative Wrold</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
			<div class="education">
        <h1 class="heading">Education</h1>
				<div class="info">
					<p class="sub-heading">Art & Multimedia @Oxford University</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
				<div class="info">
					<p class="sub-heading">Post Graduation @Lorem</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
				<div class="info">
					<p class="sub-heading">TTMP Degree @Creative School</p>
					<p class="duration">JAN 2016 - DEC 2016</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>