Christmas Layout - Santa Vibes!

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

Description:

Transform your SpaceHey page into a winter wonderland with my enchanting Christmas layout! 🎄✨ Immerse your friends and visitors in the holiday spirit with a festive blend of vibrant colors, twinkling lights, and joyful decorations. The cheerful background sets the perfect tone for the season, creating a warm and inviting atmosphere that captures the magic of Christmas. From snowflakes gently falling to adorable Santa Hat and reindeer accents, every detail is crafted to make your profile radiate holiday charm. Share the joy of the season with this merry layout, spreading smiles and festive vibes to everyone who stops by your SpaceHey page. 'Tis the season to be jolly, and your profile is ready to shine with Christmas cheer! 🎅🎁 #ChristmasMagic #FestiveProfile #HolidayVibes

Preview:

click on the image for a larger preview

Code:

<!-- (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/G6Lp0i_I34w//?&;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: #3c4248 !important;
  opacity: 0.85 !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
nav .top {
  background: #ad4240 !important;
  opacity: 0.85 !important;
      border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
nav .links {
background: #505e5b !important;
  padding: 5px 0px;
    text-align: center;
      opacity: 0.85 !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: #ad4240 !important;
    border: 1px solid white !important;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    padding: 0px 10px;
}
.heading {
    background: #ad4240 !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: #9e7966 !important;
    border-radius: 10px;
  text-align: center;
}
.contact, .table-section {
border: none !important;
}
.snowflake {
font-size: 30px;
}
.person a img {
  border: 3px solid #ad4240;
  border-radius: 10px;
}
.profile-pic {
  position: relative;
  display: inline-block;
}
.profile-pic::before {
      content: "";
    position: absolute;
    top: -130%;
    left: 10%;
    transform: translateX(-50%);
    width: 100px;
    height: 400px;
  background: url('https://i.ibb.co/TH6TFrx/Pngtree-red-long-haired-christmas-hat-headwear-5671491.png') no-repeat center center / contain; /* Set the background to the Santa hat image */
  z-index: 2; /* Place the hat above the image */
}
.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: -60%;
    left: 45%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  background: url('https://i.ibb.co/TH6TFrx/Pngtree-red-long-haired-christmas-hat-headwear-5671491.png') 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: #ad4240;
  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) {
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: -60%;
    left: 45%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  background: url('https://i.ibb.co/TH6TFrx/Pngtree-red-long-haired-christmas-hat-headwear-5671491.png') 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 #ad4240;
    border-radius: 10px;
}
.comments-table button {
  position: relative;
  display: inline-block;
  background-color: #ad4240;
  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: #76877d;
    color: white;
    padding: 4px 10px;
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}
footer {
  background-color: #fcf6f4 !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/rZR96wv/dreamup-creation-by-shutterclaps-dgg3jdd-pre.jpg');
background-position:undefined;
background-attachment: fixed;
background-size: auto;
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 )