aleeex's profile picture

Published by

published
updated

Category: Web, HTML, Tech

paramore layout

you can find a preview of this layout here

highly recommend this site for previewing & easier coding 


paste into about me:


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

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

</div>

<style>
main:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://24.media.tumblr.com/107c3e4678224b8d854b11ab1cb2ebf3/tumblr_mjo4byFCCs1r2jx5co1_500.gif');
 background-position: center center;
 background-size: cover;
}
></style>

<style>

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

        
        --logo-blue: #;
        --darker-blue: #;
        --lighter-blue: #;
        --background_image: url("https://i.imgur.com/kuAsouM.jpg"); 
        
    --topic1: "general";
    --topic2: "tunez";
    --topic3: "tube";
    --topic4: "film";
    --topic5: "foodz";
    --topic6: "idolz";


    --myactions: "ain't it fun?";
    --mytopics: "i never meant to brag, but...";
    --mylinks: "linkz";
}
    /*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 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);
}

    
    .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;
}
    

.profile h1 {color: #a9a9a9;}


.contact {
  border-radius: 0px;
  background: url(https://i.gifer.com/APLT.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 0px;
  width: 0px;
  height: 0px;
}


.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;}
 
    
     table table table td { 
  background-color:a9a9a9; 
 } 

  table, tr, td, li, p, div,.text,.redtext, .blacktext12  { 
  font-size: 10px;
  color:#a9a9a9; 
 } 

   .whitetext12, .orangetext15 { 
  color:a9a9a9; 
 } 


  a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link  { 
  color:#8b0000; 
 } 

  a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover  { 
  color:white; 
 } 

    * {
        font-family: monospace;
    }

    body {
background-image: var(--background_image) !important;
background-color:black !important;
background-repeat: ;
background-attachment: fixed;

     }

    .blog-preview p {
        background-color: none;
        padding: 0px 10px;
        border-radius: 10px;
        color: darkgrey;
    }

    .blog-preview p a{
        color: #8b0000!important;
    }

    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: darkgrey!important;
    }

    nav {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
    }
    

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: outline;
    }

    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: 1px;
        margin-bottom: 1px;
        background-color: transparent !important;
        color: #8b0000 !important;
        border-bottom: 2.5px solid;
    }

    main {
        border-radius: 0 0 0px 0px;
        background: rgba(0, 0, 0, 0.4) !important;
    }

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

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

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

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

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

    .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: darkgrey;
}


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


8 Kudos

Comments

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