Layouts not appearing on top of my profile

Posted by Raneen Aldana

posted 1733234489

I've been adding some layouts that are supposed to appear on top my profile, but they're stuck in the "about me" blurb.

This happened so many times that I'm starting to wonder if the problem is coming from me.

Example:

Here's is how it's supposed to look like:

The rabbit is supposed to be moving through the whole screen

The pink girl is supposed to be on top of the screen, not the blurb.

And one last thing, the petals are supposed to fall on the full profile, but here, they only fall on the right side.

I'm not 100% sure what's the problem, so I hope someone can help me with it.

Here's my current layout if it could help:

(っ◔◡◔)っ 𝒜𝓃𝒾𝓂𝑒 𝒶𝓃𝒹 𝒢𝒶𝓂𝑒𝓈 ⋅˚₊‧ ୨୧ ‧₊˚ ⋅

<img src="https://64.media.tumblr.com/13e0acdb6e1f0b0844ef36b2096dae18/d6a9462edf6a98a8-2f/s500x750/89da8cd5bca7fa5a339b013b53017981cdfdde0a.gif"/>

<img src="https://files.catbox.moe/embrpg.gif"/>

<img src="https://files.catbox.moe/kn9bf8.gif" width="65%"/>

<img src="https://files.catbox.moe/8618gv.gif" height="150"/>

<img src="https://files.catbox.moe/eq836b.gif" height="150"/>

<img src="https://files.catbox.moe/neu140.gif" height="150"/>

<img src="https://files.catbox.moe/431u88.gif" height="150"/>

<img src="https://files.catbox.moe/bpqkz9.gif" height="150"/>

<img src="https://i.postimg.cc/sfBCr08d/IMG-9366.jpg"/>

<img src="https://i.postimg.cc/yNjtYZ4g/j1c5xh.gif"/>

<img src="https://i.postimg.cc/cHZxPY7v/j3kl74.gif"/>

<img src="https://i.postimg.cc/HL88TQ73/ner3uk.gif"/>

<img src="https://i.postimg.cc/j2fmQ39m/ggiq3r.gif"/>

<img src="https://64.media.tumblr.com/f5fa6014ce5782a515fa7bf67ed896ed/7db2bebf0a31eed2-81/s100x200/4d3e5d2e322359a405b4dd515d6f0d52f7250ee1.pnj"/>

<img src="https://s7rwbb3r1.neocities.org/Untitled4_20240527204600.png" width="100" height="57"/>

<img src="https://s7rwbb3r1.neocities.org/Untitled4_20240527203534.png" width="100" height="57"/>

<img src="https://64.media.tumblr.com/ea8560f1c275f15328c33ee87bbb4910/04b98bc6f19fc712-5c/s100x200/88d5cae619ff581d14b02a06f4f353bc8e171929.gifv"/>

<img src="https://i.postimg.cc/MKf8QRnh/i1f6as.gif"/>

<img src="https://64.media.tumblr.com/f86ff0c17654f6d6eed18d515921d4e4/0a314c1722fc4072-5b/s100x200/c434b6a7691cfb8489b0b73145332130e6123c25.pnj"/>

<img src="https://64.media.tumblr.com/44804f0068eb6410d65c35e20d0fe3ae/fdfae52d57e94b05-19/s100x200/538b8fa40438a160b0194f5f706d684de447a449.pnj"/>

<img src="https://64.media.tumblr.com/b1526d14331141e51b9fc6042e994eb1/fdfae52d57e94b05-0c/s100x200/38ea96509f61bafd06a19863d9c04cd9e4c5ea08.pnj"/>

<img src="https://64.media.tumblr.com/770164b607b436e13df4d521f9e81a68/fdfae52d57e94b05-38/s100x200/56b2daa0d5bb395540d194773ce820b84c43a5ee.pnj"/>

<img src="https://64.media.tumblr.com/f683e710426cc193d68c80a0c6f74554/fdfae52d57e94b05-b6/s100x200/4dbb73f1c6b9de5450f1083d94b51aedd29c3190.pnj"/>

<img src="https://64.media.tumblr.com/fcb4d1da4193c73a599bcb03f1c7d117/tumblr_inline_pgpm8mH5di1v11djx_540.png"/>

<img src="https://64.media.tumblr.com/67d467cac123ec7e05c9c1f84a38c16d/tumblr_pbmzyeacTl1wlxvjlo2_100.jpg"/>

