View Francesco's Blog
View Francesco's Profile
Report Blog Entry
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-color: transparent;
}
/* 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-color: transparent;
color: #000;
}
a,
.profile .friends#comments a{
color: #000!important;
text-decoration: none!important;
transition: 0.4s;
}
a:hover,
.profile .friends#comments a:hover{
color: transparent!important;
text-shadow: 0 0 5px rgba(0,0,0,0.5)!important;
}
.profile a{
color: #c00;
text-decoration: none;
font-weight: bold;
}
.profile a:hover{
color: transparent!important;
text-shadow: 0 0 5px rgba(204,0,0,0.5)!important;
}
/* COLORS END */
*{
font-family: 'Fraunces', serif;
font-size: 1.02em;
}
.profile .friends .person a p{
display: none;
}
/* IMAGES BEGIN */
body {
background-image: url(https://www.francescomarchesin.com/assets/images/cover_def.jpg) !important;
background-size: cover;
background-attachment: fixed;
}
/* #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){
width: 200px;
height: 200px;
overflow: hidden;
display: block;
margin: 0 auto;
}
.profile .friends .friends-grid .person a:nth-child(2),
.profile .friends .comments-table tr td a:nth-child(2){
width: 100px;
height: 100px;
}
.profile .general-about .profile-pic img,
.profile .friends .friends-grid .person a:nth-child(2) img,
.profile .friends .comments-table tr td a:nth-child(2) img{
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
transition: 0.4s;
}
.profile .general-about .profile-pic img:hover,
.profile .friends .friends-grid .person a:nth-child(2) img:hover,
.profile .friends .comments-table tr td a:nth-child(2) img:hover{
clip-path: polygon(0 0, 33% 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 33% 100%, 0% 100%);
}
/* IMAGES END */
/* SEARCH BAR BEGIN */
.container nav .top .center form{
position: relative;
max-width: 300px;
text-align: left;
margin: auto;
}
.container nav .top .center form label{
display: block;
}
.container nav .top .center form input{
background-color: transparent;
border: none;
outline: none;
border-bottom: 2px solid #000;
}
.container nav .top .center form input{
background-color: transparent;
border: none;
outline: none;
border-bottom: 2px solid #000;
}
/* SEARCH BAR END */
/* PROFILE CONTACTS BEGIN */
.profile .contact{
border: none;
}
.profile .contact .heading{
display: none;
}
.profile .contact .inner{
padding: 15px 0;
}
.profile .contact .inner .f-row,
.profile .contact .inner .f-row .f-col{
width: auto;
float: left;
margin: 0;
}
.profile .contact .inner .f-row .f-col{
margin-right: 10px;
}
.profile .contact .inner .f-row .f-col a,
.profile .contact .inner .f-row .f-col a img{
display: block;
font-size: 0;
white-space: nowrap;
overflow: hidden;
width: 20px;
height: 20px;
}
/* PROFILE CONTACTS END */
/* PROFILE URL BEGIN */
.profile .url-info{
border: none;
margin: 0;
padding: 15px 0;
}
/* PROFILE URL END */
/* PROFILE INTERESTS BEGIN */
.profile .table-section{
border: none;
margin: 0;
padding: 15px 0;
}
.profile .table-section .heading{
display: none;
}
.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{
border: none;
border-collapse: collapse;
display: block;
width: 100%;
}
.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{
display: block;
width: auto;
float: left;
margin: 0;
}
.profile .left .table-section:nth-of-type(6) .inner .details-table tbody tr td:nth-child(2){
display: none;
}
.profile .left .table-section:nth-of-type(6) .inner a,
.profile .left .table-section:nth-of-type(6) .inner a img{
display: block;
font-size: 0;
white-space: nowrap;
overflow: hidden;
width: 20px;
height: 20px;
}
/* PROFILE INTERESTS END */
/* PROFILE BLOG PREVIEW BEGIN */
.profile .blog-preview .heading{
display: none;
}
/* PROFILE BLOG PREVIEW END */
/* PROFILE BLURBS BEGIN */
.profile .blurbs{
margin: 0;
}
.profile .blurbs .heading{
display: none;
}
.profile .blurbs .inner{
padding: 15px 0;
}
.profile .blurbs .inner .section h4{
margin-top: 5px;
margin-bottom: 10px;
}
/* PROFILE BLURBS END */
/* PROFILE FRIENDS BEGIN */
.profile .friends .heading{
display: none;
}
.profile .friends .inner{
padding: 15px 0;
}
.profile .friends .inner > p{
margin-bottom: 15px;
}
.profile .friends .inner .section h4{
margin-top: 5px;
margin-bottom: 10px;
}
/* PROFILE FRIENDS END */
/* PROFILE COMMENTS BEGIN */
.profile .friends#comments .inner{
overflow-y: scroll;
max-height: 400px;
}
.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{
border: none;
border-collapse: collapse;
}
.profile .friends#comments .inner .comments-table tbody tr td{
padding-bottom: 15px;
}
.profile .friends#comments .inner .comments-table tbody tr td > a:first-child{
display: none;
}
.profile .friends#comments .inner .comments-table tbody tr td:first-child{
width: auto;
padding-right: 15px;
}
.profile .friends#comments .inner .report a,
.profile .friends#comments .inner .report a img{
display: block;
font-size: 0;
white-space: nowrap;
overflow: hidden;
width: 20px;
height: 20px;
}
/* PROFILE COMMENTS END */
/* MISCELLANEOUS BEGIN */
button{
border: none;
outline: none;
background-color: transparent;
color: #000;
padding: 5px 15px;
cursor: pointer;
}
/* MISCELLANEOUS END */
/* ANIMATIONS BEGIN */
body{
animation-name: backgroundColor;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes backgroundColor {
from {background-color: #2a2a2a;}
to {background-color: #333;}
}
/* ANIMATIONS END */
Comments
Displaying 5 of 5 comments ( View all | Add Comment )
Christopher Lee
Hey thanks for letting us use this layout.
🌹Bunny🌹
Thank you! Great work!
𝕣𝕒𝕚𝕟𝕓𝕠𝕨
Fantastic thank you so much for sharing for us to use! made my layout look much cleaner.
Cory
Very nice profile!
Thanks!
by Francesco; ; Report
Katie
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
You Inspired me ;)
by Francesco; ; Report