curriculum/challenges/english/blocks/workshop-greeting-card/67333082ab35e414eb4ea70d.md
When the a elements are hovered, the color of the background makes a transition to a different color. You can regulate how that transition happens with the transition property:
a {
transition: color 1s linear;
}
The values that the transition property accepts are, in order, the property that the transition is applied to, the duration of the transition, and then the timing.
If there are multiple properties that have a transition, you can write the values for each separated by a comma:
p {
transition: property1 0.1s, property2 0.6s linear;
}
If a value is omitted, like the timing for the first property, a default value is applied.
Add to the .card selector transition: transform 0.3s, background-color 0.3s ease.
Try it out, the hover transition is complete.
The .card selector should have a property transition set to transform 0.3s, background-color 0.3s ease.
assert.oneOf(
new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("transition"),
[
"transform 0.3s ease 0s, background-color 0.3s ease 0s", // this is what comes out of `getPropertyValue`
"transform 0.3s, background-color 0.3s" // different environment got this instead
]
);
<!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>
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;
--fcc-editable-region--
--fcc-editable-region--
}
.card:hover {
background-color: khaki;
transform: scale(1.1);
}