---
id: 60a3e3396c7b40068ad69986
title: Step 28
challengeType: 0
dashedName: step-28
---
# --description--
Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
# --hints--
Your existing `.one` and `.two` elements should not be changed.
```js
assert(document.querySelectorAll('.one').length === 1);
assert(document.querySelectorAll('.two').length === 1);
```
Your new `div` should be nested in your `.canvas` element.
```js
assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
```
Your new `div` should come after your `.two` element.
```js
assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
```
Your new `div` element should have a `class` with the value `three`.
```js
assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
```
# --seed--
## --seed-contents--
```css
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: auto;
}
```
```html
Rothko Painting