CodePen Embed - My watermelon pixel

<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>

<body>
  <div id="watermelon">
    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DD423E;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#DE6262;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#BFDAAF;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>

    <div class="row">
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#86AC97;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
      <svg width="20" height="20">
        <rect x="0" y="0" width="20" height="20" style="fill:#262626;fill-opacity:1;">
      </svg>
    </div>
  </div>

  <h1>My watermelon pixel</h1>
  <span>Instagram: @majoni_</span>

</body>

*{padding:0;margin:0;}

/*pruebacolor{
  color:#94BA65;
}*/

body{
  background-color:#262626;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
}

h1{
  font-family: 'Lato', sans-serif;
  font-weight:100;
  letter-spacing:-0.025em;
  color:#ffffff;
  font-size:4em;
  text-align:center;
  padding:100px 0 0 0;
}

span{
  color:#777;
  font-family: 'Lato', sans-serif;
  font-weight:300;
  font-size:1.5em;
  padding-top:5px;
  
}

.row{
  width:100%;
  display:flex; 
  display:-webkit-flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

This Pen is owned by Yosu Arrillaga Calviño on CodePen.

See more by @yosuarrillaga on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.