1 Prepare your CodePen

1. Open the CodePen you completed for Part II: Make It Your Own.
2. Fork the Pen so your previous version stays intact.
3. Rename the new Pen One-Page Website — CSS Polish.
4. Keep your existing header, hero, project cards, About section, and footer. Most of today’s work will happen in the CSS panel.

2 Add smooth card hover effects

A transition makes a CSS change happen gradually instead of instantly. Add the following CSS to your Pen.

/* Smooth movement for project cards */
.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Experiment: Change -6px to -2px and then -10px. Which movement works best for your design?

Important: Your class name may be different. If your cards use class="card", change .project-card to .card. You should edit existing styles rather than accidentally create competing rules.

3 Make a button feel interactive

Give your existing hero button a smooth color change and a small movement on hover.

.button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #ffcc66;
  transform: translateY(-3px);
}

Experiment: Change the color and the amount of movement. Make sure the button text remains easy to read. Update .button to match the class used by your actual button.

4 Try a gentle background animation

Hover effects respond to your actions. An animation can play on its own. The example below uses @keyframes to move a gradient slowly across the hero section.

.hero {
  background: linear-gradient(120deg, #263e69, #8154a5, #ba6078);
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Experiment: Change 8s to 15s. A slower animation often feels calmer. This effect is optional: not every website needs a moving background.

Make your effects accessible

Some visitors prefer less motion. Add this CSS at the bottom of your stylesheet so their preference is respected. Match the selectors to your own classes.

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
  .project-card, .button {
    transition: none;
  }
  .project-card:hover, .button:hover {
    transform: none;
  }
}

5 Refine the whole page

Review your website from top to bottom. The goal is not to add as many effects as possible; it is to make your design more consistent and easier to use.

• Are the spaces between sections consistent?
• Are headings and paragraphs easy to read?
• Do the project cards and images line up?
• Do the colors work together, with enough contrast?
• Does the page fit on a narrow mobile screen without horizontal scrolling?
• Do navigation links take visitors to the correct section of the same page?
• Can you use the links and buttons with the keyboard?
• Do meaningful images have descriptive alt text?

Tip: Use your browser’s responsive preview or resize your browser window to check your design.

6 Submit your work

Submit the URL of your updated CodePen to the designated D2L Dropbox. Your submission must include:

• Your existing, functional one-page website.
• At least two CSS enhancements, such as a card transition, a button hover effect, or a gentle animation.
• A layout that remains readable on desktop and mobile.
• A short reflection (3–5 sentences): Which effects did you try? Which did you keep? Why?

Your instructor will provide the submission deadline in D2L.