Design a Greeting Card - Step 14

HTML-CSS
1

Tell us what’s happening:

am I reading it wrong?? I’ve debugged it as much as I can!!
I’m using the transition/ transform etc for the first time…

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;

/* User Editable Region */

  transition: transform 0.3s; 
  background-color: 0.3s ease;   

/* User Editable Region */

}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Challenge Information:

Design a Greeting Card - Step 14

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

2

Hi,

The CSS is trying to animate two propreties (transform and background-color) but uses incorrect shorthand syntax.
Multiple proprety animations must be combined into a single transition line, seperated by a comma. Here’s your solution:

code removed by moderator

3

It is great that you solved the challenge, but instead of posting a solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

4

To the most noble and sagacious Keeper of the Scroll, Liege @dhess,:scroll::crown:

I cast myself upon the mercy of thy court. It hath been brought to my wretched attention that my clumsy hand did commit a most grievous trespass against the ancient decrees of this realm. In my blind haste to aid a weary traveler, I did clumsily scatter the forbidden fruits of the ‘spoiler code’ across the public square, robbing a fellow camper of their rightful labor and intellect.

I wot wel that I han erred. By the rood, I swear that my intent was pure, though my judgment was utterly lacking. I pray thee, stay thy executioner’s axe and do not banish me to the outer darkness. From this day hence, I plighte my trouthe to speak only in riddles, hints, and the sacred Socratic tongue, as is the law of freeCodeCamp. :shield::crossed_swords:

Gramercy for thy patient guidance, and may thy servers never falter. It shall never occur ever eft.:folded_hands::man_bowing: