sallyface layout :-)

Tags: sallyface
Description:

idk
layout i used to use, but idk i got a new one,,,
anyways
here
just
comment if ur using,,,
note: background is broken. sorry!
Code:

<!-- (c) Layout created by ⭐️; 311/Tavish (https://layouts.spacehey.com/layout?id=29360) -->

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url(https://media.tenor.com/vpDBbLoRCWEAAAAd/sally-face-sal-fisher.gif);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>
<style>
 body {
      background: url(https://64.media.tumblr.com/764d21e95f8fd19bed42dee88d104a6e/1453039737da03f6-4a/s540x810/3c721a97de15c87d93291521b768e825ce92f201.gifv);

      background-size: 100%;
}
</style>
<style>
    main {
       background: black;
       opacity: 0.;
 } main { background: url(https://media.tenor.com/7RoKGSkAV7oAAAAd/larry-johnson-sal-fisher.gif)

; color: #04ff00;
; } div.top { background: url(https://i.ytimg.com/vi/xlCiZv__ov4/maxresdefault.jpg);
 ; margin-bottom: 15px;
footer {
      border-radius: 15xp;
      background-image: url(https://i.imgur.com/9KO7CtG.jpg);
      color: white;
}


footer {
      border-radius: 15xp;
      background-image: url(https://i.imgur.com/9KO7CtG.jpg);
      color: white;

</style>
<style>}

table.comments-table td {
    color: rgb(255, 77, 166);
}

:root {
    --logo-blue:  green;
    --darker-blue: blue;
    --lighter-blue: black;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: black;
    --light-orange: ;
    --even-lighter-orange: green;
    --green: ;
}
</style>

<style>
.profile {
	display: flex;
	flex-direction: column;
}
.profile .left {
	width: 100%!important;
	text-align: center;
	perspective-origin: 50% 10%;
	perspective: 300px;
}
.profile-pic {
	float: none!important;
	height: fit-content!important;
</style>

<style>

footer {

    background: url(https://media.tenor.com/C0lXxEVW7sEAAAAC/sally-face.gif)!important;

    border: 2px solid black;

}





.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://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Add to Favorites */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Send Message */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Forward to Friend */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Instant Message */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Block User */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Add to Group */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

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

/* Report Profile */

content: url("https://external-media.spacehey.net/media/sgMiBYsThioR92PoRg3k3bgK76kJ0Q2SrkVWGMqt8O_w=/https://stethoscope.carrd.co/assets/images/gallery02/4ea26f76.gif?v=69e5e9bc")

}

</style>





<style>

.profile-info{

    border: medium var(--darker-blue) outset !important;

    font-family: header, monospace !important;

    background-image: url("https://media.tenor.com/7RoKGSkAV7oAAAAM/larry-johnson-sal-fisher.gif") !important;

    background-repeat: no-repeat;

    height: 150px;

    color: transparent;

    background-color: var(--darker-blue);

    border: medium var(--darker-blue) outset !important;

    background-size: cover;

   }

  .profile-info .inner{

      background: none !important;

      border: none !important;

    }

</style>





<style>

/*Your icon*/



.general-about .profile-pic img {

  animation: dance .35s ease infinite alternate; }



/*Keyframes for your icon*/



@keyframes dance { 

  100% {

    transform:translateY(-20px);

  }

}

</style>





<style>

:root {

    --logo-blue: black;

    --darker-blue: black;

    --lighter-blue: black;

    --even-lighter-blue: gray;

    --lightest-blue: lightgray;

    --dark-orange: black;

    --light-orange: gray;

    --even-lighter-orange: lightgray;

    --green: black;

 

</style>











<style>

.general-about .profile-pic::before{

  content: '';

  background: url('https://external-media.spacehey.net/media/sUfafMP-zehDrHipQ89x9VpWimdWj6MEWZv-oSirp0-s=/https://imgur.com/drWLkEu.jpg') no-repeat;

  background-size: cover;

  display: block;

  width: 200px;

  height: 200px;

  z-index: 99;

  position: absolute;

  top: -5px;

  left: -30px;

}

</style>

<style>

.general-about .profile-pic img{

  clip-path: polygon(49% 28%, 89% 0, 87% 46%, 100% 79%, 76% 100%, 18% 100%, 0 76%, 11% 44%, 11% 0);

}

</style>





<style>



nav  {

   background-image: url(https://i.pinimg.com/736x/34/b6/6c/34b66cabec3a10d37f3c158bcbb341a0.jpg);

   background-position: bottom;

   background-size: cover;

   background-repeat: no-repeat;

   border: 5px ridge;

   color: black;

}

nav .top {

    background: transparent!important;

}





main .right{

      background: url(https://img.freepik.com/premium-vector/black-checkerboard-checkered-gingham-plaid-pattern-background-perfect-wallpaper-backdrop_565280-400.jpg?w=360);



}

main{

    background: black;

}



main .left{

      background: url(https://ih1.redbubble.net/image.688233604.0959/flat,750x,075,f-pad,750x1000,f8f8f8.u1.jpg);

 backdrop-filter: hue-rotate(355deg) contrast(40%) brightness(50%);

    padding: 15px;

}

@font-face {



    font-family: 'Diediedie';



    src: url('https://external-media.spacehey.net/media/sB15EZ6l3iTi-swPG9NoDikKRhQ8JEmAv6XqXKuMZZJE=/https://dl.dropbox.com/s/eto7wadcqt5r08k/DIEDIEDI.woff2');



}

p{

 color: white;



    font-family: 'Diediedie';

  font-size:20px !important;

}

h1{



    color: white;



    font-family: 'Diediedie';



    font-size:35px !important;



    font-weight: normal;



}



h2{



    color: white;



    font-family: 'Diediedie';



    font-size:25px !important;



    font-weight: normal;



}



h3{



    color: white;



    font-family: 'Diediedie';



    font-size:19px !important;



    font-weight: normal;



}



h4{



    color: white;



    font-family: 'Diediedie';



    font-size:25px !important;



    font-weight: normal;



}



body {

  background: url(https://external-media.spacehey.net/media/sTcavijQRUjkZYpMzmxSFDfDB__v5QJ3RgV3-YR5vJ80=/https://i.imgur.com/wrPYFuE.jpg);

  font-family:  "Diediedie"; 

   background-size: cover;

}

.top>.left>a>.logo{display:none

    }

    .top .left a{

        height:110px;

        position:

        relative;

        background-size:cover;

        background:url(https://media.discordapp.net/attachments/576486347838324765/946623880305471509/xxfdg.png?width=240&height=88)

        0 -0px no-repeat;display:inline-block;width:300px

    }

    .url-info {

    background-image: url("https://64.media.tumblr.com/5ba54fc7875098ad971d15e844ce5d78/01acef6fc0661ed5-64/s640x960/243f3ac42b1b4e54b291fcf501d53fe00c44b860.png");

    background-repeat: no-repeat;

    height: 260px;

    color: transparent;

    background-color: #000;

    background-position: center;

    border: medium #222 outset !important;

  }

  .vignette {



position: fixed;



top: 0;



left: 0;



width: 100%;



height: 100%;



box-shadow: inset 0px 0px 900px 60px #000000;



filter: opacity(50%);



pointer-events: none;



z-index: 1000;



}

 </style>

 <div class="vignette"></div>

<style>



img:hover {



  animation: shake 0.5s;



  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>

<div class="mx-md-0 mx-1 col-md-auto col">
<a href="#" target="_BLANK">
<img src="https://static.wikia.nocookie.net/sally-face/images/d/d8/Sal_Teen_Sprite.png/revision/latest?cb=20190718221306" class="btn btn-outline-transparent p-0  tooltipster" title="" style="max-width:9px; position:fixed; bottom:5px; right:5px; z-index:3;"/></a></div>

<style>
/*Your icon*/

.general-about .profile-pic img {
  animation: dance .35s ease infinite alternate; }

/*Keyframes for your icon*/

@keyframes dance { 
  100% {
    transform:translateY(-20px);
  }
}
</style>

<style>
.general-about .profile-pic img{
  clip-path: polygon(49% 28%, 89% 0, 87% 46%, 100% 79%, 76% 100%, 18% 100%, 0 76%, 11% 44%, 11% 0);
}
</style>

<style>
table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "dni boxes";
  --topic2: "blinkie collection";
  --topic3: "userbox collection";
  --topic4: "buttons that you should definitely click";
  --topic5: "stamp collection";
  --topic6: "random shit";

 }

.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></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 5 of 5 comments ( View all | Add Comment )
Bibble	1707368786 using!!!! Report Comment
. Crowven .	1704483271 using!!!! (this theme is amazing) Report Comment
mvttgvtzonline	1693806606 using Report Comment
BUNNYR4T (autoplay)	1692296828 using Report Comment