Light Purple Layout (EASY)

Tags: invader zim, light purple, easy, minimal, cute, purple, animated

Description:

Feel free to change anything! Credit in code!! I like the layout tbh so hopefully you do to. Uh- also you can use the layout to like- teach yourself how to make a layout i guess I don't know but yeah. Bye

Preview:

click on the image for a larger preview

Code:

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

<!--BACKGROUND PATTERN-->
<style>
body {
background-color: #ffffff;
opacity: 1;
background-image:  repeating-linear-gradient(45deg, #E4B8FF 25%, transparent 25%, transparent 75%, #E4B8FF 75%, #E4B8FF), repeating-linear-gradient(45deg, #E4B8FF 25%, #ffffff 25%, #ffffff 75%, #E4B8FF 75%, #E4B8FF);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
</style>

<!--FRAME AROUND PROFILE IMG-->
<style>
    .general-about .profile-pic img{
        border: 1.5em solid;
        border-image-slice: 130 125 125 130;
        border-image-outset:0px 0px 0px 0px;
        border-image-repeat:stretch stretch;
        border-image-source:url("https://i.postimg.cc/cCRT62ry/16vx4u-5.png");
        box-shadow: 0px 1px 10px #E4B8FF;
        margin-left: 20px;
    }
</style>

<!--FEEL FREE TO CHANGE THE LOGO, IMG SIZE IS (800 : 249)-->
<style>
  .logo {
  
  content:url("https://i.postimg.cc/BQh387LD/New-Project-1.gif")

}
    .profile .blurbs .section h4{
        	color: white;
	font-size: 20px;
	-webkit-text-stroke: 1px black;
    text-align: center;
}
</style>

<!--FEEL FREE TO REMOVE THIS SECTION, CHANGE THE IMAGES, OR DO ANYTHING-->
<div class="snowflakes">
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
  <div class="snowflake">
    <img src="https://i.postimg.cc/C1SW1bNd/ezgif-3-4935e13094.gif"/>
  </div>
</div>

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

@-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;cursor:default;-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}
.snowflakes{position:absolute;width:100%;height:100%}
</style>

<!--CHANGE CURSOR IF YOU WANT-->
<style>* {cursor: url("https://i.postimg.cc/d138PKV5/cur267.gif"), url("https://i.postimg.cc/d138PKV5/cur267.gif"), auto !important;}</style>
<style>



<!--FILTER FOR IMAGES, THERE ARE OTHER COMBINATIONS YOU CAN USE-->
<style>
img {
filter: blur(.5px) brightness(1.2) sepia(30%);
}
</style>



<!--FONT-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body{font-family: 'Fredoka One';
font-size: 16px;
</style>


<!--BORDER AROUND SOME SECTIONS-->
<style>

   a:hover {
     color: black; 
   } 
   a{
     color: black; 
   }
    
    .profile h1{
        	color: white;
	font-size: 30px;
	-webkit-text-stroke: 1px black;
	text-align: center;
    }

.details > * {
    margin-top: 15px;
}

.details-table {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
}

.details-table td:first-child {
    background: #E4B8FF;
    background-size: 4px 4px;
    width: 65px;
}
.details-table td:first-child p {
    -webkit-background-clip: text;
    color: black;
    font-size: 10px;
}


.details-table td {
   background: #E4B8FF;
}
nav  {
   background-color: #E4B8FF;
 border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
   color: black;
}

.comments-table {
    background: #ffffff80;
    height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
    margin-top: 10px;
}

.details p, .mood p, .mood a, .blurbs p, .table-section .inner p {
    font-size: 10px;
}
main{ 
background-color: white;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
margin: 1em 0;
}
</style>

<!--ONLINE IMG-->
<style>
.online{content:url("https://i.postimg.cc/gcxf4F4k/189dc3d6c920eb0982ec074291ec86e0d9ab286e.gif");
}
</style>

<!--COLOR OF THE HEADING OF BLURBS AND FRIENDS-->
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:#d899ff;
    }
</style>

<!--COLOR OF THE HEADING OFCONTACT AND INTERESTS-->
<style>
 .profile .contact .heading,
 .profile .table-section .heading {
     background-color:#d899ff;
 }
</style>

<!--BORDER IMAGE AROUND CONTACT INFO-->
<style>
 .profile .contact,
 .profile .table-section {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
</style>

<!--COLOR FOR THE LINK SECTION HEADER-->
<style>
    nav .links {
        background-color:#E4B8FF;
    }
</style>

<!--COLOR OF THE TEXT IN THE HEADING OF BLURBS-->
<style>
    .profile .blurbs .heading h4 {
        color:#ffffff;
    }
</style>

<!--COLOR OF THE TEXT IN THE HEADING OF FRIENDS-->
<style>
    .profile .friends .heading h4 {
        color:#ffffff;
    }
</style>
<!--CHANGE TEXT IN THE HEADER OF BLURBS-->
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "ABOUT ME!!"; font-size:.8rem; font-weight:bold; color:white; }
}
</style>

