Generic Red Layout

Tags: red
Description:

my 2nd red layout
Preview:

click on the image for a larger preview
Code:

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

<style>
body{
  background-image:url(https://i.postimg.cc/kX5BQG18/image.png); /* put your background URL here */
  background-attachment:fixed;background-size:cover; /* remove this line if you want it to tile */
}
</style>

<style>
main{ 
content: "#a33939"; 
border: 2px solid #f22c2c!important;
box-shadow: 0px 10px 10px #f22c2c; 
width: 100%; height: 490px; 
padding: 0px;
overflow-y: auto; 
}
table.details-table{
background-color:;
</style>

<style>
/*Customizes scroll bar*/
/* width */
::-webkit-scrollbar
{
  width: 15px;
}

/*Customizes color of the direction buttons*/  
::-webkit-scrollbar-button:start {
    background-color: #a33939;
}

::-webkit-scrollbar-button:end {
    background-color: #a33939;
}

/*Customizes color of Handle */
::-webkit-scrollbar-thumb
{
  background-color: #a33939;
  border-radius: 0px;
}

/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background: #a33939;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #3d3d3d;
  background-color: #3d3d3d;
  border-radius: 0px;
}
</style>



<style>
/* Scrollbar Buttons */
/*Width*/  
::-webkit-scrollbar-button
{
  height: 16px;
  width: 16px;
}

/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0yt2dVc/Arrow-Up.png");
}

/*Up Hover*/  
::-webkit-scrollbar-button:vertical:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/Fn2qWmj/Arrow-Up-hover.png");
}


/* Down */
::-webkit-scrollbar-button:vertical:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/rGMFVKm/Arrow-Down.png");
}

/*Down Hover*/  
::-webkit-scrollbar-button:vertical:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/PYWv05Q/Arrow-Down-hover.png");
}


/* Left */
::-webkit-scrollbar-button:horizontal:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/brJnjD4/Arrow-Left.png");
}

/*Left Hover*/  
::-webkit-scrollbar-button:horizontal:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0rQhWN5/Arrow-Left-hover.png");
}


/* Right */
::-webkit-scrollbar-button:horizontal:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/4dyTzJt/Right.png");
}

/*Right Hover*/
::-webkit-scrollbar-button:horizontal:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/qrRZ8CR/Right-Hover.png");
}
</style>

<style>
    .top{
        
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
    .top input{
        
    background-color: #a33939 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
    .links{
        
    background-color: #ff7575 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
.profile .url-info {
    display: none;
}
</style>

<style>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}</style>

<style>
:root {
    --light-gray: #ffffff;
    --gray: #ffffff;
    --dark-gray: #ffffff;
    --darker-gray: #ff0000;
    --logo-blue: #ff0000;
    --darker-blue: darkred;
    --lighter-blue: #ff0000;
    --even-lighter-blue: #ff0000;
    --lightest-blue: #ff0000;
    --red: #ff0000;
    --dark-orange: darkred;
    --light-orange: darkred;
    --even-lighter-orange:  darkred;
    --strange-yellow: #ff0000;
    --green: #ff0000;
    --light-green: #ff0000;
    --medium-green: #ff0000;
    --dark-green: #ff0000;
    accent-color: #ff0000;
    accent-color: var(--logo-blue);
}
</style>

<style>.container{width: 950px !important;}</style>

<style>
/* friend names */
.profile .friends .person p {
    color: white;
    text-decoration: underline;
}

/* friend count colour*/
.count {
   color: white;
   text-decoration: underline;
}
</style>

<style>
    main{
     
    background-color: #ba3b34 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@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); }
} </style>

<style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1159.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2018/06/08/hell-yeah-pointer-2.html" target="_blank" title="Hell Yeah Pointer 2"><img src="https://cur.cursors-4u.net/cursor.png" alt="Hell Yeah Pointer 2" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/* friends comments - friend's name */
.comments-table td:first-child{
    background-image: linear-gradient(white, red)
}
</style>

<style>
/* interests and links */
.profile .table-section {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}
</style>

<style>
/* edit profile / user is your friend */
.profile-info {
    background-color: #ff0099;
    background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
    border: 3.5px solid rgba(0, 0, 0, );
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}
</style>

<style>
/* mood and view my */
.profile .mood{
    padding-top: 5px;
    padding-left: 5px;
    box-shadow: 0px 0px 14px black;
    background-color: #ff0099;
    background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
     border-radius: 6px;
     border-style: outset;
     border-width: 1px;
     border: 3.5px solid rgba(0, 0, 0);
     margin-bottom: 20px;
    box-shadow: 0px 0px 14px black;
}

/* blog entries */
.blog-preview{
     background-color: #ff0099;
     background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    padding: 8px;
}
</style>

<style>
/* profile pic, details, etc box*/
.general-about {
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 400px;
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 180px;
    color: black;
     background-color: #ff0099;
     background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    margin-bottom: 10px;
    margin-top: 0px;
}

span[itemprop="name"] h1 {
    background-image: linear-gradient(white, darkred);
    color: black;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
    margin: 0px 0px 0px 0px;
    padding: 2px;
}
</style>

<style>
.blurbs {
     background-color: #ff0099;
     background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}
</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 2 of 2 comments ( View all | Add Comment )
sam the ULTIMATE METAL!!
1701250815
using!! >:o
Report Comment
iven / blake
1700618533
using
Report Comment