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:

Layout Screenshot

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

Eupiphany	1614717166 thank yous!! Report Comment
amity🌙 moonchild	1614180269 Love it! Report Comment
Mvs∆	1614169985 LOVELY!!!!!! Report Comment
Mar Villanueva	1613965409 I love your Layout! Report Comment
Melissa Law	1613786477 Ty Report Comment
jocelyn	1613748312 i love it!! thank u sm Report Comment
moontism	1613712960 tysm!!! it's on my profile now. so cute bb!! Report Comment
sarahdoll™	1613615088 LOVEEEDDD! Report Comment
Stance.Girl	1613536084 I love it ..! Report Comment
Kaitlin Francis	1613525973 Thanks for the layout! It’s great! Report Comment
Carley	1613518070 Thanks for the layout Report Comment
jcibme	1613283265 Great layout Report Comment
Bree	1613257429 This is so awesome ️ Report Comment
MysticRayne9	1613118499 This layout is amazing thank you so much!!!! ️💕 Report Comment
•chⱯsing rⱯbbits•	1613019763 Love this so much!!! Thank youuuuu Report Comment
RevaDiva	1613005707 Loveeeee, thank you!! Report Comment
Lena Rebecca	1612880046 Love this! Report Comment
CharCharLottie	1612823605 Way pretty! Thanks! 🖤 Report Comment
Kelly Lee	1612820855 So pretty! Thank you! Report Comment
BC Bentley	1612808061 Thank you! Report Comment

Layout published by aleeex

sun & moon layout

Description:

Preview:

Code:

Comments

Great layout