Within your `.heading` element, create a `header` element with the `class` set to `hero`.
In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`.
The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load.
Give your new `img` element a `loading` attribute set to `lazy`.
# --hints--
You should create a `header` element.
```js
assert.exists(document.querySelector('header'));
```
Your `header` element should be within your `.heading` element.
