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

- GH0STYY (Music warning!) -	1775316650 USINGGG <333 Report Comment
Dylan ;b	1775286757 Usando!! :33 Report Comment
ℜ𝔬𝔫𝔦𝔠𝔞	1775186225 USING <3 Report Comment
ANG1E!	1775147029 using !! ^_^ Report Comment
6MaR!66	1774982336 uzing!! Report Comment
Epic Guelp:p	1774808397 usinggg Report Comment
BUTT3RSC0TCHZ	1774720616 usinggggggggg i love thisss Report Comment
rebzynkaa	1774556340 using Report Comment
⋆₊ ⊹★krbk shrine ⭑⋆｡˚	1774442631 usingg Report Comment
rielle	1774437151 usinggg Report Comment
⑅ᱸ⁎⁺˳.ᐟch3rry_c0la!˚♡	1774275401 usingg Report Comment
Anthony	1774210570 using!!! Report Comment
crypticaffairz	1773952895 usingg so cute! Report Comment
ezra	1773802371 usingg Report Comment
minka	1773794742 ussinng omg so cutee Report Comment
vincent	1773676266 using :) Report Comment
tiphereth / Catherine	1773630291 Using! Report Comment
Tao the DOCTOR	1773537739 uuuusiiinnggggg Report Comment
Lucio	1773519703 using!! Report Comment
Marruby	1773497192 Using! Report Comment