diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 5981bcbb9ee..1b8382e9a24 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2055,7 +2055,13 @@
"In these lecture videos, you will learn about working with pseudo-classes and pseudo-elements in CSS."
]
},
- "ohhu": { "title": "58", "intro": [] },
+ "workshop-greeting-card": {
+ "title": "Design a Greeting Card",
+ "intro": [
+ "In the previous lecture videos, you learned how to work with the different types of pseudo-classes.",
+ "In this workshop, you will have a chance to practice what you have learned by designing a greeting card."
+ ]
+ },
"lab-job-application-form": {
"title": "Build a Job Application Form",
"intro": [
diff --git a/client/src/pages/learn/full-stack-developer/workshop-greeting-card/index.md b/client/src/pages/learn/full-stack-developer/workshop-greeting-card/index.md
new file mode 100644
index 00000000000..8d3f85a0503
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-greeting-card/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Design a Greeting Card
+block: workshop-greeting-card
+superBlock: full-stack-developer
+---
+
+## Introduction to the Design a Greeting Card
+
+This is a test for the new project-based curriculum.
diff --git a/curriculum/challenges/_meta/workshop-greeting-card/meta.json b/curriculum/challenges/_meta/workshop-greeting-card/meta.json
new file mode 100644
index 00000000000..2644a05e5db
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-greeting-card/meta.json
@@ -0,0 +1,121 @@
+{
+ "name": "Design a Greeting Card",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-greeting-card",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "6720b1f2680ec706ed534acf",
+ "title": "Step 1"
+ },
+ {
+ "id": "6720b3191bbafd269bae0ae8",
+ "title": "Step 2"
+ },
+ {
+ "id": "6720b7f3155a9278d6b6a8b8",
+ "title": "Step 3"
+ },
+ {
+ "id": "6720bbb38f697e2364f41c0e",
+ "title": "Step 4"
+ },
+ {
+ "id": "6728fda085006772a247e779",
+ "title": "Step 5"
+ },
+ {
+ "id": "6729005c87b6320356ac1140",
+ "title": "Step 6"
+ },
+ {
+ "id": "672b42241c0c6515f26786f4",
+ "title": "Step 7"
+ },
+ {
+ "id": "672b4434dd6d6a1edc405419",
+ "title": "Step 8"
+ },
+ {
+ "id": "672e410ddd98b409594890b6",
+ "title": "Step 9"
+ },
+ {
+ "id": "672e44e811e610232fead333",
+ "title": "Step 10"
+ },
+ {
+ "id": "67332db0f793bf08f2a18528",
+ "title": "Step 11"
+ },
+ {
+ "id": "67332e9debcc820d18e3e169",
+ "title": "Step 12"
+ },
+ {
+ "id": "67332fff82eb28128f08ec2c",
+ "title": "Step 13"
+ },
+ {
+ "id": "67333082ab35e414eb4ea70d",
+ "title": "Step 14"
+ },
+ {
+ "id": "6733319f1d586b1923e029e3",
+ "title": "Step 15"
+ },
+ {
+ "id": "673332a6b63f9f1e1f81ba9b",
+ "title": "Step 16"
+ },
+ {
+ "id": "673333130a2c40204162f0c7",
+ "title": "Step 17"
+ },
+ {
+ "id": "6733352ce2a5642827b4f7f0",
+ "title": "Step 18"
+ },
+ {
+ "id": "673337337f794d3025ded433",
+ "title": "Step 19"
+ },
+ {
+ "id": "673338ebd152d736d1bd2aa4",
+ "title": "Step 20"
+ },
+ {
+ "id": "67333a3a400b0a3c68854bcc",
+ "title": "Step 21"
+ },
+ {
+ "id": "67333aa0e231d43e7556c644",
+ "title": "Step 22"
+ },
+ {
+ "id": "67333b1d5f4a7340a121973a",
+ "title": "Step 23"
+ },
+ {
+ "id": "67333ba820f99c43904c9eff",
+ "title": "Step 24"
+ },
+ {
+ "id": "67333c34e357d34620217615",
+ "title": "Step 25"
+ },
+ {
+ "id": "67333d70431f8a4b02596f3c",
+ "title": "Step 26"
+ },
+ {
+ "id": "67333f5462f7aa53fc47bb2f",
+ "title": "Step 27"
+ }
+ ],
+ "helpCategory": "HTML-CSS",
+ "blockLayout": "challenge-grid",
+ "blockType": "workshop"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b1f2680ec706ed534acf.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b1f2680ec706ed534acf.md
new file mode 100644
index 00000000000..c04773ac1a4
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b1f2680ec706ed534acf.md
@@ -0,0 +1,64 @@
+---
+id: 6720b1f2680ec706ed534acf
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will practice working with different pseudo-classes and pseudo-elements by designing a greeting card. The HTML boilerplate has been provided for you.
+
+Start the workshop by linking the `styles.css` file.
+
+# --hints--
+
+Your `link` element should be within your `head` element.
+
+```js
+const link = document.querySelector('head > link');
+assert.isNotNull(link);
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.match(linkHrefValue, /^(\.\/)?styles\.css$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+--fcc-editable-region--
+
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b3191bbafd269bae0ae8.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b3191bbafd269bae0ae8.md
new file mode 100644
index 00000000000..86a4ddfb32a
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b3191bbafd269bae0ae8.md
@@ -0,0 +1,92 @@
+---
+id: 6720b3191bbafd269bae0ae8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `div` element that has an `id` of `greeting-card` and a `class` of `card`.
+
+Inside the `div` element, add an `h1` with the text `Happy Birthday!`. Then add a paragraph element with a `class` called `message` and the text `Wishing you all the happiness and joy on your special day!`.
+
+# --hints--
+
+You should have a `div` element.
+
+```js
+assert.exists(document.querySelector("div"));
+```
+
+The `div` element should have an `id` of `greeting-card`.
+
+```js
+assert.strictEqual(document.querySelector("div").id, "greeting-card");
+```
+
+The `div` element should have a `class` of `card`.
+
+```js
+assert.strictEqual(document.querySelector("#greeting-card").className, "card");
+```
+
+You should have an `h1` element inside the `div` element.
+
+```js
+assert.exists(document.querySelector("div > h1"));
+```
+
+The `h1` element should contain the text `Happy Birthday!`.
+
+```js
+assert.strictEqual(document.querySelector("div > h1").textContent.trim(), "Happy Birthday!");
+```
+
+You should have a `p` element inside the `div`.
+
+```js
+assert.exists(document.querySelector("div > p"));
+```
+
+The `p` element should have a `class` of `message`.
+
+```js
+assert.exists(document.querySelector("div > p.message"));
+```
+
+The `p` element should contain the text `Wishing you all the happiness and joy on your special day!`.
+
+```js
+assert.strictEqual(document.querySelector("div > p.message").textContent.trim(), "Wishing you all the happiness and joy on your special day!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md
new file mode 100644
index 00000000000..901c19a8114
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md
@@ -0,0 +1,76 @@
+---
+id: 6720b7f3155a9278d6b6a8b8
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Now it is time to style your greeting card.
+
+Add a selector for the `body` element, then:
+
+- change the `font-family` to be `Arial` followed by the generic `sans-serif`,
+- give a padding on all sides of `40px`,
+- set the `text-align` property to `center`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle("body"));
+```
+
+You should set `font-family` to `"Arial", sans-serif` in the `body` selector.
+
+```js
+assert.oneOf(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("font-family"), ["'Arial', sans-serif", "Arial, sans-serif", '"Arial", sans-serif']);
+```
+
+You should set `padding` to `40px` in the `body` selector.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("padding"), "40px");
+```
+
+You should set `text-align` to `center` in the `body` selector.`
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("text-align"), "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+```
+
+```css
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720bbb38f697e2364f41c0e.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720bbb38f697e2364f41c0e.md
new file mode 100644
index 00000000000..6912836b58f
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720bbb38f697e2364f41c0e.md
@@ -0,0 +1,70 @@
+---
+id: 6720bbb38f697e2364f41c0e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Now it's time for some color. Give the `body` a `background-color` of `brown` and also give the `.card` a `background-color` of `white`.
+
+# --hints--
+
+The `body` element should have a `background-color` of `brown`.
+
+```js
+assert.oneOf(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("background-color").toUpperCase(), ["BROWN", "#A52A2A", "RGB(165, 42, 42)", "HSL(0, 59%, 41%)"]);
+```
+
+You should have a `.card` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".card"));
+```
+
+The `.card` element should have a `background-color` of `white`.
+
+```js
+assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("background-color").toLowerCase(), ["white", "#fff", "#ffffff", "rgb(255, 255, 255)", "hsl(0, 0%, 100%)"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+```
+
+```css
+
+--fcc-editable-region--
+
+body {
+ font-family: Arial, sans-serif;
+ padding: 40px;
+ text-align: center;
+
+}
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6728fda085006772a247e779.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6728fda085006772a247e779.md
new file mode 100644
index 00000000000..5b48d5c5d37
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6728fda085006772a247e779.md
@@ -0,0 +1,74 @@
+---
+id: 6728fda085006772a247e779
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Give `.card` a `max-width` of `400px`, a `padding` of `40px` on all sides, and a `margin` of `0` for top and bottom and `auto` for left and right (use the shorthand property).
+
+# --hints--
+
+`.card` should have a `max-width` of `400px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("max-width"), "400px");
+```
+
+`.card` should have a `padding` of `40px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("padding"), "40px");
+```
+
+`.card` should have a `margin` of `0 auto`.
+
+```js
+assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("margin"), ["0 auto", "0 auto 0 auto", "0 auto 0", "0px auto", "0px auto 0px auto", "0px auto 0px"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: Arial, sans-serif;
+ padding: 40px;
+ text-align: center;
+ background-color: brown;
+}
+
+--fcc-editable-region--
+
+.card {
+ background-color: white;
+
+}
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6729005c87b6320356ac1140.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6729005c87b6320356ac1140.md
new file mode 100644
index 00000000000..f4ed2183865
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6729005c87b6320356ac1140.md
@@ -0,0 +1,73 @@
+---
+id: 6729005c87b6320356ac1140
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.card` element needs some more styling: add a `border-radius` of `10px`, and a `box-shadow` with a value of `0 4px 8px gray`.
+
+# --hints--
+
+The `.card` selector should have a property `border-radius` with value `10px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("border-radius"), "10px");
+```
+
+The `.card` selector should have a property `box-shadow` with value `0 4px 8px gray`.
+
+```js
+assert.strictEqual(
+ new __helpers.CSSHelp(document).getStyle(".card")?.getPropertyValue("box-shadow"),
+ "gray 0px 4px 8px" // this is the value outputted by getPropertyValue
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: Arial, sans-serif;
+ padding: 40px;
+ text-align: center;
+ background-color: brown;
+}
+
+--fcc-editable-region--
+
+.card {
+ background-color: white;
+ max-width: 400px;
+ padding: 40px;
+ margin: 0 auto;
+}
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b42241c0c6515f26786f4.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b42241c0c6515f26786f4.md
new file mode 100644
index 00000000000..ee9757bb57e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b42241c0c6515f26786f4.md
@@ -0,0 +1,75 @@
+---
+id: 672b42241c0c6515f26786f4
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Now add a new `div` below the `.message` element. The new `div` should have a `class` attribute of `card-links`.
+
+# --hints--
+
+The last element inside `#greeting-card` should be a `div`.
+
+```js
+assert.strictEqual(document.querySelector("#greeting-card").lastElementChild.tagName, "DIV");
+```
+
+The new `div` should have a `class` of `card-links`.
+
+```js
+assert.strictEqual(document.querySelector("#greeting-card").lastElementChild.className, "card-links");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ --fcc-editable-region--
+
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+```
+
+```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;
+}
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
new file mode 100644
index 00000000000..017b485cb56
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -0,0 +1,103 @@
+---
+id: 672b4434dd6d6a1edc405419
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add two `a` elements inside the `.card-links` element.
+
+The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
+
+The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+
+# --hints--
+
+The first `a` element inside `.card-links` should have a text of `Send Card`.
+
+```js
+assert.strictEqual(document.querySelectorAll(".card-links > a")[0].innerText, "Send Card");
+```
+
+The first `a` element should have a `class` with a value of `send-link`.
+
+```js
+assert.strictEqual(document.querySelectorAll(".card-links > a")[0].className, "send-link");
+```
+
+The first `a` element should have an `href` with a value of `#send`.
+
+```js
+assert.match(document.querySelectorAll(".card-links > a")[0].href, /#send$/);
+```
+
+The second `a` element inside `.card-links` should have a text of `Share on Social Media`.
+
+```js
+assert.strictEqual(document.querySelectorAll(".card-links > a")[1].innerText, "Share on Social Media");
+```
+
+The second `a` element should have a `class` with a value of `share-link`.
+
+```js
+assert.strictEqual(document.querySelectorAll(".card-links > a")[1].className, "share-link");
+```
+
+The second `a` element should have an `href` with a value of `#share`.
+
+```js
+assert.match(document.querySelectorAll(".card-links > a")[1].href, /#share$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+ Wishing you all the happiness and joy on your special day!
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+```
+
+```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;
+}
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67332db0f793bf08f2a18528.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67332db0f793bf08f2a18528.md
new file mode 100644
index 00000000000..c912996dc11
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67332db0f793bf08f2a18528.md
@@ -0,0 +1,100 @@
+---
+id: 67332db0f793bf08f2a18528
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to fill the second `section`!
+
+Add an `h2` to `#share` that contains the text `Sharing your card...`, then add a `p` element with the text `Your card was shared on social media!`.
+
+# --hints--
+
+The `#share` element should contain a `h2` element.
+
+```js
+assert.exists(document.querySelector("#share > h2"));
+```
+
+The `h2` element should contain the text `Sharing your card...`.
+
+```js
+assert.strictEqual(document.querySelector("#share > h2").innerText.trim(), "Sharing your card...");
+```
+
+The second element inside `#share` should be a `p` element.
+
+```js
+assert.strictEqual(document.querySelector("#share").children[1].tagName, "P");
+```
+
+The `p` element should have the text `Your card was shared on social media!`.
+
+```js
+assert.strictEqual(document.querySelector("#share").children[1].innerText.trim(), "Your card was shared on social media!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+
+```
+
+```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;
+}
+
+--fcc-editable-region--
+
+.card:hover {
+ background-color: khaki;
+}
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67333082ab35e414eb4ea70d.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67333082ab35e414eb4ea70d.md
new file mode 100644
index 00000000000..3dfe38800ee
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/67333082ab35e414eb4ea70d.md
@@ -0,0 +1,117 @@
+---
+id: 67333082ab35e414eb4ea70d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+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:
+
+```css
+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:
+
+```css
+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.
+
+# --hints--
+
+The `.card` selector should have a property `transition` set to `transform 0.3s, background-color 0.3s ease`.
+
+```js
+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
+ ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+
+ Wishing you all the happiness and joy on your special day!
+
+
+
+
+
+
+```
+
+```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: " 🥳";
+}
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6733352ce2a5642827b4f7f0.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6733352ce2a5642827b4f7f0.md
new file mode 100644
index 00000000000..f1ec44f479f
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6733352ce2a5642827b4f7f0.md
@@ -0,0 +1,127 @@
+---
+id: 6733352ce2a5642827b4f7f0
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Add a `.card-links` selector, and set the `margin-top` property to `20px`.
+
+You can add `display: flex` to set an element to use flexbox, you will learn more about flexbox later in the course, you can consider this a small preview.
+
+To space the two links so that they have the same space around, add a `display` property set to `flex`, and a `justify-content` set to `space-around`.
+
+# --hints--
+
+You should have a `.card-links` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links"));
+```
+
+The `.card-links` selector should have a `margin-top` property set to `20px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links")?.getPropertyValue("margin-top"), "20px");
+```
+
+The `.card-links` selector should have a `display` property set to `flex`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links")?.getPropertyValue("display"), "flex");
+```
+
+The `.card-links` selector should have a `justify-content` property set to `space-around`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links")?.getPropertyValue("justify-content"), "space-around");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Greeting Card
+
+
+
+
+
Happy Birthday!
+
+
+ Wishing you all the happiness and joy on your special day!
+