Design a Greeting Card - Step 23

HTML-CSS
1

Tell us what’s happening:

Hello! I’m stuck on Step 23 of the “Design a Greeting Card” project.

I added the required selector:
.card-links a:focus {
outline: 2px solid yellow;
}

The code looks correct to me and matches the instructions, but the test still fails and says the selector should have that exact outline property.

I’ve already tried rewriting the rule manually, but the issue persists.

Am I missing something subtle in the selector or formatting? Thank you!

Your code so far

<!-- file: index.html -->
        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Card</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="card" id="greeting-card">
      <h1>Happy Birthday!</h1>
      <p class="message">
        Wishing you all the happiness and joy on your special day!
      </p>
      <div class="card-links">
        <a href="#send" class="send-link">Send Card</a>
        <a href="#share" class="share-link">Share on Social Media</a>
      </div>
  	</div>
    <section id="send">
      <h2>Sending your card...</h2>
      <p>Card successfully sent to your recipient!</p>
    </section>
    <section id="share">
      <h2>Sharing your card...</h2>
      <p>Your card was shared on social media!</p>
    </section>
  </body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  padding: 40px;
  text-align: center;
  background-color: brown;
}

.card {
  background-color: white;
  max-width: 400px;
  padding: 40px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px gray;
  transition: transform 0.3s, background-color 0.3s ease
}

.card:hover {
  background-color: khaki;
  transform: scale(1.1);
}

h1::before {
  content: "🥳 ";
}

h1::after {
  content: " 🥳";
}

.message {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.card-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.card-links a {
  text-decoration: none;
  font-size: 1em;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: midnightblue;
  transition: background-color 0.3s ease;
}

.card-links a:hover {
  background-color: orangered;
}

.card-links a:active {
  background-color: midnightblue;
}


/* User Editable Region */

.card-links a:focus {
  outline: 2px solid yellow;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

Challenge Information:

Design a Greeting Card - Step 23

Design a Greeting Card - Step 23
Design a Greeting Card - Step 23
2

I tried the following steps mentioned by @hbar1st in this post:

  • Clicked on the “Reset” step button and restarted my Mac.
  • Tried the step in incognito or private mode.
  • I setup my Mac quite fresh and don’t have any extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and have my browser zoom level to 100%.
  • My Safari is up to date.
  • Tried it with Chrome. → WORKED - THANKS!