Design a Greeting Card - Step 23

Curriculum Help
, , ,
1

Tell us what’s happening:

Hi ivbeen stuck in this step (23) and i writed it exactly as it asks, i have done everything, changing the browser, turning off dark mode, try to solve it in another device and i can’t pass it, help.

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{
  outline: 2px solid yellow;
}
/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 26_5_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/151.0.7922.112 Mobile/15E148 Safari/604.1

Challenge Information:

Design a Greeting Card - Step 23

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-greeting-card/67333b1d5f4a7340a121973a.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Add a new selector that targets the .card-links a elements when focused.

What does it mean by “when focused” ?

Also read the console messages:

// running tests
1. You should have a .card-links a:focus selector.
2. The .card-links a:focus selector should have an outline property set to 2px solid yellow.
// tests completed
3

Hi buddy, Here do see how the person used the a:active selector here.

The same way you need to do focus selector, when you will do use that then you will be able to select the anchor element here.

Hope You Understand !!