giant vinyl record spinning on your blog

Tags: layout, music, blog, vinyl, gif, cd, layout, animation, gif, animation

Description:

I don't know much about html for this design I had help from chatgtp you can put any other image for the album cover the transparent hole will always be made in the center of the image

preview

like this

or this

Credits are not necessary but comment if you plan to use it I want to see what it looks like

update : for spanish people im gona explain e visto mucha gente confusa en donde poner el link de la imagen en el disco en especial gente hispano hablante la razon fue pq hay una seccion en español q dice " portada de disco " perdon yo la puse como guia para no perderme en el codigo xd , pongan la ur donde dice "your-cover.jpg" y listo cualquier otro bug haganmelo saber :3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ¡! Madoka 🍥 (https://layouts.spacehey.com/layout?id=98493) -->

   


    
    
    <style>
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .vinyl-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }

        .vinyl {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #111;
            border: 10px solid #444;
            position: absolute;
            animation: rotate 5s infinite linear;
        }

        .center-hole {
            width: 40px;
            height: 40px;
            background-color: #111;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .cover-container {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            border-radius: 50%;
        }

        .cover {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            animation: rotate 5s infinite linear;
        }

        .cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .cover-hole {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
    </style>


    <div class="vinyl-container">
        <div class="vinyl">
            <div class="center-hole"></div>
        </div>
        <div class="cover-container">
            <div class="cover">
                <div class="cover-hole"></div>
                <img src="your-cover.jpg" alt="Portada del disco"/>
            </div>
        </div>
    </div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 195 comments ( View all | Add Comment )

꙳︴⊱ʚᘏ𐒄ᎥᎦᏥᎽᎿᎯᘎɞ⊰	1767470411 Como pongo una imagen dentro? ˶ˊᜊˋ˶ Report Comment holaa, se que sera tarde pero encontre como hacerlo ^,^ (en compu) vas a la imagen que quieras en el navegador o pinterest y con el clic izquierdo vas a darle a 'copiar vinculo de imagen'. Luego iras a el sitio ImgBB ( no necesitas iniciar sesion o algo asi) y le das a la nube que dice subir. Ahi te aparecera para pegar url, asi que pegas el que copiaste y le das al boton verde de subir. luego, te aparecera la imagen que quieres y abajo te dira 'codigos de insercion', asi que le picas y seleccionas 'HTML completo enlazado' y copias el enlace que te de. Ahora, debes de pegar especificamente solo una parte de ese enlace, no todo. Te dare un ejemplo: bien, ahi solo debes copiar el segundo https que esta en comillas (pero sin las comillas obvio) , es decir, en este caso seria: https://i.ibb.co/Dg50YzsJ/622987a2e3a347e102bf2f6dc4fece74.jpg asi que, en el link que da el creador del disco, solo debes pegar eso en la parte que dice "your cover jpg" y lo dejas dentro de esas comillas unicamente. Tu eliges en que seccion pegarlo, puede ser en lo de 'general' o 'about me', lo que sea. eso es todo, espero haberte ayudado a ti y a quien lea esto. Si tienes dudas me avisas okey by 7i5s; 1768719305; Report
꙳︴⊱ʚᘏ𐒄ᎥᎦᏥᎽᎿᎯᘎɞ⊰	1767470411 Como pongo una imagen dentro? ˶ˊᜊˋ˶ Report Comment
꙳︴⊱ʚᘏ𐒄ᎥᎦᏥᎽᎿᎯᘎɞ⊰	1767470411 Como pongo una imagen dentro? ˶ˊᜊˋ˶ Report Comment
☆:..｡.Ninaa .｡.:☆	1767316806 how do you put a image inside? Report Comment You just need to add the image code (address) between ''your-cover.jpg'' by 𖦹 Hatsune Miku! ✧; 1768542460; Report
✭♥-Tete-♥✭	1767058027 Usinggg!! Report Comment
smashmish	1767046882 using Report Comment
isa221	1766960858 does anyone know how to change the image on it ?? Report Comment yeaaa dm me by smashmish; 1767047035; Report You just need to add the image code (address) between ''your-cover.jpg'' by 𖦹 Hatsune Miku! ✧; 1768542474; Report
riley ꩜	1766186730 using !! <33 Report Comment
Nicky	1766185806 Using! ↖(^o^)↗ Report Comment
Fermin	1765436533 Using tyyy Report Comment
˚₊‧꒰ა rᥲᥱ ໒꒱ ‧₊˚	1764985269 Using thx:3 ! Report Comment
˚₊‧꒰ა rᥲᥱ ໒꒱ ‧₊˚	1764985260 Using thx:3 ! Report Comment
virgula	1764446250 using Report Comment
c0rpse 🫀⚒️	1763400883 usandoo :33 Report Comment
✩𝓒𝓻𝔂𝓫𝓪𝓫𝔂𝓪𝓷𝓰𝓮𝓵☆	1762528168 Usingg Report Comment
Lucien_TheMadness	1761159242 using! Report Comment
Cuteorangepie	1761066731 using/usando Report Comment
A⭐️💕	1760204363 Using Report Comment
★Punk Kitty★	1759876340 using! thank you Report Comment
Kaleidoscopexx	1758757882 Using!! Report Comment