Day 5: Pseudo-classes, Pseudo-elements & Week 4 Mini-Project

Daily Objective

Master interactive states with pseudo-classes, insert decorative content with pseudo-elements, and complete the Week 4 mini-project.

1. Pseudo-classes & Pseudo-elements

• Pseudo-classes (:): Style state changes or tree positions:
  • :hover: When the mouse pointer hovers over.
  • :focus: When an input or button is active.
  • :nth-child(even): Alternating table rows or list items.
• Pseudo-elements (::): Insert generated content:
  • ::before / ::after: Injects decorative elements without cluttering HTML.

button {
  background: #2563eb;
  transition: background 0.2s ease;
}
button:hover {
  background: #1d4ed8;
}

.quote::before {
  content: '“';
  font-size: 2rem;
}

---

Week 4 Mini-Project: Product Card with Fixed Navigation

Project Requirements:

1. A top navigation bar fixed at the top of the viewport (position: fixed or sticky).
2. A stylish product card with an image, category badge (position: absolute), product title, description, and price.
3. An “Add to Cart” button with smooth :hover and :focus effects.
4. Clean box-shadow and rounded corners.