<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9ad61435-33de-410b-a782-bea083f07fa7/dgude95-6c9dee69-8584-4e4f-88f0-2cda841ca6a6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzlhZDYxNDM1LTMzZGUtNDEwYi1hNzgyLWJlYTA4M2YwN2ZhN1wvZGd1ZGU5NS02YzlkZWU2OS04NTg0LTRlNGYtODhmMC0yY2RhODQxY2E2YTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.X46yiEgxT7A3t85uiWt7B7uTasKs4IbTmSBvJwRrcxk"/>

<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9ad61435-33de-410b-a782-bea083f07fa7/dgubft0-d5231be6-3da1-4841-b16c-07e84f7a14ec.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzlhZDYxNDM1LTMzZGUtNDEwYi1hNzgyLWJlYTA4M2YwN2ZhN1wvZGd1YmZ0MC1kNTIzMWJlNi0zZGExLTQ4NDEtYjE2Yy0wN2U4NGY3YTE0ZWMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.MIMZc7MlUXqROUCm0bkXeQgla_BoFJV47D_RmuSz3vw"/>

<img src="https://64.media.tumblr.com/fe87c1eb6b6bae9ea5d82a1b841361af/d03a58739523e474-71/s250x400/f8640dec8109a823a2e92a2ba72a7ea65a169c16.gifv"/>

<img src="https://i.pinimg.com/originals/60/68/32/606832a4213188ba60a59c9b5a7fc7a9.gif" alt="https://i.pinimg.com/originals/60/68/32/606832a4213188ba60a59c9b5a7fc7a9.gif"/>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://media.tenor.com/9cy5kwiCg6YAAAAC/angai313-pink-hearts.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

<style>

