poco's cool ass carrousel thingy that YOU (yes you) can have on your profile

1 month ago - by pocono - Misc - used 24 times

it's hard to show it moving but trust me bro

this is also very editable, esp the borders since it's so simple here. for changing the borders there are codes on how to do it on w3 schools. adding images to borders are on there as well with these links:

https://www.w3schools.com/css/css3_border_images.asp
https://www.w3schools.com/css/css_border.asp

i'd reccommend testing this in codepen, i use it, it's simple for me to understand since i have a brain of a slug and it also doesn't use generative ai as a feature from what i know. the height and width however may look different on there fyi, don't worry and fully test it here.

ALSO for the math of the moving part i remember just winging it. just follow the structure of the animation already done there and how it's grouped up.

finally to upload your own images, i reccomend imgbb or cosmos (i mostly just store bullshit images, gifs, graphics, etc. on there but you can also upload suff and get the image link from there.)

you can comment if you're gonna use this but if you have issues or questions i'd rather you just dm me so this won't be cluttered up. i also don't know how to broadly explain something i made months ago for a very old layout so yes, questions are supported here!

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

all of the code is in html ^^

HTML Code

This element also has an HTML part - paste it into your About Me (or wherever the description says).

/* genuinely forgot why i did two different style tages besides i kinda just felt like it?? if you just want to make simple edits just use the color,text-shadow, border-style, border-radius, border-color, and margin. but do what you want. go wild! */


	<div style="max-width: 435px; margin: 10px auto; overflow: hidden; border-radius: 8px; border-style:ridge;border-width:4px;&#10; border-color: #ffffff !important;&#10;                   color: white;&#10;text-shadow: 0 0 9px black;&#10;background: linear-gradient(rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 25% , rgba(255,255,255,0.0) 52%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4));&#10; box-shadow: 0px 0px 15px black;&#10;">
	<div style="display: flex; width: 500%; animation: carousel 15s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;">

/* the images here can be changed out, however rememebr to keep the width, hightm and object hit all the same with the height established with the style tags */

	<img src="https://cdn.cosmos.so/21a2a085-a63f-4712-89a1-1c7041cb36de?format=jpeg" alt="Image 1" style="width: 435px; height: 249px; object-fit: cover;"/>
	<img src="https://cdn.cosmos.so/c86f67bf-7f01-4a7d-9e7e-e6b4eaab57d8?format=jpeg" alt="Image 2" style="width: 435px; height: 249px; object-fit: cover;"/>
	<img src="https://pbs.twimg.com/media/F5iklQYXIAAMHsQ?format=jpg&name=large" alt="Image 3" style="width: 435px; height: 249px; object-fit: cover;"/>
    <img src="https://pbs.twimg.com/media/F5iklQZWEAACkU4?format=jpg&name=large" alt="Image 4" style="width: 435px; height: 249px; object-fit: cover;"/>
    <img src="https://cdn.cosmos.so/21a2a085-a63f-4712-89a1-1c7041cb36de?format=jpeg" alt="Image 1 (clone)" style="width: 435px; height: 249px; object-fit: cover;"/>
  </div>
</div>


/* the math here basically allows for four moving slides, you can make it more or less im pretty sure as long as you follow the same format here. dm me if you have any questions however! */


<style>
	@keyframes carousel {
		0% { transform: translateX(0); }
		20% { transform: translateX(0); }
		25% { transform: translateX(-20%); }
		45% { transform: translateX(-20%); }
		50% { transform: translateX(-40%); }
		70% { transform: translateX(-40%); }
		75% { transform: translateX(-60%); }
		95% { transform: translateX(-60%); }
		100% { transform: translateX(-80%); }
  }

</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements