mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
feat(curriculum): add tailwind pricing component workshop (#61238)
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa <2051070+scissorsneedfoodtoo@users.noreply.github.com> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Kolade Chris
co-authored by
Jessica Wilkins
Kristofer Koishigawa
Huyen Nguyen
Dario
Jessica Wilkins
Kristofer Koishigawa
Huyen Nguyen
Dario
parent
27c2dacc46
commit
b0ab20bac6
@@ -4144,6 +4144,13 @@
|
||||
"In this workshop, you will build a call to action (CTA) component using Tailwind CSS."
|
||||
]
|
||||
},
|
||||
"workshop-tailwind-pricing-component": {
|
||||
"title": "Build a Pricing Component",
|
||||
"intro": [
|
||||
"In this workshop, you will build a pricing component using Tailwind CSS.",
|
||||
"You will practice working with Tailwind CSS grid utility classes."
|
||||
]
|
||||
},
|
||||
"lab-music-shopping-cart-page": {
|
||||
"title": "Build a Music Shopping Cart Page",
|
||||
"intro": [
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Pricing Component
|
||||
block: workshop-tailwind-pricing-component
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a Pricing Component
|
||||
|
||||
This workshop focuses on how to work with Tailwind CSS grid utility classes to build a pricing component.
|
||||
@@ -0,0 +1,213 @@
|
||||
{
|
||||
"name": "Build a Pricing Component",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "workshop-tailwind-pricing-component",
|
||||
"superBlock": "full-stack-developer",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "686383abac6c625a84458ea9",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52eb",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52ec",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52ed",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52ee",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52ef",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "686386e76197458b7dfd52f9",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6864d9999f8a4e3f0d569a3f",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6864dafe72087c517e80f6e0",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6864dcea9ad9f86942ff0158",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6864df7ec0fc508ac3828ab5",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "6864e31ef17310b9e6aa376e",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6864e506a6f773d5e300c0b4",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "6864e996adaf0b13437f1d11",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "6864e580f94941dcfa2bb26d",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "6864ebcd123f7c335e92d6dd",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "6864ed58edec4b4aaeb571cc",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "6864f28c46eb6f00dccd5c54",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "6864f340223afc0f133868d1",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "6864f66df54d9d3abcd4fd31",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "6864f704409f85463386cd91",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "6864f7985a9b7e5285e27257",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "6864f81018a0085ae30afa9b",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "6864f8fef1584f68696e8e24",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "6864fa68aae44b80f7d0863c",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "6864fb24b8070f904768c24f",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "68667227c6b33aaf41d4e086",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "6866733f0b8f85bcb9587646",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "6866740a0f532cc7e9e21877",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "6866771fa1b958f7560a6863",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "686678efc0d9e60eb59ca029",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "68667a42c6784620c088505c",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "68667b354cdc432f3f83c846",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "68667bdd7e26613a6d013ac4",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "68667c33e3c13940ce87c40d",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "68667c8eca7580479ead76a0",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "68667cefaa5ad54e5ec212a4",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "68667da4251a7c59e083bb7e",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "68667e17e51bbf62bc6e1737",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "68667f8aa360b17a01982b7c",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "68668014d6a84384018dc302",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "6867c7b1f41ee104cf4aaa16",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "6867c8a8185485144ebbb453",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "6867c93aefc7751d197d1187",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "6867c9fd16b48f2abe22bdaa",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "68755a4d49de76991ec3763d",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "6867caa0dbbeb93570ec0069",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "6867cb70e797d142df4b88e5",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "6867cbfbbb4a9f4bc73b01e6",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "6867cca6236f87573044a39c",
|
||||
"title": "Step 50"
|
||||
}
|
||||
],
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 686383abac6c625a84458ea9
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will learn more about Tailwind CSS by using its grid utility classes to build a pricing component.
|
||||
|
||||
The basic HTML boilerplate has been provided for you. Start by creating an `h1` element with the text `Choose your listening plan`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h1"));
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `Choose your listening plan`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("h1")?.textContent, "Choose your listening plan");
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52eb
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `div` element under the `h1`. Inside that `div`, create another `div` element, and nest another `div` element inside it.
|
||||
|
||||
And inside the innermost `div`, create an `h2` element with the text `Listener`. This will represent the first pricing plan.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div"));
|
||||
```
|
||||
|
||||
You should create another `div` element inside the outer `div`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div > div"));
|
||||
```
|
||||
|
||||
You should create another `div` element inside the inner `div`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div > div > div"));
|
||||
```
|
||||
|
||||
You should create an `h2` with the text `Listener` inside the innermost `div` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div > div > div > h2")?.textContent, "Listener");
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52ec
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Under the `h2`, create a `p` element with the text `$0`. Then, inside that `p` element and after the text, create a `span` element with the text `/month`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `p` element with the text `$0`.
|
||||
|
||||
```js
|
||||
const p = document.querySelector("p");
|
||||
const pTextBeforeSpan = p.childNodes[0].textContent.trim();
|
||||
|
||||
assert.equal(pTextBeforeSpan, "$0");
|
||||
```
|
||||
|
||||
You should create a `span` element with the text `/month` inside the `p` element.
|
||||
|
||||
```js
|
||||
const spanText = document.querySelector("p > span")?.textContent;
|
||||
assert.equal(spanText, "/month");
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52ed
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Under the `p` element you just added, create another `p` element with the text `Start exploring millions of songs with basic features and ads.`. Under that, create an empty `ul` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create another `p` element with the text `Start exploring millions of songs with basic features and ads.`.
|
||||
|
||||
```js
|
||||
const paragraphs = document.querySelectorAll("p")
|
||||
|
||||
const targetP = Array.from(paragraphs).find(p =>
|
||||
p.textContent === "Start exploring millions of songs with basic features and ads."
|
||||
)
|
||||
assert.exists(targetP)
|
||||
```
|
||||
|
||||
You should create an empty `ul` element under the `p` element.
|
||||
|
||||
```js
|
||||
const paragraphs = document.querySelectorAll("p")
|
||||
|
||||
const targetP = Array.from(paragraphs).find(p =>
|
||||
p.textContent === "Start exploring millions of songs with basic features and ads."
|
||||
)
|
||||
|
||||
const ul = targetP.nextElementSibling
|
||||
assert.equal(ul?.tagName, "UL")
|
||||
assert.isEmpty(ul?.innerHTML.trim())
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52ee
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `ul`, create two list items. Inside the first list item, create a `span` element and add the HTML entity `✓` as its text. Right after that `span` but within the list item, add the text `Ad-supported streaming`.
|
||||
|
||||
Inside the second list item, create a `span` element and add the entity `✓` as its text. Right after that `span`, but within the list item, add the text `Curated playlists`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two list items inside your `ul` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("ul > li"), 2)
|
||||
```
|
||||
|
||||
Your first `li` element should have a `span` element with the HTML character entity `✓` in it.
|
||||
|
||||
```js
|
||||
const listItems = document.querySelectorAll("ul > li")
|
||||
const firstSpan = listItems[0].querySelector("span")
|
||||
|
||||
assert.equal(firstSpan?.textContent, "✓")
|
||||
```
|
||||
|
||||
Your first `li` element should have the text `Ad-supported streaming` just after the `span` element.
|
||||
|
||||
```js
|
||||
const listItems = document.querySelectorAll("ul > li");
|
||||
const span = listItems[0].querySelector("span");
|
||||
|
||||
assert.equal(span.nextSibling?.textContent.trim(), "Ad-supported streaming");
|
||||
```
|
||||
|
||||
Your second `li` element should have a `span` element with the HTML character entity `✓` in it.
|
||||
|
||||
```js
|
||||
const listItems = document.querySelectorAll("ul > li")
|
||||
const secondSpan = listItems[1].querySelector("span")
|
||||
|
||||
assert.equal(secondSpan?.textContent, "✓")
|
||||
```
|
||||
|
||||
Your second `li` element should have the text `Curated playlists` just after the `span` element.
|
||||
|
||||
```js
|
||||
const listItems = document.querySelectorAll("ul > li");
|
||||
const span = listItems[1].querySelector("span");
|
||||
|
||||
assert.equal(span.nextSibling?.textContent.trim(), "Curated playlists");
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>Start exploring millions of songs with basic features and ads.</p>
|
||||
<ul>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52ef
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll create a CTA button. A Call to Action (CTA) is a button or link designed to prompt a user to take a specific action, in this case, to start listening.
|
||||
|
||||
Outside the innermost `div`, create an anchor element with an `href` of `#` and the text `Start listening`.
|
||||
|
||||
That concludes the HTML for the first pricing card.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an anchor element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("a"))
|
||||
```
|
||||
|
||||
Your anchor element should have an `href` set to `#`.
|
||||
|
||||
```js
|
||||
const link = document.querySelector("a")
|
||||
assert.equal(link?.getAttribute("href"), "#")
|
||||
```
|
||||
|
||||
Your anchor element should have the text `Start listening`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("a")?.textContent, "Start listening")
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 686386e76197458b7dfd52f9
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The rest of the HTML has been provided for you. That includes the premium and family plan cards. So, it's time to style the HTML elements with Tailwind CSS.
|
||||
|
||||
Begin by giving the whole page a slightly grey background by assigning the `body` element a class of `bg-gray-100`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your body element should have the class `bg-gray-100`.
|
||||
|
||||
```js
|
||||
const bodyEl = document.querySelector("body");
|
||||
assert.equal(bodyEl.className, "bg-gray-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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>Choose your listening plan</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+133
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 6864d9999f8a4e3f0d569a3f
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, make the `h1` text distinguishable by assigning it a `class` set to `text-3xl` to make it bigger, `text-center` to center it, `font-semibold` to make it bolder, `text-gray-900` to make it darker, and `md:text-5xl` to make it bigger on medium and larger screen sizes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `text-3xl`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("text-3xl"))
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `text-center`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("text-center"))
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `text-gray-900`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("text-gray-900"))
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `md:text-5xl`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("md:text-5xl"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<h1>Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6864dafe72087c517e80f6e0
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `h1` text is too close to the top of the page and the text below it, so you should add some spacing around it.
|
||||
|
||||
In addition to the existing ones, assign the utility classes `mt-8 ` and `mb-12` to the `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `mt-8`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("mt-8"))
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `mb-12`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1")
|
||||
|
||||
assert.isTrue(h1El.classList.contains("mb-12"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<h1 class="text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 6864dcea9ad9f86942ff0158
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to work on the `div` element that wraps the three pricing cards. To arrange the cards, you can use Tailwind CSS's grid utility classes.
|
||||
|
||||
Here's how to assign a display of `grid` to an element using Tailwind:
|
||||
|
||||
```html
|
||||
<div class="grid">
|
||||
<div>Grid Item</div>
|
||||
<div>Grid Item</div>
|
||||
<div>Grid Item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Assign a class of `grid` to the `div` element that wraps the pricing cards.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `grid`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("grid"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a>Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a>Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 6864df7ec0fc508ac3828ab5
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
From regular CSS, you learned that assigning a display of `grid` to an element does not do anything until you specify the grid rows and columns. That's how it works in Tailwind, too.
|
||||
|
||||
In Tailwind, to assign a grid row and grid column, you'd use their respective utility classes like this:
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-[num] grid-rows-[num]">
|
||||
<div>Grid Item</div>
|
||||
<div>Grid Item</div>
|
||||
<div>Grid Item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Assign the wrapper `div` the utility classes `grid-cols-1` and `md:grid-cols-3`.
|
||||
|
||||
The `grid-cols-1` class arranges the three items in a single column, stacking them vertically. On medium and larger screens, `md:grid-cols-3` switches the layout to three columns, displaying the items side by side.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `grid-cols-1`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("grid-cols-1"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `md:grid-cols-3`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("md:grid-cols-3"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div class="grid ">
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 6864e31ef17310b9e6aa376e
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The grid items are too close to the left and right edges of the page, so you should work on the spacing.
|
||||
|
||||
Assign the class `max-w-6xl` to the `div` to set a fixed width of `72rem` and prevent the items from stretching too far across the page.
|
||||
|
||||
As that will push all of them to the left, add `mx-auto` to the `div` to center the items horizontally.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `max-w-6xl`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("max-w-6xl"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `mx-auto`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("mx-auto"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 ">
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 6864e506a6f773d5e300c0b4
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At this point, the items are too close to each other. Add `gap-8` to create some space between them, and use `mt-16` to push them down from the top a bit.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `gap-8`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("gap-8"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `mt-16`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelector("div")
|
||||
|
||||
assert.isTrue(firstDiv.classList.contains("mt-16"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
--fcc-editable-region--
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto">
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 6864e580f94941dcfa2bb26d
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you should work on the placement of the items inside the card for the plan.
|
||||
|
||||
To do this, set the container to use grid display and specify a custom row size using square brackets in your Tailwind class.
|
||||
|
||||
Here's how you can set a custom grid row using fractional units:
|
||||
|
||||
```html
|
||||
<div class="grid grid-rows-[2fr]">
|
||||
<div>Takes one part</div>
|
||||
<div>Takes two parts of available space</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Give the outer `div` for the plan the utility classes `grid` and `grid-rows-[1fr_auto]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `grid`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `grid-rows-[1fr_auto]`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
--fcc-editable-region--
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 ">
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6864e996adaf0b13437f1d11
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, you should move to styling the elements for the **Listener plan**.
|
||||
|
||||
Give the outer `div` for the plan the classes `bg-gray-100`, `ring-1` to create a thick outline around the `div`, and `ring-gray-300` to assign a dark color to that outline.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `bg-gray-100`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("bg-gray-100"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `ring-1`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("ring-1"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `ring-gray-300`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("ring-gray-300"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6864ebcd123f7c335e92d6dd
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you should work on the spacing for the items inside that plan.
|
||||
|
||||
Add the utility class `rounded-xl` to remove the sharp edges for the ring, `p-8` to increase the padding, and `gap-6` to create space between the content and the CTA button.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `rounded-xl`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("rounded-xl"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `p-8`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("p-8"))
|
||||
```
|
||||
|
||||
Your `div` element should have the class `gap-6`.
|
||||
|
||||
```js
|
||||
const listenerPlanWrapper = document.querySelectorAll("div")[1]
|
||||
|
||||
assert.isTrue(listenerPlanWrapper.classList.contains("gap-6"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
--fcc-editable-region--
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] ">
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6864ed58edec4b4aaeb571cc
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the inner `div` in the **Listener plan**, give it the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2`.
|
||||
|
||||
These classes will make the inner `div` a grid container, define four rows that stack on top of each other, with the first three set to `auto` and the last taking up the remaining spaces, and finally add a spacing of `0.5rem` between the rows.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your inner `div` element should have the class `grid`.
|
||||
|
||||
```js
|
||||
const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
|
||||
|
||||
assert.isTrue(listenerPlanInnerDiv.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your inner `div` element should have the class `grid-rows-[auto_auto_auto_1fr]`.
|
||||
|
||||
```js
|
||||
const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
|
||||
|
||||
assert.isTrue(listenerPlanInnerDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
|
||||
```
|
||||
|
||||
Your inner `div` element should have the class `gap-y-2`.
|
||||
|
||||
```js
|
||||
const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
|
||||
|
||||
assert.isTrue(listenerPlanInnerDiv.classList.contains("gap-y-2"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2>Listener</h2>
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 6864f28c46eb6f00dccd5c54
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the `h2` inside the **Listener plan**, give it the utility class `text-lg` to make it larger, `font-semibold` to make it bolder, and `text-indigo-600` to give it a beautiful indigo color.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should have the class `text-lg`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
|
||||
|
||||
assert.isTrue(listenerH2.classList.contains("text-lg"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
|
||||
|
||||
assert.isTrue(listenerH2.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `text-indigo-600`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
|
||||
|
||||
assert.isTrue(listenerH2.classList.contains("text-indigo-600"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
--fcc-editable-region--
|
||||
<h2>Listener</h2>
|
||||
--fcc-editable-region--
|
||||
<p>$0<span>/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 6864f340223afc0f133868d1
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the price text inside the `p` and `span`, give the `p` element the classes `text-4xl`, `font-bold`, and `text-gray-900` so the price is more visible.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-4xl`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-4xl"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `font-bold`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("font-bold"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `text-gray-900`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-gray-900"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
--fcc-editable-region--
|
||||
<p>$0<span>/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 6864f66df54d9d3abcd4fd31
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the `span` inside the `p` element that has the text `/month`, give it the classes `text-base`, `font-medium`, and `text-gray-500`. This will distinguish it from the price itself by making the text lighter.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` element should have the class `text-base`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-base"))
|
||||
```
|
||||
|
||||
Your `span` element should have the class `font-medium`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("font-medium"))
|
||||
```
|
||||
|
||||
Your `span` element should have the class `text-gray-500`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-gray-500"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
--fcc-editable-region--
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span >/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 6864f704409f85463386cd91
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the next paragraph, give it the utility class `text-gray-600`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-gray-600`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.trim() === "Start exploring millions of songs with basic features and ads.")
|
||||
|
||||
assert.equal(targetP.className, "text-gray-600")
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6864f7985a9b7e5285e27257
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, assign the utility classes `mt-6`, `space-y-2`, `text-sm`, and `text-gray-700` to the `ul`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `ul` element should have the class `mt-6`.
|
||||
|
||||
```js
|
||||
const firstUl = document.querySelector("ul")
|
||||
|
||||
assert.isTrue(firstUl.classList.contains("mt-6"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `space-y-2`.
|
||||
|
||||
```js
|
||||
const firstUl = document.querySelector("ul")
|
||||
|
||||
assert.isTrue(firstUl.classList.contains("space-y-2"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-sm`.
|
||||
|
||||
```js
|
||||
const firstUl = document.querySelector("ul")
|
||||
|
||||
assert.isTrue(firstUl.classList.contains("text-sm"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-gray-700`.
|
||||
|
||||
```js
|
||||
const firstUl = document.querySelector("ul")
|
||||
|
||||
assert.isTrue(firstUl.classList.contains("text-gray-700"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p class="text-gray-600">
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 6864f81018a0085ae30afa9b
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The checkmark in each `span` at the start of a list item is decorative. Add `aria-hidden` to these `span` elements to hide them from screen readers.
|
||||
|
||||
Also, assign the classes `text-green-700` and `mr-2` to each of the `span` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your two `span` elements should have the `aria-hidden` attribute.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const firstTwoSpans = [spanEls[0], spanEls[1]]
|
||||
|
||||
firstTwoSpans.forEach(span => {
|
||||
assert.isTrue(span.hasAttribute("aria-hidden"))
|
||||
})
|
||||
```
|
||||
|
||||
Your two `span` elements should have the class `text-green-700`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const firstTwoSpans = [spanEls[0], spanEls[1]]
|
||||
|
||||
firstTwoSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("text-green-700"))
|
||||
})
|
||||
```
|
||||
|
||||
Your two `span` elements should have the class `mr-2`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const firstTwoSpans = [spanEls[0], spanEls[1]]
|
||||
|
||||
firstTwoSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("mr-2"))
|
||||
})
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p class="text-gray-600">
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li><span>✓</span>Ad-supported streaming</li>
|
||||
<li><span>✓</span>Curated playlists</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 6864f8fef1584f68696e8e24
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, you should move to the `Start listening` CTA to make it a proper button.
|
||||
|
||||
Assign it the utility classes `bg-indigo-100`, `px-4`, `py-2`, `text-center`, `font-semibold`, `text-indigo-700`, and `hover:bg-indigo-200`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your anchor element should have the class `bg-indigo-100`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("bg-indigo-100"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `px-4`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("px-4"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `py-2`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("py-2"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `text-center`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("text-center"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `text-indigo-700`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("text-indigo-700"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `hover:bg-indigo-200`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("hover:bg-indigo-200"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Start listening</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 6864fa68aae44b80f7d0863c
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to those, add the classes `block` and `rounded-md` to the anchor tag to make the it a block element and remove the sharp edges.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your anchor element should have the class `block`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("block"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `rounded-md`.
|
||||
|
||||
```js
|
||||
const firstATag = document.querySelector("a")
|
||||
|
||||
assert.isTrue(firstATag.classList.contains("rounded-md"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a
|
||||
href="#"
|
||||
class="bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+144
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 6864fb24b8070f904768c24f
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next pricing card is the **Premium Plan**.
|
||||
|
||||
Give the wrapper `div` of the premium plan the classes `bg-gray-950`, `text-white`, `ring-2`, `ring-fuchsia-500`, and `p-8`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `bg-gray-950`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("bg-gray-950"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `text-white`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("text-white"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `ring-2`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("ring-2"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `ring-fuchsia-500`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("ring-fuchsia-500"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `p-8`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("p-8"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 68667227c6b33aaf41d4e086
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To position the items in the card, you need grid classes again. Assign the utility classes `grid`, `grid-rows-[1fr_auto]`, and `gap-6` to the wrapper `div`.
|
||||
|
||||
Also, remove the sharp edges with the class `rounded-xl`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `grid`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `grid-rows-[1fr_auto]`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `gap-6`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("gap-6"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `rounded-xl`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("rounded-xl"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8">
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 6866733f0b8f85bcb9587646
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The premium pricing card should be the one that stands out the most on the page. Also, it's the only card that will have a `Most popular` badge. To make this card and its badge stand out, you can use Tailwind's relative positioning and scaling utility classes.
|
||||
|
||||
Here's how you would make an element bigger with scaling in Tailwind CSS:
|
||||
|
||||
```html
|
||||
<div class="transform scale-110">
|
||||
This element is scaled up by 10%
|
||||
</div>
|
||||
```
|
||||
|
||||
You will take care of the positioning in the coming steps. For now, assign the class `scale-105` to the wrapper `div` to make it a bit bigger than the other pricing cards.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `scale-105`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("scale-105"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl">
|
||||
<div>Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 6866740a0f532cc7e9e21877
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Let's move onto the `Most popular` badge. You need to place it in the upper right corner of the card, so you can use some of Tailwind's positioning utility classes to do that.
|
||||
|
||||
Here's how you would use CSS positioning in Tailwind:
|
||||
|
||||
```html
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-0 bg-blue-200 p-2">
|
||||
This element is positioned at the top-left corner
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Assign the class `relative` to the wrapper `div` and `absolute` to the `div` with the text `Most popular`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the premium plan should have the class `relative`.
|
||||
|
||||
```js
|
||||
const premiumPlanWrapper = document.querySelectorAll("div")[3]
|
||||
|
||||
assert.isTrue(premiumPlanWrapper.classList.contains("relative"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `absolute`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("absolute"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class=" bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div >Most Popular</div>
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 6866771fa1b958f7560a6863
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That moves the badge text, but not exactly where you want. The magic is in the `right-[num]`, `left-[num]`, `top-[num]`, and `bottom-[num]` utility classes.
|
||||
|
||||
Here's how to use them:
|
||||
|
||||
```html
|
||||
<div class="relative h-48 bg-gray-100">
|
||||
<div class="absolute top-4 left-8 bg-blue-300 p-2">
|
||||
This element is positioned 1rem from top and 2rem from left
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also indicate negative values by prefixing them with a hyphen:
|
||||
|
||||
```html
|
||||
<div class="relative h-48 bg-gray-100">
|
||||
<div class="absolute -top-4 -left-8 bg-blue-300 p-2">
|
||||
This element is positioned 1rem above and 2rem to the left
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Add the classes `-top-3` and `right-3` to the `Most popular` badge `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `-top-3`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("-top-3"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `right-3`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("right-3"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
--fcc-editable-region--
|
||||
<div class="absolute">Most Popular</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+182
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 686678efc0d9e60eb59ca029
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The badge can be better styled. For this, you will use some Tailwind gradient classes. Here's how you can use gradient styles in Tailwind:
|
||||
|
||||
```html
|
||||
<div class="bg-gradient-to-r from-blue-500 to-green-500">
|
||||
This is a badge
|
||||
</div>
|
||||
```
|
||||
|
||||
Add the classes `bg-gradient-to-r`, `from-fuchsia-500`, and `to-indigo-500` to the badge `div`. Also, add `rounded-full`, `px-3`, `py-1`, `text-xs`, `font-bold`, and `text-white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `bg-gradient-to-r`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("bg-gradient-to-r"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `from-fuchsia-500`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("from-fuchsia-500"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `to-indigo-500`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("to-indigo-500"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `rounded-full`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("rounded-full"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `px-3`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("px-3"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `py-1`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("py-1"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `text-xs`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("text-xs"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `font-bold`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("font-bold"))
|
||||
```
|
||||
|
||||
Your `div` element with the text `Most popular` should have the class `text-white`.
|
||||
|
||||
```js
|
||||
const badgeDiv = document.querySelectorAll("div")[4]
|
||||
|
||||
assert.isTrue(badgeDiv.classList.contains("text-white"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 and mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
--fcc-editable-region--
|
||||
<div class="absolute -top-3 right-3">Most Popular</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 68667a42c6784620c088505c
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Apart from the `Go Premium` CTA, the rest of the content is in a `div`. That makes CSS grid a good option to arrange everything.
|
||||
|
||||
Add the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2` to the `div` that wraps the `h2`, `p`, and `ul` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `grid`.
|
||||
|
||||
```js
|
||||
const innerWrapperDiv = document.querySelectorAll("div")[5]
|
||||
|
||||
assert.isTrue(innerWrapperDiv.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `grid-rows-[auto_auto_auto_1fr]`.
|
||||
|
||||
```js
|
||||
const innerWrapperDiv = document.querySelectorAll("div")[5]
|
||||
|
||||
assert.isTrue(innerWrapperDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
|
||||
```
|
||||
|
||||
Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `gap-y-2`.
|
||||
|
||||
```js
|
||||
const innerWrapperDiv = document.querySelectorAll("div")[5]
|
||||
|
||||
assert.isTrue(innerWrapperDiv.classList.contains("gap-y-2"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2>Premium</h2>
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 68667b354cdc432f3f83c846
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the classes `text-lg`, `font-semibold`, and `text-fuchsia-200` to the `h2` element of the premium plan.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should have the class `text-lg`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
|
||||
|
||||
assert.isTrue(premiumH2.classList.contains("text-lg"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
|
||||
|
||||
assert.isTrue(premiumH2.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `text-fuchsia-200`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
|
||||
|
||||
assert.isTrue(premiumH2.classList.contains("text-fuchsia-200"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
--fcc-editable-region--
|
||||
<h2>Premium</h2>
|
||||
--fcc-editable-region--
|
||||
<p>$9.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 68667bdd7e26613a6d013ac4
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the classes `text-4xl`, `font-bold`, and `text-white` to the `p` element that has the price text to make it look more visible.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-4xl`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-4xl"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `font-bold`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("font-bold"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `text-white`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-white"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
--fcc-editable-region--
|
||||
<p>$9.99<span>/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 68667c33e3c13940ce87c40d
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `span` that has the duration also needs some styling, so add the classes `text-base`, `font-medium`, and `text-fuchsia-300` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` element should have the class `text-base`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-base"))
|
||||
```
|
||||
|
||||
Your `span` element should have the class `font-medium`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("font-medium"))
|
||||
```
|
||||
|
||||
Your `span` element should have the class `text-fuchsia-300`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-fuchsia-300"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
--fcc-editable-region--
|
||||
<p class="text-4xl font-bold text-white">$9.99<span>/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 68667c8eca7580479ead76a0
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the class `text-gray-300` to the `p` element that has the one-line benefit of the plan.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-gray-300`.
|
||||
|
||||
```js
|
||||
const targetP = document.querySelectorAll("p")[3]
|
||||
|
||||
assert.equal(targetP.className, "text-gray-300")
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 68667cefaa5ad54e5ec212a4
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the list element, add the classes `mt-6`, `space-y-2`, `text-sm`, and `text-fuchsia-100` to the `ul` to space out the list items and make them look more appealing.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `ul` element should have the class `mt-6`.
|
||||
|
||||
```js
|
||||
const secondUl = document.querySelectorAll("ul")[1]
|
||||
|
||||
assert.isTrue(secondUl.classList.contains("mt-6"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `space-y-2`.
|
||||
|
||||
```js
|
||||
const secondUl = document.querySelectorAll("ul")[1]
|
||||
|
||||
assert.isTrue(secondUl.classList.contains("space-y-2"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-sm`.
|
||||
|
||||
```js
|
||||
const secondUl = document.querySelectorAll("ul")[1]
|
||||
|
||||
assert.isTrue(secondUl.classList.contains("text-sm"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-fuchsia-100`.
|
||||
|
||||
```js
|
||||
const secondUl = document.querySelectorAll("ul")[1]
|
||||
|
||||
assert.isTrue(secondUl.classList.contains("text-fuchsia-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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 68667da4251a7c59e083bb7e
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the `span` elements inside each list item, assign them the classes `text-green-500` and `mr-2` to make the markers green and push them a bit away from the text.
|
||||
|
||||
Also, assign them the `aria-hidden` attribute like you did for the `span` elements of the first pricing plan.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` elements should have the class `text-green-500`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
|
||||
|
||||
premiumSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("text-green-500"))
|
||||
})
|
||||
```
|
||||
|
||||
Your `span` elements should have the class `mr-2`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
|
||||
|
||||
premiumSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("mr-2"))
|
||||
})
|
||||
```
|
||||
|
||||
Your `span` elements should have the `aria-hidden` attribute.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
|
||||
|
||||
premiumSpans.forEach(span => {
|
||||
assert.isTrue(span.hasAttribute("aria-hidden"))
|
||||
})
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li><span>✓</span>Ad-free listening</li>
|
||||
<li><span>✓</span>Offline playback</li>
|
||||
<li><span>✓</span>Unlimited skips</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Go Premium</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+176
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 68667e17e51bbf62bc6e1737
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you should style the CTA to make it look more like a button.
|
||||
|
||||
For the background and foreground colors, assign it the classes `bg-gradient-to-r`, `from-fuchsia-500`, `to-indigo-600`, `text-white`, `hover:from-fuchsia-600`, and `hover:to-indigo-700`. Also assign it the classes `rounded-md` and `block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your anchor element should have the class `bg-gradient-to-r`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("bg-gradient-to-r"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `from-fuchsia-500`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("from-fuchsia-500"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `to-indigo-600`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("to-indigo-600"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `text-white`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("text-white"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `hover:from-fuchsia-600`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("hover:from-fuchsia-600"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `hover:to-indigo-700`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("hover:to-indigo-700"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `rounded-md`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("rounded-md"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `block`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Go Premium</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 68667f8aa360b17a01982b7c
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, add the classes `px-4`, `py-2`, `text-center`, and `font-semibold` to the anchor element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your anchor element should have the class `px-4`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("px-4"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `py-2`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("py-2"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const premiumATag = document.querySelectorAll("a")[1]
|
||||
|
||||
assert.isTrue(premiumATag.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+157
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 68668014d6a84384018dc302
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next is the last pricing item, the **Family Plan**.
|
||||
|
||||
To begin, give the wrapper `div` for the plan the classes `bg-gray-100`, `ring-1`, `ring-gray-300`, `p-8`, and `rounded-xl`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `bg-gray-100`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("bg-gray-100"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `ring-1`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("ring-1"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `ring-gray-300`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("ring-gray-300"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `p-8`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("p-8"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `rounded-xl`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("rounded-xl"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 6867c7b1f41ee104cf4aaa16
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, you will use `grid` to arrange the items inside the wrapper `div`.
|
||||
|
||||
Add the classes `grid`, `grid-rows-[1fr_auto]`, and `gap-6` to the wrapper `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `grid`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `grid-rows-[1fr_auto]`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
|
||||
```
|
||||
|
||||
Your wrapper `div` element for the family plan should have the class `gap-6`.
|
||||
|
||||
```js
|
||||
const familyPlanWrapper = document.querySelectorAll("div")[6]
|
||||
|
||||
assert.isTrue(familyPlanWrapper.classList.contains("gap-6"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl ">
|
||||
<div>
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 6867c8a8185485144ebbb453
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That takes care of some basic styling spacing for the item card, including the CTA button. For the rest of the inner content, you need to arrange everything in a grid by targeting the inner `div`.
|
||||
|
||||
Assign the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2` to the inner `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your inner `div` element for the family plan should have the class `grid`.
|
||||
|
||||
```js
|
||||
const familyPlanInnerDiv = document.querySelectorAll("div")[7]
|
||||
|
||||
assert.isTrue(familyPlanInnerDiv.classList.contains("grid"))
|
||||
```
|
||||
|
||||
Your inner `div` element for the family plan should have the class `grid-rows-[auto_auto_auto_1fr]`.
|
||||
|
||||
```js
|
||||
const familyPlanInnerDiv = document.querySelectorAll("div")[7]
|
||||
|
||||
assert.isTrue(familyPlanInnerDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
|
||||
```
|
||||
|
||||
Your inner `div` element for the family plan should have the class `gap-y-2`.
|
||||
|
||||
```js
|
||||
const familyPlanInnerDiv = document.querySelectorAll("div")[7]
|
||||
|
||||
assert.isTrue(familyPlanInnerDiv.classList.contains("gap-y-2"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
--fcc-editable-region--
|
||||
<div >
|
||||
<h2>Family</h2>
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 6867c93aefc7751d197d1187
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, target the `h2` of the plan and assign to it the classes `text-lg`, `font-semibold`, and `text-indigo-600`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should have the class `text-lg`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
|
||||
|
||||
assert.isTrue(familyH2.classList.contains("text-lg"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
|
||||
|
||||
assert.isTrue(familyH2.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `text-indigo-600`.
|
||||
|
||||
```js
|
||||
const h2Els = document.querySelectorAll("h2")
|
||||
const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
|
||||
|
||||
assert.isTrue(familyH2.classList.contains("text-indigo-600"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
--fcc-editable-region--
|
||||
<h2 >Family</h2>
|
||||
--fcc-editable-region--
|
||||
<p>$14.99<span>/month</span></p>
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 6867c9fd16b48f2abe22bdaa
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next item to style is the price text, including the `span` in it. Give the `p` element of the price the classes `text-4xl`, `font-bold`, and `text-gray-900`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-4xl`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-4xl"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `font-bold`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("font-bold"))
|
||||
```
|
||||
|
||||
Your `p` element should have the class `text-gray-900`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
|
||||
assert.isTrue(targetP.classList.contains("text-gray-900"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
--fcc-editable-region--
|
||||
<p >$14.99<span>/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6867caa0dbbeb93570ec0069
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assign the class `text-gray-600` to the paragraph under the price text.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have the class `text-gray-600`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.trim() === "Enjoy all of the features with a plan for up to 6 family members.")
|
||||
|
||||
assert.equal(targetP.className, "text-gray-600")
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$14.99<span class="text-base font-medium text-gray-500">/month</span>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
---
|
||||
id: 6867cb70e797d142df4b88e5
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, assign the classes `mt-6`, `space-y-2`, `text-sm`, and `text-gray-700` to the `ul` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `ul` element should have the class `mt-6`.
|
||||
|
||||
```js
|
||||
const thirdUl = document.querySelectorAll("ul")[2]
|
||||
|
||||
assert.isTrue(thirdUl.classList.contains("mt-6"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `space-y-2`.
|
||||
|
||||
```js
|
||||
const thirdUl = document.querySelectorAll("ul")[2]
|
||||
|
||||
assert.isTrue(thirdUl.classList.contains("space-y-2"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-sm`.
|
||||
|
||||
```js
|
||||
const thirdUl = document.querySelectorAll("ul")[2]
|
||||
|
||||
assert.isTrue(thirdUl.classList.contains("text-sm"))
|
||||
```
|
||||
|
||||
Your `ul` element should have the class `text-gray-700`.
|
||||
|
||||
```js
|
||||
const thirdUl = document.querySelectorAll("ul")[2]
|
||||
|
||||
assert.isTrue(thirdUl.classList.contains("text-gray-700"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">
|
||||
$14.99<span class="text-base font-medium text-gray-500">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul >
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6867cbfbbb4a9f4bc73b01e6
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The markers of the list items need to be spaced out a bit. So, give each `span` in the list items the classes `text-green-700` and `mr-2`.
|
||||
|
||||
Also, add the `aria-hidden` attribute to each of the `span` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` elements should have the class `text-green-700`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
|
||||
|
||||
familyPlanSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("text-green-700"))
|
||||
})
|
||||
```
|
||||
|
||||
Your `span` elements should have the class `mr-2`.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
|
||||
|
||||
familyPlanSpans.forEach(span => {
|
||||
assert.isTrue(span.classList.contains("mr-2"))
|
||||
})
|
||||
```
|
||||
|
||||
Your `span` elements should have the `aria-hidden` attribute.
|
||||
|
||||
```js
|
||||
const spanEls = document.querySelectorAll("ul li span")
|
||||
const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
|
||||
|
||||
familyPlanSpans.forEach(span => {
|
||||
assert.isTrue(span.hasAttribute("aria-hidden"))
|
||||
})
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">
|
||||
$14.99<span class="text-base font-medium text-gray-500">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+329
@@ -0,0 +1,329 @@
|
||||
---
|
||||
id: 6867cca6236f87573044a39c
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last thing you will do is to style the CTA button for the family plan.
|
||||
|
||||
Give it the classes `block`, `rounded-md`, `bg-indigo-600`, `px-4`, `py-2`, `text-center`, `font-semibold`, `text-white`, and `hover:bg-indigo-700`.
|
||||
|
||||
With that, your Tailwind pricing component workshop is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your anchor element should have the class `bg-indigo-600`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("bg-indigo-600"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `px-4`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("px-4"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `py-2`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("py-2"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `text-center`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("text-center"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `text-white`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("text-white"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `font-semibold`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("font-semibold"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `hover:bg-indigo-700`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("hover:bg-indigo-700"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `rounded-md`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("rounded-md"))
|
||||
```
|
||||
|
||||
Your anchor element should have the class `block`.
|
||||
|
||||
```js
|
||||
const familyATag = document.querySelectorAll("a")[2]
|
||||
|
||||
assert.isTrue(familyATag.classList.contains("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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">
|
||||
$14.99<span class="text-base font-medium text-gray-500">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">Start Family Plan</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1
|
||||
class="mt-8 and mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900"
|
||||
>
|
||||
Choose your listening plan
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] gap-6 rounded-xl p-8"
|
||||
>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">
|
||||
$0<span class="text-base font-medium text-gray-500">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span
|
||||
>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span
|
||||
>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105"
|
||||
>
|
||||
<div
|
||||
class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-3 py-1 text-xs font-bold text-white rounded-full"
|
||||
>
|
||||
Most Popular
|
||||
</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300"
|
||||
>/month</span
|
||||
>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span
|
||||
>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span
|
||||
>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span
|
||||
>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>Go Premium</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-rows-[1fr_auto] gap-6 bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl"
|
||||
>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">
|
||||
$14.99<span class="text-base font-medium text-gray-500"
|
||||
>/month</span
|
||||
>
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>All
|
||||
Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Up
|
||||
to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span
|
||||
>Individual playlists & libraries
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span
|
||||
>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-600 px-4 py-2 text-center font-semibold text-white hover:bg-indigo-700"
|
||||
>
|
||||
Start Family Plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 68755a4d49de76991ec3763d
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, assign the `span` inside the `p` element the classes `text-base`, `font-medium`, and `text-gray-500`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `span` inside your `p` element should have the class `text-base`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-base"))
|
||||
```
|
||||
|
||||
The `span` inside your `p` element should have the class `font-medium`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("font-medium"))
|
||||
```
|
||||
|
||||
The `span` inside your `p` element should have the class `text-gray-500`.
|
||||
|
||||
```js
|
||||
const PEls = document.querySelectorAll("p")
|
||||
const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
|
||||
const durationSpan = targetP.querySelector("span")
|
||||
|
||||
assert.isTrue(durationSpan.classList.contains("text-gray-500"))
|
||||
```
|
||||
|
||||
# --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>Music App Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<main>
|
||||
<h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
|
||||
<p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
|
||||
<p>
|
||||
Start exploring millions of songs with basic features and ads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Ad-supported streaming
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-700 mr-2">✓</span>Curated playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
|
||||
<div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
|
||||
<p class="text-4xl font-bold text-white">
|
||||
$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
|
||||
</p>
|
||||
<p class="text-gray-300">
|
||||
Enjoy the full music experience with unlimited access and
|
||||
downloads.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Ad-free listening
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden class="text-green-500 mr-2">✓</span>Unlimited skips
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Go Premium
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
|
||||
<div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
|
||||
<h2 class="text-lg font-semibold text-indigo-600">Family</h2>
|
||||
--fcc-editable-region--
|
||||
<p class="text-4xl font-bold text-gray-900">$14.99<span >/month</span></p>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
Enjoy all of the features with a plan for up to 6 family members.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>✓</span>All Premium features
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Up to 6 accounts
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Individual playlists &
|
||||
libraries
|
||||
</li>
|
||||
<li>
|
||||
<span>✓</span>Family Mix playlists
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#">Start Family Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -1255,6 +1255,9 @@
|
||||
{
|
||||
"dashedName": "workshop-tailwind-cta-component"
|
||||
},
|
||||
{
|
||||
"dashedName": "workshop-tailwind-pricing-component"
|
||||
},
|
||||
{
|
||||
"dashedName": "lab-music-shopping-cart-page"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user