sun & moon layout

Tags: aleeex, sun, moon, pink, black, simple

Description:

simple sun and moon layout with interchangeable interest table names ♡♡♡

don't forget to switch out the *change me* to your titles of choice within the code!!

take and use as you please,

credit is appreciated but not necessary.

Preview:

click on the image for a larger preview

Code:

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



<div style="text-align: center;">
*text here*
</div>


<style>

    :root {
        
        
        --headers: indianred;
        --links: indianred;
        --text: indianred;
        --names: indianred;

        
        --logo-blue: #000000;
        --darker-blue: #CD5C5C;
        --lighter-blue: #262626;
        --even-lighter-blue: #ccc;
        --lightest-blue: #b893be;
        --dark-orange: #333;
        --light-orange: #181818;
        --even-lighter-orange: #404040;
        --green: #38d;
        --background_image: url("https://i.imgur.com/j41wdqa.jpg"); 
        
    --topic1: "change me";
    --topic2: "change me";
    --topic3: "change me";
    --topic4: "change me";
    --topic5: "change me";
    --topic6: "change me";
    --topic7: "change me";


    --myactions: "change me";
    --mytopics: "change me";
    --mylinks: "change me";
}
    /*hidden stuff*/
    
    .url-info{display:none !important;}
    
    .blurbs .heading{display:none !important;}
    
    .right .section h4{display:none !important;}
    
    /* ~~~~~ personalized topix ~~~~~ */
  

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
  color:var(--links) !important;
  letter-spacing:normal !important;
   text-shadow: 	0px px black !important;
   filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after{
  content: var(--topic7);
}

    
    .w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:last-child .heading::after{
  content: var(--mylinks);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform:lowercase !important;color: var(--headers) !important;font-weight: bold !important;}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--mytopics);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform:lowercase !important;color: var(--headers) !important; font-weight: bold !important;
}

.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .contact .heading::after{
  content: var(--myactions);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform:lowercase !important;color: var(--headers) !important;font-weight: bold !important;}
    
    

    * {
        font-family: monospace;
    }

    body {
background-image: var(--background_image) !important;
background-color:black !important;

     }

    .blog-preview p {
        background-color: none;
        padding: 0px 10px;
        border-radius: 10px;
        color: black;
    }

    .blog-preview p a{
        color: #ea9999!important;
    }

    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }

    nav {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
    }
    
    

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 2.5px 0 !important;
        margin-top: 15px;
        margin-bottom: 1px;
        background-color: transparent !important;
        color: #000000 !important;
        border-bottom: 2px solid;
    }

    main {
        border-radius: 0 0 0px 0px;
        background: rgba(216, 191, 216, 0.94) !important;
    }

    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }

    footer {
        border-radius: 0px;
        background: rgba(216, 191, 216, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: rgba(216, 191, 216, 0.94) !important;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }

    .profile .friends .person img {
        border-radius: 500px;
    }

    .blog-preview p {
        font-size: 1.1rem;
    }

    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }

table.comments-table{
display: block;
height: 220px!important;
overflow-y: scroll;
}



</style>

<style>
.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted gray !important;
outline: none !important;
}
</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 115 comments ( View all | Add Comment )

morgZ	1760451119 Does anyone know what part of the code will just give the background image Report Comment
dagmar	1759591200 usingg Report Comment
Lilith	1757944284 its greattt Report Comment
M1chaEEl!	1757813461 usingggg! Report Comment
Raven	1752516495 using!! Report Comment
Magpie.•°	1751818871 using :3 Report Comment
lazy_babs	1750491858 Using ^^ Report Comment
Kip	1748120702 Using!! Report Comment
Kat <3	1747888161 using :) this is so pretty Report Comment
Lucas★	1740431027 using!!! Report Comment
Viola	1740250502 Using<3 Report Comment
K00L_CAT06	1740175364 using!! its very gorgeous Report Comment
meesia	1738585575 usingg Report Comment
Cheeseandtoastwee / #1 Sheriff fan!!	1738167939 using Report Comment
˙⋆✮𝓕𝓮𝓵𝓲𝓬𝓮✮⋆˙	1737750792 using:3 Report Comment
Nessa	1737596357 using Report Comment
jadesrockgarden	1737229986 using!! Report Comment
jadesrockgarden	1737229986 using!! Report Comment
jadesrockgarden	1737229984 using!! Report Comment
mili ꒰࿙♡࿚	1736800127 Usando Report Comment