Pokémon Layout

Tags: pixel art, pokemon, green

Description:

Here's a fun Pokémon layout that also is a gif background c:

➤Custom Pokéball cursor

➤Set up so you can customize your interest topics

➤"About me" and "Who I want to meet" hidden

➤Blogs, URL, and "XXX is your friend" section hidden

Please comment and/or add me if you use this c: Also let me know of any other theme ideas. I'm looking to make more layouts!

Preview:

click on the image for a larger preview

Code:

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

<style>
/*Main Body Background Color*/
    body{
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cad4b52e-f6b1-432f-9035-a5f4853bcf15/d7i3cm4-dc9f4577-6b7d-4d59-8b46-a15bf5e84209.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NhZDRiNTJlLWY2YjEtNDMyZi05MDM1LWE1ZjQ4NTNiY2YxNVwvZDdpM2NtNC1kYzlmNDU3Ny02YjdkLTRkNTktOGI0Ni1hMTViZjVlODQyMDkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.MAvFmljnNt5yawKRk7Tm-59pAkenmRqY3ZmzVmfsMjI') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
    
<style>
/*Profile Background Color*/
    main{
    background-color: transparent !important;}
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<style>
/*Top Background Color*/
   .top{
    background-color: #42E04255 !important;}
</style>
    
<style>
/*Top Links Background Color*/
 .links{
     text-align:center;
    background-color: transparent !important;}
</style>

<style>
/*Search Users Box Background Color*/
    .top input{
    background-color: #42E042 !important;}
</style>

<style>
/*Buttons Background Color*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #42E042 !important;}
</style>

<style>
/*Profile Name Background Color*/
    h1{
    text-align:center;
    background-color: #42E04255 !important;
    border-radius: 25px 25px 25px 25px !important;}
</style>

<style>
/*Mood (Background Color/Background Image)*/
    .mood{
    text-align:center;
    background-color: transparent !important;
    border-radius: 25px 25px 0px 0px !important;}
</style>

<style>
/*Contact Box Background Color*/
    .contact{
    background-color: #42E04255 !important;
        border-radius: 25px 25px 25px 25px !important;
    }
</style>

<style>
/*Interests Section/Social Links Heading Color*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #42E04255 !important;}
</style>

<style>
/*Interests Table & Links Table Background Color*/
    .profile .details-table td{
    background-color: #42E04255 !important;}
</style>

<style>
/*Blurbs Heading Background Color*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #42E04255 !important;}
</style>

<style>
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

<style>
table.comments-table{
    border-color: transparent!important;}
    
/*Friends/Comments Heading Color*/
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #42E04255 !important;}
</style>

<style>
/*Comments Background Color*/
    .comments-table td{
    background-color: #42E04255 !important;
    border-radius: 25px 25px 25px 25px !important;
    border-color: transparent;
    }
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
display: block;
height: 300px!important;
overflow-y: scroll;}
</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 5px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);}

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: invert(35%) sepia(35%) saturate(33%) hue-rotate(71deg) brightness(4%) contrast(85%);
</style>

<style>
/*Footer Links (Background Color/Background Image)*/
    footer{
    background-color: #42E04255 !important;
    border-radius: 25px 25px 25px 25px !important;}
</style>

<style>
/*Change Text Colors*/
    .top{
    color: black;}    
    
    main{
    color: black !important;}
    
    footer{
    color: black;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: #D22A2A !important;}
    
    a:hover{
    color: #2A2FD2 !important;}
    
    a:visited{
    color: #D22A2A !important;}
    
    .top a{
    color: #D22A2A !important;}
    
    .top a:hover{
    color: #2A2FD2 !important;}
    
    .top a:visited{
    color: #D22A2A !important;}
    
    .links a{
    color: #D22A2A !important;}
    
    .links a:hover{
    color: #2A2FD2 !important;}
    
    .links a:visited{
    color: #D22A2A !important;}
   
    .friends-grid p{
    color: #D22A2A !important;}

    footer .links a{
    color: #D22A2A !important;}
   
    footer .links a:hover{
    color: #2A2FD2 !important;}
   
    footer .links a:visited{
    color: #D22A2A !important;}
</style>

<style>
/*Change Interests Section Titles*/

table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px;}

:root {
  --topic1: "topic one";
  --topic2: "topic two";
  --topic3: "topic three";
  --topic4: "topic four";
  --topic5: "topic five";
  --topic6: "topic six";}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);}
</style>

<style>
/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */
/*Change normal text font*/
.profile .blurbs .section p{
font-family: 'Open Sans Condensed', sans-serif;}
</style>

<style>
/*Change link font*/
a{
font-family: 'Open Sans Condensed', sans-serif;}

a:hover{
font-family: 'Open Sans Condensed', sans-serif;}

a:visited{
font-family: 'Open Sans Condensed', sans-serif;}
</style>

<style>
/*Change Profile Name Font*/
h1{
font-family: 'Open Sans Condensed', sans-serif;font-size:;}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('https://downloads.totallyfreecursors.com/thumbnails/pokeball.gif'), auto;
}
* {
 cursor: url('https://downloads.totallyfreecursors.com/thumbnails/pokeball.gif'), auto;
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
}
</style>

<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: "⭐"
}
.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: "🛰️"
}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "⬐Do Your Thing⬎"; font-size:.8rem; font-weight:bold;color
:black}
/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "About Me"; font-size:.8rem; font-weight:bold;color:black; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "My Friends"; font-size:.8rem; font-weight:bold;color:black; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Leave a Message"; font-size:.8rem; font-weight:bold;color:black; }
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://media4.giphy.com/media/TZco470UACpNK/100.webp?cid=ecf05e47jwy96xyl1d7j5x0pwrjqa6eeta0m9r6il53r2x5i&rid=100.webp&ct=s');
    background-position: center;
    background-repeat: NO-REPEAT !important;
    border: var(--borders)!important;
    border-radius: 15px;
    height: 100px;}

.url-info p{
    opacity: 0.0;}
</style>

<style>
/*removes boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*hides white box around comments table*/
    .table.comments-table:{
    border-color:transparent;}
</style>

<style>
/*Hides "XXX is your friend" Box*/
.profile-info{display: none !important;}
</style>

<style>
/*Hides Blogs*/
.blog-preview{display: none !important;}
</style>

<style>
/* the color of the number count of your friends/comments */
    .count {
        color: #D22A2A;
    }
</style>

<style>
/*Interests and links table header text color*/
    .profile .table-section .heading h4 {
        color: black;
    }
</style>

<style>
.comments-table td * {
    border-radius: 15px;}
</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 13 of 13 comments ( View all | Add Comment )

Devvvv010	1704995127 Using! Just a question though, how do I replace the red and Pikachu gif? I'd like to use a different gif there, but I don't see it in the website code Report Comment Nevermind, I found it! by Devvvv010; 1704995571; Report
Apocalyptian	1704380889 Using. Report Comment
Oxilaris	1696004018 using it!!!!!!’ Report Comment
cannibal vampire	1690642306 using!! ^__^ Report Comment
Luan J	1690594168 Bout to start using! Report Comment
c e c e	1679458692 USINgGGGG Report Comment
Angelic	1677577106 𝓣𝓱𝓪𝓷𝓴 𝔂𝓸𝓾 Report Comment
ShinyLugia	1676647898 this is rly cool ngl Report Comment
Taylor	1675015122 using!! Report Comment
Frankie Keller	1667803813 Definitely gonna use it. I like the way it looks! :) Report Comment
Zeeke	1654031786 I'm using it, ty! Report Comment
siamese	1647520349 omg this is super cute! Report Comment
A💟 (Taylor’s version)	1647457467 This is rlly cool:) Report Comment