Untitled
unknown
plain_text
4 months ago
4.0 kB
2
Indexable
<!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> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; color: #333; background-color: #f4f4f4; } header { background: #333; color: #fff; padding: 1rem 0; text-align: center; } header h1 { margin: 0; } nav { background: #444; display: flex; justify-content: center; padding: 0.5rem; } nav a { color: #fff; text-decoration: none; margin: 0 1rem; } nav a:hover { text-decoration: underline; } .container { width: 90%; max-width: 1100px; margin: 2rem auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .section { margin-bottom: 2rem; } .section h2 { border-bottom: 2px solid #444; padding-bottom: 0.5rem; margin-bottom: 1rem; } .projects { display: flex; flex-wrap: wrap; gap: 1rem; } .project { flex: 1 1 calc(33.333% - 1rem); background: #f9f9f9; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; } .project h3 { margin-top: 0; } footer { background: #333; color: #fff; text-align: center; padding: 1rem 0; margin-top: 2rem; } footer p { margin: 0; } @media (max-width: 768px) { .project { flex: 1 1 100%; } } </style> </head> <body> <header> <h1>My Portfolio</h1> <p>Welcome to my personal portfolio. Here you can find my projects and contact details.</p> </header> <nav> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> <div class="container"> <section id="about" class="section"> <h2>About Me</h2> <p>Hi, I'm [Your Name], a passionate [Your Profession, e.g., Web Developer, Graphic Designer]. I specialize in [Your Skills/Technologies]. I love creating beautiful and functional designs that make an impact.</p> </section> <section id="projects" class="section"> <h2>My Projects</h2> <div class="projects"> <div class="project"> <h3>Project 1</h3> <p>A brief description of your project. Include technologies used and what makes it unique.</p> </div> <div class="project"> <h3>Project 2</h3> <p>A brief description of your project. Include technologies used and what makes it unique.</p> </div> <div class="project"> <h3>Project 3</h3> <p>A brief description of your project. Include technologies used and what makes it unique.</p> </div> </div> </section> <section id="contact" class="section"> <h2>Contact Me</h2> <p>If you'd like to work with me or have any questions, feel free to reach out!</p> <p>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></p> <p>Phone: (123) 456-7890</p> </section> </div> <footer> <p>© 2024 My Portfolio. All rights reserved.</p> </footer> </body> </html>
Editor is loading...
Leave a Comment