💔GLOOMY BEARS LAYOUT💔

Tags: gloomy bear;cute and creepy;edgy
Description:

Hello!! I just finished up a gloomy bear layout!! Feel free to use it
(screenshot taken in https://nein-mc.neocities.org/csstest/index.html )
Preview:

click on the image for a larger preview
Code:

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

<style>
:root{
  --headers: black;
  --background_image: url("https://i.ibb.co/G9yPcWF/1126699b1zlvis2kn.gif");
   
  --mynamesize: 27px;

  --transparency: 0.9;

  --curve: 30px;

  --simple_bg:#EEC1FF;
}


h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
h1{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
color: BLACK; !important;
} /* color of username */
.count, .friends a p{color: var(--names); !important;} /* color of names, and friends counter */

.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

:root{  --box_color_and_seethru: rgba(255, 242, 254, var(--transparency));}  

h1, h2, h3, h4, h5, a, nav label{ 
font-family: var(--font-family) !important;
 text-transform:uppercase !important;
}

.section,p,a{
font-family: var(--font-family) !important;
}

h1, h2, h3, h4, h5, p {padding-left:5px !important;}

h1{ 
 font-size: var(--mynamesize) !important;
 text-transform:uppercase !important;
 padding-middle:12px !important;
}

body {
background-image: var(--background_image) !important;

}   

.heading, .url-info, .blurbs, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
}


.details{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 10px !important;
border: var(--borders) !important;
height: 175px;
}

.profile-pic img{
/* the face rotation is funny, but let's comment it away for default */
/* transform: rotate(90deg) !important;  */
outline:none !important;
border-radius: var(--curve) !important;
}

.friends-grid img{
outline:none !important;filter: opacity(90%) !important;
width:60% !important; height:30% !important;
border-radius: var(--curve) !important;
filter:hue-rotate(var(--hue)) !important;


}

.inner img{
outline:none !important;
border-radius: var(--curve) !important;
}

iframe{border-radius: 60px !important;opacity: 0.66 !important;}

.url-info{display:none !important;}

main{border-radius: var(--curve) !important;}

main{background-color:rgba(250, 41, 64, 0.0); !important;}

.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img

.icon{border: NONE !important;}
.mood{margin-bottom:12px !important;}
.blurbs{margin-top:12px !important;}
.friends{margin-top:-12px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:9px !important;}
#comments{margin-top:40px !important;padding-bottom:40px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);
}

</style>


<style>
/* Hides the default image */
.online img,
.offline img {
  display: none;
}
.online::before {
  content: "🔪";
}
.offline::before {
  content: "💀";
}

.online
{
  color: purple!important; 
}
</style>

<style>

 




body { --darker-blue: black;
        --lighter-blue: #A01D2B;
        --even-lighter-blue: #FFE3F5;
        --lightest-blue: #FFE3F5;
        --dark-orange: #A01D2B;
        --light-orange: #A01D2B;
        --even-lighter-orange: #FE4054;
        --green: black;
--logo-blue:#FE4054 ; }
</style>

<style>

  a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link  { 
  color: #F40D26;
}

nav .links a:hover, a:hover
{
    font-size: 1.10em;
}

</style>


<img src="https://i.ibb.co/z6VsDS0/538046cev4ve3gzd.png" width="300" height="55"/>


<style>
.comments-table{
display: block;
height: 380px;
overflow-y: scroll;
Border-radius: 15px; }

⏬   ⏫
⏬   ⏫
⏬   ⏫
⏬   ⏫
</style>

<div class="snowflakes">
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
  <div class="snowflake">
  💀
  </div>
 
  <div class="snowflake">
    💀
  </div>
  <div class="snowflake">
    💀
  </div>
 
</div>
<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 4px 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>
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 2 of 2 comments ( View all | Add Comment )
Pizza .ᐟ
1723458581
using !
Report Comment
Jinx ♪
1723300881
Using!
Report Comment