<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<nav>
<div class="logo">My Portfolio</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Welcome to My Portfolio</h1>
<p>I'm a beginner web developer passionate about creating beautiful websites.</p>
<a href="#projects" class="btn">View My Work</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<h2>About Me</h2>
<div class="about-content">
<img src="https://via.placeholder.com/200" alt="My Photo">
<p>Hi! I'm a beginner web developer with a strong interest in front-end development. I love learning
new technologies and building projects that solve real-world problems.</p>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<h2>My Projects</h2>
<div class="project-grid">
<div class="project-card">
<img src="https://via.placeholder.com/300" alt="Project 1">
<h3>Project 1</h3>
<p>A simple project showcasing my HTML and CSS skills.</p>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300" alt="Project 2">
<h3>Project 2</h3>
<p>A responsive website built using Flexbox and Grid.</p>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300" alt="Project 3">
<h3>Project 3</h3>
<p>A contact form with styled inputs and buttons.</p>
</div>
</div>
</section>
<!-- Skills Section -->
<section class="skills">
<h2>My Skills</h2>
<ul class="skills-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript (Coming Soon!)</li>
<li>Responsive Design</li>
</ul>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<h2>Contact Me</h2>
<form class="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</section>
<!-- Footer Section -->
<footer>
<p>© 2023 My Portfolio. All rights reserved.</p>
<ul class="social-links">
<li><a href="#">LinkedIn</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</footer>
</body>
</html>
