---
id: 61b0a1b2af494934b7ec1a72
title: Крок 85
challengeType: 0
dashedName: step-85
---

# --description--

Чудово. Червоний маркер має чудовий вигляд. Тепер все, що вам потрібно зробити, це додати ковпачки та насадки до інших маркерів.

Додайте ковпачок та насадку до зеленого та синього маркерів. Ви можете просто скопіювати елементи `div` з червоного маркера та вставити їх до двох інших маркерів.

# --hints--

Ваш зелений маркер `div` повинен містити два елементи `div`.

```js
const greenMarkerChildren = [...document.querySelector('.green')?.children];
assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
```

Ковпачок зеленого маркера `div` повинен бути перед насадкою `div`.

```js
const greenMarkerChildren = [...document.querySelector('.green')?.children];
const greenMarkerCap = document.querySelector('.green .cap');
const greenMarkerSleeve = document.querySelector('.green .sleeve');
assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve));
```

Ваш синій маркер `div` повинен містити два елементи `div`.

```js
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
```

Ковпачок синього маркера `div` повинен бути перед насадкою `div`.

```js
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
const blueMarkerCap = document.querySelector('.blue .cap');
const blueMarkerSleeve = document.querySelector('.blue .sleeve');
assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve));
```

# --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>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      --fcc-editable-region--
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
      --fcc-editable-region--
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
