Pastel rainbow

Tags: rainbow, pastel, cute, bulletin

Description:

my first layout !! its colorful but pastel and readable i think the code is pretty organized comment if u use :o

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by mei (https://layouts.spacehey.com/layout?id=26926) -->

<style>

  @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');


:root {
    --headers: #38c5dd;
    --text: #ed29d4;
    --names: #bf5683;
    --links: #8845f5;
    --hover: #ff8f33;
    --borders: 1px solid #ff56cb!important;
    --background_image: url("https://64.media.tumblr.com/d90e5b77c8b77f67840ea566aead88ba/c6a2a524baace40a-be/s400x600/145b21be1b21f781fa39622b253c1dec2faec20b.gifv");
    --font-headers: 'Silkscreen', cursive;
    --font-body: 'Merriweather', serif;
    --curve: 0px;
    --simple_bg: #ffffff;
}


/* === 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 === */


/* font */


h1, .friends a h3, h4, h5, .url-info{
    font-size: 35px!important;
    font-family: var(--font-headers) !important;
}


h2, h3, h4, h5, a, p, nav label, .section {
    font-size: 12px!important;
}


/* background */

body {
    background-image: var(--background_image) !important;
    background-color: white !important;
    background-repeat: repeat;
    background-attachment: fixed;
}


/* online icon */
.online {
    content: url(https://64.media.tumblr.com/ee69a86a5f3e5a42fc8301bcf1514669/63e7616932cc7deb-67/s100x200/defeda82e21b25a22aa1e40000b6596c153f84a5.gifv);
}


.icon{
    content: url(https://64.media.tumblr.com/4b1dd3180882e721fb1a8992339a51c2/1ab29305505ccc17-19/s75x75_c1/3afb26279ee6749f180fcc0b94934738984472bb.gifv);
}

/* text */


nav label {
color: var(--links) !important;
} /*navigation*/

h3, h4, h5, .url-info b {
  color: var(--headers) 
} 


.section h4 {
color: var(--headers) !important; text-align: center;
} /*about me headings*/


a {
  color: var(--links) !important;
}

a:hover {
   color: var(--hover) !important;
}

p, h2 {
   color: var(--text) !important;
}

h1, .friends  p {
   color: transparent;
   background-clip: text;

   -webkit-background-clip: text; /* Safari and older versions of Chrome */
   text-fill-color: transparent;
   background-image: linear-gradient(#ED29D4,#70E4EF);
} /*names*/


.comment-reply:not(:first-child) {
   border-top: 3px double hotpink;
} /* line in between comment replies*/

.count {color: #4567f5;} /*numbers counting*/


/*text effects*/

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}


a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}


/* puddings and margarine */

main:before {
    margin-top: 6px !important;
    margin-bottom: 1px !important
}

.mood:after {
    margin-bottom: 3px !important
}

.friends {
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}


.table-section {
    padding-bottom: 10px !important;
    margin-top: 30px!important
}


#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}


.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}


.mood {
    margin-top: 7px !important;
    margin-bottom: 10px !important;
}


.table-section {
    margin-top: 10px !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

.mood {
    margin-top: 20px;
}

/* nav chocolate bar */

nav {
    background: url('https://i.pinimg.com/originals/ca/70/11/ca7011241a3250857835172e3e6338d9.gif');
    background-size: 12px
    margin-bottom: 30px;
    border: var(--borders);
    box-shadow: 2px 2px 15px 5px white;
    background-size: cover;
    margin-bottom: 10px;
}

nav .top {
    background: rgba(0, 0, 0, 0.0);

}


nav .links {
    background: transparent!important;
    text-align: center;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

.search-wrapper input[type=text] {
    background-color: #fff4c5!important;
    border: 1px solid #ED29D4!important;
    color: #ED29D4!important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid pink!important;
    font-family: var(--font-family) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #ED29D4 !important;
}

/* divider after nav bar */

main:before {
    height: 29px;
    display: block;
    content: "";
    background-image: url('https://64.media.tumblr.com/d54e0a2b2464090073d2938c22a20b49/15eb1e3f4b8d0c87-21/s250x400/f1de3b35eee4b1009e30b107faba722ac59c93b0.gifv');
    background-size: fit;
}



/* profile */

url-info{
    background-color: white !important;
    background: url('https://i.pinimg.com/originals/03/4a/86/034a866387b581d0693eb38b4bc18bd8.gif')!important;
    background-size: cover;
} /* idk why dis isnt workin */


.profile-pic img {
    outline: none !important;
    border: none!important;
    box-shadow: 0px 0px 20px 4px #ff7dee;

}



.profile-info{
    font-weight: bold;
    text-align: center;
    background: white;
    border: var(--borders);
}

.mood:after {
    height: 29px;
    display: block;
    content: "";
    background-image: url('https://64.media.tumblr.com/3279cecdc60b5096659a4d67f4b4693a/0e436223ca5056ac-a6/s250x400/537420be658f7c1f19bc0da53d1ac9ae79407511.gifv');
    background-size: fit;
    background-repeat: no-repeat; /* Change this value to adjust the repetition */
    background-position: center;
        
}

.table-section:after {
  content: "";
  background-image: url('https://64.media.tumblr.com/e067748aa7b9871bbe54458b8c86462f/fcf30a7d52b1c113-49/s100x200/2708e82d8a2e2f9d4ee0d32f613ecec05fba6ad2.gifv');
  width: 100px !important;
  background-size: cover;
  height: 20px;
  position: absolute;


}

.contact {
    background: url('https://i.pinimg.com/originals/03/4a/86/034a866387b581d0693eb38b4bc18bd8.gif');
    background-size: cover;
}

.friends-grid img {
    outline: none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

.general-about{
    background: white;
    padding: 8px;
    border: var(--borders);
}


main {
    background: #ccfbff;
    padding: 1px 8px;
    border: var(--borders);
   box-shadow: 2px 2px 15px 5px white;
}

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid pink;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 1px !important;
    border: var(--borders) !important;
}

.friends, .blurbs {
    background: white;
}

.blog-preview{
    background: url('https://i.pinimg.com/564x/33/42/b2/3342b240b310c4fb47f2b56a8ccca44a.jpg')!important;
}


.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: white;
    border: var(--borders) !important;
}

.table-section {
    border: var(--borders) !important;
    background-color: white!important;
    border-radius: var(--curve) !important;
}

.heading {
    background: #fff4c5!important;
    background-size: cover;
    padding-bottom: 5px !important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--borders) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('https://64.media.tumblr.com/5504ddc8b91e990b52ba40eec51475a9/865a38c72a803063-cf/s400x600/67275fc0ab00e5cf7b65aca273c7d729e99cf9a3.gifv') !important;
    background-size: cover;
    border: var(--borders);
    filter: brightness -50%; /* ""Change this value to adjust the brightness"" - chat gpt, it doesn't WORK */
}


footer {
    color: var(--text);
    text-align: center;
    font-size: 50%;
    background: url('https://i.pinimg.com/originals/d6/63/59/d6635990cb9e5004ca42540cb72fbae9.gif');
    background-size: cover;
    box-shadow: 2px 2px 15px 5px white;
}

</style>
<style>


::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}


::-webkit-scrollbar-thumb {
    background: pink;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: cyan;
}


::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px dotted hotpink;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 24 comments ( View all | Add Comment )

˚₊· ͟͟͞͞➳❥𝕔𝕒𝕟𝕕𝕪𝕣𝕒𝕥	1710815188 so cuuute!!! using!! Report Comment
DOOM!!! :3	1705344860 usingg!! Report Comment
handsome worm	1693314294 using!! Report Comment
Sasha	1692073281 using! Report Comment
viverry	1691679329 using, ty! Report Comment
Korah	1691545511 using ! Report Comment
nin	1688805000 using !! :] Report Comment
Narwhal!	1688209552 SO CUTEE!!, Using!! ^^ Report Comment
rory :3	1685975493 using tyy!! :3 Report Comment
💫AudreyStar💫	1685441705 Using! Report Comment
Melissa!!<3	1685065641 using Report Comment
Su	1684726041 Using :)) Report Comment
~ Ginny ~	1682996924 Using! Report Comment
softnfluffy	1682400606 using it :D Report Comment
Autumn (_ _).｡o○	1681175657 using :) Report Comment
Remy	1680884083 so cute! usinggg Report Comment
cassadaga	1680384053 very cute! i'm using it thankyou! (love that its actually readable xD) <3 Report Comment
♡☆gAL@Xy dRe@m C@RniVaL☆♡	1680115089 Using! Love this one! Report Comment
♪ COSMO/OREL ♪	1679239819 USING!!! its so adorable!! :3 Report Comment
꒰ა nyxie ໒꒱	1678959183 using this!! it’s adorable! Report Comment