Report Blog Entry
hello ! layouts have been unavalible for a while so i thought id just post these on here. will be edited as i make more ! thought about posting on forums but this seemed more appropriate :3
would love a kudos or comment if youre using !
also all of these have been tested on my profile :3
1. Adding Image (Bottom Center) With Link Attached (Grows when hovered over!)
makes your image on the bottom center of the screen! grows 1.2 when hovered over and opens ur link in new tab :3 4 example i made it for my carrd, u can use any website !
Replace 'YOUR_PNG_URL.png' with your actual image url and 'https://www.example.com' with the link you want for your image!
2. Make PFP Rotate 360 but pause a little bit??
basically makes ur pfp rotate BUT theres a catch. theres like very smol stops that make it look more grounded imo... stops are smooth not sudden btw
==1.==
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PNG in Bottom Center with Fade-In</title>
<style>
.image-container {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
opacity: 0; /* Initially hidden */
animation: fadeIn 2s forwards 2s; /* Fade in after 2 seconds */
}
.image-container img {
width: 100px; /* Adjust the size of the image */
height: auto;
transition: transform 0.3s ease; /* Smooth transition for scaling */
}
.image-container img:hover {
transform: scale(1.2); /* Makes the image grow 1.2 times on hover */
}
/* Keyframe for fading in */
@keyframes fadeIn {
to {
opacity: 1; /* Make it fully visible */
}
}
</style>
</head>
<body>
<div class="image-container">
<!-- Replace 'YOUR_PNG_URL.png' with your actual PNG URL and 'https://www.example.com' with your target URL -->
<a href="https://www.example.com" target="_blank">
<img src="YOUR_PNG_URL.png" alt="PNG">
</a>
</div>
</body>
</html>
--------------------
==2.==
<style>
@keyframes spin {
0% { transform: rotate(0deg); } /* Starting point */
25% { transform: rotate(90deg); } /* Quarter turn */
50% { transform: rotate(180deg); } /* Half turn */
75% { transform: rotate(270deg); } /* Three-quarters turn */
100% { transform: rotate(360deg); } /* Full rotation */
}
.general-about .profile-pic img {
border-radius: 50%;
animation: spin 6s infinite ease-in-out; /* Smooth 360-degree spin with ease-in-out */
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )