---
id: 61b093429e7fc020b43b1bb6
title: Hatua ya 76
challengeType: 0
dashedName: step-76
---

# --description--

Sleeve yako inaonekana vizuri, lakini ingeonekana bora zaidi ikiwa ingewekwa zaidi upande wa kulia wa kialamisho. Njia moja ya kufanya hivyo ni kuongeza kipengee kingine kabla ya sleeve ili kuisukuma kulia.

Ongeza `div` mpya yenye class ya `cap` kabla ya `div` ya kipengee cha sleeve.

# --hints--

Kipengele chako kipya cha `div` kinafaa kuwa ndani ya kipengee cha `div` cha alama nyekundu.

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

Kipengele chako kipya cha `div` kinapaswa kuwa na class ya `cap`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.some(child => child?.classList?.contains('cap')));
```

`div` ya cap yako inapaswa kuwa kabla ya `div` ya sleeve.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
const cap = document.querySelector('div.cap');
const sleeve = document.querySelector('div.sleeve');
assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve));
```

# --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="sleeve"></div>
      </div>
      --fcc-editable-region--
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </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;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}

.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%));
}

```
