How To Make a Resume Using HTML & CSS Only

February 28, 2022June 4, 2022 M-SoftTech 0 Comments

hello viewer, In this article I will you teach how to create a unique and designer resume using html and CSS. you can see lots of video and article related to create resume in internet. but this article is different for others article.

You can also check our all resume design

How to make resume using html css only | CV Design

Resume is important part of our career growth. You can see lots of resume design on internet. Basically resume are present your skills your hard works and your industry experience and your education knowledge and where are you belong and what is your family background they lots of things inside your resume. Whenever you give any interview first thing in your interview mind is how your resume looks and how to mention your skills in your resume. So when you create a good resume then your selection chance is much high.

Admin Dashboard Page HTML And CSS Step By Step | Dashboard Design

Copy the below code

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div class="resume-box">
	<div class="left-section">
		<div class="profile">
			<img src="image/profile.png" class="profile-img">
			<div class="blue-box"></div>
		</div>
		<h2 class="name">Manoj <br> <span>Adhikari</span></h2>
		<p class="n-p">Graphic & Web Designer</p>

		<div class="info">
			<p class="heading">Info</p>
			<p class="p1"><span class="span1"><img src="image/location.png"></span>Address<span><br>c-2343</span></p>
			<p class="p1"><span class="span1"><img src="image/call.png"></span>Phone<span><br>+01234-444-7768</span></p>
			<p class="p1"><span class="span1"><img src="image/mail.png"></span>Email<span><br>Info@dummy.com</span></p>
			<p class="p1"><span class="span1"><img src="image/domain.png"></span>Website<span><br>www.dummy.com</span></p>
		</div>

		<div class="info">
			<p class="heading">Social</p>
			<p class="p1"><span class="span1"><img src="image/skype.png"></span>Skype<span><br>msoftechskype.com</span></p>
			<p class="p1"><span class="span1"><img src="image/twitter.png"></span>Twitter<span><br>demotwitter.com</span></p>
			<p class="p1"><span class="span1"><img src="image/linkedin.png"></span>Linkdin<span><br>Linkdindemo.com</span></p>
			<p class="p1"><span class="span1"><img src="image/facebook.png"></span>Facebook<span><br>facebookdummy.com</span></p>
		</div>

	</div>

	<div class="right-section">
		<div class="right-heading">
			<img src="image/user.png">
			<p class="p2">Profile</p>

		</div>
		<p class="p3">
			Lorem Ipsum is simply dummy text of the printing and typesetting industruy.Lorem Ipsum is simply dummy text of the printing and typesetting industruy.Lorem Ipsum is simply dummy text of the printing and typesetting industruy.
		</p>
		<div class="clearfix"></div>
		<br><br>
		<div class="right-heading">
			<img src="image/pencil.png">
			<p class="p2">Work Experience</p>
		</div>
		<div class="clearfix"></div>

		<div class="lr-box">
			<div class="left">
				<p class="p4">2012 - 2014</p>
				<p class="p5">New Delhi</p>
			</div>
			<div class="right">
				<p class="p4">Web Designer</p>
				<p class="p5">Retoching Company</p>
				<p class="p5">Lorem Ipsum is simply dummy text of the printing and typesetting industruy.</p>

			</div>
			<div class="clearfix"></div>
		</div>

		<div class="lr-box">
			<div class="left">
				<p class="p4">2017 - 2021</p>
				<p class="p5">Noida</p>
			</div>
			<div class="right">
				<p class="p4">Web Designer</p>
				<p class="p5">Retoching Company</p>
				<p class="p5">Lorem Ipsum is simply dummy text of the printing and typesetting industruy.</p>

			</div>
			<div class="clearfix"></div>
		</div>

		<div class="lr-box">
			<div class="left">
				<p class="p4">2014 - 2016</p>
				<p class="p5">New Delhi</p>
			</div>
			<div class="right">
				<p class="p4">BCA -  IGNOU</p>
				<p class="p5">Retoching Company</p>
				<p class="p5">Lorem Ipsum is simply dummy text of the printing and typesetting industruy.</p>

			</div>
			<div class="clearfix"></div>
		</div>

		<div class="right-heading">
			<img src="image/edu.png">
			<p class="p2">Education</p>
		</div>
		<div class="clearfix"></div>

		<div class="lr-box">
			<div class="left">
				<p class="p4">2012 - 2014</p>
				<p class="p5">New Delhi</p>
			</div>
			<div class="right">
				<p class="p4">BCA -  IGNOU</p>
				<p class="p5">Retoching Company</p>
				<p class="p5">Lorem Ipsum is simply dummy text of the printing and typesetting industruy.</p>

			</div>
			<div class="clearfix"></div>
		</div>

		<div class="lr-box">
			<div class="left">
				<p class="p4">2014 - 2016</p>
				<p class="p5">New Delhi</p>
			</div>
			<div class="right">
				<p class="p4">BCA -  IGNOU</p>
				<p class="p5">Retoching Company</p>
				<p class="p5">Lorem Ipsum is simply dummy text of the printing and typesetting industruy.</p>

			</div>
			<div class="clearfix"></div>
		</div>




		<div class="right-heading">
			<img src="image/edu.png">
			<p class="p2">Skill and expertize</p>
		</div>
		<div class="clearfix"></div>

		<div class="s-box">
			<p class="p6">Grapic Design</p>
			<div id="progress"></div>
			<p class="p6">Web Design</p>
			<div id="progress1"></div>			
		</div>
		<div class="s-box">
			<p class="p6">HTML</p>
			<div id="progress2"></div>
			<p class="p6">CSS</p>
			<div id="progress3"></div>			
		</div>

		<div class="clearfix"></div>
		<br>
		<div class="right-heading">
			<img src="image/hobbies.png">
			<p class="p2">Hobby &  Internet</p>
		</div>
		<div class="clearfix"></div>
		<img src="image/bicycle.png" class="h-img">
		<img src="image/games.png" class="h-img">
		<img src="image/book.png" class="h-img">
		<img src="image/design.png" class="h-img">
		<img src="image/chess.png" class="h-img">

	</div>


	<div class="clearfix"></div>
	</div>