<!--CHANGE TITLE OF HEADERS IN ABOUT ME-->
<style>
.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"ABOUT ME:";
font-size:1.3rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"WHO I'D LIKE TO MEET";
font-size:1.38rem;
}
</style>


<!--CHANGES BASIC COLOR OF ALOT OF STUFF-->
<style>
/* CUSTOMIZE BASIC SETTINGS */
:root {
    --logo-blue: transparent; /* CHANGE COLOR OF SPACEHEY BAR AT TOP */
    --darker-blue: #a37dba; /* CHANGE COLOR OF PROFILE LINKS */
    --lightest-purple: #E4B8FF; /* CHANGE COLOR OF NAVIGATION BAR */
    --darkest-purple: #a37dba;
    --darkest-purple: #a37dba;
    --darkest-purple: #a37dba; /* blurb titles */
    --light-orange: #dabbed; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: #dabbed; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --green: #38d;
}

/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: #a37dba;
}
/* HIDE PROFILE URL */
.profile .url-info {
    display: none;
}
</style>

<!--BORDER AROUND BLOG ENTRY PART-->
<style>
    div .blog-preview {
           height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
    }
</style>



<!--CHANGE IMGS OF CONTACT SECTION-->
<style>
.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://i.postimg.cc/MHxDRBpL/ce22b345812f442921389e25310d8d8b03a4378f.gif')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url('https://i.postimg.cc/pd26NgH7/5e889ecea0183874b55860717068e019c779b2ed.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://i.postimg.cc/8PBwmZ8z/340e95de5321eeb3dc9936c4efde1b754850538e.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url('https://i.postimg.cc/CM2cKRGw/81035c9c4c7ff74a583e50682f9fe58a6fae366f.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://i.postimg.cc/xTHBDvWw/b1e000846778913406da66ba0f0d6fe0152b0d95.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://i.postimg.cc/RC22Dsb1/a948ec30bd59ba4687e6e0c63533612625207624.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url('https://i.postimg.cc/k50wJz3q/05a7df94b3a0198e36e892d066427b5068cf2578.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://i.postimg.cc/XYKzznTd/383d0a22afd92100c47413b060aeb287a268ed0a.gif')
}
</style>


<!--CHANGE NAME OF INTEREST LABELS-->
<style>
:root {
    --topic1: "i";  /* EDIT INTEREST LABELS HERE */
    --topic2: "ii";
    --topic3: "iii";
    --topic4: "iv";
    --topic5: "v";
    --topic6: "vi";

 }

.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 darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   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>

<!--SCANLINES ON PROFILE-->
<style>
html:before {
  content: " ";
  display: block; position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.16) 50%);
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
</style>

<!--BORDER COLOR OF COMMENTS-->
<style>
    .comments-table td {
        border-color: transparent;
    }
</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 23 comments ( View all | Add Comment )

.˚₊✩𝐚𝐠𝐚𝐭𝐡𝐚✩₊˚.	1741538317 using!! Report Comment
loreternity	1740942548 using! Report Comment
Jen	1740914908 using Report Comment
Camm :D	1739243266 using some of these!! Report Comment
nena nana	1730047136 using Report Comment
⦻ gil	1716334296 usinnng!!!!!!1 Report Comment
Einniie	1715919936 Using1!1!! Report Comment
pearlevrn	1700763974 Using! Report Comment
Juno Arts	1694943831 using! Report Comment
GoodbyeJoJo	1688759691 I'm using this! super cute! Report Comment
Pinkie	1687216814 using!! <3 tysm it's so cutee Report Comment
cathy	1687136706 using!! tysm<3 Report Comment
asuramaru	1686783539 using!! it looks cool!! Report Comment
Kitzu_09	1686535111 using!:3 Report Comment
LadyXalea	1685635245 using Report Comment
r4zi	1685559256 using :) Report Comment
Reese	1685337720 using ! Report Comment
Anastasla	1685282766 Using! Tysm!! Report Comment
Mewdusa	1684853118 Absolutely awesome layout! Thanks!!! ^.^ Report Comment
DorkLore	1684682596 I’m using this layout right now. Want to see my customizations to it? Report Comment