Tell us what’s happening:
I cannot pass the design a greeting card lesson 23 in the css sections. Do not reply with
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.
or the rest of this copy/paste reply as nothing works. I have tried multiple browsers, including chrome, safari, Firefox, brave, your app, reset, refresh. Even copy and pasted the css code from lesson 24 in and it still failed. It shows that whatever checks the code is failing it since it failed your own code from the next lesson which I only did as a last ditch bail Mary thinking maybe I formatted something wrong or had a typo. So please actually give me a solution instead of refresh my browser. One last thing to note while I was trying to figure it out, while in the app I ran the lab mode. It shows that the .card-links a{} is correct. The part that is flagging as incorrect is outline: 2px solid yellow; so that is whatever the checker is having an error in most likely.
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;
}
.card-links a:focus {
outline: 2px solid yellow;
}
/* User Editable Region */
/* User Editable Region */
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 26_5_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/149.0.7827.137 Mobile/15E148 Safari/604.1
Challenge Information:
Design a Greeting Card - Step 23
