mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
feat(curriculum): add greeting card workshop to cert (#56976)
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Ilenia
GitHub
parent
a01b9265a8
commit
3f62648aeb
@ -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": [
|
||||
|
||||
@ -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.
|
||||
121
curriculum/challenges/_meta/workshop-greeting-card/meta.json
Normal file
121
curriculum/challenges/_meta/workshop-greeting-card/meta.json
Normal file
@ -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"
|
||||
}
|
||||
@ -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--
|
||||
|
||||
<!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>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<p class="message">
|
||||
Wishing you all the happiness and joy on your special day!
|
||||
</p>
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<div class="card-links"></div>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 672e410ddd98b409594890b6
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add two `section` elements, one after the other. The first should have an `id` of `send`, the second one should have an `id` of `share`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `section` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("section"), 2);
|
||||
```
|
||||
|
||||
The first `section` should have an `id` of `send`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("section")[0].id, "send");
|
||||
```
|
||||
|
||||
The second `section` should have an `id` of `share`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("section")[1].id, "share");
|
||||
```
|
||||
|
||||
# --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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 672e44e811e610232fead333
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `h2` to `#send` that contains the text `Sending your card...`, then add a `p` element with the text `Card successfully sent to your recipient!`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#send` element should contain a `h2` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("#send > h2"));
|
||||
```
|
||||
|
||||
The `h2` element should contain the text `Sending your card...`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("#send > h2").innerText.trim(), "Sending your card...");
|
||||
```
|
||||
|
||||
The second element inside `#send` should be a `p` element.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("#send").children[1].tagName, "P");
|
||||
```
|
||||
|
||||
The `p` element should have the text `Card successfully sent to your recipient!`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("#send").children[1].innerText.trim(), "Card successfully sent to your recipient!");
|
||||
```
|
||||
|
||||
# --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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<section id="send"></section>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<section id="share"></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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<section id="share"></section>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 67332e9debcc820d18e3e169
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new selector that changes the `background-color` of the `.card` element to `khaki` when it is hovered over.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.card:hover` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".card:hover"));
|
||||
```
|
||||
|
||||
The `.card:hover` selector should have a `background-color` set to `khaki`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card:hover")?.getPropertyValue("background-color").toLowerCase(), ["khaki", "#f0e68c", "rgb(240, 230, 140)", "hsl(54, 77%, 75%)"]);
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 67332fff82eb28128f08ec2c
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `transform` property can transform the element look. For example, giving it a value of `scale(0.9)` would make the element 10% smaller.
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
```
|
||||
|
||||
Add a `transform` property to the `.card:hover` selector and set to `scale(1.1)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `.card:hover` selector should have `transform: scale(1.1)`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card:hover")?.getPropertyValue("transform"), "scale(1.1)");
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.card:hover {
|
||||
background-color: khaki;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px gray;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: khaki;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 6733319f1d586b1923e029e3
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new selector that targets the pseudoelement `::before` of the `h1` element,
|
||||
|
||||
Use the `content` property to put the emoji 🥳 in front of the title: give it a value of `"🥳 "` (note there is a space after the emoji).
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `h1::before` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("h1::before"));
|
||||
```
|
||||
|
||||
The `h1::before` selector should have a `content` property set to `"🥳 "`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document).getStyle("h1::before")?.getPropertyValue("content"),
|
||||
`"🥳 "`
|
||||
);
|
||||
```
|
||||
|
||||
# --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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 673332a6b63f9f1e1f81ba9b
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can do something similar to add the emoji also after the title: create a `h1::after` selector, give it a `content` property and set the value to `" 🥳"` (note there is a space before the emoji).
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `h1::after` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("h1::after"));
|
||||
```
|
||||
|
||||
The `h1::after` selector should have a `content` property set to `" 🥳"`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document).getStyle("h1::after")?.getPropertyValue("content"),
|
||||
`" 🥳"`
|
||||
);
|
||||
```
|
||||
|
||||
# --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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1::before {
|
||||
content: "🥳 ";
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 673333130a2c40204162f0c7
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.message` element needs some styling. Give it:
|
||||
|
||||
- a `font-size` of `1.2em`,
|
||||
- a `color` of `gray`,
|
||||
- a `margin-bottom` of `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.message` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".message"));
|
||||
```
|
||||
|
||||
The `.message` selector should have a `font-size` property set to `1.2em`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".message")?.getPropertyValue("font-size"), "1.2em");
|
||||
```
|
||||
|
||||
The `.message` selector should have a `color` property set to `gray`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".message")?.getPropertyValue("color"), "gray");
|
||||
```
|
||||
|
||||
The `.message` selector should have a `margin-bottom` property set to `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".message")?.getPropertyValue("margin-bottom"), "20px");
|
||||
```
|
||||
|
||||
# --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: " 🥳";
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -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
|
||||
<!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;
|
||||
color: gray;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 673337337f794d3025ded433
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --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 `note`.
|
||||
|
||||
```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;
|
||||
color: gray;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-links {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 673338ebd152d736d1bd2aa4
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a pseudo-class selector that targets the `.card-links a` elements when hovered over.
|
||||
|
||||
The `background-color` should change to `orangered`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.card-links a:hover` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a:hover"));
|
||||
```
|
||||
|
||||
The `.card-links a:hover` selector should have the `background-color` property set to `orangered`.
|
||||
|
||||
```js
|
||||
assert.oneOf(
|
||||
new __helpers.CSSHelp(document).getStyle(".card-links a:hover")?.getPropertyValue("background-color").toLowerCase(),
|
||||
["orangered", "#ff4500", "rgb(255, 69, 0)", "hsl(16, 100%, 50%)"]
|
||||
);
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 67333a3a400b0a3c68854bcc
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `transition` property to the `.card-links a` selector and give it a value of `background-color 0.3s ease`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `.card-links a` selector should have a `transition` property set to `background-color 0.3s ease`.
|
||||
|
||||
```js
|
||||
assert.oneOf(
|
||||
new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("transition"),
|
||||
[
|
||||
"background-color 0.3s ease 0s", // this is what comes out of `getPropertyValue`
|
||||
"background-color 0.3s" // different environment got this
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
# --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;
|
||||
color: gray;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-links {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.card-links a {
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 67333aa0e231d43e7556c644
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new selector that targerts the `.card-links a` elements when they are active. Set the `background-color` to `midnightblue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.card-links a:active` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a:active"));
|
||||
```
|
||||
|
||||
The `.card-links a:active` selector should have a `background-color` of `midnightblue`.
|
||||
|
||||
```js
|
||||
assert.oneOf(
|
||||
new __helpers.CSSHelp(document).getStyle(".card-links a:active")?.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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 67333b1d5f4a7340a121973a
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new selector that targets the `.card-links a` elements when focused. Set the `outline` property to `2px solid yellow`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.card-links a:focus` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a:focus"));
|
||||
```
|
||||
|
||||
The `.card-links a:focus` selector should have an `outline` property set to `2px solid yellow`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document).getStyle(".card-links a:focus")?.getPropertyValue("outline"),
|
||||
"yellow solid 2px" // it comes out like this from getPropertyValue
|
||||
);
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 67333ba820f99c43904c9eff
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new selector that targets the `.card-links a` elements if they have already been visited. Set the property `color` to `crimson`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.card-links a:visited` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a:visited"));
|
||||
```
|
||||
|
||||
The `.card-links a:visited` selector should have the property `color` set to `crimson`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle(".card-links a:visited")?.getPropertyValue("color").toLowerCase(), ["crimson", "#dc143c", "rgb(220, 20, 60)", "hsl(348, 83%, 47%)"]);
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
.card-links a:focus {
|
||||
outline: 2px solid yellow;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 67333c34e357d34620217615
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a selector for the `section` elements, and give them:
|
||||
|
||||
- a `margin` property set to `20px auto`,
|
||||
- a `max-width` set to `600px`.
|
||||
- a `background-color` property set to `whitesmoke`
|
||||
- a `padding` property set to `20px`
|
||||
- a `border-radius` property set to `10px`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `section` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("section"));
|
||||
```
|
||||
|
||||
The `section` selector should have a `margin` property set to `20px auto`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle("section").getPropertyValue("margin"), ["20px auto", "20px auto 20px", "20px auto 20px auto"]);
|
||||
```
|
||||
|
||||
The `section` selector should have a `max-width` property set to `600px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("section").getPropertyValue("max-width"), "600px");
|
||||
```
|
||||
|
||||
The `section` selector should have a `background-color` property set to `whitesmoke`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle("section")?.getPropertyValue("background-color").toLowerCase(), ["whitesmoke", "#f5f5f5", "rgb(245, 245, 245)", "hsl(0, 0%, 96%)"]);
|
||||
```
|
||||
|
||||
The `section` selector should have a `padding` property set to `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("section").getPropertyValue("padding"), "20px");
|
||||
```
|
||||
|
||||
The `section` selector should have a `border-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("section").getPropertyValue("border-radius"), "10px");
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
.card-links a:focus {
|
||||
outline: 2px solid yellow;
|
||||
}
|
||||
|
||||
.card-links a:visited {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 67333d70431f8a4b02596f3c
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Another value that can be used for the `transform` property is `skewX`, this function skews the element horizontally.
|
||||
|
||||
```css
|
||||
div {
|
||||
transform: skewX(7deg);
|
||||
}
|
||||
```
|
||||
|
||||
Add a selector that targets the `section` elements when hovered. Set the `transform` property to `skewX(10deg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `section:hover` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("section:hover"));
|
||||
```
|
||||
|
||||
The `section:hover` selector should have a `transform` property set to `skewX(10deg)`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document).getStyle("section:hover")?.getPropertyValue("transform"),
|
||||
"skewX(10deg)"
|
||||
);
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
.card-links a:focus {
|
||||
outline: 2px solid yellow;
|
||||
}
|
||||
|
||||
.card-links a:visited {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 20px auto;
|
||||
max-width: 600px;
|
||||
background-color: whitesmoke;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,292 @@
|
||||
---
|
||||
id: 67333f5462f7aa53fc47bb2f
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As last thing to complete this project, add a `display` property set to `none` to the `section` selector.
|
||||
|
||||
After that, create a `section:target` selector, and add there a `display` property set to `block` so that the `section` elements are visible only when the links are clicked.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `section` selector should have a `display` property set to `none`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("section")?.getPropertyValue("display"), "none");
|
||||
```
|
||||
|
||||
You should create a `section:target` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("section:target"));
|
||||
```
|
||||
|
||||
The `section:target` selector should have a `display` property set to `block`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document).getStyle("section:target")?.getPropertyValue("display"),
|
||||
"block"
|
||||
);
|
||||
```
|
||||
|
||||
# --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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
.card-links a:focus {
|
||||
outline: 2px solid yellow;
|
||||
}
|
||||
|
||||
.card-links a:visited {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
section {
|
||||
margin: 20px auto;
|
||||
max-width: 600px;
|
||||
background-color: whitesmoke;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
section:hover{
|
||||
transform: skewX(10deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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;
|
||||
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;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-links a:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.card-links a:active {
|
||||
background-color: midnightblue;
|
||||
}
|
||||
|
||||
.card-links a:focus {
|
||||
outline: 2px solid yellow;
|
||||
}
|
||||
|
||||
.card-links a:visited {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 20px auto;
|
||||
max-width: 600px;
|
||||
background-color: whitesmoke;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
section:hover{
|
||||
transform: skewX(10deg);
|
||||
}
|
||||
|
||||
section:target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
```
|
||||
@ -128,6 +128,7 @@
|
||||
{
|
||||
"dashedName": "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css"
|
||||
},
|
||||
{ "dashedName": "workshop-greeting-card" },
|
||||
{ "dashedName": "lab-job-application-form" },
|
||||
{ "dashedName": "review-css-pseudo-classes" },
|
||||
{ "dashedName": "quiz-css-pseudo-classes" }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user