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.