profile picture

Published by Francesco

published
updated

Category: Web, HTML, Tech

View Francesco's Blog

View Francesco's Profile

Report Blog Entry

Profile Layout 2

README FIRST!


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)

Thanks.

Tips:

wrap this code inside a style tag and paste in your about section or where you want in yout profile:

<style>CODE HERE</style>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100;200;300;400;500;600;700;800&display=swap');
/* COLORS BEGIN */

/* BACKGROUND COLOR */
body{
    background-color#333;
}

/* TOP BAR AND FOOTER COLOR */
.container nav .top,
.container nav .links,
.container main,
.container footer{
    background-colortransparent;
}

/* TOB BAR AND FOOTER TEXT COLOR */
.container footer *,
.container nav *,
.container nav .links li a,
.container nav .links li::after,
.profile .blurbs .section h4,
.count{
    color#000;
}

.profile .table-section .inner .details-table,
.profile .table-section .inner .details-table tbody,
.profile .table-section .inner .details-table tbody tr,
.profile .table-section .inner .details-table tbody tr td,
.profile .friends#comments .inner .comments-table,
.profile .friends#comments .inner .comments-table tbody,
.profile .friends#comments .inner .comments-table tbody tr,
.profile .friends#comments .inner .comments-table tbody tr td{
    background-colortransparent;
    color#000;
}

a,
.profile .friends#comments a{
    color#000!important;
    text-decorationnone!important;
    transition0.4s;
}

a:hover,
.profile .friends#comments a:hover{
    colortransparent!important;
    text-shadow0 0 5px rgba(0,0,0,0.5)!important;
}

.profile a{
    color#c00;
    text-decorationnone;
    font-weightbold;
}

.profile a:hover{
    colortransparent!important;
    text-shadow0 0 5px rgba(204,0,0,0.5)!important;
}


/* COLORS END */

*{
    font-family'Fraunces'serif;
    font-size1.02em;
}

.profile .friends .person a p{
    displaynone;
}

/* IMAGES BEGIN */

