Responsive Tile Exercise Template

by Josh Krauth-Harding

HTML

<!-- This is an in-class exercise due by the end of the week (Friday, March 22) -->

<div id="tile-container" class="cf"></div>

CSS

#tile-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tile {
  width: 33%;
  float: left;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

.tile p {
  color: white;
  mix-blend-mode: difference;
  cursor: default;
}

.tile:hover p {
  filter: blur(5px);
}

@media screen and (max-width: 800px) and (min-width: 400px) {
  .tile {
    filter: invert(100%);
    font-size: 15px;
  }
}

@media screen and (max-width: 399px) {
  .tile {
    filter: sepia(100%);
    font-size: 10px;
  }
}

/* DON'T DELETE THIS */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: black;
}

/* Clear Float */

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.cf {
  *zoom: 1;
}

JavaScript

let j = 256;
let k = 255;

for (i = 1; i < 256; i++) {
	j--;
  $('#tile-container').append('<div class="tile" id="tile'+ i + '"><p>rgb(255, ' + i + ', ' + j + ')</p></div>')
  $('#tile' + i).css('backgroundColor','rgb(255, ' + i + ', ' + j + ')');
}