Smoke Leather & Pine

Tags: nature, dark, black, smoke, green, masculine, leather, pine, classy, heytony
Description:

Hey guys! I'm back at it with another layout, inspired by a few of my favorite candle scents. Smoke Leather & Pine. I just really wanted to make this kind of masculine layout, and it came out so nice! (Features two imported google fonts). Remember i would LOVE to see it live on your page, (even if you mod it), so please Add Me! :D [Live Preview]
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by TonyTheTiger🐯 (https://layouts.spacehey.com/layout?id=2168) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Playfair+Display:wght@900&display=swap');
</style>
<style>
/*   Smoke Leather & Pine Layout
            by TonyTheTiger (spacehey.com/heytony) */
 
/*  to start off, this part bellow will control the base of your profile.
P.S. backround attachment is the one that makes your background either stay put
or scroll with you. use "fixed" or "scroll" for that part. */
    body {
        background-image: url(https://www.lawnstarter.com/blog/wp-content/uploads/2020/07/pine-needles-green-pexels.jpeg);
        background-color: rgb(20,20,20);
        background-repeat: repeat;
        background-attachment: fixed;
    }
    Main {
        Background-color: rgb(50,50,50);
        background-image: url('https://img2.pngio.com/leather-black-leatherblack01png-opengameartorg-seamless-black-texture-png-1024_1024.png');
        background-position:bottom center;
        background-repeat: repeat-y;
        background-size: contain;
        background-position: scroll;
    }
    nav a {
        font-family: 'Playfair Display', serif;
    }
    nav a:hover{
        color: grey!important;
        text-decoration: underline;
    }
    nav .top {
        background-color: rgb(0,0,0)!important;
    }
    nav .links {
        background: rgb(750,750,750);
        padding: 3.5px 16px 5.5px 16px;
    }
    nav .links a { 
        color: black!important;
        font-family: 'Playfair Display', serif!important;
        font-style: normal;
        font-size: 13px;
    }
    nav .links a:hover {
        color: rgb(48,107,100)!important;
        text-decoration: underline;
        font-style: oblique;
    }
    footer {
        background: rgb(0,0,0);
        color: white!important;
        margin: 0px;
    }
    body, div {
        font-family: 'Berkshire Swash', cursive;
        font-size: 14px;
        color: white;
        font-style: oblique;
        text-decoration: none;
    }
    
 
/*  bellow this you can change the left side of your profile,
including the intrerests details' table, but only the heading! */  
    
    .profile h1 {
        font-family: 'Playfair Display', serif!important;
        font-style: normal!important;
        font-size: 30px;
        color: rgb(48,107,100);
    }
    .supporter a {
        color:#306b64!important;
        
    }
    .supporter img {
        font-size:0;
        font-family: 'Playfair Display', serif!important;
    }
    .supporter:before {
        content: url('https://icons.iconarchive.com/icons/mkho/christmas/16/Ribbon-Green-icon.png')!important;
        
    }
    .online {
        color: rgb(48,107,100)!important;
        font-family: 'Playfair Display', serif!important;
    }
    .online img,
    .offline img {
        display: none;
    }
    .online:before {
        content: url('https://icons.iconarchive.com/icons/emey87/social-button/16/tree-icon.png');
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 2s;
    }
    .blog-preview {
        text-align: center;
        color: white!important;
    }
    .profile-pic img {
        border: inset #306b64;
        }
    .friends img {
        border: inset #306b64;
    }
    .mood {
        color: white;
        font-family: 'Playfair Display', serif!important;
    }
    
    .profile .url-info{
        background: rgba(48,107,100,0.4);
        border: none;
    }
    .profile .contact,
    .profile .table-section,
    .home-actions {
        background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
        background-size: 275%;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
        border: none;
        width: 100%;
        border: none;
        margin: 10px 0;
    }
    .url-info {
        text-align: center;
    }
    .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: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Users-Add-User-icon.png)
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
            /* Add to Favorites */
        content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Messaging-Star-icon.png)
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
            /* Send Message */
        content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Messaging-Message-icon.png)
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
            /* Forward to Friend */
        content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Arrows-Right-2-icon.png)
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
            /* Instant Message */
        content: url(https://icons.iconarchive.com/icons/icons8/windows-8/16/Messaging-Chat-icon.png)
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
            /* Block User */
        content: url(https://icons.iconarchive.com/icons/icons8/ios7/16/Very-Basic-Close-icon.png)
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
            /* Add to Group */
        content: url(https://icons.iconarchive.com/icons/icons8/windows-8/16/Users-Group-icon.png)
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
            /* Report Profile */
        content: url(https://icons.iconarchive.com/icons/iconsmind/outline/16/Flag-2-2-icon.png)
    }
    .profile .contact {
        background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
        background-size: 275%;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        border: none;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        background: rgb(48,107,100);
        font-family: 'Playfair Display', serif!important;
        font-style: normal!important;
        font-size: 16px;
        text-align: center;
        padding: 2px 7px;
    }
    .details-table td {
        background: rgba(0,0,0,0.4);
        vertical-align: top;
    }
    .details-table td:first-child {
        text-align: center;
        background: rgba(0,0,0,0.4);
        color: white!important;
        font-family: 'Playfair Display', serif;
        font-style: normal;
        font-weight: bold;
        width: 33%;
    }
    
/*  this is the part where you tweak the right side of your profile */  
    .blog-preview {
        border: inset #306b64;
        background: rgba(48,107,100,0.3);
    }
    .profile .blurbs {
        background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
        background-size: 175%;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
        border: none;
        margin: 20px 0px;
    }
    .profile .friends {
        background: rgba(48,107,100,0.3);
    }
    .profile .blurbs .heading {
        font-family: 'Playfair Display', serif!important;
        font-style: normal;
        font-size: 16px;
        background: rgb(48,107,100);
        text-align: center;
        color: white!important;
    }
    .profile .friends .heading {
        font-family: 'Playfair Display', serif!important;
        font-style: normal;
        font-size: 16px;
        background: rgb(48,107,100);
        text-align: center;
        color: white!important;
    }
    .profile .blurbs .section h4 {
        font-family: 'Playfair Display', serif!important;
        margin: 14px;
        color:  white;
        font-weight: bold;
    }
    .profile .friends .person p {
        color: white;
        font-family: 'Playfair Display', serif!important;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    .count {
        font-family: 'Playfair Display', serif!important;
        color: red;
    }
/*---change height of comments box here---*/
    .comments-table {
        display: block;
        height: 310px;
        overflow-y: auto;
    }
    .comments-table,
    .music-table{
        color: rgb(500,500,500);
        border: inset #306b64;
    }
    .comments-table td,
    .music-table td {
        background: rgba(50,50,50,.9);
        background-image: url('http://www.animationsoftware7.com/img/agifs/smoke02.gif');
        background-size: 350%;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        vertical-align: top;
        position: relative;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background: rgb(0,0,0);
        text-align: center;
        font-family: 'Playfair Display', serif!important;
        font-weight: bold;
        width: 38%;
    }
    
    
/*  this is the part you can change how the links look */ 
    
    a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
    a.man:link, a.man:active, a.man:visited, a.man:hover,
    a, a:link, a:active, a:visited, a:hover,
    a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
    a.text:link, a.text:active, a.text:visited, a.text:hover,
    a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
    a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
    a.redlink:hover {
        color: rgb(48,107,100);
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: white;
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
    }
 
 
/*  Hope these comments helped you out!
Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */
 
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
TonyTheTiger🐯
1614560893
I did a slight update to how the blogs section looks. I added ".blog-preview {border: inset #306b64; background: rgba(481,107,100,0.3)}"
Report Comment