body {
    background-imageurl(https://www.francescomarchesin.com/assets/images/cover_def.jpg!important;
    background-sizecover;
    background-attachmentfixed;
}

/* #bg-image-container{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

#bg-image-container .bg-image{
    object-fit: cover;
    width: 100%;
    height: 100%;
} */

.profile .general-about .profile-pic,
.profile .friends .friends-grid .person a:nth-child(2),
.profile .friends .comments-table tr td a:nth-child(2){
    width200px;
    height200px;
    overflowhidden;
    displayblock;
    margin0 auto;
}

.profile .friends .friends-grid .person a:nth-child(2),
.profile .friends .comments-table tr td a:nth-child(2){
    width100px;
    height100px;
}

.profile .general-about .profile-pic img,
.profile .friends .friends-grid .person a:nth-child(2img,
.profile .friends .comments-table tr td a:nth-child(2img{
    width100%;
    height100%;
    object-fitcover;
    clip-pathpolygon(30% 0%70% 0%100% 30%100% 70%70% 100%30% 100%0% 70%0% 30%);
    transition0.4s;
}

.profile .general-about .profile-pic img:hover,
.profile .friends .friends-grid .person a:nth-child(2img:hover,
.profile .friends .comments-table tr td a:nth-child(2img:hover{
    clip-pathpolygon(0 033% 066% 0100% 0100% 100%66% 100%33% 100%0% 100%);
}

/* IMAGES END */

/* SEARCH BAR BEGIN */

.container nav .top .center form{
    positionrelative;
    max-width300px;
    text-alignleft;
    marginauto;
}

.container nav .top .center form label{
    displayblock;
}

.container nav .top .center form input{
    background-colortransparent;
    bordernone;
    outlinenone;
    border-bottom2px solid #000;
}

.container nav .top .center form input{
    background-colortransparent;
    bordernone;
    outlinenone;
    border-bottom2px solid #000;
}

/* SEARCH BAR END */

/* PROFILE CONTACTS BEGIN */

.profile .contact{
    bordernone;
}

.profile .contact .heading{
    displaynone;
}

.profile .contact .inner{
    padding15px 0;
}

.profile .contact .inner .f-row,
.profile .contact  .inner .f-row .f-col{
    widthauto;
    floatleft;
    margin0;
}

.profile .contact  .inner .f-row .f-col{
    margin-right10px;
}

.profile .contact  .inner .f-row .f-col a,
.profile .contact  .inner .f-row .f-col a img{
    displayblock;
    font-size0;
    white-spacenowrap;
    overflowhidden;
    width20px;
    height20px;
}

/* PROFILE CONTACTS END */

/* PROFILE URL BEGIN */

.profile .url-info{
    bordernone;
    margin0;
    padding15px 0;
}

/* PROFILE URL END */

/* PROFILE INTERESTS BEGIN */

.profile .table-section{
    bordernone;
    margin0;
    padding15px 0;
}

.profile .table-section .heading{
    displaynone;
}

.profile .table-section .inner .details-table,
.profile .table-section .inner .details-table tbody,
.profile .table-section .inner .details-table tbody tr,
.profile .table-section .inner .details-table tbody tr td{
    bordernone;
    border-collapsecollapse;
    displayblock;
    width100%;
}

.profile .left .table-section:nth-of-type(6.inner .details-table,
.profile .left .table-section:nth-of-type(6.inner .details-table tbody,
.profile .left .table-section:nth-of-type(6.inner .details-table tbody tr,
.profile .left .table-section:nth-of-type(6.inner .details-table tbody tr td{
    displayblock;
    widthauto;
    floatleft;
    margin0;
}

.profile .left .table-section:nth-of-type(6.inner .details-table tbody tr td:nth-child(2){
    displaynone;
}

.profile .left .table-section:nth-of-type(6.inner a,
.profile .left .table-section:nth-of-type(6.inner a img{
    displayblock;
    font-size0;
    white-spacenowrap;
    overflowhidden;
    width20px;
    height20px;
}

/* PROFILE INTERESTS END */

/* PROFILE BLOG PREVIEW BEGIN */

.profile .blog-preview .heading{
    displaynone;
}

/* PROFILE BLOG PREVIEW END */

/* PROFILE BLURBS BEGIN */

.profile .blurbs{
    margin0;
}

.profile .blurbs .heading{
    displaynone;
}

.profile .blurbs .inner{
    padding15px 0;
}

.profile .blurbs .inner .section h4{
    margin-top5px;
    margin-bottom10px;
}

/* PROFILE BLURBS END */

/* PROFILE FRIENDS BEGIN */

.profile .friends .heading{
    displaynone;
}

.profile .friends .inner{
    padding15px 0;
}

.profile .friends .inner > p{
    margin-bottom15px;
}

.profile .friends .inner .section h4{
    margin-top5px;
    margin-bottom10px;
}

/* PROFILE FRIENDS END */

/* PROFILE COMMENTS BEGIN */

.profile .friends#comments .inner{
    overflow-yscroll;
    max-height400px;
}

.profile .friends#comments .inner .comments-table,
.profile .friends#comments .inner .comments-table tbody,
.profile .friends#comments .inner .comments-table tbody tr,
.profile .friends#comments .inner .comments-table tbody tr td{
    bordernone;
    border-collapsecollapse;
}

.profile .friends#comments .inner .comments-table tbody tr td{
    padding-bottom15px;
}

.profile .friends#comments .inner .comments-table tbody tr td > a:first-child{
    displaynone;
}

.profile .friends#comments .inner .comments-table tbody tr td:first-child{
    widthauto;
    padding-right15px;
}

.profile .friends#comments .inner .report a,
.profile .friends#comments .inner .report a img{
    displayblock;
    font-size0;
    white-spacenowrap;
    overflowhidden;
    width20px;
    height20px;
}

/* PROFILE COMMENTS END */

/* MISCELLANEOUS BEGIN */

button{
    bordernone;
    outlinenone;
    background-colortransparent;
    color#000;
    padding5px 15px;
    cursorpointer;
}

/* MISCELLANEOUS END */

/* ANIMATIONS BEGIN */

body{
    animation-name: backgroundColor;
    animation-duration1s;
    animation-iteration-countinfinite;
    animation-directionalternate-reverse;
    animation-timing-functionease-in-out;
}

@keyframes backgroundColor {
    from {background-color#2a2a2a;}
    to {background-color#333;}
}

/* ANIMATIONS END */


12 Kudos

Comments

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

Christopher Lee

profile picture

Hey thanks for letting us use this layout.


Report Comment

🌹Bunny🌹

profile picture

Thank you! Great work!


Report Comment

𝕣𝕒𝕚𝕟𝕓𝕠𝕨

profile picture

Fantastic thank you so much for sharing for us to use! made my layout look much cleaner.


Report Comment

Cory

profile picture

Very nice profile!


Report Comment



Thanks!

by Francesco; ; Report

Katie

profile picture

Im not going to use it even though it's incredible I love your style of coding but I'm definitely stealing the note at the top


Report Comment



You Inspired me ;)

by Francesco; ; Report