A layout I created ^_^

Tags: red, black, layout

Description:

I made this a while ago but I felt like sharing it for people to use!! You can edit it if you want!! <3

Preview:

click on the image for a larger preview

Code:

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

<style>
}
:root {
  --text: rgba(161, 98, 130);
  --links: rgb(255, 102, 180);
  --shift: rgb(255, 196, 226);
  --borders: rgba(51, 15, 33);
  --background: white;
  --shadow: rgb(166, 71, 126)
}
body {
 margin: 1px;
 background-image: url(https://i.pinimg.com/564x/66/a9/10/66a9106e80c4622b6f61a39123a9aa85.jpg);
 background-attachment: fixed;
 font-weight: bold;
 padding-top: 30px;
 padding-bottom: 30px;
}
.container {
  box-shadow: 0px 0px 10px var(--shadow);
  border:  var(--borders) 2px solid;
  border-radius: 10px;
}
nav img.logo {
content:url(https://media.discordapp.net/attachments/1218130412451139597/1240647607638954085/Logo_Fatal_Frame.png?ex=6648a41f&is=6647529f&hm=4df6234bdf22d562093c736ed68cc1ef5a75ff35d7e6c1693eda1a9e00828828&=&format=webp&quality=lossless);
}
p {
 color: var(--text);
 font-weight: bold;
}
button {
  background: var(--background);
  color: white; (--text);
  font-weight: bold;
  border: 1px solid var(--borders);
}
button:hover {
  box-shadow: 0px 0px 7px var(--shadow);
  transition: 0.2s;
  color: red;
}
.col.w-40.left .contact{
background: var(--background);
border: white
}
.col.w-40.left .table-section{ 
border: none
}

}
input {
  color: var(--text);
  font-weight: bold;
  border: var(--borders) solid 1px;
  background: var(--background);
}
input:hover {
  box-shadow: 0px 0px 7px var(--shadow);
  transition: 0.2s;
  color: red
}
nav .top , nav .links{
  background: transparent;
  text-align: center;
}
nav .links li:not(:last-child)::after {
     content: " ✧";
  color: white; (--text);
}
main {
 background: url(https://i.pinimg.com/564x/58/a4/fc/58a4fc47f8453d6b3904f22f404c1460.jpg) !important;
 border-top: 0px;
 border-bottom: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
}
h1 {
  color: var(--links);
}
.profile-pic img {
  border: solid var(--borders) 2px;
  border-radius: 100px;
  box-shadow: 0px 0px 8px var(--shadow);
}
.profile-pic img:hover{
  animation: rotate 0.9s infinite linear;
  /*makes your pfp spin when you hover. put your avatar in the blender, for absolutely no cost !!*/
}
.online { font-size: 0px; }
.online:after{
  content: url(https://media.discordapp.net/attachments/1218130412451139597/1241036219815563398/blinkiesCafe-Qq.gif?ex=6648bc8c&is=66476b0c&hm=8ffea02b021c5a3e48d7100dae4e4d5ae7c04d490620e470559652084f237f1f&=);
}
.mood {
  padding-top: 3px;
}
.blurbs:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 30px;
  background-image: url(https://64.media.tumblr.com/1efdc7e266c050d8e1b3758e9ef774fa/2fe29b963185bc49-a5/s500x750/f0ef9b5a2849c69e77faeacc18ec5a70d25273a0.pnj);
  background-repeat: round, no-repeat;
  background-size: 240px;
}
.blurbs .inner {
  text-align: center !important;
}
.url-info {
  display: none;
}
nav {
  background: var(--background) !important;
  color: darkred;(--links);
  border-radius: 2px;
}
footer {
  background: var(--background) !important;
  color: var(--links);
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 2px;
}
.comments-table, .comment-replies {
  border: none;
  border-radius: 100px;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background-color: transparent;
  border: none;
}
#comments {
  height: 200px;
  overflow-y: scroll;
 border-radius: 20px;
 margin-top: 20px;
}
    .icon{
        display: none;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){
  border: 2px solid var(--borders);
  box-shadow: 0px 0px 7px var(--shadow);
  border-radius: 100px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: rotate 0.5s;
  animation-iteration-count: infinite;
}
a, nav .links a, .special {
  color: darkred;(--links) !important;
  text-shadow: none;
}
a:hover, nav .links a:hover, .special {
  color: red; (--shift) !important;
  text-decoration: none !important;
  transition: 0.2s;
}
.logout-btn {
  color: white;(--links);
  box-shadow: none;
}
.logout-btn:hover {
  color: grey;(--shift);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
    DIV.blog-preview{
        text-align: center;
        border: ridge 3px black;
        background-image: linear-gradient(black, black, black, darkred);
        border-radius: 5px;
         box-shadow: 4px 9px 100px white;
        
}
    .profile .blurbs .section h4{
        text-align: center;
        text-shadow: 0px 2px 2px #33485e;
        color: green;

}
    .profile .mood{
        border: ridge 3px none;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
}
    .profile .friends .heading{
         border-radius: 5px;
         border: ridge 3px black;
         text-align: center;
         box-shadow: 4px 9px 100px white;
}
.profile .friends .heading h4{
        color: red;
        box-shadow: ;
        text-shadow: 0px 2px 2px darkred;
}
    .profile .friends .inner{
        text-align: center;
        background-image: linear-gradient(darkred, black, black, darkred);
        border: ridge 3px black;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
}
  .profile .friends .person p{
        display: none;
}
    .profile .friends .person img:not(.icon){
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 4px 9px 100px gray 

}
.col.left:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 120px;
  background-image: url(https://media.tenor.com/5cUKNzCuVqgAAAAM/no-blinkie.gif);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position-x: center;
}
.contact .inner a img {
  font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /*changes the icons*/
content: url(https://www.shareicon.net/data/16x16/2016/01/19/254817_delete_32x32.png);
}
.profile .table-section .details-table td {
  background-color: black;
}
.profile .blurbs .heading {
  font-size: 15px;
  font-weight: bolder;
  background: transparent;
  color: white;(--links);
}
.col.right h4 {
  color: red;(--links);
  text-align: left;
}
.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: none;
  color: white;(--text);
  font-style: italic;
}
.profile .blurbs .section h4 {
  padding-left: 5px;
}
.person p {
  color: var(--links) !important;
}
.person img{ 
  border: 2px solid var(--borders);
  box-shadow: 0px 0px 7px var(--shadow);
  border-radius: 200px;
  display: absolute;
  height: 100px;
  object-fit: cover;
  width:100px;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

main{background: none}

/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 
/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 120%;
   color: white !important;
   text-shadow: 2px 2px 3px black, 0 0 25px darkred, 0 0 5px #FFFFFF}
}
/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px black, 0 0 25px darkred, 0 0 5px black;}

}
.person:hover {
  animation: rotate 0.9s;
  animation-iteration-count: infinite;
}
.count {
  color: white; (--links);
}
footer:after{
  bottom: 0;
  font-size:0;
  left: 75%;
  position:fixed;
  pointer-events: none;
 } content:url(https://media.discordapp.net/attachments/1218130412451139597/1240800607737221210/fatal_frame_5___shiragiku_by_ema2501_dbtn1ee-414w-removebg-preview.png?ex=664889dd&is=6647385d&hm=e40efc9240ad9d97a4da257f3893f12e66f602f763cdbbe47a5b7f61abe22a36&=&format=webp&quality=lossless);
  animation: slideIn 2s forwards;
}
@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); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
} 
@keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  footer:after { display: none; }
</style>

