COLOR PIXEL IMPLOSION

<div class="container">

        <header>

            <hgroup>

              <h1 class="page-title">Flattastic Pro Color Palette</h1>

              <h2 class="page-description">design by <a href="https://dribbble.com/erigon">Erigon</a></h2>

            </hgroup>

        </header>

        <ul class="list-palete">

            <li class="palete">

                <div class="palete-color palete-color--grapefruit">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Grapefruit</h1>

                    <span class="palete-color__code">#ed5565</span>,

                    <span class="palete-color__code">#da4453</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--bittersweet">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Bittersweet</h1>

                    <span class="palete-color__code">#fc6e51</span>,

                    <span class="palete-color__code">#e9573f</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--sunflower">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Sunflower</h1>

                    <span class="palete-color__code">#ffce54</span>,

                    <span class="palete-color__code">#fcbb42</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--grass">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Grass</h1>

                    <span class="palete-color__code">#a0d468</span>,

                    <span class="palete-color__code">#8cc152</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--mint">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Mint</h1>

                    <span class="palete-color__code">#48cfad</span>,

                    <span class="palete-color__code">#37bc9b</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--aqua">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Aqua</h1>

                    <span class="palete-color__code">#4fc1e9</span>,

                    <span class="palete-color__code">#3bafda</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--blue-jeans">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Blue Jeans</h1>

                    <span class="palete-color__code">#5d9cec</span>,

                    <span class="palete-color__code">#4a89dc</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--lavender">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Lavender</h1>

                    <span class="palete-color__code">#ac92ec</span>,

                    <span class="palete-color__code">#967adc</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--pink-rose">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Pink Rose</h1>

                    <span class="palete-color__code">#ec87c0</span>,

                    <span class="palete-color__code">#d770ad</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--light-gray">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Light Gray</h1>

                    <span class="palete-color__code">#f5f7fa</span>,

                    <span class="palete-color__code">#e6e9ed</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--medium-gray">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Medium Gray</h1>

                    <span class="palete-color__code">#ccd1d9</span>,

                    <span class="palete-color__code">#aab2bd</span>

                </div>

            </li>

            <li class="palete">

                <div class="palete-color palete-color--dark-gray">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Dark Gray</h1>

                    <span class="palete-color__code">#656d78</span>,

                    <span class="palete-color__code">#434a54</span>

                </div>

            </li>

           <!-- Round -->

            <li class="palete palete--round">

                <div class="palete-color palete-color--sunflower">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Sunflower</h1>

                    <span class="palete-color__code">#ffce54</span>,

                    <span class="palete-color__code">#fcbb42</span>

                </div>

            </li>

            <li class="palete palete--round">

                <div class="palete-color palete-color--grass">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Grass</h1>

                    <span class="palete-color__code">#a0d468</span>,

                    <span class="palete-color__code">#8cc152</span>

                </div>

            </li>

            <!-- Square -->

            <li class="palete palete--square">

                <div class="palete-color palete-color--mint">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Mint</h1>

                    <span class="palete-color__code">#48cfad</span>,

                    <span class="palete-color__code">#37bc9b</span>

                </div>

            </li>

            <li class="palete palete--square">

                <div class="palete-color palete-color--aqua">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Aqua</h1>

                    <span class="palete-color__code">#4fc1e9</span>,

                    <span class="palete-color__code">#3bafda</span>

                </div>

            </li>

        </ul>

        <ul class="list-palete">

          <!-- Round -->

            <li class="palete palete--round">

                <div class="palete-color palete-color--sunflower">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Sunflower</h1>

                    <span class="palete-color__code">#ffce54</span>,

                    <span class="palete-color__code">#fcbb42</span>

                </div>

            </li>

            <li class="palete palete--round">

                <div class="palete-color palete-color--grass">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Grass</h1>

                    <span class="palete-color__code">#a0d468</span>,

                    <span class="palete-color__code">#8cc152</span>

                </div>

            </li>

            <!-- Square -->

            <li class="palete palete--square">

                <div class="palete-color palete-color--mint">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Mint</h1>

                    <span class="palete-color__code">#48cfad</span>,

                    <span class="palete-color__code">#37bc9b</span>

                </div>

            </li>

            <li class="palete palete--square">

                <div class="palete-color palete-color--aqua">

                    <div class="palete-color__square palete-color__lighten"></div>

                    <div class="palete-color__square palete-color__darken"></div>

                </div>

                <div class="palete-color__content">

                    <h1 class="palete-color__name">Aqua</h1>

                    <span class="palete-color__code">#4fc1e9</span>,

                    <span class="palete-color__code">#3bafda</span>

                </div>

            </li>

        </ul>

      <div class="examples">

        <div class="palete example example--rectangle">

              <div class="palete-color palete-color--sunflower">

                  <div class="palete-color__square palete-color__lighten"></div>

                  <div class="palete-color__square palete-color__darken"></div>

              </div>

              <div class="palete-color__content">

                  <h1 class="palete-color__name">Sunflower</h1>

                  <span class="palete-color__code">#ffce54</span>,

                  <span class="palete-color__code">#fcbb42</span>

              </div>

          </div>

  <div class="palete palete--round example example--round">

              <div class="palete-color palete-color--sunflower">

                  <div class="palete-color__square palete-color__lighten"></div>

                  <div class="palete-color__square palete-color__darken"></div>

              </div>

              <div class="palete-color__content">

                  <h1 class="palete-color__name">Sunflower</h1>

                  <span class="palete-color__code">#ffce54</span>,

                  <span class="palete-color__code">#fcbb42</span>

              </div>

          </div>

  <div class="palete palete--square example example--square">

              <div class="palete-color palete-color--sunflower">

                  <div class="palete-color__square palete-color__lighten"></div>

                  <div class="palete-color__square palete-color__darken"></div>

              </div>

              <div class="palete-color__content">

                  <h1 class="palete-color__name">Sunflower</h1>

                  <span class="palete-color__code">#ffce54</span>,

                  <span class="palete-color__code">#fcbb42</span>

              </div>

          </div>

        </div> <!-- /.examples -->

    </div>