Aprenda los colores de CSS construyendo un conjunto de marcadores de colores - Paso 76

Su manga se ve bien, pero se vería aún mejor si se colocara más hacia el lado derecho del marcador. Una forma de hacerlo es agregar otro elemento antes de la manga para empujarla hacia la derecha.

Agregue un nuevo div con la clase cap antes del elemento de manga div.

Your code so far

<!-- file: index.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">

<!-- User Editable Region -->

       <div class="manga"></div>
      <div class="marker red">
        <div class="sleeve"></div>
        <div class="cap"></div>
      </div>
      

<!-- User Editable Region -->

      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
/* file: styles.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%));
}

Your browser information:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Aprenda los colores de CSS construyendo un conjunto de marcadores de colores - Paso 76

Ayuda, no me acepta el codigo :frowning:

no manches. asi cuando. que dice o que?

No me habia fijado en poner el problema, dice esto:
Su manga se ve bien, pero se vería aún mejor si se colocara más hacia el lado derecho del marcador. Una forma de hacerlo es agregar otro elemento antes de la manga para empujarla hacia la derecha.

Agregue un nuevo div con la clase cap antes del elemento de manga div.

y ya le pusiste un **<div></div>** antes del <div class="sleeve"></div> ?
o sea ya esta asi?
<div class="cap"></div><div class="sleeve"></div>