Design a Greeting Card - Step 19

HTML-CSS
1

Tell us what’s happening:

I am stuck on Step 19. :frowning:
You should have a .card-links a selector.

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;
  color: gray;
  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;}



/* User Editable Region */





/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Design a Greeting Card - Step 19
https://www.freecodecamp.org/learn/full-stack-developer/workshop-greeting-card/step-19

2

I don’t see one?

3

I take it this isn’t it.

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

That looks like a .card-links:a selector, not a .card-links a selector.

5

Thank you!!! I thought I had tried every possible syntax. Apparently not. bye bye colon.

1 Like
6

I’m trying to finish step 19 and in my opinion I’m doing everything right but its not letting me advance. Could you guys please help me?

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: ":partying_face: ";
}

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

.message {
font-size: 1.2em;
color: gray;
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;
}

7

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.