Strong Resume Template with HTML and CSS

0
63

Creating a stylish resume template using HTML and CSS is a fantastic way to showcase your skills and personality. A well-designed resume not only highlights your qualifications but also makes a strong visual impression. In this blog, we will walk through the steps to create a modern, stylish resume template that is both eye-catching and functional.

A resume and a CV (Curriculum Vitae) are both documents used to provide a summary of an individual’s education, work experience, skills, and accomplishments. While they serve similar purposes, there are distinct differences between the two, particularly in terms of their usage, format, and content.

Sample Resume

Resume vs CV

FeatureResumeCV (Curriculum Vitae)
Length1-2 pagesMultiple pages (varies by experience)
PurposeJob applications in various industriesAcademic, research, medical fields, grants, fellowships, scholarships
ContentSummary of qualifications, work experience, skills, educationDetailed overview of academic and professional history, including education, experience, publications, research.
Detail LevelConcise and focusedComprehensive and detailed
FormatTailored for each job applicationConsistent, includes all professional and academic information
Comparison between Resume and CV

Qualities of an Ideal Resume

An ideal resume should effectively communicate your qualifications, experience, and skills in a clear and concise manner. Here are some key qualities that make an ideal resume:

  • Clarity and Simplicity
  • Tailored Content
  • Professional Experience
  • Accuracy and Honesty
  • Keywords and Phrases
  • Strong Summary or Objective
  • Quantifiable Achievements
  • Relevant Skills
  • Consistent and Professional Tone
  • Contact Information
  • Education and Certifications

By ensuring your resume has these qualities, you can create a strong, compelling document that effectively showcases your qualifications to potential employers.

Follow this video for complete guidance :

ALSO READ  How to create FAQ page using HTML and CSS ?

You may also like : Design a Lovely Professional Visiting Card using HTML and CSS

Source Code : Resume Design using HTML and CSS

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Resume</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
	<style>
		@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap");

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			list-style: none;
			font-family: "Montserrat", sans-serif;
		}
		*:before{
			box-sizing: unset;
		}
		.container{
			width: 800px;
		}
		body{
			background: #ddd;
		}
		.resume-left{
			background-color: #0bb5f4;
		}
		.resume .icon{
			width: 35px;
    		height: 35px;
		    background: #fff;
		    color: #0bb5f4;
		    border-radius: 50%;
		    margin-right: 15px;
		    font-size: 16px;
		    position: relative;
		}
		.resume-left ul li{
			color:#b1eaff;
			margin-bottom:10px;
		}
		.bold{
			font-weight: 700;
		    font-size: 20px;
		    text-transform: uppercase;
		    color:#fff;
		}
		.resume .icon i{
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		}
		.borderb{
			border-bottom:2px solid #b1eaff;
		}
		.resume-left .title{
			font-weight: 700;
		    font-size: 20px;
		    text-transform: uppercase;
		    color:#fff;
		    margin-bottom:20px;
		    margin-top:20px;
		}
		.skill-progress{
			width: 60%;
		    margin: 0 5px;
		    height: 5px;
		    background: #009fd9;
		    position: relative;
		}
		.skill-progress span{
			position: absolute;
		    top: 0;
		    left: 0;
		    height: 100%;
		    background: #fff;
		}
		.skills ul li{
			display: flex;
		    margin-bottom: 10px;
		    color: #b1eaff;
		    justify-content: space-between;
		    align-items: center;
		}
		.semi-bold{
			color: #fff;
    		margin-bottom: 3px;
    		font-weight: 500;
    		font-size: 16px;
		}
		.resume-right{
		    padding: 23px;
			background-color:#fff;
		}
		.resume-right .title{
			font-weight: 700;
		    font-size: 20px;
		    text-transform: uppercase;
		    color:#0bb5f4;
		    margin-bottom:20px;
		}
		.experience ul{
		    padding-left: 40px;
    		overflow: hidden;
		}
		.experience ul li{
			position: relative;
		}
		.experience ul li:before{
		    content: "";
		    position: absolute;
		    top: 5px;
		    left: -25px;
		    width: 6px;
		    height: 6px;
		    border-radius: 50%;
		    border: 2px solid #0bb5f4;
		}
		.experience ul li:after{
			content: "";
		    position: absolute;
		    top: 14px;
		    left: -21px;
		    width: 2px;
		    height: 125px;
		    background: #0bb5f4;
		}
		.experience ul li .date{
			font-size: 16px;
		    font-weight: 500;
		    margin-bottom: 15px;
		    margin-top:20px;
		}
		.experience ul li .info{
			margin-bottom:20px;
		}
		.hobby ul li{
			width: 80px;
		    height: 80px;
		    border: 2px solid #0bb5f4;
		    border-radius: 50%;
		    position: relative;
		    color: #0bb5f4;
		}
		.hobby ul li:before{
		    content: "";
		    position: absolute;
		    top: 40px;
		    right: -60px;
		    width: 60px;
		    height: 2px;
		    background: #0bb5f4;
		}
		.hobby ul li i{
			font-size: 30px;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		}
		.hobby ul li:last-child:before {
			display: none;
		}
	</style>
	<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>

