1

I just wanted to make some squares with some colours (basically my colour pallette in clothes) I decided to make it with basic html and css then print it on a printer (I can have it on my phone, but i wanted to have it on paper). The problem starts when I dont see the colours of the divs in the preview. https://i.stack.imgur.com/RhQoS.png

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>spring</h2>
  <div class="spring">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
    <div class="cuatro"></div>
    <div class="cinco"></div>
    <div class="seis"></div>
    <div class="siete"></div>
  </div>
  <h2>winter</h2>
  <div class="winter">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
    <div class="cuatro"></div>
    <div class="cinco"></div>
    <div class="siete"></div>
    <div class="ocho"></div>
  </div>
  <h2>autumn</h2>
  <div class="autumn">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
    <div class="cuatro"></div>
    <div class="cinco"></div>
    <div class="siete"></div>
    <div class="ocho"></div>
  </div>
</body>
</html>

the css:

body {
  margin: 0;
  padding: 5px 0px 5px 15px;
}
.spring, .winter, .autumn {
  display: flex;
  width: 90vw  ;
}

div {
  height: 200px;
  width: 200px;
}
.spring > .uno {
  background-color: #ebc995;
}
.spring > .dos {
  background-color: #F05462;
}
.spring > .tres {
  background-color: #EF232E;
}
.spring > .cuatro {
  background-color: #685BA1;
}
.spring > .cinco {
  background-color: rgb(102,199,188);
}
.spring > .seis {
  background-color: rgb(31,140,183);
}
.spring > .siete {
  background-color: rgb(0,68,131);
}
/* winter */
.winter > .uno {
  background-color: #88255E;
}
.winter > .dos {
  background-color: #B73465;
}
.winter > .tres {
  background-color: #18454B;
}
.winter > .cuatro {
  background-color: rgb(58,150,217);
}
.winter > .cinco {
  background-color: rgb(254,254,254);
}
.winter > .seis {
  background-color: #18454B;
}
.winter > .siete {
  background-color: #091B41;
}
/* autumn */
.autumn > .uno {
  background-color: #E6BA25;
}
.autumn > .dos {
  background-color: #BB9662;
}
.autumn > .tres {
  background-color: #0B4958;
}
.autumn > .cuatro {
  background-color: rgb(45,21,69);
}
.autumn > .cinco {
  background-color: rgb(115,52,17);
}
.autumn > .seis {
  background-color: #F3695F;
}
.autumn > .siete {
  background-color: #CC1823;
}

Here is my github repo: https://github.com/imwaltdiaz/paletaDeColores

It was supposed to be something quick, but I was wondering if the loading have to be about the performance of my code? or is it a chrome bug? chrome cant read inheritance? Idk if it is a chrome bug or of my code

Walter Diaz
  • 11
  • 2

0 Answers0