Personal PortFolio Website:
------------------------------------------
HTML:
----------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<div class="logo">Your Logo</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<header>
<h1>Welcome to My Portfolio</h1>
<p>A showcase of my skills, projects, and achievements</p>
</header>
<section id="about">
<h2>About Me</h2>
<div class="about-content">
<p>Write a brief introduction about yourself here.</p>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<ul class="skills-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Project Title</h3>
<p>Project description</p>
<a href="project-demo.html">Live Demo</a>
<a href="project-repo.html">GitHub Repository</a>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form id="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<p>© 2023 Your Name</p>
</footer>
<script data-two_delay_id="two_65b8f79c52b96" data-two_delay_src="script.js"></script>
</body>
</html>
styles.css
----------------
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Navigation Bar */
nav {
background-color: #333;
color: #fff;
padding: 20px;
.logo {
font-size: 24px;
font-weight: bold;
margin-right: 20px;
.nav-links {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
.nav-links li {
margin-right: 20px;
.nav-links li a {
color: #fff;
text-decoration: none;
/* Hero Section */
header {
background-color: #f2f2f2;
padding: 50px;
text-align: center;
/* About Me Section */
#about {
padding: 50px;
text-align: center;
}
/* Skills Section */
#skills {
padding: 50px;
background-color: #f2f2f2;
text-align: center;
.skills-list {
list-style-type: none;
padding: 0;
.skills-list li {
display: inline-block;
margin: 0 10px;
/* Projects Section */
#projects {
padding: 50px;
text-align: center;
}
.project {
margin-bottom: 20px;
.project a {
display: block;
margin-top: 10px;
/* Contact Section */
#contact {
padding: 50px;
text-align: center;
#contact-form {
display: flex;
flex-direction: column;
align-items: center;
#contact-form label {
margin-bottom: 10px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
#contact-form button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
/* Footer */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
script.js
-------------
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Form submission handling
document.getElementById('contact-form').addEventListener('submit', function (e) {
e.preventDefault();
// You can add code here to handle form submission, such as sending an email or storing the data.
// For demonstration purposes, let's log the form data to the console.
const formData = new FormData(this);
console.log('Form data:', Object.fromEntries(formData));
// Clear the form inputs
this.reset();
});
