Last active
August 12, 2025 02:44
-
-
Save HwWobbe/7434b0c06b6b30a44c63b29c70c0fcf1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Your Name - Personal Webpage</title> | |
| <style> | |
| /* Reset & Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: system-ui, sans-serif; | |
| line-height: 1.5; | |
| color: #333; | |
| background-color: #fafafa; | |
| padding: 1rem; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: var(--primary); | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| :root { | |
| --primary: #0077cc; | |
| --max-width: 960px; | |
| --spacing: 1rem; | |
| } | |
| /* Layout */ | |
| header, nav, main, footer { | |
| max-width: var(--max-width); | |
| margin: auto; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| nav { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| section { | |
| margin-bottom: 2rem; | |
| } | |
| h1, h2 { | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Project Grid */ | |
| .project-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: var(--spacing); | |
| } | |
| .project-card { | |
| background: white; | |
| padding: var(--spacing); | |
| border-radius: 6px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| } | |
| .project-card h3 { | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| font-size: 0.9rem; | |
| padding: 1rem 0; | |
| border-top: 1px solid #ddd; | |
| } | |
| /* Mobile-first, enhance for larger screens */ | |
| @media (min-width: 600px) { | |
| body { | |
| padding: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>HwWobbe</h1> | |
| <nav> | |
| <a href="#about">About</a> | |
| <a href="#projects">Projects</a> | |
| <a href="#contact">Contact</a> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="about"> | |
| <h2>About Me</h2> | |
| <p>Hello! I’m [Your Name], and this is my clean, responsive personal webpage. | |
| I enjoy building things for the web, sharing knowledge, and experimenting with design.</p> | |
| </section> | |
| <section id="projects"> | |
| <h2>Projects</h2> | |
| <div class="project-grid"> | |
| <div class="project-card"> | |
| <h3>Project One</h3> | |
| <p>A short description of your project. Link to it below.</p> | |
| <a href="#">View Project</a> | |
| </div> | |
| <div class="project-card"> | |
| <h3>Project Two</h3> | |
| <p>Another example project with a brief explanation.</p> | |
| <a href="#">View Project</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact"> | |
| <h2>Contact</h2> | |
| <p>Email me at <a href="mailto:you@example.com">you@example.com</a> or connect on | |
| <a href="#">LinkedIn</a>.</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2025 Your Name. All rights reserved.</p> | |
| </footer> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
w.i.p. being tested and refined a bit.