Scribd
Upload
18 views2 pages

TP

This document is an HTML template for a simple portfolio website for John Doe, a web developer. It includes sections for an about me description, a showcase of projects, and contact information. The layout is styled with CSS to create a modern and responsive design.

Uploaded by

maniyaraanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views2 pages

TP

This document is an HTML template for a simple portfolio website for John Doe, a web developer. It includes sections for an about me description, a showcase of projects, and contact information. The layout is styled with CSS to create a modern and responsive design.

Uploaded by

maniyaraanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav {
text-align: center;
background-color: #444;
padding: 10px 0;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
section {
padding: 20px;
max-width: 900px;
margin: auto;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.project {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>John Doe</h1>
<p>Web Developer | Designer | Programmer</p>
</header>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm John Doe, a passionate web developer with experience in
building responsive websites and web applications.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="projects">
<div class="project">
<h3>Portfolio Website</h3>
<p>A modern and responsive personal portfolio website.</p>
</div>
<div class="project">
<h3>Blog Platform</h3>
<p>A dynamic blog platform with user authentication.</p>
</div>
<div class="project">
<h3>Photo Gallery</h3>
<p>A responsive photo gallery using HTML, CSS, and JavaScript.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</section>
<footer>
<p>&copy; 2025 John Doe. All Rights Reserved.</p>
</footer>
</body>
</html>

You might also like