HTML Practice

Here is the html

<header>
 <h1>My First Webpage</h1>
 <nav>
 <a href="#home">Home</a>
 <a href="#about">About</a>
 <a href="#contact">Contact</a>
 </nav>
</header>
<main>
 <section id="home">
 <h2>Welcome</h2>
 <p>This is my first webpage made in CodePen using sections, images, buttons, and naviga
 <button type="button">Click Me</button>
 </section>
 <section id="about">
 <h2>About Me</h2>
 <p>Write 2–3 sentences about yourself, your hobbies, or something you like.</p>
 <img
 src="https://images.unsplash.com/photo-1526481280695-3c687fd5432c?auto=format&fit=cro alt="A laptop on a desk"
 />
 </section>
 <section id="contact">
 <h2>Contact</h2>
 <p>You can pretend this is a contact section.</p>
 <a class="button-link" href="mailto:student@example.com">Email Me</a>
 </section>
</main>
<footer>
 <p>© 2026 Student Name</p>
</footer>

Here is the CSS:

body {
font-family: Arial, sans-serif;
margin: 0;
line-height: 1.5;
}
header {
padding: 16px;
background: #f2f2f2;
}
nav a {
margin-right: 12px;
text-decoration: none;
color: #333;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 16px;
}
section {
padding: 16px;
margin-bottom: 16px;
border: 1px solid #ddd;
border-radius: 8px;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-top: 10px;
}
button,
.button-link {
display: inline-block;
padding: 10px 14px;
border: none;
border-radius: 6px;
background: #2d6cdf;
color: white;
cursor: pointer;
text-decoration: none;
}
button:hover,
.button-link:hover {
opacity: 0.9;
}
footer {
padding: 16px;
background: #f2f2f2;
text-align: center;
}