layout thing (?)

Tags: simple, gray, layout, gif

Description:

Layout I made like,, 2 months ago maybe ?? feel free to add or remove anything ^. ^

copy and paste the code in your "About me" section

If u use this theme pls comment below or add me

hope u like it :)

Preview:

click on the image for a larger preview

Code:

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

<style>

html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://64.media.tumblr.com/1ced7be5491a09d4837e18916a532d26/tumblr_osl406UDlM1wtj4p6o1_500.gifv);
    content: "";
    height: 300%;
    left: -50%;
    opacity: .2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events: none;
}

main {
background: white;
color: #a9a7a7;
padding: 6px 0px;
font-size: 80%;
border: 4px dashed;
border-radius: 100px;
}

.profile-info {
border: 0px;
}

img {
filter: drop-shadow(2px 4px 6px #717171);
}

nav .top {
background: TRANSPARENT;
}

.profile h1 {
font-size: 0em;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " | ";
color: TRANSPARENT;
}

nav .links {
background-color: TRANSPARENT;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background: #8d8d8d;
BORDER-RADIUS: 100PX;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border: TRANSPARENT;
}

.profile .blurbs .heading, .profile .friends .heading {
background: #8d8d8d;
color: #ffffff;
BORDER-RADIUS: 100PX;
}

.details-table td {
background: #dbeafe00;
}

a {
color: #323232f5;
}

.profile .blurbs .section h4 {
    margin: 0;
color: #443c3c;
}

.details-table td:first-child {
color: #323232f5;
}

.details-table td:first-child {
    background: #ededed;
}

.col {
vertical-align: inherit;
}

.profile .profile-pic img {
border-radius: 100px;
animation: shake2 3s;
animation-iteration-count: infinite;
webkit-transition: .4s ease-in;
moz-transition: .4s ease-in;
transition: .4s ease-in;
}

@keyframes shake2 {
0% { transform: translate(1px, 1px) rotate(0deg) }
10% { transform: translate(-1px, -2px) rotate(0deg) }
20% { transform: translate(-1px, 0px) rotate(1deg) }
30% { transform: translate(1px, 1px) rotate(1deg) }
40% { transform: translate(1px, -1px) rotate(1deg) }
50% { transform: translate(-1px, 2px) rotate(0deg) }
60% { transform: translate(-1px, 1px) rotate(0deg) }
70% { transform: translate(1px, 1px) rotate(-1deg) }
80% { transform: translate(-1px, -1px) rotate(0deg) }
90% { transform: translate(1px, 1px) rotate(0deg) }
100% { transform: translate(1px, -2px) rotate(-1deg) }
}

.col.left:after {
  pointer-events: none;
  content: url(https://c.tenor.com/5AgOX1tJq9YAAAAC/ghost-%E3%82%AA%E3%83%90%E3%82%B1.gif);
}

</style>

<div class="ghosts">
  <div class="ghost">
 👻
  </div>
  <div class="ghost">
 👽
  </div>
  <div class="ghost">
 👻
  </div>
  <div class="ghost">
 👽
  </div>
  <div class="ghost">
 👻
  </div>
  <div class="ghost">
 👽
  </div>
  <div class="ghost">
   👻
  </div>
  <div class="ghost">
   👽
  </div>
  <div class="ghost">
   👻
  </div>
  <div class="ghost">
   👽
  </div>
  <div class="ghost">
   👻
  </div>
  <div class="ghost">
   👽
  </div>
</div>
<style>
/* customizable ghost styling */
.ghost {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

@-webkit-keyframes ghosts-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes ghosts-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes ghosts-fall{0%{top:-10%}100%{top:100%}}@keyframes ghosts-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.ghost{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:ghosts-fall,ghosts-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:ghosts-fall,ghosts-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.ghost:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.ghost:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.ghost:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.ghost:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.ghost:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.ghost:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.ghost:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.ghost:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.ghost:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.ghost:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.ghost:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.ghost:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</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 24 comments ( View all | Add Comment )

𝒜𝓃𝑔𝑒𝓁･ﾟ✧*	1692052966 hey i was just wondering if there's a way to make the profile picture a square instead of a circle? if not, no worries! still gonna use it either way <3 Report Comment Hi!!! you need 2 delete "border-radius: 100px;" It's in the ".profile .profile-pic img" section: .profile .profile-pic img { border-radius: 100px; <<<<------------ DELETE animation: shake2 3s; animation-iteration-count: infinite; webkit-transition: .4s ease-in; moz-transition: .4s ease-in; transition: .4s ease-in; Hope it helps ^_______^!!! by Ale; 1692216795; Report ahhh thank you!! youre amazing!! <3 by 𝒜𝓃𝑔𝑒𝓁･ﾟ✧; 1692217438; Report yur welcommu (^///^) <3 ! ! ! by Ale*; 1692217787; Report
𝒜𝓃𝑔𝑒𝓁･ﾟ✧*	1692042144 using <3 Report Comment
Sleepless-Raven67	1688351089 using Report Comment
nix	1677382945 nice! i'll be using this for now! Report Comment
Daisy:P/muffin	1662219882 same i am using it Report Comment
Lee!	1655048557 using! :D Report Comment
Zero	1650982527 I love it! Report Comment
𓍊𓋼karissa𓋼𓍊	1647471951 cute! Report Comment
Toro!	1647468794 luvvvvv Report Comment
meek!	1647455896 cuteeee Report Comment
ヅSockRattヅ	1647211099 Using! I love it, it's so cutee ^^!! Report Comment
Yagkin	1646245657 using Report Comment
kit ♱	1645482149 using! tysm!!! Report Comment
peach	1643600654 using this!! I love it!! Report Comment
Milena	1643548820 Nice layout! I'll probably use it, thanks! :) Report Comment
Christopher Julian	1643208242 I love this!! Report Comment
candycorpse	1643060342 this looks so swag bro Report Comment
Cody.tv	1642970269 Looks amazing!!! Report Comment
> CESAR	1642962667 ooh Report Comment