HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet"href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
<div class="resum">
<nav>
<h2>Bhuvaneswari</h2>
</nav>
<section class="home">
<div class="left">
<img src="girl.jpg" alt="profile">
</div>
<div class="right">
<h2>Bhuvaneswari Nandhagopal</h2>
<p>Data Analyst</p>
<p> Chennai, Tamil Nadu, India</p>
<div class="icons">
<a href="https://www.linkedin.com/in/bhuvanesvari-nandhagopal-61365240a/" target=="_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://gitlab.com/bhuvanesvari" target=="_blank">
<i class="fa-brands fa-gitlab"></i>
</a>
<a href="mailto:bhuvanesvarinandhagopal@gmail.com">
<i class="fa-solid fa-envelope"></i>
</a>
<a href="tel:+918072419448">
<i class="fa-solid fa-phone"></i>
</a>
<a href="BHUVANESWARI - RESUME.pdf" download class="btn"> <i class="fa-solid fa-download"></i>Download</a>
</div>
</div>
</section>
<section class="about">
<h2>About ME</h2>
<p> Hi I am Bhuvaneswari.N i am curently learn to Data Analyst with knowledge of
Python, HTML, CSS and Power BI.I enjoy learning new technologies and building
responsive websites. I am interested in improving my programming skills and
becoming a software developer</p>
</section>
<section class="education">
<h2>Education</h2>
Bachelor of Commerce (General)<br>
C.S.I. Ewart Women's Christian College of Arts & Science<br>
Completed: 2023
</p>
</p>
</section>
<section class="skills">
<h2>Skills</h2>
<ul>
<li>Python</li>
<li>HTML</li>
<li>CSS</li>
<li>Power BI</li>
</ul>
</section>
<section class="projects">
<h2>Projects</h2>
<h4>Phone Book Management System</h4>
<p>
Developed a Phone Book Management System using Python.
Users can add, view, search, update, and delete contact details.
</p
<br>
<h4>Calculator Application</h4>
<p>
Developed a Calculator Application using Python.
The application performs Addition, Subtraction, Multiplication,
Division, Floor Division, and Power operations through a
menu-driven interface.
</p>
</section>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}
body{
background-color: white;
}
.resume{
width:210mm;
min-height:297mm;
margin:auto;
background:white;
padding:20mm;
box-shadow:0 0 10px rgba(0,0,0,0.2);
}
nav{
background-color:navy;
color:white;
padding:20px;
}
.home{
display:flex;
justify-content: center;
align-items:center;
gap:120px;
padding:70px;
}
left img{
width:280px;
border-radius:50%;
border:5px solid white;
}
.right h1{
font-size:45px;
margin-bottom:15px;
}
.right h2{
color:black;
margin-bottom:15px;
}
.right p{
font-size:22px;
margin-bottom:20px;
}
.icons i{
font-size:25px;
margin-right:20px;
color:black
}
.btn{
display:inline-block;
margin-top:15px;
padding:10px 25px;
background-color:pink ;
color:white;
text-decoration:none;
border-radius:8px;
font-size:18px;
font-weight:bold;
transition:0.3s;
}
.btn:hover{
background-color:pink;
}
section{
padding:40px 80px;
}
section h2{
color:#002244;
margin-bottom:20px;
}
ul{
margin-left:25px;
}
li{
margin-bottom:10px;
}
@media (max-width:768px){
.home{
flex-direction:column;
text-align:center;
gap:30px;
}
.right h1{
font-size:32px;
}
.left img{
width:200px;}
}
.projects h3{
margin-top: 25px;
margin-bottom: 10px;
}
.projects p{
margin-bottom: 20px;
line-height: 1.6;
}
@page{
size:A4;
margin:10mm;
}
@media print{
body{
background:white;
}
.resume{
width:210mm;
min-height:297mm;
margin:0;
padding:20mm;
box-shadow:none;
}
}
a {
text-decoration: none;
}
section{
max-width: 80%;
margin: auto;
}
Top comments (0)