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

Leave a Reply

Your email address will not be published. Required fields are marked *