</body>
</html>

CSS Code

:root{
    --bgcolor:#beb8ac;
    --blue:#0b83c4;
    --black:#3D3F42;
    --white:#f4f7ff;
    --gray:#d8dce4;
    --lightgray:#8e9095;
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: monospace;
}
body{
    background: var(--bgcolor);
}
.clearfix{clear: both;}
.resume-box{
    width: 800px;
    height: 1000px;
    margin: 100px auto;
    background: var(--white);
    box-shadow: 5px 21px 20px 20px #3df4238;
}
.left-section{
    background: var(--blue);
    width: 250px;
    height: 1000px;
    float: left;
}
.profile{
    overflow: hidden;position: relative;
}
.blue-box{
    width: 257px;
    height: 407px;
    background: var(--blue);
    margin-left: -100px;
    transform: rotateZ(48deg);
    margin-top: -178px;
}
.profile-img{
    position: absolute;
    z-index: 9;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 3px solid var(--gray);
}
.name{
    color: var(--gray);
    text-align: center;
    margin-top: -34px;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}
.name span{color:var(--white);}
.n-p{
    width: 180px;
    margin: 0 auto;
    text-align: center;
    padding: 7px;
    border-bottom: 1px solid var(--gray);
    border-top:1px solid var(--gray);
    color: var(--black);
    background: var(--white);
    margin-top: 11px;
    text-transform: uppercase;
}
.info{
    margin-top: 50px;
}
.heading{
    width: 230px;
    margin-left: 20px;
    padding: 5px;
    padding-left: 15px;
    border-bottom: 1px solid var(--gray);
    border-top:1px solid var(--gray);
    color:var(--blue);
    background: var(--white);
    margin-top: 11px;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 10px 0px 0px 10px; 
}
.p1{
    color: var(--gray);
    width: 184px;
    margin: 0 auto;
    margin-top: 25px;
    font-size: 15px;
    line-height: 14px;
}
.p1 span{font-size: 12px;}
.span1 img{
    background: white;
    width: 30px;
    padding: 6px;
    border-radius: 16px;
    float: left;
    margin-right: 10px;
}
.right-section{
    padding: 40px 30px;
    background: var(--white);
    width: 68%;
    float: left;
    height: 1000px;
}
.right-heading img{
    background:var(--blue);
    width: 36px;
    padding: 7px;
    border-radius: 17px;
    float: left;
    display: inline-block;
    margin-top: -2px;
}
.p2{
    margin: 0 auto;
    padding: 6px;
    border-bottom: 1px solid var(--lightgray);
    border-top: 1px solid var(--lightgray);
    color: var(--white);
    background: var(--blue);
    text-transform: uppercase;
    font-size: 17px;
    margin-left: 26px;
    font-weight: bold;
    line-height: 18px;
    padding-left: 20px;
}
.p3{
    margin-top: 20px;
    color: var(--lightgray);
    text-align: justify;
    word-spacing: -4px;
}
.left{width: 25%; float: left;}
.right{width: 75%; float: left;}
.lr-box{margin-top: 20px; margin-bottom: 20px;}
.p4{font-size: 14px; font-weight: 600;}
.p5{font-size: 12px; color: var(--lightgray);}
.s-box{
    width: 50%; float: left; padding: 20px 20px 20px 0px;
}
#progress{
    background: #333;
    border-radius: 13px;
    height: 8px;
    width: 100%;
}
#progress:after{
    content: '';
    display: block;
    background: var(--blue);
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
#progress1{
    background: #333;
    border-radius: 13px;
    height: 8px;
    width: 100%;
}
#progress1:after{
    content: '';
    display: block;
    background: var(--blue);
    width: 40%;
    height: 100%;
    border-radius: 9px;
}

#progress2{
    background: #333;
    border-radius: 13px;
    height: 8px;
    width: 100%;
}
#progress2:after{
    content: '';
    display: block;
    background: var(--blue);
    width: 80%;
    height: 100%;
    border-radius: 9px;
}

#progress3{
    background: #333;
    border-radius: 13px;
    height: 8px;
    width: 100%;
}
#progress3:after{
    content: '';
    display: block;
    background: var(--blue);
    width: 90%;
    height: 100%;
    border-radius: 9px;
}
.p6{margin-top:10px; margin-bottom:10px;}
.h-img{
    margin-top: 25px;
    width: 45px;
    margin-right: 45px;
}

Youcan also watch a video tutorial how to create a resume using html CSS