ContextQMD
Back to Freecodecamp

Step 19

curriculum/challenges/english/blocks/workshop-greeting-card/673337337f794d3025ded433.md

latest3.4 KB
Original Source

--description--

Target the a elements inside .card-links and give them:

  • a text-decoration property set to none.
  • a font-size property set to 1em
  • a padding property set to 10px 20px
  • a border-radius property set to 5px
  • a color property set to white
  • a background-color property set to midnightblue

--hints--

You should have a .card-links a selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a"));

The .card-links a selector should have a text-decoration property set to none.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("text-decoration"), "none");

The .card-links a selector should have a font-size property set to 1em.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("font-size"), "1em");

The .card-links a selector should have a padding property set to 10px 20px.

js
assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("padding"), ["10px 20px", "10px 20px 10px", "10px 20px 10px 20px"]);

The .card-links a selector should have a border-radius property set to 5px.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("border-radius"), "5px");

The .card-links a selector should have a color property set to white.

js
assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("color").toLowerCase(), ["white", "#ffffff", "#fff", "rgb(255, 255, 255)", "hsl(0, 0%, 100%)"]);

The .card-links a selector should have a background-color property set to midnightblue.

js
assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("background-color").toLowerCase(), ["midnightblue", "#191970", "rgb(25, 25, 112)", "hsl(240, 64%, 27%)"]);

--seed--

--seed-contents--

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>
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;
}

--fcc-editable-region--

--fcc-editable-region--