Create Responsive Resume Website using HTML and CSS | Resume CV design in HTML CSS
Hello Readers, In this Post, You will learn How to Create a Responsive Resume Using Only HTML and CSS.
A resume is a short, straight-to-the-point, document created for the purpose of applying to a specific job. It is a document used and created by a person to present their background, skills, and accomplishments. Most of the people made their resumes with graphics software like photoshop, illustrator, or more. Also, Nowadays peoples create their resumes in Microsoft Word to format their resumes. Today we will create a Responsive resume using HTML and CSS that's present a perfect format for online presentations.
In a resume, you only mention the aspects of your work experience and skills that are relevant to the job you’re applying for. A good resume highlights specific contributions you have made in your previous work and showcases how your different skills can be useful for the position you are applying to.
The resume is usually accompanied by the submission of a cover letter that states your intent for applying for the job. The cover letter builds upon the skills and experience you have touched upon in your resume, explaining how they’re going to help you excel at the job you’re applying for.
So I decided to create this amazing Resume, I hope you will like it.
If you are thinking about how to resume looking like what I made them see the youtube video given below. In this video, I have shown you to create a resume online step by step with writing codes.
And this is our official youtube channel where I upload videos on weekends or share more interesting videos on my channel. So you can subscribe to the channel for more tutorials like this one to become an advanced web developer. Subscribe link given below.
For More Amazing Videos:-
SUBSCRIBE OUR YOUTUBE CHANNEL - Codic Gyan YouTube Channel
If you have any doubts or queries, please leave a comment below. Don't Forget to Subscribe to Our Channel. Share the Tutorial with your friends that it will also learn something from you if You Find it's Helpful.
Source Code Download
Before Downloading the source code let's talk about this responsive resume. At first, on the left side, I have inserted an image inside a circle. After that "About section " in which you can write about yourself that I am a web developer and so more about yourself. Next contact section on the left side in which you can add your contact no, email, or more that people how to contact you so you can write there. The next Section is "Follow" In this section, I have provided the social media link that people can follow me on social media.
On the RIght side, we created an "Education section" in which you can tell about your courses and from where have you completed these courses like University name, college name, etc with the year in which you completed. After that "Skills Section" in which you can tell about your skills taking an example that you're a developer then your skills will be an HTML, CSS, javascript, bootstrap, jquery, node js, and reactjs or more. The next section is "Development tools" in which you can tell that the tools which are used to create something new like a website, the app can be used tools be a sublime text editor, visual studio, photoshop, git, npm, or more. The next section is "interests" in this section you will add about your interest in which you are interested. in this resume, I have written Game, Pet, Self Learning, Music, etc.
At first, on your pc create a folder named responsive resume and paste the image on that folder. After that open that folder with your editor and then create an index.html file and style.css file.
Now follow the steps to create a responsive resume without an error ocurring.
index.html
Put this code into the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESPONSIVE RESUME CV DESIGN</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/2092db7cc5.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="intro">
<div class="profile">
<div class="photo">
<img src="image.jpg" >
</div>
<div class="bio">
<h1 class="name">Karanjeet Kumar</h1>
<p class="profession">Front-end Developer</p>
</div>
</div>
<div class="intro-section about">
<h1 class="title">about me</h1>
<p class="paragraph">
Hi everyone, I am a web front-end developer, graduated from NTHU, Taiwan and my major is CS. I recently try my
best to improve my skills on web front-end. My favorite thing is to observe others' portfolio.
</p>
</div>
<div class="intro-section contact">
<h1 class="title">contact</h1>
<div class="info-section">
<i class="fas fa-phone"></i>
<span>(+91)123-456-789</span>
</div>
<div class="info-section">
<i class="fas fa-map-marker-alt"></i>
<span>Albany, NewYork</span>
</div>
<div class="info-section">
<i class="fas fa-paper-plane"></i>
<span>google@gmail.com</span>
</div>
<div class="info-section link">
<i class="fab fa-facebook"></i>
<a target="_blank" rel="author" href="https://pixabay.com/">
<span>Johndoe</span>
</a>
</div>
</div>
<div class="intro-section follow">
<h1 class="title">Follow</h1>
<div class="info-section link">
<i class="fab fa-github"></i>
<a target="_blank" rel="author" href="
https://www.pexels.com/">
<span>Johndoe@github</span>
</a>
</div>
<div class="info-section link">
<i class="fab fa-codepen"></i>
<a target="_blank" rel="author" href="
https://codepen.io/Codicgyan">
<span>codepen.io</span>
</a>
</div>
<div class="info-section link">
<i class="fab fa-medium"></i>
<a target="_blank" rel="author" href="
https://www.pexels.com/">
<span>chrislake</span>
</a>
</div>
</div>
</div>
<div class="detail">
<div class="detail-section edu">
<div class="detail-title">
<div class="title-icon">
<i class="fas fa-user-graduate"></i>
</div>
<span>Education</span>
</div>
<div class="detail-content">
<div class="timeline-block">
<h1>Department of Computer Science</h1>
<p>Widener University, NewYork</p>
<time>2015 - 2019</time>
</div>
<div class="timeline-block">
<h1>Institute of Computer Science and Engineering</h1>
<p>Hunter College, NewYork</p>
<time>2020 - present</time>
</div>
</div>
</div>
<div class="detail-section pg-skill">
<div class="detail-title">
<div class="title-icon">
<i class="fas fa-laptop-code"></i>
</div>
<span>Programming Skills</span>
</div>
<div class="detail-content">
<ul class="pg-list">
<li>
<span>HTML5</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:90%"></div>
</div>
</li>
<li>
<span>CSS3</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:75%"></div>
</div>
</li>
<li>
<span>Javascript</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:70%"></div>
</div>
</li>
<li>
<span>JQuery</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:50%"></div>
</div>
</li>
<li>
<span>Nodejs</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:70%"></div>
</div>
</li>
<li>
<span>VueJS</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:45%"></div>
</div>
</li>
<li>
<span>ReactJS</span>
<div class="sb-skelton">
<div class="skillbar" style="--pgbar-length:75%"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="detail-section tool-skill">
<div class="detail-title">
<div class="title-icon">
<i class="fas fa-tools"></i>
</div>
<span>Development Tools</span>
</div>
<div class="detail-content">
<ul class="tool-list">
<li>
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
<circle class="cbar" cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
</svg>
<span class="tl-name">Photoshop</span>
<span class="tl-exp">60%</span>
</li>
<li>
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
<circle class="cbar" cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
</svg>
<span class="tl-name">Sublime</span>
<span class="tl-exp">80%</span>
</li>
<li>
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
<circle class="cbar" cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
</svg>
<span class="tl-name">Git</span>
<span class="tl-exp">70%</span>
</li>
<li>
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
<circle class="cbar" cx="50" cy="50" r="45" style="--percent: 0.6"></circle>
</svg>
<span class="tl-name">NPM</span>
<span class="tl-exp">74%</span>
</li>
</ul>
</div>
</div>
<div class="detail-section interests">
<div class="detail-title">
<div class="title-icon">
<i class="fas fa-heart"></i>
</div>
<span>Interests</span>
</div>
<div class="detail-content">
<div class="outer-frame">
<ul class="favor-list">
<li>
<i class="fas fa-gamepad"></i>
<span>Game</span>
</li>
<li>
<i class="fas fa-paw"></i>
<span>Pet</span>
</li>
<li>
<i class="fas fa-book"></i>
<span>Self-Learning</span>
</li>
<li>
<i class="fas fa-headphones-alt"></i>
<span>Music</span>
</li>
<li>
<i class="fas fa-user-edit"></i>
<span>Blog</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
After that put this below code into the stye.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
:root {
--color-gray-light-1: #f8f8f8;
--color-gray-light-2: #e9e9e9;
--color-gray-light-3: #dedede;
--color-gray-dark-1: #545454;
--color-gray-dark-2: #737373;
--color-gray-dark-3: #9a9a9a;
--color-blue-dark-1: #00387f;
--color-tiffany: #00a6a6;
--profile-theme: #4682bf;
--timeline-circle-theme: #14253e;
--pgbar-length: 100%;
--MATH-PI: 3.1415px;
--percent: 100;
}
html {
font-size: 100%;
font-family: 'Poppins', sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 3rem 1rem;
min-height: 100vh;
background-color: var(--color-gray-light-3);
}
.wrapper {
margin: 0 auto;
max-width: 70rem;
background-color: var(--color-gray-light-2);
display: flex;
box-shadow: 0px 0px 15px 4px #b3b3b3;
}
.intro {
flex: 0 0 250px;
background-color: var(--color-gray-light-1);
box-shadow: 5px 0px 15px 0px #b3b3b3;
z-index: 5;
}
.profile {
position: relative;
background-color: var(--profile-theme);
padding: 2rem 1rem;
margin-bottom: 50px;
text-align: center;
user-select: none;
}
.profile::after {
content: " ";
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 30px;
background-color: var(--profile-theme);
transform: skewY(-5deg);
}
.photo img {
width: 80%;
border-radius: 50%;
}
.bio .name {
font-size: 1.5rem;
text-align: center;
color: var(--color-gray-light-1);
margin: 0;
margin-top: 1rem;
}
.bio .profession {
font-size: 1rem;
text-align: center;
color: var(--color-gray-light-1);
margin: 0;
}
.intro-section {
padding: 0 1rem;
color: var(--color-gray-dark-1);
}
.intro-section .title {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.about .paragraph {
text-align: justify;
}
.info-section {
margin: 1rem 0;
}
.info-section span {
position: relative;
transition: all 0.3s;
}
.info-section i {
color: var(--profile-theme);
width: 20px;
height: 20px;
}
.link a {
text-decoration: none;
color: inherit;
}
.link span::after {
position: absolute;
content: '';
left: 50%;
bottom: -3px;
width: 0;
height: 2px;
background-color: var(--profile-theme);
transition: width 0.3s;
/*transition-timing-function: cubic-bezier(.64,.51,.16,.86);*/
transition-timing-function: cubic-bezier(.92,.57,.33,1.02);
transform: translate(-50%, 0);
}
.link span:hover {
color: var(--profile-theme);
}
.link span:hover::after {
width: 100%;
}
/* Detail section overall setting*/
.detail {
flex: 1 0 0;
background-color: white;
padding: 2rem;
}
.detail:hover > .detail-section:not(:hover) {
opacity: 0.3;
}
.detail-section {
transition: all 0.3s;
}
.detail-section:not(:last-of-type) {
padding-bottom: 1rem;
}
.detail-title {
display: flex;
align-items: center;
}
.detail-section > .detail-content {
padding: 1.5rem;
padding-left: 2rem;
user-select: none;
}
.detail-section.edu > .detail-content {
padding-left: calc(1.5rem + 10px);
}
.title-icon + span {
font-size: 1.5rem;
transition: all 0.3s;
}
.title-icon {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin-right: 1rem;
width: 2.5rem;
height: 2.5rem;
background-color: var(--profile-theme);
border-radius: 50%;
transition: all 0.3s;
}
.title-icon i {
color: white;
line-height: 1rem;
font-size: 1rem;
text-align: center;
}
.detail-section:hover .title-icon {
transform: scale(1.5);
margin-right: 1.5rem;
}
.detail-section:hover .title-icon + span {
letter-spacing: 1.5px;
}
/* timeline block in education section */
/* .timeline-block {
position: relative;
padding-left: 30px;
}
.timeline-block:not(:last-of-type) {
margin-bottom: 1rem;
}
.timeline-block h1 {
font-size: 1rem;
margin: 5px 0;
transition: all 0.3s;
}
.timeline-block p {
font-size: 0.8rem;
color: var(--color-gray-dark-2);
}
.timeline-block time {
font-size: 0.8rem;
color: var(--color-gray-dark-2);
}
.timeline-block::before {
position: absolute;
content: '';
width: 15px;
height: 15px;
background-color: white;
border: 3px solid var(--timeline-circle-theme);
border-radius: 50%;
left: -10px;
top: -5px;
}
.timeline-block::after {
position: absolute;
content: '';
width: 3px;
height: 100%;
background-color: var(--timeline-circle-theme);
left: -1px;
top: 13px;
}
.timeline-block:hover h1 {
color: var(--color-tiffany);
}
/* programmming skills section */
.pg-list, .tool-list, .favor-list {
padding: 0;
list-style: none;
}
.pg-list > li {
margin: 1rem 0;
display: flex;
align-items: center;
}
.sb-skelton {
position: relative;
flex: 1 0 auto;
height: 2px;
background-color: var(--color-gray-dark-3);
}
.pg-list > li > span {
flex: 0 0 100px;
}
.sb-skelton > .skillbar {
position: absolute;
left: 0;
top: -1px;
width: var(--pgbar-length);
height: 4px;
background-color: var(--profile-theme);
}.tool-list {
list-style: none;
display: flex;
justify-content: space-between;
}
.tool-list > li {
position: relative;
text-align: center;
flex: 0 0 25%;
}
.tool-list > li > svg {
position: relative;
fill: transparent;
width: 95%;
transform: rotate(-90deg);
}
.tool-list > li > svg > circle {
stroke-width: 1px;
stroke:#cdcdcd ;
}
.tool-list > li > svg > circle.cbar {
stroke-width: 3px;
stroke: var(--profile-theme);
stroke-linecap: round;
stroke-dashoffset: 0;
stroke-dasharray: calc(var(--MATH-PI) * 45 * 2);
transition: all 0.8s;
transition-timing-function: cubic-bezier(.64,.51,.16,.86);
}
.tool-list > li:hover > svg > circle.cbar {
stroke-width: 4px;
stroke: var(--color-tiffany);
stroke-dashoffset: calc(var(--MATH-PI) * 45 * 2 * (1 - var(--percent)));
}
.tool-list > li > .tl-name,
.tool-list > li > .tl-exp {
position: absolute;
left: 50%;
color: var(--color-gray-dark-1);
}
.tool-list > li > .tl-name {
top: 50%;
font-size: 1.2rem;
transform: translate(-50%, -50%);
}
.tool-list > li > .tl-exp {
top: calc(50% + 1.4rem);
font-size: 1rem;
transform: translate(-50%, -50%);
}
/* interests section */
.outer-frame {
border: 1px solid var(--color-gray-dark-3);
border-radius: 5px;
}
.favor-list {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
.favor-list > li {
display: flex;
flex: 1 0 0;
align-items: center;
justify-content: baseline;
flex-direction: column;
color: var(--profile-theme);
padding: 1rem 0;
transition: all 0.3s;
}
.favor-list > li > i {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 40px;
width: 50px;
height: 50px;
}
.favor-list > li:hover {
transform: scale(1.2);
color: var(--color-tiffany);
}
.favor-list > li > span {
letter-spacing: 1px;
}
/* now make it responsive
*/
@keyframes circle {
0% {
box-shadow: 0 0 0 0px rgba(51, 52, 57, 1);
}
100% {
box-shadow: 0 0 0 6px rgba(51, 52, 57, 0);
}
}
@media (max-width: 1024px) {
html {
font-size: 90%;
}
.wrapper {
flex-direction: column;
}
.intro, .detail {
flex: 0 0 100%;
box-shadow: none;
}
.intro-section {
padding: 0 2rem;
}
.profile {
margin-bottom: 1rem;
}
.profile::after {
display: none;
}
.photo img {
width: 100px;
height: 100px;
}
}
@media (max-width: 768px) {
html {
font-size: 80%;
}
.tool-list {
flex-wrap: wrap;
}
.tool-list > li {
flex: 0 0 33.33%;
}
.favor-list > li {
flex: 0 0 33.3333%;
}
}
@media (max-widht: 500px) {
html {
font-size: 70%;
}
} */
This is a Zip file, At first, you have to download Then extract the file you can get images, HTML, and CSS files as well.
If you face any problem during downloading or after downloading the source code files then feel free to comment down or contact us through the contact page.
Thanks for visiting our blog and keep visiting!
coders never quit...
Nice! Content!
ReplyDelete