Red and black layout

Tags: red, black, emo, dark, goth

Description:

This is rlly jus for myself, if you use it CREDIT ME tho (when someone asks or something) and dont claim it as your own

Code:

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

<style>

img {
  filter: grayscale(50%);
}

</style>

<style>
body{
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/732c787a-919c-453f-b7ec-6e4ccb674c64/d355nsz-32a0bf37-8729-4382-ad94-e97e2aa6de46.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzczMmM3ODdhLTkxOWMtNDUzZi1iN2VjLTZlNGNjYjY3NGM2NFwvZDM1NW5zei0zMmEwYmYzNy04NzI5LTQzODItYWQ5NC1lOTdlMmFhNmRlNDYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.pNjSnABmBBoWElLfN0TQQCr3P2o2_ZXgtb7Tvd7Mg90');
  background-attachment: fixed;
  background-repeat: repeat;
}

</style>

<style>

.online{content: url(https://dl.glitter-graphics.com/pub/719/719327vzpo4xrw7f.gif)}

</style>

<style>

  .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: dotted 3px #f3f2f7;
        border-radius: 5px;
    }
    table.details-table {
        border-collapse: separate;
    }
    table.details-table td {
        background-color: #bf1d1d; !important;
        border-radius: 2px;
    }
    .profile-pic {
        border-radius: 5px;
        overflow: hidden;

</style>

<style>

main {
  background: black;
  color: #f3f2f7;
  padding: 6px 0px;
  font-size: 100%;
  border-radius: 5px;
  font-family: 'Chivo Mono', monospace;
  padding-bottom: 0px;
  padding-top: 0px;
}

</style>

<style>

/*this font color is red*/
  @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,300;1,600&display=swap'); h1,h2,h3,h4,h5{
  font-family: 'Chivo Mono', monospace;
  color: #991c1c;
}

</style>

<style>

/*this font color is white*/
  @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,300&display=swap'); p{
  font-family: 'Chivo Mono', monospace;
  font-size: 90%;
  color: #f3f2f7;
}
</style>

<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #f3f2f7;
  border-radius: 5px;
}
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
  background: #f3f2f7;
  color: #f3f2f7;
  padding: 2px 7px;
  border-radius: 5px;
}

</style>

    <style>
    .profile-pic img,.friends-grid img,.comments-table img{border-radius:5px;}
    </style>


<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "💌"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🫀"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "☎️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🧷"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🪡"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "💀"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🔗"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "💔"
}   
</style>


<style>
    footer{
        
    background-color: dark-gray !important;
    background-attachment: scroll !important;
    background-repeat: repeat !important;
    background-position: bottom !important;
    color: white;     
    border-radius: 5px;
    }

footer p {
  font-size: 96%;
  color: black;
  font-family: 'Chivo Mono', monospace;
}

</style>

<style>
nav {
  color: black;
  font-size: 72%;
  font-size: max(72%, 12px);
  font-family: 'Chivo Mono', monospace;
  border-radius: 5px;                                    
</style>

<style>

   a:hover {
     color: #991c1c;
   } 
   a{
     color: gray; 
   }
</style>

<style>

.friends img{
  filter: grayscale(80%);
}
</style>

<style>

:root{

  --logo-blue: gray;
  --lighter-blue: black;
  --even-lighter-blue: #991c1c;
  --dark-orange: #bf1d1d;

</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.