Ejercicio 1

💻 Código HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Antonio Berrocal Piris">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/ajedrez.css">
    <title>Ajedrez</title>
</head>

<body>
    <div class="wrapper">
        <div class="top">
            <div class="wrapper-inner">
                <div class="box-inner">A</div>
                <div class="box-inner">B</div>
                <div class="box-inner">C</div>
                <div class="box-inner">D</div>
                <div class="box-inner">E</div>
                <div class="box-inner">F</div>
                <div class="box-inner">G</div>
                <div class="box-inner">H</div>
            </div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="bottom">
            <div class="wrapper-inner">
                <div class="box-inner">A</div>
                <div class="box-inner">B</div>
                <div class="box-inner">C</div>
                <div class="box-inner">D</div>
                <div class="box-inner">E</div>
                <div class="box-inner">F</div>
                <div class="box-inner">G</div>
                <div class="box-inner">H</div>
            </div>
        </div>

    </div>
</body>

</html>

🎨 Código CSS


body {
  margin: 40px;
}
.wrapper {
  border: 49px solid #462921;
  width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 70px);
  grid-template-rows: 40px repeat(8, 70px) 40px;
}
.wrapper-inner {
  display: grid;
  grid-template-columns: repeat(8, auto);
}

.box-inner {
  text-align: center;
  align-self: center;
}
.top,
.bottom {
  display: grid;
}
.top {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 1;
}
.bottom {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 10;
  grid-row-end: 10;
}

:root {
  --claro: #f5d5d5;
  --oscuro: #462921;
  --fondo: #b5915f;
  --letras: #441a03;
}

.wrapper-inner {
  background-color: var(--fondo);
}

.box-inner {
  color: var(--letras);
  font-weight: bold;
}

.box {
  background-color: var(--claro);
  width: 70px;
  height: 70px;
  grid-column: span 1;
}
.box:nth-child(2),
.box:nth-child(4),
.box:nth-child(6),
.box:nth-child(8),

.box:nth-child(9),
.box:nth-child(11),
.box:nth-child(13),
.box:nth-child(15),

.box:nth-child(18),
.box:nth-child(20),
.box:nth-child(22),
.box:nth-child(24),

.box:nth-child(25),
.box:nth-child(27),
.box:nth-child(29),
.box:nth-child(31),

.box:nth-child(34),
.box:nth-child(36),
.box:nth-child(38),
.box:nth-child(40),

.box:nth-child(41),
.box:nth-child(43),
.box:nth-child(45),
.box:nth-child(47),

.box:nth-child(50),
.box:nth-child(52),
.box:nth-child(54),
.box:nth-child(56),

.box:nth-child(57),
.box:nth-child(59),
.box:nth-child(61),
.box:nth-child(63) {
  background-color: var(--oscuro);
}

📸 Resultado del ejercicio

Resultado
⬅ Volver