<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Your Name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>Your Name</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="about">
<div class="container">
<h2>About Me</h2>
<img src="images/profile.jpg" alt="Profile Picture" class="profile-pic">
<p>Hello! I'm [Your Name], a web developer specializing in modern, responsive websites. I love
building things that live on the internet.</p>
<h3>Skills</h3>
<ul class="skills-list">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React</li>
<li>Git & GitHub</li>
</ul>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 Your Name. All rights reserved.</p>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | Your Name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>Your Name</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="portfolio">
<div class="container">
<h2>My Work</h2>
<div class="projects">
<div class="project-card">
<img src="images/project1.jpg" alt="Project 1">
<h3>Project Title 1</h3>
<p>Short description of project 1.</p>
<a href="#">View Project</a>
</div>
<div class="project-card">
<img src="images/project2.jpg" alt="Project 2">
<h3>Project Title 2</h3>
<p>Short description of project 2.</p>
<a href="#">View Project</a>
</div>
<!-- Add more project cards if needed -->
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 Your Name. All rights reserved.</p>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | Your Name</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<header>
<div class="container">
<h1>Your Name</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="contact">
<div class="container">
<h2>Contact Me</h2>
<form id="contactForm">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 Your Name. All rights reserved.</p>
</div>
</footer>
</body>
</html>
/* General Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body, html {
font-family: 'Poppins', sans-serif;
color: #333;
line-height: 1.6;
.container {
width: 90%;
margin: auto;
max-width: 1200px;
/* Header */
header {
background: #4e54c8;
color: #fff;
padding: 20px 0;
}
header h1 {
float: left;
nav ul {
list-style: none;
float: right;
nav ul li {
display: inline-block;
margin-left: 20px;
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
/* Hero Section */
.hero {
background: url('images/hero.jpg') no-repeat center center/cover;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
.hero h2 {
font-size: 48px;
color: #fff;
.btn {
display: inline-block;
background: #ff6b6b;
color: #fff;
padding: 10px 20px;
margin-top: 20px;
text-decoration: none;
border-radius: 5px;
/* About */
.about, .portfolio, .contact {
padding: 60px 0;
}
.about img.profile-pic {
width: 150px;
border-radius: 50%;
margin-bottom: 20px;
.skills-list {
list-style: none;
padding: 0;
.skills-list li {
margin-bottom: 10px;
/* Portfolio Projects */
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
.project-card {
background: #f4f4f4;
padding: 20px;
text-align: center;
.project-card img {
width: 100%;
height: auto;
/* Contact Form */
form input, form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
form button {
background: #4e54c8;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
form button:hover {
background: #3b42a1;
/* Footer */
footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: 20px;
/* Responsive */
@media (max-width: 768px) {
nav ul {
float: none;
text-align: center;
nav ul li {
display: block;
margin: 10px 0;
}
// Form Validation
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('contactForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = form.name.value.trim();
const email = form.email.value.trim();
const message = form.message.value.trim();
if (!name || !email || !message) {
alert('Please fill in all fields!');
return;
alert('Thank you for your message!');
form.reset();
});
});
