Untitled
unknown
plain_text
a month ago
2.7 kB
5
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Personal Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to My Personal Webpage</h1> <nav> <ul> <li><a href="#about">About Me</a></li> <li><a href="#hobbies">Hobbies</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <section id="about"> <h2>About Me</h2> <p>Hello! My name is [Your Name]. I am a [your grade] student who loves [your interests]. Welcome to my personal webpage where I share a little about myself and my interests.</p> <img src="profile.jpg" alt="A photo of me"> </section> <section id="hobbies"> <h2>My Hobbies</h2> <ul> <li>Hobby 1</li> <li>Hobby 2</li> <li>Hobby 3</li> </ul> </section> <section id="projects"> <h2>My Projects</h2> <div class="project"> <h3>Project 1</h3> <p>Description of Project 1.</p> </div> <div class="project"> <h3>Project 2</h3> <p>Description of Project 2.</p> </div> </section> <section id="contact"> <h2>Contact Me</h2> <p>If you'd like to get in touch, you can email me at <a href="mailto:your-email@example.com">your-email@example.com</a>.</p> </section> <footer> <p>© 2024 [Your Name]. All rights reserved.</p> </footer> <script src="scripts.js"></script> </body> </html> <style> /* General Styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #333; color: #fff; padding: 10px 0; text-align: center; } header h1 { margin: 0; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; } section { padding: 20px; margin: 20px; background-color: #fff; border-radius: 8px; } section h2 { color: #333; } img { max-width: 100%; height: auto; border-radius: 8px; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px 0; position: fixed; bottom: 0; width: 100%; } /* Specific Styles */ .project { margin-bottom: 20px; } .project h3 { margin: 0 0 10px; } </style>
Leave a Comment