aleeex's profile picture

Published by

published
updated

Category: Web, HTML, Tech

sun & moon layout

you can find a preview of this layout here

highly recommend this site for previewing & easier coding 

copy paste in about me:



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


<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: "interest 1";
    --topic2: "interest 2";
    --topic3: "interest 3";
    --topic4: "interest 4";
    --topic5: "interest 5";
    --topic6: "interest 6";
    --topic7: "interest 7";


    --myactions: "follow me";
    --mytopics: "i'm so interesting ";
    --mylinks: "plug plug plug";
}
    /*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>


9 Kudos

Comments

Displaying 5 of 5 comments ( View all | Add Comment )

DarkMiryam

DarkMiryam's profile picture

Your layout is lovely! Thanks a lot for sharing!


Report Comment

natalie

natalie's profile picture

i love this layout! thank you!!


Report Comment

k e n n e d y

k e n n e d y 's profile picture

i love this!


Report Comment

🌻Brittanymarkia🌻

🌻Brittanymarkia🌻's profile picture

Thank you soooooo much


Report Comment

Lord Byron Silverhand

Lord Byron Silverhand's profile picture

Thank you!!!!!! Now to mess about with the color scheme.


Report Comment