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

⋆｡°✩ Milo	1700451580 using!! ty this is super cute Report Comment
orion/ursa	1689434823 i tried to use the interchangeable table interest things but the words are transparent? and idk why Report Comment
emil/betty ✩	1687890780 usinggg!!!! Report Comment
❆Maggie❆	1687188227 Beautiful layout, good job! Report Comment
seik!ra	1686354371 Using!! Report Comment
Ainxen / Aoi!!	1686058280 Using!! Finally a layout that doesnt give me headaches Report Comment
Cj Beck	1679894031 Using!! So freaking cute!!! Report Comment
IheartTara	1679880695 Using, this is literally so cute Report Comment
Jæ Hært	1679570335 I'm confused about the changeme in the topic section. What is it supposed to look like? Can you add a photo to this entry? Report Comment
Jassi	1678295299 using, love it <3 Report Comment
pom	1677383317 Using,,, RAAAH Report Comment i heart ur energy :3 by N4IN4I; 1679489668; Report
EndoTheGreatThief	1676226638 I'm using this!! Thank you so much. Report Comment
jennn	1676043566 using! tysm ^^ Report Comment
zaza_lover	1674947522 already using tysm <3 Report Comment
:33	1674663422 using Report Comment
dreaming_pigeon_xoxo	1673990591 This one is so pretty, i'm totally using it! ^-^ Report Comment
gamz	1673704641 this is so cute !! tysm !! Report Comment
Moss Eclarinal	1670494719 using; thank you! <3 Report Comment
ᴍᴀɢɪᴄᴍᴀɴ	1663780233 This totally matches my pfp! thx!!! Report Comment
kate	1659360614 love this thank youu (: Report Comment