</head>
<body>
	<div class="container">
		<div class="resume my-5">
			<div class="row">
				<div class="col-md-4 p-0">
					<div class="resume-left">
						<img class="w-100" src="https://i.imgur.com/eCijVBe.png">
						<div class="p-4 pb-0">
							<div class="personal-info borderb">
								<div class="bold">STEPHEN COLBERT</div>
								<small class="semi-bold">Designer</small>
								<ul class="p-0 mt-4">
									<li class="d-flex align-items-center justify-content-start">
										<div class="icon">
											<i class="fas fa-map-signs" aria-hidden="true"></i>
										</div>	
										<div class="icon-text">
											21 Street, Texas
										</div>
									</li>
									<li class="d-flex align-items-center justify-content-start">
										<div class="icon">
											<i class="fas fa-mobile-alt" aria-hidden="true"></i>
										</div>	
										<div class="icon-text">
											+324 4445678
										</div>
									</li>
									<li class="d-flex align-items-center justify-content-start">
										<div class="icon">
											<i class="fas fa-envelope" aria-hidden="true"></i>
										</div>	
										<div class="icon-text">
											[email protected]
										</div>
									</li>
									<li class="d-flex align-items-center justify-content-start">
										<div class="icon">
											<i class="fab fa-weebly" aria-hidden="true"></i>
										</div>	
										<div class="icon-text">
											www.stephen.com
										</div>
									</li>
								</ul>
							</div>
							<div class="skills borderb">
								<div class="title">SKILLS</div>
								<ul class="p-0">
									<li>
										<div class="skill-name">HTML</div>
										<div class="skill-progress">
											<span style="width: 80%;"></span>
										</div>
										<div class="skill_per">80%</div>
									</li>
									<li>
										<div class="skill-name">CSS</div>
										<div class="skill-progress">
											<span style="width: 65%;"></span>
										</div>
										<div class="skill_per">65%</div>
									</li>
									<li>
										<div class="skill-name">JavaScript</div>
										<div class="skill-progress">
											<span style="width: 90%;"></span>
										</div>
										<div class="skill_per">90%</div>
									</li>
									<li>
										<div class="skill-name">PHP</div>
										<div class="skill-progress">
											<span style="width: 95%;"></span>
										</div>
										<div class="skill_per">95%</div>
									</li>
									<li>
										<div class="skill-name">jQuery</div>
										<div class="skill-progress">
											<span style="width: 55%;"></span>
										</div>
										<div class="skill_per">55%</div>
									</li>
								</ul>
							</div>
							<div class="social">
								<div class="title">
									SOCIAL
								</div>
								<ul class="p-0">
									<li class="d-flex">
										<div class="icon">
											<i class="fab fa-facebook-square" aria-hidden="true"></i>
										</div>
										<div class="data">
											<p class="semi-bold">Facebook</p>
											<p>Stephen@facebook</p>
										</div>
									</li>
									<li class="d-flex">
										<div class="icon">
											<i class="fab fa-twitter-square" aria-hidden="true"></i>
										</div>
										<div class="data">
											<p class="semi-bold">Twitter</p>
											<p>Stephen@twitter</p>
										</div>
									</li>
									<li class="d-flex">
										<div class="icon">
											<i class="fab fa-youtube-square" aria-hidden="true"></i>
										</div>
										<div class="data">
											<p class="semi-bold">YouTube</p>
											<p>Stephen@youtube</p>
										</div>
									</li>
									<li class="d-flex">
										<div class="icon">
											<i class="fab fa-linkedin" aria-hidden="true"></i>
										</div>
										<div class="data">
											<p class="semi-bold">Linkedin</p>
											<p>Stephen@linkedin</p>
										</div>
									</li>
									<li class="d-flex">
										<div class="icon">
											<i class="fab fa-linkedin" aria-hidden="true"></i>
										</div>
										<div class="data">
											<p class="semi-bold">Linkedin</p>
											<p>Stephen@linkedin</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-8 p-0">
					<div class="resume-right">
						<div class="about-me borderb mb-4">
					        <div class="title">
					           About Me
					         </div>
					        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis illo fugit officiis distinctio culpa officia totam atque exercitationem inventore repudiandae?</p>
					    </div>
					    <div class="experience borderb mb-4">
					        <div class="title">
					           About Me
					         </div>
					        <ul>
					            <li>
					                <div class="date">2013 - 2015</div> 
					                <div class="info">
					                     <p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p> 
					                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
					                </div>
					            </li>
					            <li>
					              <div class="date">2015 - 2017</div>
					              <div class="info">
					                     <p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p> 
					                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
					                </div>
					            </li>
					            <li>
					              <div class="date">2017 - Present</div>
					              <div class="info">
					                     <p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p> 
					                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
					                </div>
					            </li>
					        </ul>
					    </div>

					    <div class="experience borderb mb-4">
					        <div class="title">
					           Education
					         </div>
					        <ul>
					            <li>
					                <div class="date">2010 - 2013</div> 
					                <div class="info">
					                     <p class="semi-bold text-dark">Web Designing (Texas University)</p> 
					                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
					                </div>
					            </li>
					            <li>
					              <div class="date">2000 - 2010</div>
					              <div class="info">
					                     <p class="semi-bold text-dark">Texas International School</p> 
					                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
					                </div>
					            </li>
					        </ul>
					    </div>

					    <div class="hobby">
					    	<div class="title">Hobby</div>
					    	<ul class="p-0 d-flex justify-content-between">
								<li><i class="fas fa-book" aria-hidden="true"></i></li>
								<li><i class="fas fa-gamepad" aria-hidden="true"></i></li>
								<li><i class="fas fa-music" aria-hidden="true"></i></li>
								<li><i class="fab fa-pagelines" aria-hidden="true"></i></li>
							</ul>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Comments are closed.