aleeex's profile picture

Published by

published
updated

Category: Web, HTML, Tech

centered interest table text layout


you can find a preview of this layout here

highly recommend this site for previewing & easier coding 


this code includes the current color scheme as well
(fitness pacer test not included lol)





paste in about me:



<style>

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

        
        --logo-blue: #000000;
        --darker-blue: #FFEBCD;
        --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(""); 
        
    --topic1: "";
    --topic2: "";
    --topic3: "";
    --topic4: "";
    --topic5: "";
    --topic6: "";
    --topic7: "";


    --myactions: "you look lost, follow me ";
    --mytopics: "i'm not interesting ";
    --mylinks: "shameless 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-shadhttps://spacehey.com/soonow: none !important;letter-spacing: -100px;}

.details-table td:first-child {
background: none;
width: fit-content!important;
color: #FFF;
text-shadow: 0px px 0 #000;
}
.details-table td:last-child {
background: none;
max-height: 150px;
float: center;
}
.details-table tr {
border-bottom: 1px solid #000;
}


.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: #FFEBCD!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;
    }

   .friends-grid {
display: block;
height: 130px!important;
overflow-y: hidden;


    } 
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
    .contact {
  border-radius: 0px;
  background: url();
  background-position: left top;
  background-repeat: repeat;
  padding: 10px;
  width: 250px;
  height: 150px;
}


  table, tr, td { 
  background-color:transparent; 
 } 

  table, tr, td { 
  background-color:transparent; 
 border:none; 
 border-width:50px; 
 } 

  table table table { 
  width:80%; max-width:600px; } table table table table { width:100%;; 
 } 

    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(1, 128, 128, 0.94) !important;
    }

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

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

    table.comments-table td {
        background-color: rgba(1, 128, 128, 1.0) !important;
    }
    

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

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

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

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

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



.profile .friends .person p{
color: black;
}
 

.profile-info {
border: 0px solid rgb(255, 0, 0);
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-image:url();
}


</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>


3 Kudos

Comments

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