Published by Gl0r!a

published 1704044693
updated 1704044807

Category: SpaceHey

View Blog View Profile Report Blog Entry

MY SPONGEBOB LAYOUT!!! (～￣▽￣)～

HEYYYYYYYAAAA LUVSSSS :))))
I MADE MY SPONGEBOB LAYOUT YAYAYAYAYA AND I JUST POSTED IT!!!!

You can find my layout here OR here .

And as always, I recommend this SITE to help format and edit your layout/code.

↑ It gives you a preview when testing your code, which makes it easier in comparison to constantly re-loading ur own profile!!!!

As you probably know by now, these "layout blogs" are just like "reposts" exactly from my Layout but in here I'll provide more reference pics as well as info etc.

First off.... lemme give creds to one of my Spacehey Friends GIO. This is their profile: gio's Profile | SpaceHey or use this link: https://spacehey.com/profile?id=2058062. Really cool layout btw so y'all should check it out!

If it weren't for GIO I probably wouldn't have posted this layout lol. Since I saw other user's post a Spongebob layout already- I thought ehhh no need to make my own since their layouts are already nice and I typically only create layouts of themes that no one has done b4. But.... as I said shoutout to GIO because I ended up posting mine and really happy that I did!!! Next up... Rugrats in the near future as well. But for now, I want to enjoy the Spongebob Layout.

Btw here's how GIO convinced me Lol: (screenshot proof I gotchu)

I'll insert images of the Layout first and then post the code.

Feel free to use, edit, tweak, etc. PLEASEEEE give credits to the other users that I mentioned in the code as well as MYSELFFFF if using!

↑ ~To be more in depth for what I mean= For example, someone could make a layout for "The Avengers" and I use one of their codes under that layout to help me with my "Spongebob Layout" on knowing how to change the font, or add a cursor. So... although I didn't use EXACTLY the same thing they put- because my theme is Spongebob not Avengers and I tweaked it or changed something/added something so that I can use it to fit in and blend in with my layout... I will still give them credit anyways as I used part of their code and they helped me in formatting my layout. So it's really a whole bunch of tweaks and edits from many different things. (Hope this makes sense lol so it doesn't seem like I'm stealing ppl's layouts or anything OFC NOT!) SO plzzzzz as stated b4. Please give them credit as well as myself as we put effort and time in creating the layout! Thank u ;)

And you can always comment under here or my layout, giving me recommendations, etc. ;D

ANYWAYS...that's it tbh just so happy I did this layout ;) Spongebob is a classic 'cmon. Last layout of 2023 wohooo!!

Ok that's it! Thanks 4 clicking on my blog ;)

HERE ARE THE IMAGE SCREENSHOTSSSSSSS:

The Loading Screen:

More imagesss:

Ok now onto the layout code!!!! ^-^

THIS IS THE CODE 4 THE LAYOUT:

Paste what's below in the "HTML/CSS Code:" when you click "Edit your profile."

What is below is the Spongebob Theme (remix) music playing in the background: ⬇

</iframe>

What is below is the loading page: ⬇

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url(https://media1.tenor.com/m/o8xWrHyBTT0AAAAd/spongebob-spongebob-squarepants.gif);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

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

pointer-events: none;}

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

</style>

What is below is the font (change): ⬇

<style>

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

box-sizing: border-box;

}

html, body{

margin: 0;

padding: 0;

}

body{

background-color: #

;

background-image: url();

font-family: 'Silkscreen', cursive;

font-size: 15px;

padding: 10px;

}

</style>

What is below is the background image for the layout, the text boxes color (headings etc.) & the image of the pineapple under "contacting": ⬇

<style>

body {

background: #13133;

}

main {

background: #AFEEEE;(background)

color: pink;(text)

}

</style>

<style>

:root {

--logo-blue: #B0E0E6;

--darker-blue: #AFEEE;

--lighter-blue: #7B68EE;

--even-lighter-blue: #9457eb;

--lightest-blue: #ccccff;

--dark-orange: #9400d3;

--light-orange: #ffef00 ;

--even-lighter-orange: #90ee90;

}

