Published by un❕k⨂rn

published 1701298381
updated 1701378224

Category: Blogging

View Blog View Profile Report Blog Entry

HELP WITH RAINBOW text/font LAYOUT

.profile {

code by

xX_J4C0_J4WBR34K3R_Xx

background-color: #000;

linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

?????

helllppp

can someone make a code 4 me that has these rainbow bar and stuff? idk how 2 code at all

i will pin and credit anyone who can help

animation: rainbowAnimation 2s ease-in-out infinite; i tryed this one as well

<style>

/*Search Users Box (Background Color/Background Image)*/

.top input{

background-color: COLOR !important;

background-image: url('https://i.pinimg.com/736x/bc/ec/9b/bcec9bcaa4013ac75ff960580bf9f3c9.jpg') !important;

background-attachment: SCROLL !important;

background-repeat: NO-REPEAT !important;

background-position: CENTER !important;}

</style>

.logo {

content:url("https://i.ibb.co/f1njZCZ/B66-F0-A97-C874-40-FE-BD61-6878850-B02-CD.png");

<style>

/* === rainbow image filter animation code by seal @talkingheads === */

@keyframes hoverrainbow{

from{

filter:saturate(300%) hue-rotate(0deg);

}

to{

filter:saturate(300%) hue-rotate(360deg);

}

main img:hover {

filter:saturate(300%);

animation: 1s hoverrainbow infinite linear;

}

/* === end of rainbow image filter code === */

/* === rainbow glow effect by seal @talkingheads === */

/*setting color variables*/

:root{

--red: #eb6363ff;

--orange: #ebc063ff;

--yellow: #ebeb63ff;

--green: #63eb6eff;

--cyan: #63ebe6ff;

--purple: #9963ebff;

--pink: #eb63c2ff;

}

/*creating the animation*/

@keyframes glowrainbow{

0%{

box-shadow: 0 0 5em 2em var(--red);

}

16%{

box-shadow:0 0 5em 2em var(--orange);

}

32%{

box-shadow: 0 0 5em 2em var(--yellow);

}

48%{

box-shadow: 0 0 5em 2em var(--green);

}

64%{

box-shadow: 0 0 5em 2em var(--cyan);

}

80%{

box-shadow: 0 0 5em 2em var(--purple);

}

90%{

box-shadow: 0 0 5em 2em var(--pink);

}

100%{

box-shadow:0 0 5em 2em var(--red);

}

/*applying the animation*/

body > .container{

animation:30s glowrainbow infinite;

}

/*end of rainbow glow effect code*/

@font-face {

font-family: "Chiller";

src: url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.eot");

src: url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.eot?#iefix")format("embedded-opentype"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.woff2")format("woff2"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.woff")format("woff"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.ttf")format("truetype"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.svg#Chiller")format("svg");

font-size: 35px;

}

body{

background: url("https://drive.google.com/uc?export=download&id=1OrP51XzB9nGeoaxeqb7Uysl7Xr3cJqpj");

font-family: 'Chiller', monotone;

background-size: 25%;

}

main::before {

width: 98%;

height: 98px;

display: block;

content: "";

background-position: center;

background-size: cover;

margin-left: auto;

margin-right: auto;

animation: rainbowAnimation 2s ease-in-out infinite;

}

nav .top {

background-image: url(https://drive.google.com/uc?export=download&id=1I5ISOuBy8-pLdWaf3T2SIJXIXMbPU69B);

color: #FA9907;

padding: 15px 10px 14px 10px;

position: relative;

}

.comment-replies {

padding: 0 5px;

animation: rainbowAnimation 2s ease-in-out infinite;

border-radius: 15px;

margin-top: 10px;

}

nav {

background-image: url(https://drive.google.com/uc?export=download&id=1k5d1MySSdJZCSPJf-QtIy5R7PMiIh3Ck);

color: #FA9907;

padding: 15px 10px 14px 10px;

position: relative;

font-size: 15px;

}

button, input {

overflow: hidden;

background: black;

animation: rainbowAnimation 2s ease-in-out infinite;

color: #FA9907;

font-weight: bold;

}

.logout-btn, .logout-form {

color: #FA9907;

display: inline-block;

font-size: 100%;

}

nav .links {

background-color: transparent;

text-align: center;

padding: 3.5px 16px 5.5px 16px;

}

nav .links a {

text-decoration: none;

color: #FA9907;

text-shadow: 0 0 5px #FA9907;

background: transparent;

font-size: 20px;

}

nav .links .special a {

color: #FA9907;

text-decoration: underline;

background: black;

}

nav .links a:hover {

text-decoration: underline;

color: #7800FF;

background: black;

}

main {

background-image: url(https://drive.google.com/uc?export=download&id=1k5d1MySSdJZCSPJf-QtIy5R7PMiIh3Ck);

color: #00FF00;

animation: rainbowAnimation 2s ease-in-out infinite;

padding: 6px 0px;

font-size: 25px;

}

span {

text-align: center;

color: #FA9907;

font-size: 20px;

}

.profile .friends .heading {

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .blurbs .heading {

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .contact .heading {

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color:#ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .table-section .heading{

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.blog-preview h4 {

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

margin: 0px;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

h1{

font-size: 30px !important;

padding-left: 2px !important;

animation: rainbowAnimation 2s ease-in-out infinite;

background-image: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

padding:5px;

text-align: center;

padding: 0;

color: #ff0099;

}

a {

color: #FA9907;

text-decoration: underline;

}

.award a {

color: #FA9907;

text-decoration: underline;

}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

color: #7800FF;

text-decoration: underline;

}

.edit-link {

font-size: 20px;

text-align: center;

}

.general-about .profile-pic {

display: block;

float: right;

margin: 15px 15px 15px 15px;

animation: rainbowAnimation 2s ease-in-out infinite;

border-radius: 50%;

overflow: hidden

}

.general-about .details {

display: flow-root;

text-align: center;

}

.profile .mood {

width: 100%;

display: inline-block;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}

.setting-section .heading, .home-actions .heading {

background: transparent;

color: #FA9907;

text-align: center;

padding: 2px 7px;

}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

width: 100%;

animation: rainbowAnimation 2s ease-in-out infinite;

margin: 10px 0;

}

.details-table td:first-child {

background: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

color: #FA9907;

text-align: center;

font-weight: bold;

animation: rainbowAnimation 2s ease-in-out infinite;

width: 33%;

}

.details-table td {

background: transparent;

animation: rainbowAnimation 2s ease-in-out infinite;

vertical-align: top;

}

.profile-info {

animation: rainbowAnimation 2s ease-in-out infinite;

display: flex;

align-items: center;

justify-content: center;

padding: 15px 5px;

margin-bottom: 10px;

}

.profile .friends .section h4{

background: transparent;

}

.profile .blurbs {

margin: 20px 0;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.profile .blurbs .section h4 {

background: transparent;

margin: 0;

color: #FA9907;

text-align: center;

}

.friends {

animation: rainbowAnimation 2s ease-in-out infinite;

}

.blog-preview {

animation: rainbowAnimation 2s ease-in-out infinite;

margin: 10px 0;

padding: 0 5px;

}

.count {

color: #FA9907;

}

.profile .friends .person p {

color: #FA9907;

text-shadow: 0 0 5px #FA9907, 0 0 10px #FA9907;

font-weight: bold;

width: 100%;

overflow-wrap: break-word;

word-break: break-word;

font-size: 25px;

text-align: center;

}

.profile .friends .person img:not(.icon) {

max-width: 95px;

max-height: 95px;

display: block;

margin: 0 auto;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.friends-grid {

padding-top: 10px;

}

.comments-table td:first-child, .music-table td:first-child {

background: url(https://drive.google.com/uc?export=download&id=12SU-qV8kxVrxuQMy4Dxj3bsLxY7hl-fZ);

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

font-weight: bold;

width: 38%;

}

.comments-table td:first-child img:not(.icon) {

width: 90px;

max-width: 100%;

max-height: 200px;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.comments-table td, .music-table td {

background: #000000;

animation: rainbowAnimation 2s ease-in-out infinite;

vertical-align: top;

}

table.comments-table {

animation: rainbowAnimation 2s ease-in-out infinite;

}

footer {

text-align: center;

font-size: 25px;

margin: 10px 0 10px;

padding: 10px 5px;

background: #00000000;

color: white;

text-shadow: 0 0 5px #FA9907, 0 0 5px #FA9907,

}

::-webkit-scrollbar {

width: 12px;

height: 12px;

BACKGROUND-COLOR: black;

}

::-webkit-scrollbar-track {

border-radius: 10px;

width: 2px;

border: 1px dotted #FA9907;

}

::-webkit-scrollbar-thumb {

background: #FA9907;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background: #FA9907;

}

.online {

content: url(https://drive.google.com/uc?export=download&id=1HmLbnsDY23h9yKrfyzbeFu6uZkcZlrfu);

max-height: 40px;

}

.icon, .award img {

content: url(https://drive.google.com/uc?export=download&id=1HzznIpWcjqLDefp1jbNMopc7647xGdux);

display: inline-block;

height: 2.0em;

width: 2.0em;

margin: 0 .05em 0 .1em;

vertical-align: -0.3em;

color: rgba(0,0,0,0);

}

HTML,BODY{cursor:

url(https://drive.google.com/uc?export=download&id=1PNOAQvHa1UGfh4mRXsq8wFTi0yLjLbiz),

auto;}

A:hover{cursor:

url(https://drive.google.com/uc?export=download&id=1PNOAQvHa1UGfh4mRXsq8wFTi0yLjLbiz),

auto;}

.snowflake {

width: 2%

height: auto%;

cursor:

url(https://drive.google.com/uc?export=download&id=1PNOAQvHa1UGfh4mRXsq8wFTi0yLjLbiz),

auto;

}

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

@keyframes rainbowAnimation {

0% { border-color: #FF0000; box-shadow: 0 0 5px #FF0000, 0 0 10px #FF0000, inset 0 0 5px #FF0000, inset 0 0 10px #FF0000; }

12.5% { border-color: #FA9907; box-shadow: 0 0 5px #FA9907, 0 0 10px #FA9907, inset 0 0 5px #FA9907, inset 0 0 10px #FA9907; }

25% { border-color: #FFFF00; box-shadow: 0 0 5px #FFFF00, 0 0 10px #FFFF00, inset 0 0 5px #FFFF00, inset 0 0 10px #FFFF00; }

37.5% { border-color: #00FF00; box-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, inset 0 0 5px #00FF00, inset 0 0 10px #00FF00; }

50% { border-color: #00FFFF; box-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, inset 0 0 5px #00FFFF, inset 0 0 10px #00FFFF; }

62.5% { border-color: #0000FF; box-shadow: 0 0 5px #0000FF, 0 0 10px #0000FF, inset 0 0 5px #0000FF, inset 0 0 10px #0000FF; }

75% { border-color: #7800FF; box-shadow: 0 0 5px #7800FF, 0 0 10px #7800FF, inset 0 0 5px #7800FF, inset 0 0 10px #7800FF; }

87.5% { border-color: #FF00FF; box-shadow: 0 0 5px #FF00FF, 0 0 10px #FF00FF, inset 0 0 5px #FF00FF, inset 0 0 10px #FF00FF; }

100% { border-color: #FF0000; box-shadow: 0 0 5px #FF0000, 0 0 10px #FF0000, inset 0 0 5px #FF0000, inset 0 0 10px #FF0000; }

}

</style>

</div>

<style>

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.woff2")format("woff2"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.woff")format("woff"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.ttf")format("truetype"),

url("https://db.onlinewebfonts.com/t/cfde7197e2e3b805f27da82b6faa93e6.svg#Chiller")format("svg");

font-size: 35px;

}

body{

background: url("");

font-family: 'Chiller', monotone;

background-size: 25%;

}

main::before {

width: 98%;

height: 98px;

display: block;

content: "";

background-position: center;

background-size: cover;

margin-left: auto;

margin-right: auto;

animation: rainbowAnimation 2s ease-in-out infinite;

}

nav .top {

color: #FA9907;

padding: 15px 10px 14px 10px;

position: relative;

}

.comment-replies {

padding: 0 5px;

animation: rainbowAnimation 2s ease-in-out infinite;

border-radius: 15px;

margin-top: 10px;

}

nav {

color: #FA9907;

padding: 15px 10px 14px 10px;

position: relative;

font-size: 15px;

}

button, input {

overflow: hidden;

background: black;

animation: rainbowAnimation 2s ease-in-out infinite;

color: #FA9907;

font-weight: bold;

}

.logout-btn, .logout-form {

color: #FA9907;

display: inline-block;

font-size: 100%;

}

nav .links {

background-color: transparent;

text-align: center;

padding: 3.5px 16px 5.5px 16px;

}

nav .links a {

text-decoration: none;

color: #FA9907;

text-shadow: 0 0 5px #FA9907;

background: transparent;

font-size: 20px;

}

nav .links .special a {

color: #FA9907;

text-decoration: underline;

background: black;

}

nav .links a:hover {

text-decoration: underline;

color: #7800FF;

background: black;

}

main {

color: #00FF00;

animation: rainbowAnimation 2s ease-in-out infinite;

padding: 6px 0px;

font-size: 25px;

}

span {

text-align: center;

color: #FA9907;

font-size: 20px;

}

.profile .friends .heading {

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .blurbs .heading {

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .contact .heading {

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color:#ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.profile .table-section .heading{

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

.blog-preview h4 {

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

margin: 0px;

color: #ff0099;

margin-right: -2px;

margin-top: -2px;

margin-left: -2px;

}

h1{

font-size: 30px !important;

padding-left: 2px !important;

animation: rainbowAnimation 2s ease-in-out infinite;

padding:5px;

text-align: center;

padding: 0;

color: #ff0099;

}

a {

color: #FA9907;

text-decoration: underline;

}

.award a {

color: #FA9907;

text-decoration: underline;

}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

color: #7800FF;

text-decoration: underline;

}

.edit-link {

font-size: 20px;

text-align: center;

}

.general-about .profile-pic {

display: block;

float: right;

margin: 15px 15px 15px 15px;

animation: rainbowAnimation 2s ease-in-out infinite;

border-radius: 50%;

overflow: hidden

}

.general-about .details {

display: flow-root;

text-align: center;

}

.profile .mood {

width: 100%;

display: inline-block;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}

.setting-section .heading, .home-actions .heading {

background: transparent;

color: #FA9907;

text-align: center;

padding: 2px 7px;

}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

width: 100%;

animation: rainbowAnimation 2s ease-in-out infinite;

margin: 10px 0;

}

.details-table td:first-child {

background: url();

color: #FA9907;

text-align: center;

font-weight: bold;

animation: rainbowAnimation 2s ease-in-out infinite;

width: 33%;

}

.details-table td {

background: transparent;

animation: rainbowAnimation 2s ease-in-out infinite;

vertical-align: top;

}

.profile-info {

animation: rainbowAnimation 2s ease-in-out infinite;

display: flex;

align-items: center;

justify-content: center;

padding: 15px 5px;

margin-bottom: 10px;

}

.profile .friends .section h4{

background: transparent;

}

.profile .blurbs {

margin: 20px 0;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.profile .blurbs .section h4 {

background: transparent;

margin: 0;

color: #FA9907;

text-align: center;

}

.friends {

animation: rainbowAnimation 2s ease-in-out infinite;

}

.blog-preview {

animation: rainbowAnimation 2s ease-in-out infinite;

margin: 10px 0;

padding: 0 5px;

}

.count {

color: #FA9907;

}

.profile .friends .person p {

color: #FA9907;

text-shadow: 0 0 5px #FA9907, 0 0 10px #FA9907;

font-weight: bold;

width: 100%;

overflow-wrap: break-word;

word-break: break-word;

font-size: 25px;

text-align: center;

}

.profile .friends .person img:not(.icon) {

max-width: 95px;

max-height: 95px;

display: block;

margin: 0 auto;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.friends-grid {

padding-top: 10px;

}

.comments-table td:first-child, .music-table td:first-child {

background: url();

animation: rainbowAnimation 2s ease-in-out infinite;

text-align: center;

font-weight: bold;

width: 38%;

}

.comments-table td:first-child img:not(.icon) {

width: 90px;

max-width: 100%;

max-height: 200px;

animation: rainbowAnimation 2s ease-in-out infinite;

}

.comments-table td, .music-table td {

background: #000000;

animation: rainbowAnimation 2s ease-in-out infinite;

vertical-align: top;

}

table.comments-table {

animation: rainbowAnimation 2s ease-in-out infinite;

}

footer {

text-align: center;

font-size: 25px;

margin: 10px 0 10px;

padding: 10px 5px;

background: #00000000;

color: white;

text-shadow: 0 0 5px #FA9907, 0 0 5px #FA9907,

}

::-webkit-scrollbar {

width: 12px;

height: 12px;

BACKGROUND-COLOR: black;

}

::-webkit-scrollbar-track {

border-radius: 10px;

width: 2px;

border: 1px dotted #FA9907;

}

::-webkit-scrollbar-thumb {

background: #FA9907;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background: #FA9907;

}

.online {

content: url();

max-height: 40px;

}

.icon, .award img {

content: url();

display: inline-block;

height: 2.0em;

width: 2.0em;

margin: 0 .05em 0 .1em;

vertical-align: -0.3em;

color: rgba(0,0,0,0);

}

HTML,BODY{cursor:

url(),