Christmas Layout - Fireplace!

Tags: christmas, fireplace, santa, santaclaus, jinglebells, christmastree, snow, holiday, giftgiving, holidaycheer

Description:

Dive into the enchanting holiday atmosphere with my SpaceHey layout featuring a splendid Christmas tree standing proudly before a crackling fireplace. The tree is adorned with twinkling lights, vibrant ornaments, and delicate tinsel, casting a warm glow across the room. The rustic fireplace, adorned with festive stockings, exudes cozy warmth, inviting you to embrace the spirit of the season. Glimmering lights dance on the tree's branches, creating a mesmerizing spectacle. Gift-wrapped boxes with festive bows are scattered around, hinting at the joy of exchanging presents. This layout is a festive gift ready to be unwrapped by my SpaceHey friends, filling your online space with the timeless magic of Christmas. 🎄🎁☃️🌟🔔🧦

Preview:

click on the image for a larger preview

Code:

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

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

<div class="snowflake">🎄</div>
<div class="snowflake">🎁</div>
<div class="snowflake">☃️</div>
<div class="snowflake">🌟</div>
<div class="snowflake">🔔</div>
<div class="snowflake">🧦</div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/E8gmARGvPlI//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
 * {
cursor: url('https://i.ibb.co/hYVKqDM/Christmas-Tree.png'), auto;
}
body {
      margin: 0;
      overflow-y: scroll;
    }

    .snowflake {
      position: absolute;
      width: 20px;
      height: 20px;
      opacity: 0.8;
      pointer-events: none;
      animation: fall linear infinite;
      z-index: 999;
    }

    .snowflake img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @keyframes fall {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100vh);
      }
    }

    .snowflake:nth-child(1) {
      left: 5%;
      animation-duration: 5s;
    }

    .snowflake:nth-child(2) {
      left: 15%;
      animation-duration: 8s;
    }

    .snowflake:nth-child(3) {
      left: 25%;
      animation-duration: 7s;
    }

    .snowflake:nth-child(4) {
      left: 35%;
      animation-duration: 6s;
    }

    .snowflake:nth-child(5) {
      left: 45%;
      animation-duration: 4s;
    }

    .snowflake:nth-child(6) {
      left: 55%;
      animation-duration: 6s;
    }

    .snowflake:nth-child(7) {
      left: 65%;
      animation-duration: 5s;
    }

    .snowflake:nth-child(8) {
      left: 75%;
      animation-duration: 7s;
    }

    .snowflake:nth-child(9) {
      left: 85%;
      animation-duration: 8s;
    }

    .snowflake:nth-child(10) {
      left: 95%;
      animation-duration: 4s;
    }