<div class="snowflakes">
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
<div class="snowflake">🏮</div>
</div>

<style>
.snowflake {
font-size: 16px;
}
    @-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}
</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 505 comments ( View all | Add Comment )

AlexBran	1755430810 using!! as permission has been given, I may make some edits. I hope that's okay!!! Report Comment
Stray Cat Girl	1755425618 Using it with some edits, which you said was ok. just wanted to mention that part in case? Report Comment
𐔌՞. .՞𐦯 clockwork	1755198459 using! Report Comment
𐔌՞. .՞𐦯 clockwork	1755198437 usingg.... Report Comment
M0oNight	1755146112 using Report Comment
🪷Jae 🪷	1754941493 Using! Report Comment
Furbonchees	1754658183 Using Report Comment
zaneyy_vane	1754525628 using!! <3 Report Comment
🪷Jae 🪷	1754436030 Using Report Comment
Shoko	1754407085 Using Report Comment
cloudyও	1754328326 using! :p Report Comment
𝕸𝖆𝖗	1754079035 usingg Report Comment
Jen	1753834806 Usando Report Comment
philia ♰	1753827527 using Report Comment
Tofu!	1753549420 using! Report Comment
SpiderLily	1753463089 USING :33 Report Comment
Nadir	1753394249 Usando Report Comment
Aurora	1753306670 usando Report Comment
Aurora	1753306670 usando Report Comment
𝕸𝖆𝖗𝖞🔻🕷	1753167861 Using Report Comment