---
id: 6720b3191bbafd269bae0ae8
title: Step 2
challengeType: 0
dashedName: step-2
---

# --description--

Create a `div` element that has an `id` of `greeting-card` and a `class` of `card`.

Inside the `div` element, add an `h1` with the text `Happy Birthday!`. Then add a paragraph element with a `class` called `message` and the text `Wishing you all the happiness and joy on your special day!`.

# --hints--

You should have a `div` element.

```js
assert.exists(document.querySelector("div"));
```

The `div` element should have an `id` of `greeting-card`.

```js
assert.strictEqual(document.querySelector("div").id, "greeting-card");
```

The `div` element should have a `class` of `card`.

```js
assert.strictEqual(document.querySelector("#greeting-card").className, "card");
```

You should have an `h1` element inside the `div` element.

```js
assert.exists(document.querySelector("div > h1"));
```

The `h1` element should contain the text `Happy Birthday!`.

```js
assert.strictEqual(document.querySelector("div > h1").textContent.trim(), "Happy Birthday!");
```

You should have a `p` element inside the `div`.

```js
assert.exists(document.querySelector("div > p"));
```

The `p` element should have a `class` of `message`.

```js
assert.exists(document.querySelector("div > p.message"));
```

The `p` element should contain the text `Wishing you all the happiness and joy on your special day!`.

```js
assert.strictEqual(document.querySelector("div > p.message").textContent.trim(), "Wishing you all the happiness and joy on your special day!");
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Card</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
--fcc-editable-region--
    
--fcc-editable-region--
  </body>
</html>
```

```css

```
