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

Judge•	1724789939 Using!!! Report Comment
Vnza	1721872976 using !! tyty ^ Report Comment
benny	1716587427 i tried using it, but it's not working?? the background image i chose won't show up Report Comment
Taco / Casper / Star	1715231784 using fr!!! Report Comment
CAPTAINDURAN	1715221383 OUGH using so bad 🙏🙏 Report Comment
H@m1$ntf00d	1714843338 using!!! so cool btw! :D Report Comment
AARON_THE_PUP!X3	1711296818 Using ‍🦲 Report Comment
luanaxxyz	1706487805 using thx ^^ Report Comment
The Colors Of Our Stripes (autoplay)	1706115357 hey, weird, quick coding question. im a new layout creator. i am struggling to figure out how to change the font/color of the "my links", "contacting ___" and "___ interests" sections. how did you change those colors? Report 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
emii ✩	1687890780 usinggg!!!! Report Comment
Many-Named Changeling🏳️‍⚧️🪻	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
jack(ie)	1677383317 Using,,, RAAAH Report Comment i heart ur energy :3 by RENÉE; 1679489668; Report