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 Madoque (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 343 comments ( View all | Add Comment )

river ♫	1778646589 usingusing Report Comment
𖥻 ׁ ׅ starrie // starstar ! ׁ ׅ 🪷	1776590328 using!! Report Comment
Xevs	1774057866 using!! Report Comment
lloyd	1773821676 Using Report Comment
Racoo_+	1773460143 using! Report Comment
Chudy	1773456669 using Report Comment
LeyLey	1773436244 Using Report Comment
seallot	1773344839 usingg Report Comment
fishonline	1772484677 Usingg Report Comment
Kay	1771529476 Usando!! Report Comment
dami	1770692693 using, thx!! :3 Report Comment
⋆˚꩜SUNNY.ᐟ.ᐟ	1770150669 using!!! Report Comment
Sallome_alone	1769368401 using Report Comment
val / sasha	1768956518 using meow Report Comment
Reki 🎋	1768201441 Using Report Comment
Reki 🎋	1768201440 Using Report Comment
˖°𖤐Yui𝜗𝜚˖°	1768026935 usadooo!!! Report Comment
aidsknight77	1767997761 using !! Report Comment
Matik🫐	1767952560 Использую🫂 Report Comment
yume.luv3	1767938223 Using! Report Comment