---
id: 61b0a1b2af494934b7ec1a72
title: Hatua ya 85
challengeType: 0
dashedName: step-85
---

# --description--

Inafaa. Alama yako nyekundu inaonekana vizuri. Sasa unachohitaji kufanya ni kuongeza caps na sleeves kwenye vialamisho vyako vingine.

Ongeza cap na sleeve kwa alama za kijani na bluu. Unaweza kunakili tu vipengee vya `div` kutoka kwa alama nyekundu na kuvibandika kwenye vialama vingine viwili.

# --hints--

Alama yako ya kijani `div` inapaswa kuwa na vipengele viwili vya `div`.

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

Kipengele cha alama ya cap ya kijani kibichi cha `div` kinapaswa kuwa kabla ya kipengee cha sleeve `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));
```

Alama yako ya bluu `div` inapaswa kuwa na vipengele viwili vya `div`.

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

Kipengele cha alama ya bluu chako cha `div` kinapaswa kuwa kabla ya kipengee cha sleeve `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%));
}

```
