Katie's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

CSS layouts *updated 9th January*


If you like this style, you can use it in your profile, BUT at least, ADD ME or COMMENT BELOW and give me some kudos! I spent time for making this layout!!!

Credits are appreciated (a post, a bulletin or something else that can support me) 

You have permission to use this for your Layout only, you don't have permission to post elsewhere without giving a link to the original crediting me


Decided so I don't lose my layouts to keep track off them here so I'll be updating this every time I redo my profile layout

Edit: I'm more than happy for others to use this and will continue to add to it

Pinkish Layout 

<style>

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

:root {
        --logo-blue: #4d000055;
        --darker-blue: pink;
        --lighter-blue: violet;
        --even-lighter-blue: pink;
        --lightest-blue: pink;
        --dark-orange: peachpuff;
        --light-orange: purple;
        --even-lighter-orange: pink;
        --green: peachpuff;
    }

main {
  /* changes made to stuff outside of columns */
    background: #ff999957;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }

body {
  /* sets background */
    background-image: url(https://i.pinimg.com/originals/17/1b/8c/171b8c875ff5145835db0b8a5079e950.jpg);
    background-repeat: repeat;
    background-size: 50% ;
  }

 * {
        font-family: monospace;
    }

.general-about .profile-pic {
  /* profile pic container */
    height: 50%;
    width: 50%;
    background-color: var(--#4d000055);
    border-radius: 500px;
    padding-top: 4px;
  }

  .general-about .profile-pic img {
  /* profile pic */
    max-width: 50%;
    max-height: 50%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 500px;
    display: block;
  }

main {
        border-radius: 0 0 15px 15px;
        background: rgba(234, 155, 255, 0.94) !important;
    }

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

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: pink !important;
    }

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

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



nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/originals/bc/55/51/bc5551ac237a9ef4d8e9575662f2e106.gif); }

</style>

Clunky Red Vibe 


<style>



nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://media2.giphy.com/media/TK4aDaZrcPvFKnn7cE/giphy.gif); }

body {
        /* background-image: url(https://i.pinimg.com/originals/f5/e5/8a/f5e58a068d82223616de6722a1ba5517.jpg) !important; */
        background-image: url(https://i.pinimg.com/originals/2b/70/ea/2b70ea0965be475739e8dc906f178d94.gif) !important;
        background-size: contain;
    }



.profile {
  display: grid;
  grid-template:
    "left"
    "right";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
  width: 100%;
}

/* left column */
.col.w-40 {
  grid-area: left;
  display: grid;
  grid-template:
    "general-about contact"
    "header table1 "
    "url-info table2 "
    "mood table2 ";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Your title/Name */
h1 {
  grid-area: header;
}

/* Your picture/online status */
.general-about {
  grid-area: general-about;
}
/* Mood/blog/pics */
.mood {
  grid-area: mood;
}
/* contact */
.contact {
  grid-area: contact;
}
/* spacehey URL */
.url-info {
  grid-area: url-info;
}
/* General/Music/etc */
.table-section:first-of-type {
  grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
  grid-area: table2;
}

/* right column stuff */
/* right */
.col.right {
  grid-area: right;
  display: grid;
  grid-template:
    "blurbs blog-preview"
    "blurbs friends"
    "comments comments"
    "comments comments";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
}

/* contains about me */
.blurbs {
  grid-area: blurbs;
}
/* Friends pictures grid */
.friends:not(#comments) {
  grid-area: friends;
}

/* comments */
#comments {
  grid-area: comments;
}

/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
  margin: 0px;
}