.contact {

border-radius: px;

background: url(https://wallpapercave.com/wp/wp6073066.jpg);

background-position: center;

background-repeat: repeat;

padding: 10px;

width: 20px;

height: 10px;

}

table, tr, td {

background-color:#e6e8fa;

border;

border-width:1.2px;

}

body{

text-transform: lowercase;

background-color: #000000;

background: url("https://wallpapercave.com/wp/wp6864010.jpg");

background-size: cover;

background-attachment: fixed;

.blog-preview p {

background-color: #;

padding: 5px 10px;

border-radius: 10px;

color: #ff33cc;

}

.blog-preview p a{

color: #fff!important;

}

</style>

What is below is what adds a jellyfish emoji in ur header & footer where it says "home" "browse" "search" "blog" etc.: ⬇

<style>

nav .top, nav .links{

background: solid;

text-align: center;

}

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

content: "🪼";

</style>

What is below is what adds the Spongebob Squarepants header image: ⬇

<style>

nav .top {

background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/78cc5c31-1765-4c6a-b16e-9ad7ac0bc38d/de7fq19-32e05e08-e419-4542-91b5-5879462ae846.png/v1/fill/w_1026,h_779,q_70,strp/spongebob_squarepants_intro_logo__my_version__by_jesusantonioda_de7fq19-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTcxIiwicGF0aCI6IlwvZlwvNzhjYzVjMzEtMTc2NS00YzZhLWIxNmUtOWFkN2FjMGJjMzhkXC9kZTdmcTE5LTMyZTA1ZTA4LWU0MTktNDU0Mi05MWI1LTU4Nzk0NjJhZTg0Ni5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.EOZEAJCy5eZWOV_9lgEwo47LjvqRyukSO1M08AbAofM');

height: 390px;

background-size: 870px;

background-position: center;

border-radius: 5px;

position: relative;

border: 3.5px double

border-width: 5px;

border-radius: 20px;

box-shadow: 0px 0px 10px none;

display: block;

</style>

What is below is what adds the image for the footer: ⬇

<style>

footer{

background-color:COLOR;!important;

background-image: url('https://th.bing.com/th/id/R.e71e297601679b9476302adc60c4f92a?rik=4cpmarrNfVO8sQ&pid=ImgRaw&r=0') !important;

}

</style>

What is below is what adds contact profiles (like plankton's icon where it says "block user") ~ It's all of the contacts under "contacting".: ⬇

<style>

/* 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: url("https://icons.iconarchive.com/icons/fatcow/farm-fresh/32/user-patrick-icon.png")

}

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

/* add to favorite */

content: url("https://icons.iconarchive.com/icons/how-bowers/arcade-saturdays/32/Pineapple-Bonus-icon.png")

}

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

/* send a message */

content: url("https://icons.iconarchive.com/icons/icondigest/florida-vacation/32/Beach-ball-icon.png")

}

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

/* foward to friend*/

content: url("https://icons.iconarchive.com/icons/imil/fish/32/Bass-icon.png")

}

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

/* instant message */

content: url("https://icons.iconarchive.com/icons/fatcow/farm-fresh/32/pearl-icon.png")

}

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

/* block user */

content: url("https://icons.iconarchive.com/icons/iconfactory/copland-5/32/Larry-the-Lobster-icon.png")

}

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

/* add 2 group */

content: url("https://icons.iconarchive.com/icons/fatcow/farm-fresh/32/user-squidward-icon.png")

}

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

/* report */

content: url("https://icons.iconarchive.com/icons/fatcow/farm-fresh/32/user-plankton-icon.png")

}

</style>

What is below is what creates a squidward cursor.: ⬇

What is below is what adds those floating SpongeBob characters on the sides of the screen of the layout: ⬇

GIFSSSSSSS TO USE (Feel free to use all or any~ Put under people you'd like to meet etc.)

This is for all the Gifs I have for Spongebob: ⬇

BYEYEYEYEE LUVS ;DDDDD

TY FOR COMING TO 2 DAY'S BLOG POST 4 MY SPONGEBOB LAYOUT

TOODLESSS...xoxo... muah ♡ ( ˘ ³˘)❤

2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )