Red Gradient Layout

Tags: red, gradient, 2000s, 00s

Description:

This is the red version of my purple gradient layout. As with all my layouts, it has a scrollable comment section so your page won't go on forever and ever to the depths of hell with all the comments. :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Lekton:wght@400;700&display=swap');

main {
    background: #1a0000;
}

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading {
    display: block;
    background: linear-gradient(darkred, black);
    border-radius: 3px;
}

body {
    background: #1a0000;
    font-family: Verdana;
    font-size: 13px;
    color: mistyrose;
}

p {
    font-family: Verdana;
    font-size: 11px;
}

a {
    color: red;
}

a:hover, .count {
    color: mistyrose;
    font-style: bold;
    text-decoration: none;
}

.profile h1 {
    font-family: Verdana;
    text-align: center;
    font-size: 28px;
    color: #ff3333;
}

h4 {
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 16px;
    color: #ff4d4d;
}

nav .top {
    display: block;
    background: linear-gradient(darkred, black);
    border-radius: 3px;
}

#q {
    background-color: mistyrose;
    border: 1px lightcoral;
    border-radius: 3px;
}

button {
    background: linear-gradient(darkred, black);
    border: 1px solid darkred;
    border-radius: 3px;
    color: mistyrose;
    text-shadow: 1px 1px 3px black;
}

label, .right, .right button {
    color: mistyrose;
}

nav .links {
    display: block;
    background: linear-gradient(darkred, black);
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
}

nav .links a {
    color: mistyrose;
}

nav .links a:hover {
    font-weight: 700;
    color: black;
    text-decoration: none;
    text-shadow: 2px 2px 2px red;
}

.profile {
    background: #4d0000;
    color: mistyrose;
    border-radius: 3px;
}

DIV.blog-preview > H4 {
    color: red;
}

.general-about .profile-pic img {
    float: left;
    border: 3px ridge darkred;
}

.online {
    color: green;
}

.general-about .details {
    display: block;
}

.profile-info {
    border: 1px solid #1a0000;
}

.profile-info a {
    color: #ff4d4d;
}

.profile .contact, .profile .url-info, .profile .blurbs, .profile .friends {
    border: 2px solid #4d0000;
}

.profile .blurbs .inner h4 {
    color: red;
}

.profile .table-section {
    background-color: #4d0000;
    border: 1px solid #4d0000;
}

table.details-table {
    background-color: #1a0000;
    border: 1px solid #4d0000;
}

.details-table td {
    background: #4d0000;
}

.details-table td:first-child {
    background: linear-gradient(#4d0000, #1a0000);
    border-color: #1a0000;
    color: mistyrose;
    font-family: 'Lekton';
    font-size: 11.5px;
    font-weight: 400;
}

.details-table td:first-child a {
    color: mistyrose;
}

.profile .blurbs .inner h4 {
    color: red;
    font-weight: 700;
}

.profile .blurbs .inner {
    font-family: Verdana;
}


.profile .friends .person p {
     font-family: 'Lekton';
     color: red;
 }

.profile .friends .inner {
    overflow-y: auto;
    height: 320.55px;
}

.comments-table {
    border: 1px solid #4d0000;
}

.comments-table td:first-child {
   background: linear-gradient(darkred, #1a0000);
   border: 1px solid #4d0000;
    border-radius: 6px;
}

.comments-table td:first-child a {
    color: mistyrose;
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 12px;
}

.comments-table td {
    background: linear-gradient(darkred, #1a0000); 
    font-size: 11px;
    border-radius: 6px;
}

.comments-table td a {
    color: mistyrose;
}

.comment-replies {
    border: 1px solid darkred;
    border-radius: 6px;
}

footer {
    background: linear-gradient(darkred, #1a0000);
    font-size: 11px;
    color: mistyrose;
    border-radius: 3px 3px 0px 0px;
}

footer a {
    color: mistyrose;
}

footer a:hover {
    color: black;
    font-style: bold;
    text-shadow: 2px 2px 2px red;
}

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