How To Make A Resume design Using html CSS
Hello viewer, in this article I will tell you another resume UI design using html and CSS only. You have also read my old resume article but this one is totally different for other resume design. So let’s start our project. This Resume is very Simple. you can use this resume in any field.
A resume is such an important part of the job searching process. However, it can be confusing for many people trying to balance different aspects and create a resume that’s professional, stands out, and shows off key skills and accomplishments.
Our professional resume templates are free to download and easily customizable to your needs. This simple outline looks amazing and is sure to impress potential employers. Plus, it allows you to change it as needed and add a personal touch.
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 folder 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.
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.
I have also link a font awesome CDN file you can see in below code.
You create an html document. And then create a main div that’s class name is resume-main. Create two div inside of resume-main div. one is left-box and another one is right-box. This resume design is very simple Format. You can see that. It’s very simple and very attractive Resume UI Design. You can use easily this design in your requirement according. You see lots of CV design in internet. But this CV design is totally different to other CV design. When your resume looks good then your confidence level is also good.
Main Key Element in resume
- Personal Information for example Name, address, contact details.
- Objective
- Education
- Your work experience previous company
- Activities
- Hobbies
- Your work Skills
That are some main key element for your resume
Copy the below code and paste your html document
<!Doctype HTML> <html> <head> <title>resume</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="box-outer"> <div class="resume-box"> <div> <div class="col-sm-6"> <img src="images/profile.png" class="profile"> <h1 class="name">Manoj <br/>Adhikari</h1> <p class="name_p">Front end Developer</p> </div> <div class="col-sm-6"> <div style="float: right;"> <p class="contat_p"> <i class="fa fa-home fontfa"></i> 2132 London, United Kingdom </p> <p class="contat_p"> <i class="fa fa-phone fontfa"></i> Phone +(91)1 234 54554 </p> <p class="contat_p"> <i class="fa fa-envelope fontfa"></i> Email : demo@gmail.com </p> </div> </div> <div class="clearfix"></div> <br/> <hr/> <h1 class="head">Profile</h1> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <hr/> <br/> <div class="box-1"> <div class="content"> <h1 class="head">Education</h1> <br/> <ul> <li> <p class="para-1">(2009 - 2010)<br/>Hight Schoool of cbse</p> <p class="para-2">Lorem Ipsum is simply dummy text of the printing</p> </li> <li> <p class="para-1">(2013 - 2015)<br/>Bachelor of compouter application</p> <p class="para-2">Lorem Ipsum is simply dummy text of the printing</p> </li> <li> <p class="para-1">(2015 - 2018)<br/>Master of compouter application</p> <p class="para-2">Lorem Ipsum is simply dummy text of the printing</p> </li> <li> <p class="para-1">(2015 - 2018)<br/>Master of compouter application</p> <p class="para-2">Lorem Ipsum is simply dummy text of the printing</p> </li> </ul> <h1 class="head">Skills</h1> <ul> <li> <p>Grapic Design</p> <div id="progress"></div> </li> <li> <p>Web Design</p> <div id="progress1"></div> </li> <li> <p>HTML</p> <div id="progress2"></div> </li> <li> <p>CSS</p> <div id="progress3"></div> </li> </ul> </div> </div> <div class="box-2"> <div class="content-2"> <h1 class="head">Work Experience</h1> <br/> <ul> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> <li> <p class="para-1">UI Desinger IN lorem Ispum (2018 -2020)</p> <p class="para-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </li> </ul> </div> </div> </div> <div class="clearfix"></div> </div> </body> </html>
Copy the below code and paste your CSS document
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
*{font-family:'Nunito', sans-serif;}
:root{
--font-color:#474950;
--second-color:#a9a7b1;
}
body{
margin: 0px;
padding: 0px;
background: linear-gradient(178deg, #482feb, #9824ff);
height: 150vh;
}
.clearfix{clear: both;}
.resume-box{
width: 800px;
height: 1200px;
padding: 50px;
margin: 0 auto;
background-color:white;
}
.box-outer{padding: 30px;}
.box-1{
width: 30%;
float: left;
height: 1000px;
padding-right: 39px;
}
.box-2{
width: 60%;
float: left;
padding:0px 20px;
}
.name{
letter-spacing: 5px;
font-family: arial;
color: var(--font-color);
line-height: 39px;
margin: 20px 0px 0px 20px;
float: left;
font-weight: 900;
}
.contat_p{color: var(--font-color);}
.fontfa{
padding: 8px;
background: var(--font-color);
color: white;
border-radius: 15px;
width: 14px;
text-align: center;
}
.name_p{
margin: 3px 0px 0px 20px;
float: left;
text-transform: uppercase;
color: var(--font-color);
letter-spacing: 2px;
}
.profile{
width: 100px;
height: 100px;
float: left;
border-radius: 10px;
border: 3px solid var(--font-color);
margin-top: 15px;
}
.content{padding: 0px;}
h1{
color: var(--font-color);
font-weight: 300;
text-transform: uppercase;
}
p{
color: var(--font-color);
font-weight: 300;
font-size: 14px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul:before{
content: "";
display:inline-block;
width : 2px;
background: #47494f2b;
position: absolute;
left: 3px;
top: 5px;
height: calc(100% - 10px);
}
ul li{
position: relative;
padding-left: 30px;
margin-bottom: 15px;
}
ul li:before{
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: var(--second-color);
position: absolute;
left: -1px;
top: 5px;
border-radius: 10px;
}
#progress, #progress1, #progress2, #progress3{
background: #47494f00;
height: 5px;
width: 100%;
border: 1px solid #c0c1c3;
}
#progress::after, #progress1::after, #progress2::after, #progress3::after{
content: '';
display: block;
background: var(--second-color);
height: 100%;
}
#progress:after{width: 50%;}
#progress1:after{width: 40%;}
#progress2:after{width: 80%;}
#progress3:after{width: 90%;}
.col-sm-6{
width: 50%; float: left;
}
.head{
color: var(--font-color);
font-weight: 600;
text-transform: uppercase;
font-family: arial;
font-size: 25px;
letter-spacing: 3px;
}
.para-1{
font-size: 14px;
text-transform: uppercase;
color: black;
font-weight: 400;
margin: 5px 0px;
margin-top: 10px;
}
.para-2{
font-size: 14px;
text-transform: capitalize;
color: var(--second-color);
font-weight: 400;
margin-bottom: 20px;
margin-top: 0px;
}If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.
if you have any confusion Comment below or you can contact us by filling out our contact us.
YOU MIGHT ALSO LIKE
How To Create A Website Using HTML And CSS Step By Step Website Tutorial
How to make a dashboard Design Using html CSS
If you have any problem to understand this code you can watch also video tutorial
