Design a Greeting Card - Step 23

Curriculum Help
,
1

Tell us what’s happening:

I am not passing Step 23, and I don’t know why. I have passed every other step except this one.

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.5 Safari/605.1.15

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

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

4

I am also unable to get past this step. I have tried Firefox browser, safari, and chrome. Along with the app. I have even moved to the next step and copied and pasted that section to the previous step and something with the check isn’t allowing it to pass. In the lab it shows that the .card-links a:focus {} is correct. It’s the chunk after that keeps saying it’s incorrect. The outline: 2px solid yellow; that is not being validated.

5

Welcome to the forum @alecsgordon,

Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Help button image located on each challenge. This will automatically import your code in a readable format and pull in the challenge URL while still allowing you to ask any question about the challenge or your code.

Thank you.

Happy coding

6

@dhess That’s why I replied here as I was responding to your solution not working for me. And due to my issue being 100% identical to the original posters I felt it redundant to create a new post. My code matches the original posters exactly and even went as far as copying and pasting freecodecamps lesson 24 css code into lesson 23 and still wouldn’t pass the lesson. I did this as a last ditch effort trying to figure out what i was doing wrong. I am not worried about my own code being wrong as I checked it multiple times over. I was mainly trying to elaborate and expand upon what the issue may be. Because as of now. I still cannot pass the lesson. And nothing you have proved has helped me. And that includes solutions from other forum posts having this same issue.