Charlene's profile picture

Published by

published
updated

Privacy: Link-only
Category: Web, HTML, Tech

my first layout code

i'm considering a new layout and thought maybe others would appreciate my first layout code instead of it sitting somewhere in my laptop slowly withering away unnoticed. i've organized the codes by each section. i hope it's not confusing. go ahead and add more customizations. i love seeing how creative everybody gets with expressing themselves. have a nice day!

•    •    •    •    •    •    •    •    •    •    •    •    •    •    •




Layout code here:


<style>


/* cursor */

body { cursor: crosshair; }


</style>


<style>


/* the whole page */

body { 

    font-family: arial;

    font-size: 12pt;

    text-align: center;

    color: #fff !important;

}

main {

    background: transparent;

    color: #fff;

    padding: 0;

    font-size: 80%;

    color: var(--light-orange);

    border-radius: 25px;

    border-color: transparent;

}

.container {

    border-radius: 0px 0px 0 0;

    overflow: hidden;

    margin-top: 30px;

    padding: 10px;

}


/* interest title changes */

    :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: "𝔪𝔢";

    --topic2: "𝔪𝔲𝔰𝔦𝔠";

    --topic3: "𝔪𝔬𝔳𝔦𝔢𝔰";

    --topic4: "𝔰𝔥𝔬𝔴𝔰";

    --topic5: "𝔟𝔬𝔬𝔨𝔰";

    --topic6: "𝔤𝔞𝔪𝔢𝔰";

    --topic7: "𝔠𝔯𝔢𝔡𝔦𝔱"; 

}


.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after{

  content: var(--topic7);

}


.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: 1pt !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);

}

:root {

        --logo-blue: ;

        --darker-blue: ;

        --lighter-blue: transparent;

        --even-lighter-blue: transparent;

        --lightest-blue: ;

        --dark-orange: ;

        --light-orange: ;

        --even-lighter-orange: ;

        --green:  darkgreen;

}


/* background */

body {

    background-image: url(https://cutewallpaper.org/21/gif-black-background/Pin-on-Super-gif.gif);

    background-repeat: repeat;

    background-size: 100% ;

  }


/* the background grain effect from wonderful cory */

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url(https://i.imgur.com/QpnTsrV.jpg);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.2;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

@keyframes grain {

  0%, 100% { transform:translate(0, 0) }

  10% { transform:translate(-5%, -10%) }

  20% { transform:translate(-15%, 5%) }

  30% { transform:translate(7%, -25%) }

  40% { transform:translate(-5%, 25%) }

  50% { transform:translate(-15%, 10%) }

  60% { transform:translate(15%, 0%) }

  70% { transform:translate(0%, 15%) }

  80% { transform:translate(3%, 35%) }

  90% { transform:translate(-10%, 10%) }

}


/* navigation */

nav {

  background-image: url(https://i.pinimg.com/originals/57/c8/8a/57c88a48ad37ddf0137c87c8d09d6066.gif);

  border-radius: 15px 15px 0px 0px;

}

nav .links {

      background: transparent;

      font-size: 8px;

      font-family: courier new;

    }

nav {

  overflow-x: hidden;

  position: relative;

  padding-top: 0px;

  margin-top: 20px;

}

nav .top {

  border-radius: 15px 15px 0px 0px;

}


/* button modifications */

button {

    font-family: courier new !important;

    font-size: 9px;

    font-weight: none;

    letter-spacing: 3pt;

    text-transform: uppercase;

    color: #fff !important;

    border: 0px;

    background: transparent;

}


/* profile name */

.profile h1 {

    color:red;

    font-family: courier new;

    letter-spacing: 2pt;

}


/* online icon */

.online { visibility: hidden; }

.online img {

    content: url("https://www.myspacegens.com/images/online_now/112.gif");

    animation-name: none;

    visibility: visible;

    margin-left: 31px;

    height: 20px;

    width: 100px;

}


/* table titles */

.heading {

    padding: 5px 0 !important;

    margin-top: 15px;

    margin-bottom: 10px;

    background-color: #730000 !important;

    color: #fff !important;

    letter-spacing: 3pt;

    text-transform: uppercase;

    font-size: 9px;

    font-family: courier new;

    font-weight: none;

    border-bottom: 1px solid;

}

h4 {

    color: #fff !important;

    letter-spacing: 3pt;

    text-transform: uppercase;

    font-size: 10px;

    font-family: courier new;

    font-weight: bold;

    border-bottom: 0px solid;

}


/* friends section */

.friends a {

    font-size: 9px;

    letter-spacing: 3pt;

    font-family: courier new;

    text-transform: lowercase;

}

h1, .count, .friends a p {

    color: #730000 !important;

    font-family: courier new;

    text-transform: uppercase;

    font-size: 9px;

    letter-spacing: 3px;

}

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

    border-radius: 50px;

}

.profile .friends .person img {

    border-radius: 500px;

}



/* comments section */

table.comments-table td {

    border-color: transparent;

    font-size: 11px;

    border: 0px;

}

table.comments-table {

    display: block;

    height: 400px!important;

    overflow-y: scroll;

}

.comments-table td:first-child img {

     width: 80px;

     border-radius: 500px;

    }


/* footer */

footer {

   background-color: transparent;

   text-align: center;

   color: #fff;


/* extra modifications */

div.blog-preview {display:none;}

.right .section h4{display:none !important;}

.url-info{display:none !important;}

.blurbs .heading{display:none !important;}

 

</style>





remember to add this code in your "Heroes" section in your "Edit Profile" page to have the extra interest category. only change the 'your text goes here' part.

<tr>
  <td>
    <p>'interest 7'</p>
  </td>
  <td>

<p>your text goes here</p>

  </td>
</tr>


Comments

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