Simple Purple Layout

Tags: purple, shake, star, custom, cursor

Description:

a simple purple layout ! Nothing too crazy :) Has image hover shake, star pfp and star friend icons, custom online text, custom text below spacehey logo, custom spacehey logo, rounded corners, custom cursor, and custom contact icons !! this layout is alot more neat and better looking then my first one, im pretty proud of this one overall :)

Preview:

click on the image for a larger preview

Code:

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

about me text goes here !



<style>
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-size: 200%; 
}
  body {
   background-image: url(https://live.staticflickr.com/65535/53136203317_cca52aa722_m.jpg);

}
.profile {
   background-color: rgb(20, 20, 20); 
}
main {
background: #141414
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgb(90, 0, 245);
   color: black;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: black;
   color: rgb(90, 0, 245);
}

footer {
    border-radius: 15px;
    background-image: url(https://live.staticflickr.com/65535/53136221197_56bc635990_m.jpg);
    color: white;
}

table.comments-table td {
    color: rgb(20, 20, 20);
}

:root {
    --logo-blue:#141414;
    --darker-blue: #5a00f5;
    --lighter-blue: #5a00f5;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: #5a00f5;
    --light-orange: #141414;
    --even-lighter-orange: #141414;
    --green: pink;
}
</style>

<style>
body {
  color: blue;
}

h1 {
  color: #5a00f5
}

p {
  color: #5a00f5;
}

b {
 color: #5a00f5
}

time.ago {
 color: #5a00f5
}

.profile .friends .person p {
 color: #5a00f5
}

h4 {
 color: #5a00f5
</style>

<style>
.profile .contact{
  text-align: left;
}

.contact .inner a img{
  font-size: 0;
}
.contact .inner a img:before{
  font-size: 1em;
  display: block
}
/*ADD TO FRIENDS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
  content: "★"
}
/*ADD TO FAVS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
  content: "☆"
}
/*SEND MSG*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
  content: "☆"
}
/*FORWARD TO FRIEND*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
  content: "★"
}
/*INSTANT MESSAGE*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
  content: "★"
}
/*BLOCK USER*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{
  content: "☆"
}
/*ADD TO GROUP*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
  content: "☆"
}
/*REPORT USER*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
  content: "★"
}
</style>

<style>body { cursor: url('https://cur.cursors-4u.net/cursors/cur-6/cur518.cur'), auto; }</style>

<style>
    p.online {font-size: 0px;}
p.online::after{content: "custom online text here";
color: #5a00f5;
font-size: 10px;}
    </style>

<style>
nav .links:before {
        display: block;
        padding-left: 5px;
        padding-bottom: 1px;
        border-bottom-style: groove;
        background-image: url(), linear-gradient(to right, #5a00f5, #5a00f5);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600; color: #141414;
        content: "custom text here";
    </style>

<style>
  
  .logo {
  
  content:url("https://cdn.discordapp.com/attachments/1058871949524217856/1143971990613540985/2023_08_23_0nr_Kleki.png")
  
  }
</style>

<style>
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

<style>
.profile .friends .person img {
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)
}

</style>

<style>
.general-about .profile-pic img {
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)
}

</style>

<style>



    table.comments-table{
        

border: 1px #5a00f5 !important;   

        

    }

</style>

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </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 10 of 10 comments ( View all | Add Comment )

^Don^	1737425668 using star stuff and shake animation thx^.^ Report Comment
ᶻz﹒saruka	1727351470 will be using, thank you <3 Report Comment
Max	1725586562 using the star stuff :3 Report Comment
realaliencat	1722236718 using friend icons !! Report Comment
Zhannur Swagger	1715501070 using the star shaped friends pfp's!!! Report Comment
artzlyn	1711047269 using the star shaped friend icons Report Comment
Ki4r1n.raya_la.mesa	1709070143 using the friends icons Report Comment
Luka	1700839280 using! Report Comment
staritti	1693329566 this is so cool, using :DD Report Comment
silliest of sillies	1693042839 so cute! using! Report Comment