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 549 comments ( View all | Add Comment )

DEVILIZ	1759454416 usingg Report Comment
garnet !	1759436820 using , thank you !!! Report Comment
Ashen୨ৎ	1759272541 using:p Report Comment
Ashen୨ৎ	1759272520 hi, using Report Comment
Nepeta!!	1759201498 Using!! ^_^ Report Comment
nirvana	1759193631 using! :3 Report Comment
DecoyQuel	1759071040 USING!!!! Report Comment
Hensku <33	1758986741 Using :3 Report Comment
isoalienation	1758926079 using!! Report Comment
esmara	1758919566 using!! Report Comment
Ash !	1758597613 Using ! Report Comment
👾★«𝐊𝐮𝐦𝐢»★👾	1758592688 Usando Report Comment
sukuna	1758571903 using <3 Report Comment
andreww!	1758538166 using!!1 Report Comment
philipp(4yesha4life<3)~	1758225634 uuuuuuusing!!! so gorg omg Report Comment
cyrene !!	1758089846 using !! Report Comment
Anita	1758059690 using!! Report Comment
JustLin	1758037406 using! Report Comment
TYL	1757823252 usiiiing Report Comment
Crow	1757813826 using!! rlly cool btw! Report Comment