<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Resume</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<h1 class="logo">MY PORTFOLIO</h1>
</div>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#content">Content</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="home" class="section">
<div class="container">
<h2>Welcome to My Portfolio</h2>
<p>Welcome to my vibrant portfolio website! Here, you'll find information
about me, my skills, projects I've worked on, and how to get in touch with me. Take
a look around and feel free to reach out if you have any questions or
inquiries.</p>
</div>
</section>
<section id="content" class="section">
<div class="container">
<h2>Content</h2>
* Education: Bachelor's in Computer Science, XYZ University</br>
<br>*Certifications: Certified Web Developer, Issuing Organization: XYZ
Certification Institute,</br>
<br>*Skills: Proficient in HTML, CSS, JavaScript, Python, Effective
Communication, Team Collaboration.</br>
<br>*Work Experience: Web Developer at ABC Tech (2019-present), Responsible for
front-end and back-end development of e-commerce website </br>
</div>
</section>
<section id="skills">
<div class="container">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Web Design</li>
</ul>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact</h2>
<p>You can reach me at:</p>
<ul>
<li>Email: [email protected]
<li>Phone: 7603917058</li>
<li>LinkedIn: <a href="[https://www.linkedin.com/in/vijaykumar-
elumalai-91663b255/]">[ VIJAY KUMAR]</a></li>
</ul>
</div>
</section>
<section id="about">
<div class="container">
<h2>About Me</h2>
<p>"I'm VIJAY KUMAR, a passionate WEB DESIGNER. I love creating new things
and learning, and I enjoy the feeling of acquiring knowledge."</p>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2024 My Personal Website. All rights reserved.</p>
</div>
</footer>
<!-- Login Section -->
<form class="login-form">
<div class="container">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login">
</div>
</form>
<script src="script.js"></script>
</body>
</html>
css
/* Set background color to black */
body {
background-color: #000;
color: #fff; /* White text color */
font-family: Arial, sans-serif; /* Use a common font */
margin: 0;
padding: 0;
}
/* Style for the top bar */
.top-bar {
background-color: #333; /* Dark grey background color */
padding: 10px;
text-align: center;
}
.top-bar .logo {
margin: 0;
font-size: 24px;
color: #fff;
}
/* Header navigation */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Main content container */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
/* Style for section headings */
h2 {
color: #ff7f0e; /* Orange color */
}
/* Style for login form */
.login-form {
margin-top: 20px;
text-align: right;
}
.login-form input[type="text"],
.login-form input[type="password"] {
padding: 8px;
margin-right: 10px;
}
.login-form input[type="submit"] {
padding: 8px 20px;
background-color: #4CAF50; /* Green background color */
color: white;
border: none;
cursor: pointer;
}
/* Style for sections */
section {
margin-bottom: 40px;
}
/* Style for section headings */
h2 {
font-size: 28px;
margin-bottom: 10px;
}
/* Style for section content */
p {
font-size: 18px;
line-height: 1.5;
}
/* Style for list items */
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 5px;
}
ul li a {
color: #ff7f0e;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
