How to Make a Resume Design using HTML CSS only
Hello viewer, welcome to M-Softech. Today video I will teach you how makeover our resume and how to get attractive our resume.
In this article I will teach you how to make a attractive resume UI design using html CSS only and also explain you important parts of our resume layout. in this resume layout design we are using three color. one is white color and second one is black color and third one is yellow color. these three colors make a unique resume design our resume layout. you can see that in above image. If you are making a resume which things are very important in a resume.
How to Make E-Product Admin Dashboard Design
I will provide you all source code for this resume layout design. in below I will mention source code file please copy this file and paste your html document. and also copy the CSS code and paste your CSS document file. and link that CSS file in your html document.
- Unique design
- Good Content management
- skills presentations
- education
- work experience
- Contact details
These all are parts of our resume design content. How we put these things in our resume design. that is main point how to represent our skills, work experience, education and contact details in resume UI design. if you are presenting all things in good place and good design. then absolutely your resume design looks perfect. whenever any persons see your resume. then they see first thing in your resume design how are you present your details information.
whenever we create a resume lots of thing, we notice a resume.
How to Create A Carpool website UI Design Using HTML CSS & jQuery step by step
1.Unique design – first thing you make a resume unique and attractive resume design.
2. Good content management- content management means how to present our resume design data in better way
3. Skills presentations- skill presentations are a very important part our resume design. that’s why we always present our skills presentations is different way.
4. Education – education is another important part our life. then you can also more focused your education quantification. it’s play important role in our life.
5. Work Experience- work experience that explain our working experience in different field and different company’s. so it is also play a important role our resume.
6. Contact Details- contact detail is very important part of our resume layout. in contact details we mention our social network details phone no and website URL etc.
<!Doctype HTML> <html> <head> <title>resume</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet"> <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 class="box-1"> <img src="images/profile.png" class="profile" /> <div class="content"> <h1>About me</h1> <p>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, </p> <br/> <h1>Award</h1> <p><span style="color:white">Lorem Ipsum </span>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <br/><br/> <span style="color:white">text ever </span> the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <br/> <h1>Contact</h1> <p><i class="fa fa-map"></i> LON,United Kingdom </p> <p><i class="fa fa-phone"></i> phone +(91)1 234 3455</p> <p><i class="fa fa-envelope"></i> email : demo@gmail.com</p> <p><i class="fa fa-globe"></i> www.m-softtech.in</p> </div> </div> <div class="box-2"> <div class="intro"> <br/> <h1 class="ma">Manoj</h1> <h1> <strong>Adhikari</strong></h1> <p class="phead">Graphic Designer</p> <div class="clearfix"></div> <hr class="hr1" /> </div> <br/><br/><br/> <div class="content-2"> <h1 class="head">Experience</h1> <hr class="hr2" /> <div class="clearfix"></div> <p class="para-1">UI Designer In Lorem Ipsum <strong>(2018 - Now)</strong></p> <p class="para-21">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p> <p class="para-1">UI Designer <strong>(2013 - 2015)</strong></p> <p class="para-21">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</p> <p class="para-1">Grapic Designer<strong>(2010)</strong></p> <p class="para-21">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p> </div> <div class="content-2"> <h1 class="head">Education</h1> <hr class="hr2" /> <div class="clearfix"></div> <p class="para-1">High school of cbse <strong>(2009 - 2010)</strong></p> <p class="para-21">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p> <p class="para-1">Bachelor of Computer Application <strong>(2013 - 2015)</strong></p> <p class="para-21">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</p> </div> <h1 class="head">Skills</h1> <hr class="hr2" /> <div class="clearfix"></div> <div class="col-div-4"><p class="p25">HTML</p></div> <div class="col-div-6"> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle1"></i> <i class="fa fa-circle circle1"></i> </div> <div class="clearfix"></div> <div class="col-div-4"><p class="p25">CSS</p></div> <div class="col-div-6"> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle1"></i> </div> <div class="clearfix"></div> <div class="col-div-4"><p class="p25">JQUERY</p></div> <div class="col-div-6"> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle1"></i> <i class="fa fa-circle circle1"></i> </div> <div class="clearfix"></div> <div class="col-div-4"><p class="p25">JAVASCRIPT</p></div> <div class="col-div-6"> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle"></i> <i class="fa fa-circle circle1"></i> <i class="fa fa-circle circle1"></i> <i class="fa fa-circle circle1"></i> </div> </div> </div> <div class="clearfix"></div> </div> </body> </html>
CSS Code
body{
margin:0px;
padding:0px;
height: 150vh;
font-family: 'Raleway', sans-serif;
}
.clearfix{
clear: both;
}
.resume-box{
width: 800px;
height: 1100px;
margin: 0 auto;
background-color: white;
box-shadow: 5px 5px 5px 5px #00000024;
}
.box-outer{
padding:30px;
}
.box-1{
background-color: #242426;
width: 36%;
float: left;
height: 1100px;
}
.phead{
font-size: 32px;
text-transform: uppercase;
color: black;
padding: 0px;
margin: 0px;
}
.box-2{
width: 54%;
float: left;
padding: 0px;
padding-left: 60px;
padding-right: 20px;
position: relative;
background-image: url(../images/box2-image.jpg);
}
.profile{
width: 100%;
}
.content{
padding: 20px;
}
h1{
color: #fff;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
}
.col-div-4{
width: 30%;
float: left;
}
p{
color: #96969f;
font-weight: 300;
font-size: 12px;
letter-spacing: 1px;
line-height: 23px;
}
#progress {
background: #333;
border-radius: 13px;
height: 8px;
width: 100%;
padding: 3px;
}
#progress:after {
content: '';
display: block;
background: orange;
width: 50%;
height: 100%;
border-radius: 9px;
}
#progress1 {
background: #333;
border-radius: 13px;
height: 8px;
width: 100%;
padding: 3px;
}
#progress1:after {
content: '';
display: block;
background: orange;
width: 40%;
height: 100%;
border-radius: 9px;
}
#progress2 {
background: #333;
border-radius: 13px;
height: 8px;
width: 100%;
padding: 3px;
}
#progress2:after {
content: '';
display: block;
background: orange;
width: 80%;
height: 100%;
border-radius: 9px;
}
#progress3 {
background: #333;
border-radius: 13px;
height: 8px;
width: 100%;
padding: 3px;
}
#progress3:after {
content: '';
display: block;
background: orange;
width: 90%;
height: 100%;
border-radius: 9px;
}
.intro{text-align: center;}
.intro h1{
font-size: 40px;
font-weight: normal;
color: #26252d;
font-family: arial;
letter-spacing: 10px;
margin: 7px;
}
.ma{
font-family: 'Raleway'!important;
margin: 0px;
padding: 0px;
margin-bottom: -11px!important;
}
.hr1{
position: absolute;
background: #f59d17;
height: 6px;
width: 322px;
border: none;
right: 0px;
top: 17%;
}
.content-2{
padding-top: 20px;
}
.head{
color: #000000;
font-weight: 700;
text-transform: uppercase;
margin: 0px;
letter-spacing: 5px;
letter-spacing: 5px;
font-family: arial;
}
.para-1{
font-size: 16px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin: 5px 0px;
margin-top: 10px;
position: relative;
}
.p25{color: black;margin: 0px;
margin-top: 8px;}
.hr2{
border: none;
height: 3px;
background: #e8a13e;
width: 245px;
float: left;
display: block;
}
.col-div-6{width: 50%; float: left; position: relative;margin-top: 8px;}
.circle{color:black; font-size: 14px!important; margin-top: 7px;}
.circle1{color:#f19b23; font-size: 14px!important; margin-top: 7px;}
.fa{margin-left: 10px;}
.para-21{
font-size: 10px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin: 5px 0px;
margin-top: 10px;
}
.para-1::after{
content: "";
position: absolute;
height: 15px;
width: 15px;
background: #f19b23;
border-radius: 10px;
left: -30px;
top: 3px;
}
}
.para-2{
font-size: 14px;
text-transform: capitalize;
color: #7d7d7d;
font-weight: 400;
margin-bottom: 20px;
margin-top: 0px;
}If you have face any problem to understand this code. Then you also watch video tutorial that’s link in below.
