Sally Face Layout

Tags: #layout, #customcursor, #autoplay, #sallyface, #videogame

Description:

Sally Face Layout with custom Sally Face cursor and "Memories and Dreams" autoplay.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Taylor ☘︎ 🃟 (https://layouts.spacehey.com/layout?id=38412) -->

<div style="float:  ; height: 100px; position: fixed; right: 2px; bottom: 150px; z-index: 30;"><img src="https://64.media.tumblr.com/4614dac3cb2cc48f9a4cead7b2dcef40/c99eb85fae9963a9-7d/s250x400/ccc53b42386f99a908a5a2c73372e30ba0616eb0.pnj"/></div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Dokdo&display=swap');
body{font-family: 'Dokdo', cursive;}
</style>

<style>

body{
background: url(https://www.whosedrop.com/cdn/shop/products/WH437_843f768c-594c-4848-a93d-74deb3eeba0f_800x.jpg?v=1579880485)
}

nav::before {
    content: ' ';
    width: 580px;
    height: 225px;
    display: block;
    margin: 20px auto;
    top: 0;
    left: 0;
    z-index: 100;
    background: url(https://64.media.tumblr.com/d66794c9f8e936861adb0401fd65c4c9/39088295469d8fe6-4c/s540x810/123698708fa21bc34eb28a036293ed28900e59bb.pnj);
    background-size: cover;
    background-position: center;
}

nav .top {
    background: #000000a1;
    border: 1px solid #bbad9f;
    color: #bbad9f;
    padding: 15px 10px 14px 10px;
    position: relative;
}


.logo {

content:url("https://64.media.tumblr.com/a3db4e244cb7694500eba5c7ded61654/64938ddcc15d0a2c-d1/s250x400/e4ffbe8efff5d311c8fedb438f88a2bde28401f1.pnj");

}


button, input {
    overflow: visible;
    background: #000000a1;
    border: 1px solid #bbad9f;
    color: #bbad9f;
    font-weight: bold;
}

.logout-btn, .logout-form {
    color: #bbad9f;
    text-transform: uppercase;
    display: inline-block;
    font-size: 100%;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "𖤐";
    background: #000000a1;
    color: #8c6558;
}

nav .links {
    background-color: transparent;
    text-align: center;
    padding: 3.5px 16px 5.5px 16px;
}

nav .links a {
    text-decoration: none;
    color: #8c6558;
    text-shadow: 0 0 5px #8c6558;
    background: #000000a1;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: #8c6558;
}

nav .links a:hover {
    text-decoration: underline;
    color: #bbad9f;
    font-weight: bolder;
    text-transform: uppercase;
}

main:before {
    width: auto;
    margin-bottom: 25px;
    height: 350px;
    display: block;
    content: "";
    background-image: url(https://64.media.tumblr.com/b3c713cb3ed3965f8d03b54138a25920/57c3321a07af27d0-38/s640x960/a4b57c6b34910bfcf06f513db80a63d9116f2575.pnj);
    background-position: center center;
    background-size: cover;
}

main {
    background: #000000a1;
    color: #bbad9f;
    border: 1px solid #bbad9f;
    padding: 6px 0px;
    font-size: 80%;
text-align: center;
}

span {
    text-align: center;
    color: #bbad9f;
    text-transform: uppercase;
    font-size: 170%;
}

a {
    color: #bbad9f;
    text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #8c6558;
    text-transform: uppercase;
    font-weight: bolder;
    font-style: italic;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

.general-about .profile-pic {
    display: block;
    float: left;
    margin: 0 15px 8px 0;
    border: 1px solid #bbad9f;
}

.general-about .details {
    display: flow-root;
    text-align: center;
}

.profile .mood {
    width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.mood:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 50px;
    background-image: url(https://64.media.tumblr.com/b5e06b368ebb18a0f07ace1992282a12/7e88e34529696ee8-c7/s400x600/73a24aac2dd5887fa780d08fdef50a5823da4ab3.gifv);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 300px;
}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: transparent;
    color: #bbad9f;
    text-align: center;
    border-bottom: 1px solid #bbad9f;
    padding: 2px 7px;
}

.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px solid #bbad9f;
    margin: 10px 0;
}

.details-table td:first-child {
    background: transparent;
    color: #bbad9f;
    text-align: center;
    font-weight: bold;
    border: 1px solid #bbad9f;
    width: 33%;
}

.details-table td {
    background: transparent;
    color: white;
    border: 1px solid #bbad9f;
    vertical-align: top;
}

.profile-info {
    border: 1px solid #bbad9f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    margin-bottom: 10px;
}

.profile .profile-info {
	background-image: url();
	padding: 20px;
    border: 1px solid #bbad9f;
    
}


.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    border-bottom: 1px solid #bbad9f;
    color: #bbad9f;
    padding: 2px 7px;
    text-align: center;
}

.profile .blurbs {
    margin: 20px 0;
    border: 1px solid #bbad9f;
    
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #bbad9f;
    text-align: center;
}

.friends {
    border: 1px solid #bbad9f;
    
}

.count {
    color: #bbad9f;
}

.profile .friends .person p {
    color: #bbad9f;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border: 1px solid #bbad9f;
    
}


.friends-grid {
    border-top: 1px solid #bbad9f;
    padding-top: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    border: 1px solid #bbad9f;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td:first-child img:not(.icon) {
    width: 90px;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #bbad9f;
    
}

.comments-table td, .music-table td {
    background: #000000;
    border: 1px solid #bbad9f;
    vertical-align: top;
}

table.comments-table {
    border: 1px solid #bbad9f;
    
}


footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #00000000;
    color: #bbad9f;
     
}


::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #bbad9f;
}
::-webkit-scrollbar-thumb {
    background: #8c6558;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bbad9f;  
}

.online {
    content: url(https://64.media.tumblr.com/4b17af5abd3a73d64a08418c58813c49/b622c14e1ba1fba1-64/s100x200/390bf54c867dededf9cf4e0d689ca4e2cf3a95e4.gifv)
}

    .icon, .award img {
        content: url(https://64.media.tumblr.com/4fb0d503a0f130cd454dffb27f5db95e/a86896c584e5bc8c-5a/s75x75_c1/a05c360a502f25883be9559fd0e815834e327cbc.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

HTML,BODY{cursor: 
url(http://www.rw-designer.com/cursor-view/103885.png),
auto;}


A:hover{cursor: 
url(http://www.rw-designer.com/cursor-view/103885.png),
auto;}

body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1ddc6efc-0b45-403a-9acc-0e0e516a8958/dgahewt-cb553459-8a2b-4886-bf1a-531c25897ed7.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFkZGM2ZWZjLTBiNDUtNDAzYS05YWNjLTBlMGU1MTZhODk1OFwvZGdhaGV3dC1jYjU1MzQ1OS04YTJiLTQ4ODYtYmYxYS01MzFjMjU4OTdlZDcuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.pLfF7jYQePOWN4H76Rq4McgCgtGgIv0Bs2j1Q4qLz9A');
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>  body {
text-align: center;
}</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/rCEH3v_Q_j4//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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 )

_lucastbh	1751939272 omg usinggg Report Comment
нαzє...	1745717240 USINGGG Report Comment
Denisse	1742002922 Usingggg Report Comment
mOnsterlover	1741892470 im using ittt Report Comment
𝙰𝚕𝚎𝚡 𓉸ྀི	1737870913 using omfggg Report Comment
𝙰𝚕𝚎𝚡 𓉸ྀི	1737870909 using omfggg Report Comment
DeadCutie_	1737683814 using Report Comment
SOFI>_<	1736369544 usingg Report Comment
Lake :3	1727021922 Usingg :33 Report Comment
derpz	1726523433 Using :D Report Comment
k3tchup_plz!!	1714107513 Using ^^ Report Comment
ASH✮ANI	1713576409 using rnnn Report Comment
ψ akira ψ	1707402634 using! Report Comment
☆Sal!!(auto music)☆🍉	1705711183 using! Report Comment
Yammie	1704733362 Using!! Report Comment
ROACH!!!!	1703824366 using! Report Comment
andybanandy	1703463923 using! Report Comment
Wolfy	1701475634 Usin’ Report Comment
azalea :333	1701471638 USINGG Report Comment
ioupi5	1699849458 such a cool layout, using!! Report Comment