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

# --description--

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

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

# --hints--

You should have a `div` element.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# --seed--

## --seed-contents--

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

--fcc-editable-region--

  <body>
    
  </body>

--fcc-editable-region--

</html>

```

```css

```
