Loading...
Loading...
Create a personal profile page from scratch using HTML and CSS
Build a personal profile page that showcases who you are. Use semantic HTML, CSS styling, flexbox/grid layout, and responsive design.
Use this structure and fill in your own content and styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jane Dev | Web Developer</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary: #2c3e50; --accent: #3498db; }
html { scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; }
header { background: var(--primary); color: white; text-align: center; padding: 60px 20px 40px; }
nav { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; }
nav a { color: white; text-decoration: none; }
nav a:hover { color: var(--accent); }
h1 { font-size: 2.5rem; }
section { padding: 60px 20px; }
section:nth-child(even) { background: #f8f9fa; }
.container { max-width: 1000px; margin: 0 auto; }
h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; color: var(--primary); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.skill-card { text-align: center; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.project-card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.project-card h3 { color: var(--accent); }
form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
input, textarea { padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; }
button { background: var(--accent); color: white; padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; }
footer { background: var(--primary); color: white; text-align: center; padding: 20px; }
@media (max-width: 600px) { h1 { font-size: 1.8rem; } }
</style>
</head>
<body>
<header>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<h1>Jane Dev</h1>
<p>Web Developer and Creative Problem Solver</p>
</header>
<main>
<section id="about"><div class="container"><h2>About Me</h2><p>I am a web developer who loves creating beautiful, responsive websites.</p></div></section>
<section id="skills"><div class="container"><h2>Skills</h2><div class="skills-grid"><div class="skill-card"><h3>HTML5</h3></div><div class="skill-card"><h3>CSS3</h3></div></div></div></section>
<section id="projects"><div class="container"><h2>Projects</h2><div class="projects-grid"><div class="project-card"><h3>Portfolio</h3><p>Responsive personal website.</p></div></div></div></section>
<section id="contact"><div class="container"><h2>Contact</h2><form><input placeholder="Name"><input placeholder="Email"><textarea rows="5" placeholder="Message"></textarea><button>Send</button></form></div></section>
</main>
<footer>(c) 2026 Jane Dev</footer>
</body>
</html>