Charmander's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

my second layout

i wanted a simpler, more nostalgic layout. so! here is my second creation. it was fun making it and i was heavily inspired by light/dark academia moods. having a square profile picture would work best to fit inside the flower photo wrap.

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




Layout code here:

<style>
body { 

cursor: url('https://cur.cursors-4u.net/symbols/sym-1/sym46.cur’), auto; 

}

</style>


<style>

@import url('https://fonts.googleapis.com/css2?family=Ballet&display=swap');


/* the whole page */

:root {

        --logo-blue: ;

        --darker-blue: ;

        --lighter-blue: transparent;

        --even-lighter-blue: ;

        --lightest-blue: ;

        --dark-orange: ;

        --light-orange: ;

        --even-lighter-orange: ;

        --green: ;

}


body { 

    font-family: baskerville;

    font-size: 12pt;

    text-align: center;

}


a {

  font-style: italic;

}

main {

    background-image: url(https://i.ibb.co/85rYbgg/texture-bg.jpg);

    border-radius: 0px 0px 40px 40px;

    color: #333;

    padding: 0;

    border-color: transparent;

}

.container {

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

    overflow: hidden;

    margin-top: 50px;

    padding: 0px;

}


/* background */

body {

    background-image: url(https://i.ibb.co/tD8pdJC/Aesthetic-Dark-Desktop-Wallpapers-Top-Free-Aesthetic-Dark-jpg.jpg);

    background-repeat: repeat;

    background-attachment: fixed;

}


/* 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.ibb.co/D1CrhR1/image.jpg);

  background-position: center ;

  padding: 10px;

  border-radius: 40px 40px 0px 0px;

}


nav .links {

      background: transparent;

      text-align: center;

      font-size: 9px;

      font-family: courier new;

}


/* button modification */

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 {

    font-family: 'Ballet', cursive;

    font-size: 27pt;

    -webkit-text-stroke: 1px #333!important;

    -webkit-text-fill-color: #fff!important; 

}

.profile-pic{

    margin-left:10px!important;

    margin-top:10px!important;

    background-image: url('https://i.ibb.co/gFvjcxt/18-184127-tumblr-borders-png-transparent-background-aesthetic-circle-transparent.png');

    background-size: contain;

    border-radius: 500px;

    background-repeat: no-repeat;

}

.profile-pic img {

    padding:25px;

    border-radius: 500px;

    background-size: contain;

    opacity: 0.0;

}


/* online icon */

.online { visibility: hidden; }

.online img {

    content: url("http://www.theprofilesite.com/userpics/online-now-icons/myspacenowonlineicons52.gif");

    animation-name: none;

    visibility: visible;

    margin-left: 20px;

}


/* supporter tag */

.supporter a {color:#333333!important;}


/* interest title changes */

    :root {

        

        

        --headers: #333!important;

        --links: #333!important;

        --text: #333!important;

        --names: #333!important;


        

        --logo-blue: ;

        --darker-blue: ;

        --lighter-blue: ;

        --even-lighter-blue: ;

        --lightest-blue: ;

        --dark-orange: ;

        --light-orange: ;

        --even-lighter-orange: ;

        --green: ;

        --background_image: url(""); 

        

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

}



/* table titles */

h4 {

    color: #333 !important;

    letter-spacing: 0pt;

    font-size: 0px;

    font-family: baskerville;

    font-style: italic;

    background: transparent;

    border-bottom: 0px solid;

}


h3 {

    -webkit-text-stroke: 1px #333!important;

    -webkit-text-fill-color: #fff!important; font-size: 27pt; font-family: 'Ballet', cursive;

}


/* friends section */

.friends a {

    font-size: 9px;

    letter-spacing: 3pt;

    font-family: courier new;

    text-transform: lowercase;

}


h1, .count, .friends a p {

    color: #444 !important;

    font-family: courier new;

    font-size: 9px;

    letter-spacing: 3px;

}


.friends th, tr, .friends td, th, .icon, #comments, .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;

}


.profile .friends .person img {

    border-radius: 500px;

}


/* comments section */

table.comments-table td {

    border-color: transparent;

    background: transparent;

    border-radius: 20px 20px 20px 20px;

    font-size: 11px;

    font-color: #333!important;

    border: 0px;

    padding-top: 50px;

    padding-right: 50px;

    padding-left: 50px;

}

table.comments-table {

    display: block;

    background-image: url(https://www.freeiconspng.com/thumbs/paper/striped-beige-paper-background-images-0.png);

    background-position: center top;

    background-size: 100%;

    border-radius: 40px 40px 40px 40px;

    height: 610px!important;

    border-color: transparent;

    overflow-y: scroll;

}

.comments-table td:first-child img {

     width: 80px;

     border-radius: 500px;

     font-color: #444!important;

    }


/* footer */

footer {

   background-color: transparent;

   text-align: center;

   color: #fff;


/* extra modifications */

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

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

div.blog-preview {display:none;}

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


/* heading customizations */

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "Hello, new friend"; -webkit-text-stroke: 1px #333!important;

-webkit-text-fill-color: #fff!important; font-size: 27pt; font-family: 'Ballet', cursive; text-align: center;}

.blog-preview h4{ font-size:0; }

.blog-preview h4 a{font-size:.8rem;margin-left:5px; }

.blog-preview h4:before{ content: "click here for more ";  font-size: 10pt; font-family: 'Ballet', cursive; }

.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "Thank you for leaving me a note"; -webkit-text-stroke: 1px #333!important;

-webkit-text-fill-color: #fff!important; font-size: 27pt; font-family: 'Ballet', cursive; }

.friends .heading{ font-size:0; }

.friends .heading:before{ content: "Friends";  -webkit-text-stroke: 1px #333!important;

-webkit-text-fill-color: #fff!important; font-size: 27pt; font-family: 'Ballet', cursive; }

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


/* blog section */

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

    }



/* contact icons */

.contact .inner a img {

    font-size: 0;

}

.contact .inner a img:before {

    font-size: 1em;

    display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* Add to Friends */

content: ""

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* Add to Favorites */

content: ""

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* Send Message */

content: ""

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* Forward to Friend */

content: ""

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* Instant Message */

content: ""

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* Block User */

content: ""

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* Add to Group */

content: ""

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* Report Profile */

content: ""

}

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


0 Kudos

Comments

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