<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--GOOGLE FONT-->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700|Ubuntu" rel="stylesheet">
<!--FONT AWESOME-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
crossorigin="anonymous">
<title>HTML RESUME TEMPLATE</title>
</head>
<body>
<aside class="toc">
<section class="section-heading">
<h2>Contact</h2>
<div class="contact-info">
<p>555-645-5545</p>
<p>email@me.com</p>
</div>
<div>
<ul class="social-media">
<li>
<a href="https://www.linkedin.com/" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.github.com/" target="_blank">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="https://www.codepen.io/" target="_blank">
<i class="fab fa-codepen"></i>
</a>
</li>
</ul>
</div>
</section>
<hr>
<section class="section-heading-2">
<h2>languages</h2>
<div class="languages">
<ul>
<li>Lang1</li>
<li>Lang2</li>
<li>Lang3</li>
</ul>
</div>
</section>
<hr>
<section class="section-heading-2">
<h2>Education</h2>
<div>
<h3 class="degree-title">MAJOR</h3>
<p class="institution">University</p>
<p class="date">from - to</p>
</div>
<div>
<h3 class="degree-title">major</h3>
<p class="institution">university</p>
<p class="date">to - from</p>
</div>
</section>
</aside>
<main>
<header>
<div class="main-heading">
<h1 class="title">
<span class="name">YOUR NAME</span>
<span class="professional-title">last position held</span>
</h1>
</div>
</header>
<article class="work">
<h2>Professional Experience</h2>
<hr>
<div>
<h1 class="position-title">position title</h1>
<p class="company-name">company name</p>
<p class="dates">to - from</p>
<div class="job-items">
<ul class="job-description">
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
</ul>
</div>
</div>
</article>
<article class="work">
<div>
<h1 class="position-title">position title</h1>
<p class="company-name">company name</p>
<p class="dates">to - from</p>
<div class="job-items">
<ul class="job-description">
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
<li>Short description of daily task(s)</li>
</ul>
</div>
</div>
</article>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Ubuntu";
}
main {
background-color: #D5DED9;
}
.main-heading {
background-color: #404145;
color: whitesmoke;
height: 20vh;
position: relative;
z-index: 1;
margin: 0;
padding: 0;
border: 1px solid #404145;
}
.title {
color: whitesmoke;
text-transform: uppercase;
margin-bottom: 10px;
}
.name,
.professional-title {
display: block;
top: 50%;
left: 65%;
position: absolute;
transform: translate(-50%, -65%)
}
.name {
font-size: 40px;
letter-spacing: 6px;
font-family: "Comfortaa";
}
.professional-title {
font-size: 15px;
letter-spacing: 4px;
padding-top: 80px;
}
aside {
float:left;
max-width: 25%;
height: 900px;
margin-left: 30px;
z-index: 2;
position: absolute;
}
.toc {
background-color: #f2dddc;
position: relative;
top: 3em;
left: 1em;
padding: 2em;
}
.section-heading,
.section-heading-2 {
font-family: "Comfortaa";
font-size: 15px;
color: #404145;
text-align: center;
text-transform: uppercase;
}
.section-heading {margin-top: 174px;}
.section-heading p {
font-size: 12px;
line-height: 28px;
text-transform: lowercase;
}
h2 { margin-bottom: 20px; }
.social-media li{
display: inline-block;
font-size: 28px;
text-decoration: none;
padding-top: 20px;
padding-bottom: 35px;
letter-spacing: 8px;
}
.social-media a:visited {color: #800080;}
.fab {color: #404145;}
hr {
width: 180px;
margin: 0 auto;
color: #404145;
}
.section-heading-2 {
margin-top: 40px;
}
.languages li {
display: inline-block;
text-decoration: none;
padding: 20px 8px 35px 0;
}
.degree-title { font-size: 14px; }
.institution,
.date {
font-size: 12px;
}
.date {padding-bottom: 40px;}
h2,
.position-title {
font-family: "Comfortaa";
text-transform: uppercase;
}
h2 {
letter-spacing: 3px;
margin-top: 12px;
font-size: 26px;
padding-bottom: 15px;
}
.work {
background-color:white;
width: 70%;
float: right;
text-align:center;
margin-top: 30px;
}
.position-title {
font-size: 20px;
margin-top: 40px;
}
.company-name {
font-size: 18px;
margin-top: 5px;
}
.dates {
font-size: 14px;
margin-top: 8px;
}
.job-items {
margin: 0 auto;
width: 600px;
padding-top: 30px;
display: inline-block;
}
.job-description {
list-style-type: square;
line-height: 25px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.