Day 7: Transitions, Animations & Final Project

Goal

Learn how to add interactivity and visual polish to your website with CSS transitions, animations, hover effects, and pseudo-elements.

Topics

CSS transitions: transition: all 0.3s ease;
CSS animations with @keyframes
Hover effects & pseudo-classes: :hover, :nth-child()
Pseudo-elements: ::before, ::after

Transition Example

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: green;
}

Animation Example

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s infinite alternate;
}

Pseudo-elements Example

.card::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

Practice

Add hover effects to buttons and links.
Create a small animated box using @keyframes.
Use pseudo-elements to enhance cards or headings.

Final Project – Styled Portfolio Page

Header: Name and navigation bar
About section: Include a photo and a short bio
Skills section: Use flexbox or grid to list skills
Portfolio cards: Project cards with hover effects
Contact form: Styled with transitions on focus and hover
Footer: Smooth transitions and subtle animations

Example HTML & CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Portfolio Final Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 20px;
      text-align: center;
    }

    nav a {
      color: white;
      margin: 0 10px;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #f1c40f;
    }

    .skills {
      display: flex;
      justify-content: space-around;
      margin: 20px;
    }

    .card {
      background-color: #3498db;
      color: white;
      padding: 20px;
      margin: 10px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.05);
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px auto;
      animation: slide 2s infinite alternate;
    }

    @keyframes slide {
      0% { transform: translateX(0); }
      100% { transform: translateX(50px); }
    }

    footer {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 10px;
      transition: background-color 0.3s ease;
    }

    footer:hover {
      background-color: #34495e;
    }
  </style>
</head>
<body>

  <header>
    <h1>My Portfolio</h1>
    <nav>
      <a href="#">About</a>
      <a href="#">Skills</a>
      <a href="#">Projects</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <section class="skills">
    <div class="card">HTML</div>
    <div class="card">CSS</div>
    <div class="card">JavaScript</div>
  </section>

  <div class="box"></div>

  <footer>
    <p>© 2026 My Portfolio</p>
  </footer>

</body>
</html>