Skip to content

Instantly share code, notes, and snippets.

@arempe93

arempe93/instructions.md

Last active December 2, 2018 23:03
Show Gist options
  • Save arempe93/0960d9480d8945f339c0 to your computer and use it in GitHub Desktop.
Save arempe93/0960d9480d8945f339c0 to your computer and use it in GitHub Desktop.
Download ZIP
Resume Template
Raw
instructions.md

Resume Template

To use:

  • Download the gist using the button on the right and unzip
  • Edit the html file with your information
  • Open the html file in chrome
  • Press control + p to print
  • Select print to PDF and choose the paper size "Tabloid"
Raw
main.css
body {
padding: 2em;
font-family: "Roboto";
font-weight: 400;
}
strong {
font-weight: 700;
}
p {
margin-bottom: 5px;
}
.info > div:first-child {
text-align: right;
}
.info > div:last-child {
border-left: 1px solid #bbb;
}
header h1 {
position: relative;
margin: 0;
font-family: "Roboto";
font-weight: 900;
text-transform: uppercase;
}
header h1 > img {
width: 120px;
height: 120px;
margin-right: 0.6em;
}
header h1 > p {
position: absolute;
top: 77px;
left: 150px;
font-family: "Roboto";
font-weight: 300;
font-size: 18px;
text-transform: uppercase;
}
header > .info {
margin-top: 38px;
}
h3 {
margin-bottom: 25px;
padding-bottom: 4px;
font-family: "Roboto Condensed";
font-weight: 400;
text-transform: uppercase;
border-bottom: 1px solid #bbb;
}
.col {
position: relative;
padding-left: 15px;
padding-right: 15px;
width: 48%;
float: left;
}
article > .col:first-child {
margin-right: 2%;
margin-left: 0.5%;
}
section {
margin-bottom: 40px;
}
section p {
text-align: justify;
}
.timeline {
position: relative;
padding-left: 10px;
padding-top: 20px;
margin-left:25px;
list-style-type: none;
}
.timeline:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
content: ' ';
display: block;
width: 4px;
background-color: #999;
}
.timeline li {
padding-left: 15px;
margin-bottom: 35px;
}
.timeline li h4 {
position: relative;
margin-bottom: 30px;
font-family: "Roboto";
font-weight: 300;
}
.timeline li h4:before {
position: absolute;
top: 0;
left: -30px;
content: ' ';
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #999;
}
.timeline li h4 em {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
color: #aaa;
}
.timeline li h4 span {
position: absolute;
bottom: -17px;
left: 0;
font-size: 14px;
font-weight: 700;
}
.skills {
position: relative;
padding-left: 7em;
margin-bottom: 20px;
text-align: left;`
}
.skills strong {
position: absolute;
top:0;
left: 0;
}
footer {
margin-top: 20px;
padding-top: 40px;
border-top: 1px solid #bbb;
}
footer h1 {
margin: 0;
font-family: "Roboto";
font-weight: 900;
font-size: 24px;
text-transform: uppercase;
}
@media screen {
.container {
width: 1031px;
padding: 28px;
background-color: #fff;
border: 1px solid #bbb;
box-shadow: 0px -2px 6px 1px rgba(0,0,0,0.15);
}
body {
background-color: rgba(245, 245, 245, 0.8);
}
}
@media print {
.timeline {
border-left: 4px solid #999;
}
}
Raw
resume.html
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:900,300,700,400|Roboto+Condensed:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header class="row">
<div class="col-xs-8">
<h1>
<img src="https://download.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg" class="img-circle">
Arthur Vanderlay
<p>Importer Exporter</p>
</h1>
</div>
<div class="info">
<div class="col-xs-1">
<strong>Contact</strong>
</div>
<div class="col-xs-2">
<p>averderlay@example.com</p>
<p>(301) 252-5252</p>
</div>
</div>
</header>
<article class="row" style="margin-top: 50px;">
<div class="col">
<section>
<h3>Professional Summary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non efficitur est. Aliquam mollis commodo ex eu varius. Aenean nibh est, iaculis eu suscipit a, varius et arcu. Phasellus et dictum magna. Donec eu metus suscipit turpis aliquam blandit sit amet a leo. Nam volutpat commodo ante, sit amet commodo risus gravida non.</p>
</section>
<section>
<h3>Education</h3>
<ul class="timeline">
<li>
<h4>
Some College
<em>Bachelors, 20xx</em>
<span>Major Field</span>
</h4>
<p>Aliquam mollis commodo ex eu varius. Aenean nibh est, iaculis eu suscipit a, varius et arcu. Phasellus et dictum magna. Donec eu metus suscipit turpis aliquam blandit sit amet a leo.</p>
</li>
</ul>
</section>
<section>
<h3>Projects</h3>
<ul class="timeline">
<li>
<h4>
First Project
<em>Details</em>
<span>Tagline</span>
</h4>
<p>Fusce eleifend arcu eros. Nullam feugiat sed purus vel porta. Ut metus purus, porttitor vel laoreet a, vehicula efficitur ante. Nunc tincidunt blandit hendrerit. Nullam egestas, elit fringilla auctor dignissim, metus odio mattis nulla, non feugiat ligula nisi in nibh. Praesent sodales a massa vitae rutrum.</p>
</li>
<li>
<h4>
Second Project
<em>Details</em>
<span>Tagline</span>
</h4>
<p>Fusce eleifend arcu eros. Nullam feugiat sed purus vel porta. Ut metus purus, porttitor vel laoreet a, vehicula efficitur ante. Nunc tincidunt blandit hendrerit. Nullam egestas, elit fringilla auctor dignissim, metus odio mattis nulla, non feugiat ligula nisi in nibh. Praesent sodales a massa vitae rutrum.</p>
</li>
</ul>
</section>
</div>
<div class="col">
<section>
<h3>Work Experience</h3>
<ul class="timeline">
<li>
<h4>
First Employer
<em>Sept 2014 - Present</em>
<span>Position</span>
</h4>
<p>Fusce eleifend arcu eros. Nullam feugiat sed purus vel porta. Ut metus purus, porttitor vel laoreet a, vehicula efficitur ante. Nunc tincidunt blandit hendrerit. Nullam egestas, elit fringilla auctor dignissim, metus odio mattis nulla, non feugiat ligula nisi in nibh. Praesent sodales a massa vitae rutrum.</p>
</li>
<li>
<h4>
Second Employer
<em>May 2014 - Aug 2014</em>
<span>Position</span>
</h4>
<p>Fusce eleifend arcu eros. Nullam feugiat sed purus vel porta. Ut metus purus, porttitor vel laoreet a, vehicula efficitur ante. Nunc tincidunt blandit hendrerit. Nullam egestas, elit fringilla auctor dignissim, metus odio mattis nulla, non feugiat ligula nisi in nibh. Praesent sodales a massa vitae rutrum.</p>
</li>
<li>
<h4>
Third Employer
<em>Dec 2013 - Apr 2014</em>
<span>Position</span>
</h4>
<p>Fusce eleifend arcu eros. Nullam feugiat sed purus vel porta. Ut metus purus, porttitor vel laoreet a, vehicula efficitur ante. Nunc tincidunt blandit hendrerit. Nullam egestas, elit fringilla auctor dignissim, metus odio mattis nulla, non feugiat ligula nisi in nibh. Praesent sodales a massa vitae rutrum.</p>
</li>
</ul>
</section>
<section>
<h3>Skills</h3>
<p class="skills"><strong>Category</strong> First Skill, Second Skill, Third Skill</p>
<p class="skills"><strong>Category</strong> First Skill, Second Skill, Third Skill</p>
<p class="skills"><strong>Category</strong> First Skill, Second Skill, Third Skill</p>
<p class="skills"><strong>Category</strong> First Skill, Second Skill, Third Skill</p>
</section>
</div>
</article>
<footer class="row">
<div class="col-xs-3 text-right">
<h1>Arthur Vanderlay<h1>
</div>
<div class="info">
<div class="col-xs-1 col-xs-offset-1">
<strong>Contact</strong>
</div>
<div class="col-xs-3">
<p>1234 Some Place Road <br> Cityville, MD 21157</p>
<p>avanderlay@example.com</p>
<p>(301) 252-5252</p>
</div>
</div>
<div class="info">
<div class="col-xs-1">
<strong>Profile</strong>
</div>
<div class="col-xs-3">
<p>twitter.com/artcore</p>
<p>linkedin.com/in/avanderlay</p>
</div>
</div>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment