<style>
            .frame1 {
                position: relative;
                width: 525px;
                height: 525px;
                overflow: hidden;
                background: #000;
            }

            .rec {
                width: 175px;
                height: 175px;
                background-position: center;
                background-size: cover;
                float: left;
            }
        </style>

    <div class="frame1">
        <div style="position: relative; background-color: aquamarine; background-image: url(foto0)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo0
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles0
            </div>
        </div>

        <div style="position: relative; background-color: steelblue; background-image: url(foto1)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo1
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles1
            </div>
        </div>

        <div style="position: relative; background-color: seagreen; background-image: url(foto2)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo2
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles2
            </div>
        </div>

        <div style="position: relative; background-color: violet; background-image: url(foto3)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo3
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles3
            </div>
        </div>

        <div style="position: relative; background-color: salmon; background-image: url(foto4)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo4
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles4
            </div>
        </div>

        <div style="position: relative; background-color: navy; background-image: url(foto5)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo5
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles5
            </div>
        </div>

        <div style="position: relative; background-color: lightgray; background-image: url(foto6)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo6
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles6
            </div>
        </div>

        <div style="position: relative; background-color: hotpink; background-image: url(foto7)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo7
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles7
            </div>
        </div>

        <div style="position: relative; background-color: gold; background-image: url(foto8)" class="rec">
            <div
                style="font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                titulo8
            </div>

            <div
                style="position: absolute; right: 0; bottom: 0; font-family: monospace; font-weight: bold; color: white;  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;">
                scrobbles8
            </div>
        </div>




    </div>