CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(curriculum): refine editable regions in workshop greeting card (#65389)

Browse Source 
Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Jeevankumar S 2026-01-30 23:59:38 +05:30 committed by GitHub
parent 95aa78408f
commit 014826acd4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 175 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/blocks/workshop-greeting-card/6720b1f2680ec706ed534acf.md
View File

@ -40,21 +40,19 @@ assert.match(linkHrefValue, /^(\.\/)?styles\.css$/);
## --seed-contents--
```html
--fcc-editable-region--
<!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>
--fcc-editable-region--
--fcc-editable-region--
</head>
<body>
</body>
</html>
--fcc-editable-region--
```
```css

11
curriculum/challenges/english/blocks/workshop-greeting-card/6720b3191bbafd269bae0ae8.md
View File

@ -74,17 +74,12 @@ assert.strictEqual(document.querySelector("div > p.message").textContent.trim(),
<title>Greeting Card</title>
<link href="styles.css" rel="stylesheet">
</head>
--fcc-editable-region--
<body>
</body>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```
```css

2
curriculum/challenges/english/blocks/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md
View File

@ -63,12 +63,10 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getProperty
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```

6
curriculum/challenges/english/blocks/workshop-greeting-card/6720bbb38f697e2364f41c0e.md
View File

@ -51,17 +51,15 @@ assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue
</div>
</body>
</html>
```
```css
--fcc-editable-region--
body {
font-family: Arial, sans-serif;
padding: 40px;
text-align: center;
--fcc-editable-region--
}
--fcc-editable-region--

8
curriculum/challenges/english/blocks/workshop-greeting-card/6728fda085006772a247e779.md
View File

@ -51,7 +51,6 @@ assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue
</div>
</body>
</html>
```
```css
@ -62,12 +61,11 @@ body {
background-color: brown;
}
--fcc-editable-region--
.card {
background-color: white;
--fcc-editable-region--
--fcc-editable-region--
}
--fcc-editable-region--
```

7
curriculum/challenges/english/blocks/workshop-greeting-card/6729005c87b6320356ac1140.md
View File

@ -48,7 +48,6 @@ assert.strictEqual(
</div>
</body>
</html>
```
```css
@ -59,14 +58,14 @@ body {
background-color: brown;
}
--fcc-editable-region--
.card {
background-color: white;
max-width: 400px;
padding: 40px;
margin: 0 auto;
--fcc-editable-region--
--fcc-editable-region--
}
--fcc-editable-region--
```

9
curriculum/challenges/english/blocks/workshop-greeting-card/672b42241c0c6515f26786f4.md
View File

@ -39,20 +39,15 @@ assert.strictEqual(document.querySelector("#greeting-card").lastElementChild.cla
<body>
<div class="card" id="greeting-card">
<h1>Happy Birthday!</h1>
--fcc-editable-region--
<p class="message">
Wishing you all the happiness and joy on your special day!
</p>
--fcc-editable-region--
--fcc-editable-region--
</div>
</body>
</html>
```
```css

9
curriculum/challenges/english/blocks/workshop-greeting-card/672b4434dd6d6a1edc405419.md
View File

@ -70,17 +70,14 @@ assert.match(document.querySelectorAll(".card-links > a")[1].href, /#share$/);
<p class="message">
Wishing you all the happiness and joy on your special day!
</p>
<div class="card-links">
--fcc-editable-region--
<div class="card-links"></div>
--fcc-editable-region--
</div>
</div>
</body>
</html>
```
```css

7
curriculum/challenges/english/blocks/workshop-greeting-card/672e410ddd98b409594890b6.md
View File

@ -45,24 +45,19 @@ assert.strictEqual(document.querySelectorAll("section")[1].id, "share");
<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>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```
```css

18
curriculum/challenges/english/blocks/workshop-greeting-card/672e44e811e610232fead333.md
View File

@ -51,28 +51,22 @@ assert.strictEqual(document.querySelector("#send").children[1].innerText.trim(),
<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>
--fcc-editable-region--
<section id="send"></section>
--fcc-editable-region--
<section id="share"></section>
<section id="send">
--fcc-editable-region--
--fcc-editable-region--
</section>
<section id="share"></section>
</body>
</html>
```
```css

24
curriculum/challenges/english/blocks/workshop-greeting-card/67332db0f793bf08f2a18528.md
View File

@ -53,31 +53,25 @@ assert.strictEqual(document.querySelector("#share").children[1].innerText.trim()
<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>
--fcc-editable-region--
<section id="share"></section>
--fcc-editable-region--
<section id="send">
<h2>Sending your card...</h2>
<p>Card successfully sent to your recipient!</p>
</section>
<section id="share">
--fcc-editable-region--
--fcc-editable-region--
</section>
</body>
</html>
```
```css

24
curriculum/challenges/english/blocks/workshop-greeting-card/67332e9debcc820d18e3e169.md
View File

@ -39,30 +39,24 @@ assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card:hover")?.getPropert
<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>
<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
@ -84,7 +78,5 @@ body {
--fcc-editable-region--
--fcc-editable-region--
```

28
curriculum/challenges/english/blocks/workshop-greeting-card/67332fff82eb28128f08ec2c.md
View File

@ -41,30 +41,24 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card:hover")?.getP
<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>
<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
@ -84,11 +78,11 @@ body {
box-shadow: 0 4px 8px gray;
}
--fcc-editable-region--
.card:hover {
background-color: khaki;
--fcc-editable-region--
--fcc-editable-region--
}
--fcc-editable-region--
```

28
curriculum/challenges/english/blocks/workshop-greeting-card/67333082ab35e414eb4ea70d.md
View File

@ -61,30 +61,24 @@ assert.oneOf(
<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>
<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
@ -95,8 +89,6 @@ body {
background-color: brown;
}
--fcc-editable-region--
.card {
background-color: white;
max-width: 400px;
@ -104,6 +96,9 @@ body {
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px gray;
--fcc-editable-region--
--fcc-editable-region--
}
.card:hover {
@ -111,5 +106,4 @@ body {
transform: scale(1.1);
}
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/6733319f1d586b1923e029e3.md
View File

@ -44,30 +44,24 @@ assert.strictEqual(
<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>
<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
@ -95,7 +89,5 @@ body {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
View File

@ -44,30 +44,24 @@ assert.strictEqual(
<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>
<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
@ -93,11 +87,11 @@ body {
transform: scale(1.1);
}
--fcc-editable-region--
h1::before {
content: "🥳 ";
}
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/673333130a2c40204162f0c7.md
View File

@ -48,30 +48,24 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".message")?.getProp
<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>
<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
@ -107,7 +101,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/6733352ce2a5642827b4f7f0.md
View File

@ -55,30 +55,24 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links")?.getP
<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>
<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
@ -119,7 +113,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

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

@ -76,30 +76,24 @@ assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPrope
<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>
<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
@ -146,7 +140,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/673338ebd152d736d1bd2aa4.md
View File

@ -44,30 +44,24 @@ assert.oneOf(
<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>
<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
@ -123,7 +117,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

29
curriculum/challenges/english/blocks/workshop-greeting-card/67333a3a400b0a3c68854bcc.md
View File

@ -39,30 +39,24 @@ assert.oneOf(
<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>
<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
@ -107,8 +101,6 @@ h1::after {
justify-content: space-around;
}
--fcc-editable-region--
.card-links a {
text-decoration: none;
font-size: 1em;
@ -116,9 +108,10 @@ h1::after {
border-radius: 5px;
color: white;
background-color: midnightblue;
}
--fcc-editable-region--
--fcc-editable-region--
}
.card-links a:hover {
background-color: orangered;

24
curriculum/challenges/english/blocks/workshop-greeting-card/67333aa0e231d43e7556c644.md
View File

@ -42,30 +42,24 @@ assert.oneOf(
<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>
<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
@ -126,7 +120,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/67333b1d5f4a7340a121973a.md
View File

@ -42,30 +42,24 @@ assert.strictEqual(
<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>
<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
@ -130,7 +124,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/67333ba820f99c43904c9eff.md
View File

@ -39,30 +39,24 @@ assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a:visited")?.
<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>
<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
@ -131,7 +125,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/67333c34e357d34620217615.md
View File

@ -69,30 +69,24 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle("section").getProper
<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>
<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
@ -165,7 +159,5 @@ h1::after {
--fcc-editable-region--
--fcc-editable-region--
```

24
curriculum/challenges/english/blocks/workshop-greeting-card/67333d70431f8a4b02596f3c.md
View File

@ -50,30 +50,24 @@ assert.strictEqual(
<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>
<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
@ -154,7 +148,5 @@ section {
--fcc-editable-region--
--fcc-editable-region--
```

27
curriculum/challenges/english/blocks/workshop-greeting-card/67333f5462f7aa53fc47bb2f.md
View File

@ -50,30 +50,24 @@ assert.strictEqual(
<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>
<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
@ -144,20 +138,21 @@ h1::after {
color: crimson;
}
--fcc-editable-region--
section {
margin: 20px auto;
max-width: 600px;
background-color: whitesmoke;
padding: 20px;
border-radius: 10px;
--fcc-editable-region--
}
section:hover{
transform: skewX(10deg);
}
--fcc-editable-region--
```