How to Make Resume Website using HTML and CSS

hello viewer, in this article i will explain you how to create a designer resume UI using html CSS only. first thing when you go to interview first impression how is your resume. lots of people are basic resume but it is not ok. you create a creative and attractive resume the reason is when your resume is attractive. increase your chances to get the jobs. attractive resume I mean not all about colour theme etc. an attractive resume contains lots of thing such as all element is nicely placed and all details are mention nicely and informative formats. so let’s start on practical First step you have create a folder. You can set folder name whatever you want according to your choice. Suppose your main folder name is CV. then you create two folders inside in CV folder. The first one is CSS Folder and the Second one is Image folder.

CSS folder contain all CSS file those are used in your html page. Image folder contain all images file those are used in your html page.

Create A Responsive Coffee Shop Website Using HTML CSS & JAVASCRIPT Step by Step

When you create all folders then you create an html document this is your first step after creating all folders. Then create a CSS file and link CSS file in your html page. When all things are completed then followed the code in below. If you followed this code, you create an attractive resume UI Design.

In this code I have saved all images save in image folder. So don’t trouble. You can change your folder name. If you change your folder name then you can also change folder name in file path location.

How to Make Floating Panel Animation in HTML

I have also linked a font awesome cdn file you can see in below code.

Here is html code

<!DOCTYPE html>
<html>
<head>
	<title>Resume UI</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="resume-main">
	<div class="about">
		<p class="p1">UI / UX <span>Designer</span></p>
		<h1>Manoj Adhikari</h1>
		<p class="icon-p"><i class="fa fa-phone"></i> +1232-2232-7766</p>
		<p class="icon-p"><i class="fa fa-envelope"></i> demo@gmail.com</p>
		<p class="icon-p"><i class="fa fa-desktop"></i> www.demo.com</p>
	</div>
	<div class="profile">
		<img src="image/1.png">
	</div>
	<div class="clearfix"></div>
	<h2>///    Education & specialization</h2>
	<br>

	<div class="box-1">
		<span class="no">01</span>
		<h3>2015-2016</h3>
		<p class="p2">Lorem Ipsum is simply dummy text of the printing</p>
	</div>

	<div class="box-1" style="margin-left: 20px;">
		<span class="no">02</span>
		<h3>2017-2018</h3>
		<p class="p2">Lorem Ipsum is simply dummy text of the printing</p>
	</div>

	<div class="clearfix"></div>
	<h2>///    work & Experience</h2>
	<br>

	<div class="box-2">
		<span class="no">01</span>
		<h3>2015-2016</h3>
		<p class="p2">Lorem Ipsum is simply dummy text </p>
	</div>

	<div class="box-2" style="margin-left: 20px;">
		<span class="no">02</span>
		<h3>2017-2018</h3>
		<p class="p2">Lorem Ipsum is simply dummy text </p>
	</div>

	<div class="box-2" style="margin-left: 20px;">
		<span class="no">03</span>
		<h3>2019-2020</h3>
		<p class="p2">Lorem Ipsum is simply dummy text </p>
	</div>

	<div class="clearfix"></div>
	<h2>///    Software</h2>
	<br>
	<img src="image/s.png" class="soft-img">
	<p class="ui">UI Designer</p>


</div>



</body>
</html>

Here is CSS code

:root{
	--red:#e84023;
	--black:#050504;
	--gray:#212221;
	--lightgray:#7a7a7a;
	--white:#ffffff;
}
*{margin: 0px; padding: 0px; box-sizing: border-box; font-family: system-ui;}
.resume-main{
	background: var(--black);
	margin: 50px auto;
	height: 1100px;
	width: 850px;
	padding: 50px;
	position: relative;
}
h1{color: var(--white); font-size: 70px;}
.p1{color: var(--lightgray);}
.about{width: 50%; float: left;}
.profile{width: 50%; float: left;}
.profile {width: 50%; float: left; text-align: center;}
.icon-p{color: var(--white);font-size: 20px; margin-top: 10px;
margin-bottom: 20px;}
.icon-p .fa{color: var(--white); padding-right: 10px;}
.clearfix{
	clear: both;
}
h2{color: var(--white); font-weight: normal; font-size: 20px; margin-top: 40px;
text-transform: uppercase;}
.box-1{border: 1px solid var(--gray); width: 310px; height: 150px; float:left;
position: relative; padding: 25px;}
.no{font-size: 14px; color: var(--lightgray); position: absolute;
right: 10px; top: 10px;}
h3{
	color: var(--red); font-size: 26px;text-transform: uppercase;
}
.p2{color: var(--lightgray); width: 170px;}
.box-2{border: 1px solid var(--gray); width: 200px; height: 150px; float:left;
position: relative; padding: 25px;}
.soft-img{width: 86%;}
.ui{
	font-size: 80px;
	position: absolute;
	color: transparent;
	bottom: 21%;
	right: -20%;
	text-transform: uppercase;
	font-weight: bold;
	-webkit-text-stroke-width:2px;
	-webkit-text-stroke-color:var(--red);
	transform: rotateZ(270deg);
}

Watch a video tutorial How to Create Resume Website using HTML and CSS | Resume CV design in HTML CSS

7 thoughts on “How to Make Resume Website using HTML and CSS

  • October 16, 2022 at 2:28 pm
    Permalink

    I like what you guys are up also. Such clever work and reporting! Keep up the superb works guys I’ve incorporated you guys to my blogroll. I think it will improve the value of my web site 🙂

    Reply
  • December 9, 2022 at 4:44 pm
    Permalink

    I’m no sure where you’re getting your info, but great topic. I needs to spend some time learning more or understanding more.
    Thanks for great information I was looking for this info for my mission.

    Reply
  • December 25, 2022 at 10:25 am
    Permalink

    This is really interesting, You’re an excessively skilled blogger. I’ve joined your feed and look ahead to seeking extra of your excellent post. Additionally, I have shared your web site in my social networks!

    Reply
  • December 25, 2022 at 12:00 pm
    Permalink

    This is really interesting, You are a very skilled blogger. I have joined your rss feed and look forward to seeking more of your excellent post. Also, I have shared your web site in my social networks!

    Reply
  • December 28, 2022 at 10:30 pm
    Permalink

    You made some first rate factors there. I looked on the internet for the difficulty and found most people will go together with along with your website.

    Reply
  • January 7, 2023 at 12:28 pm
    Permalink

    Rіght here is the right blog for anyƄody who wants to
    find out about this topic. You realize a whole lot its almost tough tߋ argue
    with you (not that I personally will need to…HaHa).

    You definitely put a fresh spin on a topic which has Ьeen diѕcussed for years.
    Wonderful stuff, just excеllent!

    Reply

Leave a Reply

Your email address will not be published.