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

alé	1733139055 using! Report Comment
可可 Cocoa	1733098541 Using!!! Report Comment
Actias	1733047492 Using Report Comment
fern ⛧	1732860858 itas broken Report Comment
Octagonwa !!	1732843199 using!! Report Comment
Octagonwa !!	1732843199 using!! Report Comment
pic457	1732808289 using Report Comment
kristina	1732768222 using Report Comment
Venustria	1732741405 Using! Report Comment
Lia ᐢᗜᐢ	1732335875 using! Report Comment
Aven	1732328796 USING<3 Report Comment
esme	1732312809 UZING!!!!!! Report Comment
Jinx #1 fan ˃ᴗ˂	1732299624 using Report Comment
Kitsumi	1732221170 真在用！ Report Comment
r3yy	1732208332 using!! thank youu :33 Report Comment
σɓεɾσɳ꩜.ᐟ.	1732032918 Using!. Report Comment
Weird0!! (0_o)	1731792360 USINGG Report Comment
Weird0!! (0_o)	1731792354 USINGG Report Comment
blue cat	1731622174 using Report Comment
evantheoven	1731586406 USING Report Comment