Blue & Pink Christmas Trees Layout

Tags: layouts, layout, blue, pink, christmas trees, trees, christmas, pastel, cute, simple
Description:

Hello Everyone!
I hope you like this layout I created!
The profile layout is flipped to give the layout a different look! 😊
Please let me know in the comments if you decide to use this layout!
If you'd like to be super nice & credit me somewhere on your page, that would be much appreciated as well!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Jody Marie ♡ (https://layouts.spacehey.com/layout?id=85806) -->

<style>/* Cursor and Scrollbar */
	* {cursor: url('https://cur.cursors-4u.net/holidays/hol-5/hol426.gif'), auto;}
	
	 /* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {width: 18px;}

	*::-webkit-scrollbar-track {background: #fff;}

	*::-webkit-scrollbar-thumb {
    background-color: #84b6b3;
    border-radius: 10px;
    border: 3px solid #fff;
	}
</style>

<style>/* Profile Design Info */
    :root {
        --logo-blue: #84b6b3;
        --darker-blue: #84b6b3;
        --lighter-blue: #84b6b3;
	}

    .top {border-radius: 25px 25px 0 0;}

    main {
        letter-spacing: .2px !important;
        border-radius: 25px 25px 25px 25px !important;
	padding: 0px 0px;
        }

	* {font-family: Monospace;}

	body
        {background: url('https://images2.imgbox.com/95/1c/4FukSjFh_o.jpg');}
     
    .profile {
        background-color: #fff; 
        color: #000; 
        border-radius: 0 0 25px 25px !important;
font-size: 12px !important;
        }

    .container {
        border-radius: 25px;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
        width: 860px;
        }


    footer {
        border-radius: 15px;
        background: #84b6b3;
        color: #fff !important;
        display: block !important;
    }
	
	footer .links a{color: #fff !important; font-size: 9px !important;}
	
    footer .links a:hover{color: #000 !important; font-weight: bolder !important;}

footer .copyright a{color: #ffffff !important; font-size: 8px !important;}
	
	.profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
	
	a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
</style>

<style>/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;}
</style>

<style>/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: #84b6b3;
	font-weight: bold;
    background-color: white !important;
	}
</style>

<style>/* Navigation */
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        }

    nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        content: " • ";
        color: #000;
        font-size: 9px !important;
        }

    nav .links a{
        color: #84b6b3 !important;
        text-shadow: none !important;
        font-weight: bolder;
        }
    
    nav .links a:hover {
        color: #ebaab9 !important; 
        font-weight: bolder !important; 
        text-decoration: none;}
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 3.5px 3.5px;
	font-family: monospace !important;
        font-size: 4px !important;
        border: none;
        border-bottom: 3px ridge #84b6b3;
        background-color: #fff !important;
        }
</style>
    
<style>/* Links */
    .links {
	color: #84b6b3 !important;
	font-weight: normal !important;
	text-align: center !important;
	letter-spacing: .5px !important;
	margin-botto-9m: 0 !important;
	}

    .links a:hover {
	color: #ebaab9 !important;
	font-weight: normal !important;
	letter-spacing: .5px !important;
	}

    a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    	color: #ebaab9;
    	text-decoration: none;
	}
</style>

