2021-10-28 12:31:12 -07:00
---
id: 6165d3b702a5d92ad970b30c
title: Step 5
challengeType: 0
dashedName: step-5
---
# --description--
After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM` , followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus` .
# --hints--
You should create an `h1` element.
```js
assert.exists(document.querySelector('h1'));
```
Your `h1` element should come after your `img` element.
```js
assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img');
```
Your `h1` element should have the `class` set to `hero-title` .
```js
assert(document.querySelector('h1')?.className === 'hero-title');
```
Your `h1` element should have the text set to `OUR NEW CURRICULUM` .
```js
assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM');
```
You should create a new `p` element.
```js
assert.exists(document.querySelector('p'));
```
Your `p` element should come after your `h1` element.
```js
assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
```
Your `p` element should have the `class` set to `hero-subtitle` .
```js
assert(document.querySelector('p')?.className === 'hero-subtitle');
```
Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus` .
```js
2021-12-22 16:16:59 +00:00
assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus');
2021-10-28 12:31:12 -07:00
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2022-03-14 15:54:43 +00:00
< title > Magazine< / title >
2021-10-28 12:31:12 -07:00
< link
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway& display=swap"
rel="stylesheet"
/>
< link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
< link rel = "stylesheet" href = "styles.css" / >
< / head >
< body >
--fcc-editable-region--
< main >
< section class = "heading" >
< header class = "hero" >
< img
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
loading="lazy"
class="hero-img"
/>
< / header >
< / section >
< / main >
--fcc-editable-region--
< / body >
< / html >
```
```css
```
