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 32 comments ( View all | Add Comment )

♡₊˚ . 𝖱𝗂𝗋𝗂 . ◌ ⊹	1760807652 Using Report Comment
Briar	1744513364 Using! Report Comment
whitney !!	1738544258 using <3 Report Comment
Viayaya	1736215027 using Report Comment
jubilee🫧🌈	1732116426 using! •u• Report Comment
Katie ݁₊ ˖🫧 . ݁	1727743387 Using! :p Report Comment
silk!!	1727228259 USING!!! Report Comment
Robin	1718602632 Using Report Comment
Poppy	1717219719 using IMMEDIATELY Report Comment
˚₊· ͟͟͞͞➳❥𝕔𝕒𝕟𝕕𝕪𝕣𝕒𝕥	1710815188 so cuuute!!! using!! Report Comment
DrAmnesia	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
Spring	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