Hello Coder, Welcome to Codewithrandom Blog. In this blog, I'll show you how to create a Resume/CV Website Using HTML and CSS. We add an Image and all the necessary information that we have in our Resume/CV, So Let's Create it.
Everything will be coded using HTML5 and CSS3 to function correctly across a range of screen resolutions.
Resume Website Table The majority of people in the business segment have at some point written a resume. As a freelancer, you are constantly competing for new projects. Because of this ephemeral work cycle, it is beneficial to give prospective clients a quick overview of your prior experience.
An official document known as a resume, sometimes known as a CV outside of the United States, gives a summary of your professional qualities, including your relevant work experience, abilities, education, and noteworthy accomplishments.
A resume helps you highlight your skills and persuade potential employers that you are competent and employable. It is typically combined with a cover letter. I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.
Step1: Adding HTML Markup
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Resume</title>
</head>
<body>
<div id="resume">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/james-moriarty.jpg" alt="James Moriarty">
<h1>James Moriarty</h1>
<p>Cell: <a href=#>555-666-7777</a>
<p>Web: <a href=#>moriarty.com</a>
<p>Email: <a href=#>napoleon@crime.com</a>
<p id="objective">I am a reserved but ambitious young professional seeking a career that fits my professional
skills, personality, and murderous tendencies. My good birth, excellent education and phenomenal
mathematical faculty have allowed me to advance the prospects of several criminal enterprises.
<dl>
<dt>Education
<dd>
<h2>Oxford University</h2>
<p><strong>Major:</strong> Applied Mathematics<br />
<strong>Minor:</strong> Romance Languages
</p>
</dl>
<dl>
<dt>Skills
<dd>
<h2>Office Skills</h2>
<p>Office and records management, database administration, event organization, customer support, travel
coordination
<h2>Computer skills</h2>
<p>Microsoft productivity software (Word, Excel, etc), Adobe Creative Suite, Windows
</dl>
<dl>
<dt>Experience
<dd>
<h2>Consulting Criminal<span>London 1892 – present</span></h2>
<ul>
<li>Development within the criminal underworld
<li>Conducted negotiations with several rogue governments
</ul>
<h2>The Coldstream Guards<span>Army Coach, London 1889 – 1888</span></h2>
<ul>
<li>Recruiting, training and terrorizing young men.
</ul>
<h2>Oxford University<span>Professor of Mathematics 1885 – 1888</span></h2>
<ul>
<li>Published papers in binomials, asteroid dynamics and game theory
<li>Intimidated students
</ul>
</dd>
</dl>
<dl>
<dt>Hobbies
<dd>World domination, Social Manipulation, Murder Most Foul
</dl>
<dl>
<dt>References
<dd>Available on request
</dl>
</div>
</body>
</html>
The project's structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.
<link rel="stylesheet" href="style.css" />
Adding the Structure for our Resume Website: First, we'll use the div element to create a container with the id "resume," and then we'll use the img> tag to add an image to our résumé. Use the h1 tag because our name is the most significant item on our CV.
We will now include the person's phone number, website, and email utilising the p tag. We will add the person's goal using the paragraph. Now, utilising the description list, we will develop a section on education. We will use the h2 tag to insert the heading for our college inside of our list.
The major and minor subjects will then be added using the strong tag. Similar to how we constructed our schooling part, we will create the abilities, experience, interests, and references sections utilising a description list. Let's have a look at the structure. Output: Restaurant Website Using HTML and CSS
Step2: Adding CSS Code
In your stylesheet, copy and paste the CSS code provided below.
* {
box-sizing: border-box;
}
body {
margin: 2.2rem;
}
div#resume {
min-width: 310px;
font: 16px Helvetica, Avernir, sans-serif;
line-height: 24px;
color: #000;
}
div#resume h1 {
margin: 0 0 16px 0;
padding: 0 0 16px 0;
font-size: 42px;
font-weight: bold;
letter-spacing: -2px;
border-bottom: 1px solid #999;
line-height: 50px;
}
div#resume h2 {
font-size: 20px;
margin: 0 0 6px 0;
position: relative;
}
div#resume h2 span {
position: absolute;
bottom: 0;
right: 0;
font-style: italic;
font-family: Georgia, serif;
font-size: 16px;
color: #999;
font-weight: normal;
}
div#resume p {
margin: 0 0 16px 0;
}
div#resume a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #999;
}
div#resume a:hover {
border-bottom-style: solid;
color: #000;
}
div#resume p.objective {
font-family: Georgia, serif;
font-style: italic;
color: #666;
}
div#resume dt {
font-style: italic;
font-weight: bold;
font-size: 18px;
text-align: right;
padding: 0 26px 0 0;
width: 150px;
border-right: 1px solid #999;
}
div#resume dl {
display: table-row;
}
div#resume dl dt,
div#resume dl dd {
display: table-cell;
padding-bottom: 20px;
}
div#resume dl dd {
width: 500px;
padding-left: 26px;
}
div#resume img {
float: right;
padding: 10px;
background: #fff;
margin: 0 30px;
transform: rotate(-4deg);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
width: 30%;
max-width: 220px;
}
@media screen and (max-width: 1100px) {
div#resume h2 span {
position: static;
display: block;
margin-top: 2px;
}
}
@media screen and (max-width: 550px) {
body {
margin: 1rem;
}
div#resume img {
transform: rotate(0deg);
}
}
@media screen and (max-width: 400px) {
div#resume dl dt {
border-right: none;
border-bottom: 1px solid #999;
}
div#resume dl,
div#resume dl dd,
div#resume dl dt {
display: block;
padding-left: 0;
margin-left: 0;
padding-bottom: 0;
text-align: left;
width: 100%;
}
div#resume dl dd {
margin-top: 6px;
}
div#resume h2 {
font-style: normal;
font-weight: 400;
font-size: 18px;
}
div#resume dt {
font-size: 20px;
}
h1 {
font-size: 36px;
margin-right: 0;
line-height: 0;
}
div#resume img {
margin: 0;
}
}
@media screen and (max-width: 320px) {
body {
margin: 0;
}
img {
margin: 0;
margin-bottom: -40px;
}
div#resume {
width: 320px;
padding: 12px;
overflow: hidden;
} p,
li {
margin-right: 20px;
}
}
Step1: We will set the box size to "border box of website" using the universal selector, and the margin to 2.2 rem using the body tag selector. We'll style our container using the id selector (#resume). The minimum width will be 300 px, and the font size will be 16 pixels with the "Helvetica" font family. In addition, we'll have a line height of 24 pixels. Calculator Using HTML,CSS & JavaScript With Source Code
* {
box-sizing: border-box;
}
body {
margin: 2.2rem;
}
div#resume {
min-width: 310px;
font: 16px Helvetica, Avernir, sans-serif;
line-height: 24px;
color: #000;
}
Step2: We will now use the tag selector h1 to individually style each component of our resume. Our heading will have a margin of 16 pixels from the bottom, and our h1 tag's font size and line height are both set to 42 pixels. Weather App Using Html,Css And JavaScript The h2 heading will also get some style. The font size will be set to 20 px, the bottom margin to 6, and the position to "relative." The remaining html elements will receive styling in the same way that we added styling to our h1 and h2 tags. You merely need to execute the code as written to get the desired result.
div#resume h1 {
margin: 0 0 16px 0;
padding: 0 0 16px 0;
font-size: 42px;
font-weight: bold;
letter-spacing: -2px;
border-bottom: 1px solid #999;
line-height: 50px;
}
div#resume h2 {
font-size: 20px;
margin: 0 0 6px 0;
position: relative;
}
div#resume h2 span {
position: absolute;
bottom: 0;
right: 0;
font-style: italic;
font-family: Georgia, serif;
font-size: 16px;
color: #999;
font-weight: normal;
}
div#resume p {
margin: 0 0 16px 0;
}
div#resume a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #999;
}
div#resume a:hover {
border-bottom-style: solid;
color: #000;
}
div#resume p.objective {
font-family: Georgia, serif;
font-style: italic;
color: #666;
}
div#resume dt {
font-style: italic;
font-weight: bold;
font-size: 18px;
text-align: right;
padding: 0 26px 0 0;
width: 150px;
border-right: 1px solid #999;
}
div#resume dl {
display: table-row;
}
div#resume dl dt,
div#resume dl dd {
display: table-cell;
padding-bottom: 20px;
}
div#resume dl dd {
width: 500px;
padding-left: 26px;
}
div#resume img {
float: right;
padding: 10px;
background: #fff;
margin: 0 30px;
transform: rotate(-4deg);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
width: 30%;
max-width: 220px;
}
Step3: We have almost finished adding the aesthetic to our resume; the final step is to include responsiveness. The heading of our resume will be set to "static" if the screen size is equal to or less than the stated screen size.
For this, we will be using the media query and screen width and defining a maximum width of "1100px." Similar to this, we will specify the width for various screen sizes so that our resume website may adjust the size of our resume to the screen size automatically.
@media screen and (max-width: 1100px) {
div#resume h2 span {
position: static;
display: block;
margin-top: 2px;
}
}
@media screen and (max-width: 550px) {
body {
margin: 1rem;
}
div#resume img {
transform: rotate(0deg);
}
}
@media screen and (max-width: 400px) {
div#resume dl dt {
border-right: none;
border-bottom: 1px solid #999;
}
div#resume dl,
div#resume dl dd,
div#resume dl dt {
display: block;
padding-left: 0;
margin-left: 0;
padding-bottom: 0;
text-align: left;
width: 100%;
}
div#resume dl dd {
margin-top: 6px;
}
div#resume h2 {
font-style: normal;
font-weight: 400;
font-size: 18px;
}
div#resume dt {
font-size: 20px;
}
h1 {
font-size: 36px;
margin-right: 0;
line-height: 0;
}
div#resume img {
margin: 0;
}
}
@media screen and (max-width: 320px) {
body {
margin: 0;
}
img {
margin: 0;
margin-bottom: -40px;
}
div#resume {
width: 320px;
padding: 12px;
overflow: hidden;
}
p,
li {
margin-right: 20px;
}
}
Now we've completed our resume website using html & css. I hope you understood the whole project. Let's take a look at our Live Preview. Final Output Of Resume/CV Website Using HTML and CSS:
Now We have Successfully created our resume website using html & css. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
follow : codewithrandom
Written By : Arun
Code By: dudley
Top comments (0)