.general-about{position:relative;margin-top:30px}.general-about .profile-pic::before{content:'';background:url(https://media.tenor.com/qbhpNdk612IAAAAj/lol-kawaii.gif) no-repeat;background-size:cover;display:block;width:100px;height:75px;z-index:999;position:absolute;top:-20px;left:-43px}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p:before{content:"♡ general ♡";font-size:.8rem}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p:before{content:"♡ music ♡";font-size:.8rem}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(3) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(3) td:first-child p:before{content:"♡ films ♡";font-size:.8rem}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p:before{content:"♡ tv ♡";font-size:.8rem}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p:before{content:"♡ books ♡";font-size:.8rem}</style>

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p{font-size:0}.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p:before{content:"♡ heroes ♡";font-size:.8rem}</style>

body{font-family:"Jua", sans-serif; font-size: 20px; font-color:#e36489;}</style>

<style>

nav .links li:not(:last-child)::after,footer .links li:not(:last-child)::after{content:" ♡ ";color:#fff;text-shadow: 0 0 3px #e86f92, 0 0 5px #e86f92, 0 0 10px #e86f92;}</style>

font-size: 0;}.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {font-size: 14px;text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 10px #fff;}.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after {

content: "add/remove"}.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after {

content: "add to favs"}.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after {

content: "message me"}.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after {

content: "forward to friend"}.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after {

content: "instant messages"}.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after {

content: "block me"}.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after {

content: "add to group"}.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {

content: "report me"}</style>

<style>

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

.contact .inner a:before {

content: ""

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

display: inline-block;

background: url("https://i5.glitter-graphics.org/pub/638/638145bltz6zqhdo.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorites */

display: inline-block;

background: url("https://i6.glitter-graphics.org/pub/638/638146kvkkfs33zm.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send Message */

display: inline-block;

background: url("https://i10.glitter-graphics.org/pub/1065/1065500cl3si27n8p.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* forward to friend */

display: inline-block;

background: url("https://i5.glitter-graphics.org/pub/553/553525locp67mrqu.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

display: inline-block;

background: url("https://i10.glitter-graphics.org/pub/1073/1073020lz9hw5tluj.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

display: inline-block;

background: url("https://i6.glitter-graphics.org/pub/1864/1864126gg6pk5sjxk.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add to group */

display: inline-block;

background: url("https://i5.glitter-graphics.org/pub/1823/1823285xkz7w3dlz4.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report user */

display: inline-block;

background: url("https://i4.glitter-graphics.org/pub/1595/1595794joznotovno.gif")no-repeat 0 0;

background-size: 100%;

width: 16px;

height: 16px;

}

</style>

<style>

.online{content: url(https://files.catbox.moe/u00axa.gif);}

background-position: left top;background-repeat: repeat;padding: 5px;width: 450px;height: px;color: insert color!important;}</style>

padding: 5px;}.profile .url-info{border: 2px dashed #e86f92;border-radius: 20px;padding: 10px;background-image: url('https://media.tenor.com/qVaQBPj0bI4AAAAj/stars-sparkling.gif');margin-bottom: 10px;}[id='q']{border: 0px dashed #e86f92;border-radius: 20px;}.profile .table-section{border: 2px dashed #e86f92;border-radius: 20px;padding: 5px;background-image:url('https://i.pinimg.com/originals/53/f0/e7/53f0e71f528d032ca2e64b9e76037282.gif');}</style>

<style>

.profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://watermelon.crd.co/assets/images/gallery16/52aef02b.png?v=9a76615e); width: auto; height: 100px; background-position: top center; background-size: 50%; background-repeat: no-repeat;}

.profile .url-info p {text-align: center;}

</style>

</div>

<style>

.snowflake {

font-size: 16px;

}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>

@keyframes walking-Monomi{

from{ left:-130px; }

to{ left:calc(100% + 200px); }

}

#Monomi{

position: fixed;

left: -130px;

bottom: -1px;

width: 82px;

animation: walking-Monomi 17s infinite linear;

pointer-events: none;

}

</style>

Report Topic

1 Reply

Reply by byte

posted 1733328387

i'll be honest the formatting and organization of this code hurts my eyes but nevertheless i tried

1st problem: (gifs and pngs overlapping)

lets take this snippet from the code for example:

#Monomi{

position: fixed;

left: -130px;

bottom: -1px;

width: 82px;

animation: walking-Monomi 17s infinite linear;

pointer-events: none;

}

</style>

<img id="Monomi" src="https://media.tenor.com/-SsrTwA1ca4AAAAi/monomi-danganronpa.gif"/>

it is on top of the page you can see here from this snippet that there is a left and bottom values. you can edit that and rearrange monomi anywhere you want and can arrange them without overlapping. try playing with the numbers and see what you like best. do this for the rest of the pngs/gif on the page.

try this code instead:

<style>

@keyframes walking-Monomi {

from {

left: -130px;

}

to {

left: calc(100% + 200px);

}

#Monomi {

position: fixed;

left: 0;

bottom: 0;

width: 82px;

height: 82px;

background-image: url('https://media.tenor.com/-SsrTwA1ca4AAAAi/monomi-danganronpa.gif');

background-size: cover;

animation: walking-Monomi 17s infinite linear;

pointer-events: none;

content: '';

}

</style>

as for the pink girl (Hatsune Miku), and the rest of the pngs/gifs i cannot find the code snippet but i suggest you use insert the direct image source links in this code:

<div style="float: ; max-height: 200px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="replace with link here" width="100" height="200"/></div>

this also has right, bottom, width, height values. feel free to also change these to however you like/feel. don't be afraid to change the value right and bottom to left and bottom or right and top, there is no limit here.

2nd problem: (petals only falling from one side)

try this code instead:

</div>

<style>

/* Ensure the container spans the entire page */

.snowflakes {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none; /* Prevent interference with page interaction */

overflow: hidden;

z-index: 9999;

}

.snowflake {

position: fixed;

top: -10%;

font-size: 16px;

animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite;

}

@keyframes snowflakes-fall {

0% {

top: -10%;

}

100% {

top: 100%;

}

@keyframes snowflakes-shake {

0%,

100% {

transform: translateX(0);

}

50% {

transform: translateX(80px);

}

/* customize individual petal animation and stuff */

.snowflake:nth-of-type(1) {

left: 10%;

animation-delay: 0s, 1s;

}

.snowflake:nth-of-type(2) {

left: 20%;

animation-delay: 2s, 0.5s;

}

.snowflake:nth-of-type(3) {

left: 30%;

animation-delay: 4s, 2s;

}

.snowflake:nth-of-type(4) {

left: 40%;

animation-delay: 1s, 1.5s;

}

.snowflake:nth-of-type(5) {

left: 50%;

animation-delay: 6s, 3s;

}

.snowflake:nth-of-type(6) {

left: 60%;

animation-delay: 8s, 2s;

}

.snowflake:nth-of-type(7) {

left: 70%;

animation-delay: 3s, 1s;

}

</style>

let me know if it works!

Permalink Report Reply

« Web, HTML, Tech Forum

Layouts not appearing on top of my profile

Posted by Raneen Aldana

1 Reply

Reply by byte

let me know if it works!