main{
  background-color: #2d170a !important;
  opacity: 0.85 !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
nav .top {
  background: #874c23 !important;
  opacity: 0.85 !important;
      border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
nav .links {
background: #aa6233 !important;
  padding: 5px 0px;
    text-align: center;
      opacity: 0.85 !important;
}
nav .links a:hover {
  color: #fffa00 !important;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: transparent !important;
}
.search-wrapper input {
border-radius: 20px;
    background: #3f494b;
  color: #fff;
}

nav .top .center button[type="submit"] {
  background-color: #874c23 !important;
    border: 1px solid white !important;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    padding: 0px 10px;
}
.heading {
    background: #874c23 !important;
    border-radius: 10px;
    border: none;
    text-align: center;
  font-size: 14px;
  color: #fff !important;
}
.heading:before {
content: "🎁"
}
.heading:after {
content: "🎁"
}
.profile .url-info {
    border: none;
    background: #6a100b !important;
    border-radius: 10px;
  text-align: center;
}
.contact, .table-section {
border: none !important;
}
.snowflake {
font-size: 30px;
}
.person a p {
  visibility: hidden;
}
.person a img {
  border: 3px solid #874c23;
  border-radius: 10px;
}
.profile-pic {
  position: relative;
  display: inline-block;
}
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat;
  background-size: cover;
  display: block;
  width: 100px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -43px;
  left: -32px;
}
.profile h1 {
text-align: center;
    font-size: 30px;
}
.profile-pic img {
border-radius: 20px;
}
.friends-grid .person a:nth-child(2) {
position:relative;
}
.friends-grid .person a:nth-child(2)::before {
content: "";
    position: absolute;
    top: -30%;
    left: 45%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    rotate: 23deg;
  background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat center center / contain; /* Set the background to the Santa hat image */
  z-index: 0; /* Place the hat above the image */
}
span[itemprop='name'] > h1::before {
content: "🔔"
}
span[itemprop='name'] > h1::after {
content: "🔔"
}
.friends .inner {
margin-top: 20px;
}
.friends .inner > p {
display: none;
}
td {
 border: none;
}
.comments-table {
  border: none;
}
.comments-table tbody tr td:nth-child(1) {
background: none !important;
}
.comments-table tbody tr td:nth-child(2) {
background: none !important;
}
.comment-replies {
background: #874c23;
border: 5px solid #b67546 !important;
  border-radius: 20px;
}
.comments-table tbody tr td:first-child {
  padding-top: 20px;
}
.comments-table tbody tr td:last-child {
  padding-top: 20px;
}
.comments-table tbody tr td a:nth-child(1) p{
visibility: hidden;
}

.comments-table tbody tr td a:nth-child(2) {
position: relative;
display: block;
}
.comments-table tbody tr td a:nth-child(2)::before {
content: "";
    position: absolute;
    top: -15%;
    left: 45%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    rotate: 23deg;
  background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat center center / contain; /* Set the background to the Santa hat image */
  z-index: 0; /* Place the hat above the image */
}
.comments-table tbody tr td a:nth-child(2) img 
{
border: 3px solid #874c23;
    border-radius: 10px;
}
.comments-table button {
  position: relative;
  display: inline-block;
  background-color: #874c23;
  color: white;
  padding: 4px 10px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
div#comments .inner {
margin-top: 0;
}
.profile-info {
border: 2px solid #9e7966 !important;
border-radius: 20px;
}
.pagination .next button {
position: relative;
    display: inline-block;
    background-color: #ba794a;
    color: white;
    padding: 4px 10px;
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}
footer {
  background-color: #b57139 !important;
  opacity: 0.85 !important;
  border-radius: 10px;
  color: #3e4347;
}
  .section h4, .details-table td:first-child {
    color: #fffa00 !important;
}
div#comments .inner > p {
    display: block !important;
/*margin-bottom: 40px !important;*/
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Mountains+of+Christmas:wght@700&family=Roboto&display=swap');

  /*PASTE SCROLLBAR CODE HERE*/

body{
background-image: url('https://i.ibb.co/4YfbkXH/4uGpdBN.jpg');
background-position:undefined;
background-attachment: fixed;
background-size: cover;
background-color: #ffffff;
}

main{
background-color: #682c2c;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: #c14444;
}

span[itemprop='name'] {
color: #ffffff;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;
}

h4 {
color: #ffffff;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;
}

.section h4, .details-table td:first-child {
color: #ffffff!important;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;
}

a, .count {
color: #00ffbf;
font-family: 'Inter', sans-serif;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;Sans-Serif;
}

a:hover {
color: #ffff00;
font-family: 'Inter', sans-serif;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;Sans-Serif;
}

body,main {
color: #ffffff;
font-family: 'Inter', sans-serif;
font-family: 'Mountains of Christmas', serif;
font-family: 'Roboto', sans-serif;Sans-Serif;
}

.details-table td, .details-table td:first-child{
background: none!important;
}

 .logout-btn, .logout-form > button {
background: none !important;
}
  .section h4, .details-table td:first-child {
    color: #fffa00 !important;
}
</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 0 of 0 comments ( View all | Add Comment )