A HTML resume template
A HTML resume template
Jan 5, 2021 | Read time 5 minutesSee the demo here
Quick day of coding for me today. I didnt know what to create so decided to learn a CSS template thats not bootstrap. I decided to create a resume template using the Milligram CSS template.
The code for this template is below. In the future I might clean this up and release it as a customizable HTML template.
HTML
The HTML is fairly straight forward - using external css libraries like normalize.css and milligram.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Template - Nulla</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- `.container` is main centered wrapper -->
<div class="container">
<div class="row" style="height:400px">
<div class="box-one">
</div>
<div class="box-two">
</div>
<div class="box-three">
</div>
<div class="box-big">
</div>
<div class="hero-text fadeInUp delay-1">
<div>
<h1>Ryu's Resume</h1>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta alias facere nulla quo similique
ullam laboriosam numquam fuga quos blanditiis reiciendis,
doloribus dolores deleniti. Omnis, rerum cum. Itaque, quia doloribus.</p>
</div>
</div>
<div class="row" style="padding-top: 12rem;">
<div class="column fadeInUp delay-2">
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis reiciendis veritatis
temporibus necessitatibus nobis!
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?</p>
</div>
<div class="column fadeInUp delay-2">
<h2>Distinctio</h2>
<p>Alias perferendis reiciendis veritatis temporibus necessitatibus nobis!
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?</p>
</div>
<div class="column fadeInUp delay-2">
<h2>Veritatis</h2>
<p>
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?Alias perferendis reiciendis veritatis temporibus necessitatibus nobis! </p>
</div>
</div>
<div class="row" style="padding-top: 8rem;">
<div class="column fadeInUp delay-3">
<h2>Sapiente</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis reiciendis veritatis
temporibus necessitatibus nobis!
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?</p>
</div>
<div class="column fadeInUp delay-3">
<h2>Reiciendis</h2>
<p>Alias perferendis reiciendis veritatis temporibus necessitatibus nobis!
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?</p>
</div>
<div class="column fadeInUp delay-3">
<h2>Odit</h2>
<p>
Ullam fugit nisi animi saepe assumenda vel odio eos odit distinctio, beatae veniam doloribus
sapiente?Alias perferendis reiciendis veritatis temporibus necessitatibus nobis! </p>
</div>
</div>
<div class="row" id="contact">
<div class="column">
<button> Contact me now</button>
</div>
</div>
<div class="row" style="margin-top: 8rem;margin-bottom: 4rem;">
<div class="column">
Copyright 2021
</div>
<div class="column column-50 column-offset-25" style="text-align: right;">
<a href="/">About</a>
<a href="/">Contact</a>
<a href="/">Help</a>
</div>
</div>
</div>
</body>
</html>CSS
I am hand coding the keyframes here to get something out the door. It could be improved by using a library like GSAP.
body {
margin-top: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
background-color: #E8EBF3;
}
.box-big {
width: 100%;
height: 400px;
background-color: white;
animation-name: expand;
animation-duration: 1000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-delay: 0.3s;
z-index: -1;
border-radius: 6px;
visibility: hidden;
animation-fill-mode: forwards;
position: relative;
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
}
h1 {
font-weight: bolder;
}
.box-one,
.box-two,
.box-three {
width: 100px;
height: 100px;
transform: rotate(-22deg) scale(1);
border-radius: 6px;
overflow: hidden;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
position: absolute;
}
.box-one {
left: 27.1%;
top: 15.6%;
background-color: #0270D7;
}
.box-two {
left: 77.1%;
top: 5.6%;
width: 40px;
height: 40px;
animation-duration: 2000ms;
animation-name: spin-two;
transform: rotate(-42deg) scale(1);
background-color: #b5179e;
}
.box-three {
left: 7.1%;
top: 5.6%;
width: 120px;
height: 120px;
animation-duration: 2000ms;
animation-name: spin-two;
transform: rotate(-42deg) scale(1);
background-color: #4cc9f0;
}
.box-one::before,
.box-two::before,
.box-three::before {
content: '';
background: linear-gradient(to left, #fff0 0%, #ffffff7a 100%);
transform: rotateZ(45deg) scale(1.5);
transform-origin: 100% 100%;
display: block;
width: 100%;
height: 100%;
}
.hero-text {
position: absolute;
width: 50%;
right: 10px;
top: 300px;
line-height: 2.5rem;
color: black;
}
@keyframes spin {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(338deg);
opacity: 1;
}
}
@keyframes spin-two {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(318deg);
opacity: 1;
}
}
@keyframes expand {
0% {
width: 0;
height: 0;
}
50% {
width: 100%;
height: 10px;
}
100% {
height: 400px;
visibility: visible;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
.fadeInUp {
animation-name: fadeInUp;
animation-duration: 1000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
visibility: hidden;
animation-fill-mode: forwards;
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 2s;
}
.delay-3 {
animation-delay: 3s;
}
.delay-4 {
animation-delay: 4s;
}
#contact {
background-image: url(ryu.png);
height: 380px;
background-repeat: no-repeat;
background-position-x: right;
background-color: white;
border-radius: 10px;
padding-top:150px;
padding-left:50px;
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
}