HTML and CSS can be used to create stunning projects and ideas. Today, we have decided to make our own curriculum vitae (CV) using HTML and CSS.
photo CV
First make sure you have already drafted your cv and updated it to match your current career and work experience.
Here is the code for designing the website:
<body>
<div class="container">
<div class="header">
<h1>Your Name</h1>
<p>Web Development</p>
</div>
<div class="contact-info">
<p>Email:youremail@gmail.com</p>
<p>Phone:(+000) 4578894</p>
<p>Website:www.yourwebsite.com</p>
</div>
<div class="section">
<h2>Summary</h2>
<p>A passionate wed developer with a strong foundation in HTML,CSS,Javascript.<br>
Experienced in creating professional, responsive, and user-friendly websites.<br>
Continuously learning to adopt with changing technology.</p>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>HTML:5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Responsive design</li>
<li>Web Development</li>
</ul>
</div>
<div class="section">
<h2>Experience</h2>
<h3>Web developer - Name of company</h3>
<p>Designed and developed a responsive website for a clied.<br>
Collaborated with the design team to implement user-friendly interface.</p>
</div>
<div class="section">
<h2>Education</h2>
<h3>Bachelor of science in Computer Science</h3>
<p>your University - Graduated 2013</p>
</div>
</div>
</body>
</html>
Now, we are styling our cv using CSS.
here is the codes:
<style>
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: aliceblue;
text-align: center;
}
.container{
max-width: 800;
margin: 0 auto;
padding: 20px;
background-color: rgb(216, 228, 224);
box-shadow: 0 0 10px rgda (0,0,0,0.1);
}
h1,h2,h3{
color: black;
}
.header{
text-align: center;
}
.container-info{
text-align: center;
margin-top: 20px;
}
.section{
margin-bottom: 30px;
}
.section h2{
font-size: 20px;
margin-bottom: 10px;
border-bottom: 1px solid #333;
padding-bottom: 5px;
}
.section p{
line-height: 1.6;
}
.section ul{
list-style-type: none;
padding-left: 20px;
}
</style>
