« Web, HTML, Tech Forum

Snowflakes Not Appearing

Posted by Yomogiu

posted 1719743805

Heyo!

So I've been having an issue with the code on my profile where for some reason, the snowflakes that are supposed to appear on my page won't fall down. I've been trying for like way too long now to see why, but to be fair, I can't code in HTML/CSS for shit so I was wondering if someone else could help me figure out the reason. I'll paste my code down below so hopefully someone smarter than me can help me figure what's wrong.

P.S. Just wanna acknowledge that all of the code I'm going to post is not mine. I used a layout I found on the app. I have toyed a lot with the code though in order to make my profile look have I've wanted it too. Just wanted to make that clear just in case someone is attentive to that sort of thing.

-------------------

<style>

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Mono&family=Press+Start+2P&display=swap');

font-family: 'PT Mono', monospace;

font-size: 90%;

color: #7595ff;

}

h1,h2,h3,h4,h5{

font-family: 'Press Start 2P', cursive;

font-size: 70%;

color: #7595ff;

}

.top{

background-image: url(https://cdn.discordapp.com/attachments/754593914425573379/1256587128025120778/IMG_4377.jpg?ex=66814f75&is=667ffdf5&hm=9b0ee86029f91c66c0b939a686bdfb485fcd4870f78a983cfe1aa7a834da8022&) !important;

}

body {

background-image: url(https://i.pinimg.com/736x/d4/ec/ef/d4eceff63ac63b73ec16280934a4a13e.jpg);

}

.top input{

background-color: #7595ff !important;

}

button{

background-color: #7595ff !important;

}

main .right,

main .left{

background-color: rgba(22, 50, 130, 0.52);

color: #07112d;

border: 2px solid;

}

main{

background-color: transparent;

}

/* change all headings on page to different colors. */

.profile .blurbs .heading,

.profile .friends .heading{

background-image: url('https://64.media.tumblr.com/bcc62c8d7ad034197995be67c8d908fb/18efeb11e4220549-d1/s500x750/4d5b4b31f9466bcd99e0fb0dac18a1f0fbf7b5a4.gifv');

color: #7595ff;

}

/* change all headings on page to different colors. */

.profile .contact .heading,

.profile .table-section .heading{

background-image: url('https://64.media.tumblr.com/bcc62c8d7ad034197995be67c8d908fb/18efeb11e4220549-d1/s500x750/4d5b4b31f9466bcd99e0fb0dac18a1f0fbf7b5a4.gifv');

color: #7595ff;

}

.col.right:before {

content: "";

white-space: pre-wrap;

display: block;

height: 160px;

background-image: url("https://i.ibb.co/YB3Mx5p/Yomogiu.png");

background-repeat: no-repeat;

background-position-x: center;

background-size: 260px;

margin-top: 0px;

}

.blog-preview h4{

background-image: url('https://64.media.tumblr.com/bcc62c8d7ad034197995be67c8d908fb/18efeb11e4220549-d1/s500x750/4d5b4b31f9466bcd99e0fb0dac18a1f0fbf7b5a4.gifv');

color: #7595ff;

}

table.comments-table{

display: block;

height: 200px!important;

overflow-y: scroll;}

footer {

border-radius: 15px;

background-image: url(https://nypost.com/wp-content/uploads/sites/2/2022/02/mooooon.jpg?quality=90&strip=all&w=1024);

color: #07112d;

border: 2px solid;

}

table.comments-table{

color: #07112d;

border: 2px solid;

}

color: #4d35ff !important;

font-family: 'PT Mono', monospace;

}

a:hover{

color: #e447ff !important;

}

a:visited{

color: COLOR !important;

}

.top a{

color: #4d35ff !important;

}

.top a:hover{

color: #e447ff !important;

}

.top a:visited{

color: COLOR !important;

}

.links a{

color: #4d35ff !important;

}

.links a:hover{

color: #e447ff !important;

}

.links a:visited{

color: COLOR !important;

}

.friends-grid p{

color: #4d35ff !important;

}

.comments-table p{

color: #7595ff;

}

footer .links a{

color: #4d35ff !important;

}

footer .links a:hover{

color: #e447ff !important;

}

footer .links a:visited{

color: COLOR !important;

}

:root {

--logo-blue: #7595ff;

--darker-blue: #DD536F;

--lighter-blue: black;

--even-lighter-blue: url(https://64.media.tumblr.com/bcc62c8d7ad034197995be67c8d908fb/18efeb11e4220549-d1/s500x750/4d5b4b31f9466bcd99e0fb0dac18a1f0fbf7b5a4.gifv);

--lightest-blue: transparent;

--dark-orange: #7595ff;

--light-orange: url(https://64.media.tumblr.com/1b8a93c17504b262574c58ad7b41381f/18efeb11e4220549-9b/s400x600/6ec2a94f828b8004fa4db8b12fa12b5fa46dbec9.jpg);

--even-lighter-orange: transparent;

--green: ;

}

/* contact icons */

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

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

/* add to friends */

content: "⭐"

}

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

/* add to favorite */

content: "⭐"

}

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

/* send a message */

content: "⭐"

}

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

/* foward to friend*/

content: "⭐"

}

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

/* instant message */

content: "⭐"

}

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

/* block user */

content: "⭐"

}

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

/* add 2 group */

content: "⭐"

}

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

/* report */

content: "⭐"

}

.online{content:url("https://64.media.tumblr.com/2e06633939092d3533022195ab919d4a/18efeb11e4220549-7d/s75x75_c1/0391488280c4c10c03bb02db01bbceb665f8fc21.gifv");

}

::-webkit-scrollbar {

width: 3px;

height: 10px;

}

::-webkit-scrollbar-thumb {

background: rgba(0, 89, 255, 1);

}

::-webkit-scrollbar-track {

background-color: black;

}

<style>

/* customizable snowflake styling */

.snowflake {

color: #27cff5;

font-size: 2em;

font-family: Arial, sans-serif;

text-shadow: 0 0 0px rgba(0,0,0,0.7);

}

@-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>

/* code generated by the spacehey live designer [start] */

main{ background-color: rgba(0, 0, 0, 0) !important;}

body{ background-color: rgb(227, 227, 227) !important;}

.table-section .heading, .contact .heading{ color: rgb(6, 16, 88) !important; background-color: rgb(0, 0, 0) !important;}

.table-section, .contact{ border-color: rgb(0, 0, 0) !important;}

/* [end] spacehey live designer */

</style>

Report Topic

6 Replies

Sort Replies:

Reply by quinn

posted 1719808196

idk much either, the codes i add from the layouts section arent working for me :,) hope you find a solution soon

Permalink Report Reply