<style>/* Flip Profile */
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
.profile-info {display: none;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.contact {direction: ltr; text-align: center;}
.url-info{display: none;}
</style>

<style>/* Profile Name, Profile Picture, General Details, and Contact */
    @import url('https://fonts.cdnfonts.com/css/mountains-of-christmas');
    .profile .left h1 {
	font-family: 'Mountains of Christmas', cursive; 
	font-size: 50px !important; 
	font-weight: 700 !important;
	direction: ltr; 
	text-align: center; 
	color: #84b6b3; 
	text-shadow: 3px 1px 2px #ebaab9; 
	letter-spacing: 1px;
	}

    .profile h1 {
	margin: 0 0 5px 0;
	font-family: !important;
	font-size: !important;
	font-weight: !important;
	text-align: center !important;
	padding-bottom: 5.5px !important;
	padding-top: 5.5px !important;
	}

    .general-about {
    	padding: 10px 10px 0 10px !important;
    	text-align: center !important;
    	position: relative;
    	margin-top: 5px;
    	margin-bottom: 0;
	}

    .general-about .profile-pic img {
    	max-width: 160px;
    	max-height: 160px;
	}

    .general-about .profile-pic {
    	display: block;
   	float: left;
    	margin: 0 15px 8px 0;
    	height: 160px;
	}

    .general-about .profile-pic img {
    	border-width: 10px; 
    	border-style: solid; 
    	border-image: linear-gradient(45deg, rgb(132,182,179), rgb(235,170,185)) 1; 
    	}

    .profile-pic {
    	width: 100% !important;
    	border-radius: 100px;
    	overflow: hidden;
	}

    .online {visibility: hidden;} 
    .online img { 
        content: url("https://ct.pimp-my-profile.com/online/26.gif"); 
        animation-name: none; 
        visibility: visible; 
        height: 15px; 
        width: 70px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

    .mood {
    	text-align: center !important;
    	margin-top: 0 !important;
    	margin-bottom: 10px !important;
    	padding-top: 5px !important;
    	padding-bottom: 5px !important;
    	}

    .profile .contact {border: none;}
</style>

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

<style>/* Headers Colors */
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: #84b6b3 !important;
        color: #fff !important;
        text-align: center;
        border-bottom: 2px solid white;
        border-radius: 10px 10px 10px 10px;
    }
	
	.profile .blurbs .section h4{color: #84b6b3; font-weight: 800;}
</style>

<style>/* Interests Table Info */
    table.details-table {border-collapse: collapse;}
    table.details-table td {background-color: #fff !important;}
.details-table td:first-child {color: #84b6b3 !important; font-weight: 800;}
</style>

<style>/* Blog Info */
.blog-preview h4 {color: #000;}

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #000;
font-weight: bolder;
    }
	
    .blog-preview p a{color: #84b6b3 !important;}
	
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: #ebaab9 !important;
    }
</style>
    
<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
.profile .friends{text-align: center;}
    .count {color: #84b6b3; font-size: 12px;}
    .profile .friends .person p{color: #84b6b3 !important; font-size: 10px;}
.profile .friends .person p a: hover {color: #ebaab9 !important;}
	.profile .friends .person img {border-radius: 500px;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px rgba(235,170,185, 0.71);
        border: 2px solid rgba(255,255,255, 1);
    }
    
    .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {transition: 0.5s ease}
</style>

<style>/* Comments Info */
.profile .friends p {font-size: 11px;}

    table.comments-table td {
        background-color: #fff !important;
        border: none;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
	
	.comments-table{
        display: block;
        height: 450px;
        overflow-y: scroll;
        border: none;
    }
</style>

<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "☆ Contact Me ☆"; font-size:1rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "☆ What I Like ☆"; font-size:1rem; font-weight: bolder; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "☆ Follow Me ☆"; font-size:1rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "☆ My Blogs ☆"; font-size:1rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "☆ My Life ☆"; font-size:1rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "☆ The Friends ☆"; font-size:1rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "☆ Leave Me A Comment ☆"; font-size:1rem; font-weight: bolder;}
</style>

<a href="https://layouts.spacehey.com/jodymarie09" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; background-color: #000; width: 125px; height: 16px;">Jody Marie Layouts</div></a>

About me text goes here.
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 )
MsRita Vuelban
1701215069
The background is not showing, am I doing something wrong? I pasted it on the about me section.
Report Comment
Hmm.. that's odd. I just tested it to check & it worked for me.
I'm not sure why it isn't working 🫤
by Jody Marie ♡; 1701219927; Report