animated gif whit polaroid pfp

Tags: polaroid, pink, gift, animated, layout, porfile

Description:

a random code i make for me but i dont use , i share if you like this i leave intructions for all in my code if you want changue someting i leave a preview in this porfile https://spacehey.com/iiimacat give me credits and coment if u use

Preview:

click on the image for a larger preview

Code:

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

<style>
.profile-pic > img { display: none; } /* Hides the default image */

:root {
  --polaroid-name: "YOUR_NAME"; /* Replace with your actual name */
  --name-size: 1.6em; /* Font size for the name */
}

/* Import a custom font for the name (optional) */
@font-face {
  font-family: 'teabeer';
  src: url('https://fluorescent-lights.neocities.org/teabeer.ttf') format('truetype');
}

/* Style the polaroid frame */
.general-about .profile-pic {
  position: relative; /* Enable relative positioning for child elements */
  width: 170px; /* Width of the polaroid frame */
  height: 210px; /* Height of the polaroid frame */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect for the polaroid */
  background:url("https://i.ibb.co/DWdrMPD/polaroid.png") center/contain no-repeat; /* Background image for the polaroid frame */
  transition: transform 0.5s ease; /* Smooth transition for hover effect */
}

/* Hover effect for the polaroid frame */
.general-about .profile-pic:hover {
  transform: scale(1.1) rotate(-3deg); /* Scale up and rotate slightly on hover */
}

/* Display the GIF inside the polaroid frame */
.general-about .profile-pic:after {
  content: ""; /* No text content */
  position: absolute; /* Position the GIF absolutely within the frame */
  top: 15px; /* Adjust the top position as needed */
  left: 15px; /* Adjust the left position as needed */
  right: 15px; /* Adjust the right position as needed */
  bottom: 40px; /* Adjust the bottom position as needed */
  background-image: url("https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif");/* Replace with your actual GIF URL */
  background-size: cover; /* Scale the GIF to cover the content area */
  background-position: center; /* Center the background image */
  border-radius: 5px; /* Optional: Add border radius to the GIF */
}

/* Style the name displayed on the polaroid */
.general-about .profile-pic:before {
  content: var(--polaroid-name); /* Display the name from the root variable */
  font-family: 'teabeer'; /* Use the custom font if imported */
  font-size: var(--name-size); /* Set the font size from the root variable */
  position: absolute; /* Position the name absolutely within the frame */
  z-index: 1; /* Ensure the name is displayed above the GIF */
  bottom: 10px; /* Adjust the bottom position as needed */
  left: 0; /* Center the name horizontally */
  width: 100%; /* Make the name span the entire width */
  text-align: center; /* Center the name horizontally */
}
</style>

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

Astoria aaron	1784985056 using!! Report Comment
𝗠𝘂𝗳𝗳𝗶𝗻𝗵𝗲𝗮𝗱	1783687570 Using!, Rlly nice layout i love it ^^ Report Comment
𝖊𝖚𝖑𝖊𝕽"𝖘_𝑻𝒓𝑖²A𝑳✯�	1782250003 Using :>!!! Report Comment
dgn diaries <33	1775161283 using! Report Comment
𖦹 Maven	1774708434 Using!! i love it Report Comment
XxDanushhxX	1771187259 USING Report Comment
Asha_Selva	1768184288 Using Report Comment
LudAk ⚜️	1762932561 Gonna useee,this is soo amazing 🙏 Report Comment
Azury!! X3	1762571838 Using Report Comment
•𝕭𝖊𝖊𝖑•	1744994498 Using Report Comment
carrots	1739854280 using Report Comment
nanever	1738608365 using Report Comment
୨୧ coolest	1733866818 Using !! Report Comment
sparkletitty100	1733721941 USIJNGG Report Comment
GummyLungz★★	1728622736 using Report Comment
lesbian dream sans	1728089114 using! Report Comment
. NAOTO .	1723564804 GG: usijg!!! Report Comment
nattie	1717871578 using :)) Report Comment
nellisa	1715241303 using Report Comment
etheryl	1714465778 using :)) Report Comment