Responsive Resume Website using HTML CSS

An online CV or Curriculum Vitae, also known as an online resume, is a digital version of a traditional resume that is hosted and accessed online. This online CV typically includes the same information as a traditional paper resume. This information includes my personal and contact information, work experience, education, skills, and other relevant information. There is a video below that shows the procedure for making an online CV. Our YouTube Channel contains video tutorials related to CSS, Javascript, and other Web Design Projects. If you enjoy the content of our channel, please subscribe.

Video Tutorial:

I hope you have watched the tutorial. You can easily share your professional information with potential employers or clients if you have an online resume. It is possible to increase your online presence and visibility to recruiters and other professionals in your field in this process. However, you need to consider privacy and security concerns when creating an online CV, especially if your CV will be used for job applications. You Need to ensure that the information you include is accurate and up-to-date.

There is a profile image at the top of the online resume we created. The name and designation are available below. The information in the resume is divided into two parts. On the left are Personal Information, Skills, and Education-related information. The entire column on the right side is about work experience-related information. CSS media queries are used to make the snippet responsive. On small devices, all the information will align in one column.

You May Also Like:

Responsive Resume CV Website [ Source Code ]:

A new HTML and CSS file is needed to create this excerpt. The code box below allows you to copy and paste it into your files. If the code isn't working, you can download it from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Resume website html css</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <div class="container">
      <div class="header">
        <div class="img-area">
            <img src="https://images.pexels.com/photos/3823495/pexels-photo-3823495.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
        </div>
        <h1>Jason Holder</h1>
        <h3>Full-Stack Web Developer</h3>
      </div>

      <div class="main">
        <div class="left">
          <h2>Personal Information</h2>
          <p><strong>Name:</strong> Jason Holder</p>
          <p><strong>Age:</strong> 30</p>
          <p><strong>Email:</strong> jholder@email.com</p>
          <p><strong>Phone:</strong> 000 000 0000</p>
          <h2>Skills</h2>
          <ul>
            <li>HTML/CSS</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Node.js</li>
            <li>SQL</li>
          </ul>
          <h2>Education</h2>
          <h3>B.Sc in Computer Science</h3>
          <p>University of XYZ, 2014-2018</p> <br>
          <h3>M.Sc in Computer Science</h3>
          <p>University of XYZ, 2019-2020</p>
        </div>
        
        <div class="right">
          <h2>Work Experience</h2>
          <h3>XYZ Company</h3>
          <p><strong>Position:</strong> Software Developer</p>
          <p><strong>Duration:</strong> 2018-2022</p>
          <ul>
            <li>Developed and maintained web applications using React, Node.js, and SQL</li>
            <li>Implemented responsive design using CSS flexbox and media queries</li>
            <li>Collaborated with cross-functional teams to deliver high-quality software products</li>
          </ul> <br>
          <h3>ABC Company</h3>
          <p><strong>Position:</strong> Web Developer</p>
          <p><strong>Duration:</strong> 2016-2018</p>
          <ul>
            <li>Created and maintained websites using HTML, CSS, and JavaScript</li>
            <li>Optimized website performance and user experience using best practices</li>
            <li>Worked with clients to understand their needs and deliver custom solutions</li>
          </ul>
        </div>
      </div>
    </div> 

</body>
</html>

ADD CSS:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
body {
	background: #00b6c4;
}
.container {
	background: #f5f5f5;
	max-width: 800px;
	margin: 60px auto;
	height: 1250px;
	padding: 20px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.header {
	text-align: center;
}
.header h1 {
	margin-bottom: 10px;
}
.header h3 {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
}
.img-area {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	margin: 25px auto;
	border: 15px groove deepskyblue;
}
.img-area img {
	width: 100%;
}
.main {
	display: flex;
	flex-wrap: wrap;
}
.left {
	flex: 1;
	padding: 30px;
}
.left p {
	line-height: 2;
}
.left ul li {
	line-height: 2;
}
h2 {
	background: #00b6c4;
	padding: 15px;
	color: #fff;
	margin: 30px 0;
	font-size: 20px;
	border-radius: 0 50px 50px 0;
}
.right {
	flex: 1;
	padding: 30px;
}
.right h3 {
	margin-bottom: 15px;
}
.right p {
	line-height: 2.9;
}
.right ul li {
	line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container {
		width: 95%;
		height: auto;
	}
	h2 {
		font-size: 18px;
	}
}
@media screen and (max-width: 600px) {
	.main {
		flex-direction: column;
	}
	.left, .right {
		flex: none;
		width: 100%;
	}
	.container {
		width: 95%;
		height: auto;
	}
	h2 {
		font-size: 15px;
	}
}

We are hoping that the code is working for you. You can use the snippets on the website in your projects. If you enjoy the content of the website, please share it with your friends. We'd like to thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Resume CV Website [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Resume Website using HTML CSS

Video Tutorial:

Responsive Resume CV Website [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form