main {
  background-color: transparent;
  color: salmon;
}

 :root {
        --logo-blue: salmon;
        --darker-blue: Salmon;
        --lighter-blue: firebrick;
        --even-lighter-blue: firebrick;
        --lightest-blue: firebrick;
        --dark-orange: salmon;
        --light-orange: firebrick;
        --even-lighter-orange: firebrick;
        --green: salmon;

.profile h1 {color: seagreen;}

body { 

font-family: fantasy;
font-size: 10px 25px



</style>
Gothic Green 


<style>

nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://img1.picmix.com/output/stamp/normal/3/4/5/0/260543_892f0.gif); }

body {
  /* sets background */
    background-image: url(https://data.whicdn.com/images/202370636/original.gif);
    background-repeat: repeat;
    background-size: 50% ;
  }


:root {
        --logo-blue: ;
        --darker-blue: darkseagreen;
        --lighter-blue: mediumseagreen;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: seagreen;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: darkgreen;
    }

main {
  /* changes made to stuff outside of columns */
    background: #EEE8;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }



main {
  background-color: transparent;
  color: lawngreen;
}

.profile h1 {color: seagreen;}

body { 

font-family: monospace;

     

</style>

Green 2.0 Layout

<style>


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

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    a.ditto-link {
        display: block;
        margin: 10px 0;
        color: #cc3e3e;
        font-size: 1.4rem;
        font-weight: bold;
        animation: blinker 1s linear infinite;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

   

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

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: !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.4rem;
    }

nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/originals/4e/73/a8/4e73a8a63a4f938c55473008ca7fc687.gif); }

body {
  /* sets background */
    background-image: url( https://i.gifer.com/FZl2.gif );
    background-repeat: repeat;
    background-size: 50% ;
  }


:root {
        --logo-blue: ;
        --darker-blue: darkseagreen;
        --lighter-blue: mediumseagreen;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: seagreen;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: darkgreen;
    }

main {
  /* changes made to stuff outside of columns */
    background: #EEE8;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }



main {
  background-color: transparent;
  color: lawngreen;
}

.profile h1 {color: seagreen;}

body { 

font-family: monospace;


</style>


Cursive Purple

<style>

body {
  /* sets background */
    background-image: url(https://64.media.tumblr.com/b777316f683d46e8462d2d8af8400f8d/tumblr_pau4lxpFrW1xpnquno1_500.gifv);
    background-repeat: repeat;
    background-size: 50% ;
  }   



h1, h2, h3, h4, p { color:#E6E6FA; }

.container{    
  margin-top:10px!important; 
  width: 950px;
  border: 2px solid purple;
}

nav .links a{    
  font-size: 1em;
  font-weight: 600; 
}

.online{
  color: purple!important;  
}


main {
  background-color: transparent;
  color: purple;
}

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

    table.details-table {
        border-collapse: solid ;
    }

    table.details-table td {
        background-color: #9B30FF55 !important;
    }

    a.ditto-link {
        display: block;
        margin: 10px 0;
        color: #cc3e3e;
        font-size: 1.4rem;
        font-weight: bold;
        animation: blinker 1s linear infinite;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 50px !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: orchid !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

   

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

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: !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.4rem;
    }


:root {
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: #E6E6FA;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: #D8BFD855;
        --light-orange: #D8BFD855;
        --even-lighter-orange: #D8BFD855 ;
        --green: ;
    }
nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

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


body { 

font-family: cursive;

</style>


Trippy Yellow

<style>


h1 {
  color: white;
  text-shadow: 1px 1px 2px yellow, 0 0 25px blue, 0 0 5px gold;
}

body {

font-family: Courier New;
font-size: 10pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
}


h1, h2, h3, h4, p { color: white; }
.online{
  color: white!important;  
}


main {
  /* changes made to stuff outside of columns */
    background: #FFFF0055;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }

.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: 3px dotted !important;
outline: none !important;
}


body {
  border-radius: 25px;
  border: 2px dotted black;
  padding: 20px;
  width: 555px;
  height: 250px;
}

:root {
        --logo-blue: ;
        --darker-blue: white;
        --lighter-blue: #333300;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: yellow;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: yellow;
    }



nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://pa1.narvii.com/6653/ac0ea3e1d765b63a7e6ed158f59c5f6ff04329a4_00.gif); }
body {
        /* background-image: url(https://i.pinimg.com/originals/f5/e5/8a/f5e58a068d82223616de6722a1ba5517.jpg) !important; */
        background-image: url(https://64.media.tumblr.com/382cbae46d7ebee136a89448a2bbf487/tumblr_pl8ez5l9VV1y3ryiio1_500.gifv) !important;
        background-size: contain;
    }

</style>


Blue 

<style>



main {
  /* changes made to stuff outside of columns */
    background: #008B8B55;
    padding: 20px;
    font-size: 80%;
    color: var(--light-orange);
  }

.online { display: none;
  }

h1, h2, h3, h4, p { color: #B0E0E6}

:root { 

--darker-blue: #008B8B;
--lighter-blue: translucent;
  --lightest-blue: #008B8B;
        --dark-orange: ;
        --light-orange: #008B8B;
        --even-lighter-orange: #008B8B;
       --even-lighter-blue: #008B8B;

  --topic1: "Intro";
  --topic2: "🎤🎧🎵";
  --topic3: "Movies/TV Shows";
  --topic4: "Things I like";
  --topic5: "Books/Writers";
  --topic6: "Misc";

 }

.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: 2px 2px #B0E0E6 !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);
}


nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/originals/b6/a0/7e/b6a07e572ee8b1058400621237e27c6f.gif); }


general-about .profile-pic {
  /* profile pic container */
    height: 50%;
    width: 50%;
    background-color: var(--#4d000055);
    border-radius: 500px;
    padding-top: 4px;
  }

  .general-about .profile-pic img {
  /* profile pic */
    max-width: 50%;
    max-height: 50%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 500px;
    display: block;
  }

main {
        border-radius: 0 0 15px 15px;
        background: rgba(, 155, 255, 0.94) !important;
    }

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

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

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

body { font-family: Courier New;
font-size: 10pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
}

search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 15) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(15, 0, 0, 0.5) !important;color:var(--headers) !important;}

body {
  /* sets background */
    background-image: url(https://i.pinimg.com/originals/f3/c4/81/f3c481ab08574d32eae95a90a2648048.png);
    background-repeat: repeat;
    background-size: 50% ;
  }
</style>

paper layout

<style>

main {
  /* changes made to stuff outside of columns */
    background:#00FF0000 ;
    padding: 20px;
    font-size: 80%;
    color: var(--light-orange);
  }

.online { display: none;
  }


body {

font-family: monospace;
font-size: 11px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}



h1 {
  color: green;
  text-shadow: 1px 1px 2px black, 0 0 25px gold, 0 0 5px gold;
}

h1, h2, h3, h4,p {color: seagreen;}

:root {

--darker-blue: green;
--lighter-blue: translucent;
  --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
       --even-lighter-blue: ;
  --topic1: "Intro";
  --topic2: "🎤🎧🎵";
  --topic3: "Movies/TV Shows";
  --topic4: "Things I like";
  --topic5: "Books/Writers";
  --topic6: "Misc";

 }

.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: 2px 2px green !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);
}



.container{    
  margin-top:10px!important; 
  width: 550px;
  border: 10px solid green;
}

nav {
  overflow-x: hidden;
  position: relative;
}




nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(
https://www.nditech.org/sites/default/files/styles/small_photo/public/diary-header-image-1000x512.jpg?itok=RzZK5_as); }
body {
        /* background-image: url(https://i.pinimg.com/originals/f5/e5/8a/f5e58a068d82223616de6722a1ba5517.jpg) !important; */
        background-image: url(https://img.freepik.com/free-photo/background-crumpled-paper-sheet_1194-7545.jpg?size=626&ext=jpg) !important;
        background-size: contain;
    }

search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 15) !important;border: 1px solid var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(15, 0, 0, 0.5) !important;color:var(--headers) !important;}

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

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    a.ditto-link {
        display: block;
        margin: 10px 0;
        color: #cc3e3e;
        font-size: 1.4rem;
        font-weight: bold;
        animation: blinker 1s linear infinite;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

   

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

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: !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.4rem;
    }


</style>

Pink Whale Theme 


<style>

table, th, td {
  border: 1px solid pink;
}

body
        {background: url("https://thumbs.gfycat.com/AchingAfraidIndigobunting-size_restricted.gif")
        no-repeat fixed; background-size: cover;
     }


:root {
  --topic1: "Intro";
  --topic2: "🎤🎧🎵";
  --topic3: "Movies/TV Shows";
  --topic4: "Things I like";
  --topic5: "Books/Writers";
  --topic6: "Misc";

 }

.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: 2px 2px plum !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);
}



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

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    a.ditto-link {
        display: block;
        margin: 10px 0;
        color: #cc3e3e;
        font-size: 1.4rem;
        font-weight: bold;
        animation: blinker 1s linear infinite;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

   

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

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: !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.4rem;
    }

nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/originals/58/9d/a7/589da7793cc6d529050cff85d9d08195.gif); }


Main      {background: url("https://media1.giphy.com/media/3o6gDP63yYL28Y8HbG/giphy.gif")
        no-repeat fixed; background-size: cover;
     }

:root {
        --logo-blue: ;
        --darker-blue: lavender;
        --lighter-blue: thistle;
        --even-lighter-blue: plum ;
        --lightest-blue:   ;
        --dark-orange: plum;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: thistle;
    }





main {
  background-color: transparent;
  color: white;
}
 h1, h2, h3, h4 {color: lavender;}

body { 

font-family: monospace;


</style>

<style>


.online{content:url(http://www.fillster.com/images/icons/116k.gif)

</style>

<style>


body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div > div > a { visibility: hidden; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(1) > div:nth-child(1) > a { content:url("https://media3.giphy.com/media/dCERkihZ9m7xjIvSau/giphy.gif"); visibility: visible; height: 30px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(1) > div:nth-child(2) > a { content: url("https://cdn.pixabay.com/photo/2016/08/29/13/55/heart-1628313_960_720.png"); visibility: visible; height: 30px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(2) > div:nth-child(1) > a { content: url("https://www.kindpng.com/picc/m/185-1853706_purple-envelope-icon-hd-png-download.png"); visibility: visible; height: 20px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(2) > div:nth-child(2) > a { content: url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-forward-icon.png"); visibility: visible; height: 20px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(3) > div:nth-child(1) > a { content: url("https://i.pinimg.com/originals/df/d0/b0/dfd0b0f00a35b820aa28aa22e3c2782f.gif"); visibility: visible; height: 30px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(3) > div:nth-child(2) > a { content: url("http://www.skamu.com/free-icons/gothic/images/sign018.gif"); visibility: visible; height: 30px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(4) > div:nth-child(1) > a { content: url("https://i.pinimg.com/originals/99/69/d2/9969d2bc836ee216a3319d0c15d8ad35.gif"); visibility: visible; height: 30px; width: 32px; }

body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(4) > div:nth-child(2) > a { content: url("https://66.media.tumblr.com/0121952107dcbc3e73e79001c35c8171/a0304b6053744dc7-d6/s540x810/fdf3207069b0160b57e9d507af2489dcd093f544.gif"); visibility: visible; height: 30px; width: 32px; }

#comments > div.inner > table > tbody > tr > td > p.report > a { visibility: hidden; }
#comments > div.inner > table > tbody > tr > td > p.report > a { content: url("https://i.pinimg.com/474x/1a/ec/1c/1aec1cd8c5262a3c3d5b686968806e88.jpg"); visibility: visible; height: 30px; width: 32px; float: right; }
</style>




98 Kudos

—

Comments

Displaying 20 of 29 comments ( View all | Add Comment )

Alisonhale

 Alisonhale's profile picture

Adeena's Kitchen Offer you delicious food to Eat & enjoy with all your loved ones.with A good curry consistently ranks among some of the nation's favourite food .https://www.adeenaskitchen.co.uk


Report Comment

𝐯𝖆𝖓☥𝖆

 𝐯𝖆𝖓☥𝖆's profile picture

using gothic green thank you so much


Report Comment



Awesome

by Katie; ; Report

×°Uή𝔨ήowή°×

 ×°Uή𝔨ήowή°×'s profile picture

using one of the green layouts, thank you!


Report Comment

𝖓𝖓𝖞

 𝖓𝖓𝖞's profile picture

Used Green 2.0 Layout
It’s great thank you 🦠


Report Comment

Ratmany

 Ratmany's profile picture

Thanks and appreciate it! I adapted your code and made some changes.


Report Comment

Inshanity666

 Inshanity666's profile picture

Thank you for sharing your codes! I hope it was okay to adapt it and use it myself? New to this and it really helped me get an idea of what to do :)


Report Comment

×Xchrischaos™X×

 ×Xchrischaos™X×'s profile picture

Thanks for these awesome building blocks!


Report Comment

Xx WOLFE xX

 Xx WOLFE xX's profile picture

this is awesome! you're a lifesaver for this.


Report Comment

Kaysinator

 Kaysinator's profile picture

You are an angel for all of this! Thank you so very much!

If you ever get the chance to do a good Star Wars layout, please let me know! I found an old code for one on PimpMyProfile, but it doesn't work well.

Thank you!!


Report Comment

🍬Kandi🍭

 🍬Kandi🍭's profile picture

Oh gosh thank you 🌈💖


Report Comment

Kiki Erzebet

 Kiki Erzebet's profile picture

Thank you so much for sharing!


Report Comment

ethereal cowboy

 ethereal cowboy's profile picture

Trying out the blue for a bit. Thank you! :)


Report Comment

Carmz

 ☠❤Carmz❤☠'s profile picture

You're the best!


Report Comment

Florrie

 Florrie 's profile picture

Thank you!!! I used the purple cursive layout,. I just used a different background image. 🙏


Report Comment

Raven Elder

 Raven Elder's profile picture

ThanK you sooooo much! 🖤💚


Report Comment

Meggg <3

 Meggg <3's profile picture

Could you help me figure out how to just change my background to a paisley print that’s just black and white?


Report Comment

𝕸𝖎𝖑𝖊𝕼𝖚𝖎𝖓𝖓

 💀𝕸𝖎𝖑𝖊𝕼𝖚𝖎𝖓𝖓💀's profile picture

Thanks so much!!!


Report Comment

𝖊𝖙𝖔𝖎𝖑𝖊 𝖋𝖑𝖊𝖚𝖗

 𝖊𝖙𝖔𝖎𝖑𝖊 𝖋𝖑𝖊𝖚𝖗 's profile picture

If you're taking recommendations I'm full of bad ideas!

Neon City:
Neon vaporware background
colors: violet, pink

Retro:
VSH tape background
Colors: yellow, green, red


Report Comment

~Yaya Cat~

 ~Yaya Cat~'s profile picture

Ooh goodie!


Report Comment

Melissa.xXx

 Melissa.xXx's profile picture

Thank youuuuu! I cannot remember how to do any of this anymore!


Report Comment