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 205 comments ( View all | Add Comment )

larz☆	1776157827 using :) Report Comment
jacey	1776046506 usinggg Report Comment
˖ ֹ🎀 𝑪𝒂𝒎𝒊𝒊 !! ⊹ ࣪ 🐾	1776017114 Usiing!!1!11!! Report Comment
𝔯𝔬𝔯𝔶	1775733702 using Report Comment
ANG1E!	1775151881 usingg Report Comment
｡･ﾟﾟ･ V𝒾n☾𝕖nT ･ﾟﾟ･｡	1773696555 using :3 Report Comment
B1G_BOS3	1773577181 using Report Comment
habsan	1773454519 usingg!! Report Comment
𝐊𝐇𝐋𝐎𝐄 ⃤.+:｡	1771985047 it worked but it messed up the other spinning vinyls I had on my page and stretched them out rlly big n I dunno how to fix that Report Comment
♯🇵🇭⸝⸝@H3len.˚꣑ৎ⋆ ࣪.	1771855817 USING!!! Report Comment
4ikoangelx	1769914664 using Report 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
go0dbyeisa.	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