blue soft layout

Tags: soft, blue, soft blue, blue soft, animations, animation, scroll

Description:

a nice soft blue layout saving because I liked it

Preview:

click on the image for a larger preview

Code:

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

<div class="snowflakes">
  <div class="snowflake">
   <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
  <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
  <div class="snowflake">
  <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
  <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
  <div class="snowflake">
  <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
  <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
  <div class="snowflake">
     <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/vgDCiBm.png"/>
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/khlBR9Z.png"/>
  </div>
</div>
<style>
/* customizable snowflake styling */
.snowflake {
  color: #27cff5;
  font-size: 2em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 0px rgba(0,0,0,0.7);
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<style>
img {
filter: sepia(100%) hue-rotate(179deg) saturate(1.19);
}
</style>
<style>
    body{
        background-color: #E2EDFF;
}
#comments.friends {
height: 35px;
overflow-y: hidden;
transition: all 0.3s ease;
}

#comments.friends:hover {
height: 200px;
overflow-y: auto;
transition: all 0.3s ease;
}

.details-table p {
    font-size: 10px;
}

.mood {
    margin: 10px auto 10px auto;
}

.contact img {
    filter: saturate(0%)!important;
}

.table-section {
    height: 200px;
    overflow-y: hidden;
    transition: all 0.3s ease!important;
    border: none!important;
}

.table-section:nth-of-type(odd):hover {
    height: 200px;
    overflow-y: auto;
    transition: all 0.3s ease!important;
}</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body{font-family: 'Fredoka One';
font-size: 16px;
</style>

<style>

   a:hover {
     color: black; 
   } 
   a{
     color: black; 
   }
    
    .profile h1{
        	color: white;
	font-size: 30px;
	-webkit-text-stroke: 1px black;
	text-align: center;
    }

.details > * {
    margin-top: 15px;
}

.details-table {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
}

.details-table td:first-child {
    background: #ACCAFB;
    background-size: 4px 4px;
    width: 65px;
}
.details-table td:first-child p {
    -webkit-background-clip: text;
    color: black;
    font-size: 10px;
}


.details-table td {
   background: #ACCAFB;
}
nav  {
   background-color: #ACCAFB;
 border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
   color: black;
}

.comments-table {
    background: #ffffff80;
    height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
    margin-top: 10px;
}

.details p, .mood p, .mood a, .blurbs p, .table-section .inner p {
    font-size: 10px;
}
main{ 
background-color: white;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
margin: 1em 0;
}
</style>
<style>
.online{content:url("https://noviecita.crd.co/assets/images/gallery09/5aa1c8f9_original.png?v=b654ba2f");
}

</style>
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:#ACCAFB;
    }
</style>
<style>
 .profile .contact .heading,
 .profile .table-section .heading {
     background-color:#ACCAFB;
 }
</style>
<style>
 .profile .contact,
 .profile .table-section {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
</style>
<style>
    nav .links {
        background-color:#ACCAFB;
    }
</style>
<style>
    .profile .blurbs .heading h4 {
        color:#ACCAFB;
    }
</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "⋆˚｡⋆୨♡୧⋆｡˚⋆"; font-size:.8rem; font-weight:bold; color:black; }
}
</style>
<style>
/* CUSTOMIZE BASIC SETTINGS */
:root {
    --logo-blue: transparent; /* CHANGE COLOR OF SPACEHEY BAR AT TOP */
    --darker-blue: black; /* CHANGE COLOR OF PROFILE LINKS */
    --lighter-blue: teal; /* CHANGE COLOR OF NAVIGATION BAR */
    --even-lighter-blue: #ACCAFB;
    --lightest-blue: #ACCAFB;
    --dark-orange: black; /* CHANGE FONT COLOR OF ABOUT ME, WHO I’D LIKE TO MEET */
    --light-orange: #ACCAFB); /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: #ACCAFB; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --green: #38d;
}

/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: black;
}
/* HIDE PROFILE URL */
.profile .url-info {
    display: none;
}
</style>
<style>
    div .blog-preview {
           height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
    }
</style>
<style>
    .comments-table td {
        border-color: transparent;
    }
</style>
<style>
    .comments-table td:first-child {
        background:url();
}

.profile .profile-info{
height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
color: black;
background-repeat: no-repeat;
background-size: cover;
}
.profile .contact .heading,
.profile .table-section .heading{
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;

color: white;
   
text-align: center;
font-size: 15px;
margin: 10px
}
.profile .table-section,
.profile .contact,
.profile .url-info{
text-align: left;
font-size: 10px
}
.profile .blurbs .heading,
.profile .friends .heading{
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
font-size: 15px;
}

.profile .blurbs,
.profile .friends{
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;;
}
</style>
  <style>
        .container{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}


 main{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;}
}
</style>
<div style="float:  ; max-height: 60px; position: fixed; left: 1px; bottom: 9px; z-index: 200px;"><img src="https://hauntedmansion.crd.co/assets/images/gallery06/d58137f8_original.gif?v=a667f7c4" width="200px" height="200px"/>
</div>

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 20 of 311 comments ( View all | Add Comment )

burningheartsinc	1751898645 using! Report Comment
Tenshi!	1751830769 using! Report Comment
applepi!!	1751761416 using Report Comment
ᴡᴏʀᴍʙᴏʀᴅ٩(๑´0`๑)۶	1751598364 ᴜsɪɴɢ ₍ᐢ..ᐢ₎♡ Report Comment
boametal˖ ݁♬⋆.˚𝄞.	1751086868 using!!!! Report Comment
꩜ Banana ꩜	1750911732 Using!! Report Comment
Crystal ༣	1750400442 usinggg!! Report Comment
1BPXOZO_	1750398427 using!! Report Comment
Shokasu	1750192059 Usingg ;o Report Comment
sillyjest3r	1749975231 using Report Comment
D3L1	1749852124 Using Report Comment
Tomohiro Uta ࣪𖤐	1749367158 Using Report Comment
cordis	1749164028 usin Report Comment
Kanekii	1748869060 usingg Report Comment
dihaoine	1748387557 using! Report Comment
C13lsyyy_!!	1748195643 usingg Report Comment
olibar	1747933597 using - the images wont work for me tho does anyone know how to fix it (◞ ‸ ◟ㆀ) Report Comment
gitawase	1747869977 usinnggg Report Comment
maxie♱	1747767498 usando Report Comment
HALLZIR, MECH EATER	1747237182 using!! Report Comment