Cute clouds and stars

Tags: clouds, blue, pastel, stars, cute, cloud

Description:

Another layout! these r fun to make. .general-about .details:before { content: "They/Them"; font-family: hug-me-tight; font-size: 11.5px; color: #9ec3f0; Change the pronouns from the They/Them (between the quotations) to your preferred pronouns!

Preview:

click on the image for a larger preview

Code:

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

<style>
html:before {
  animation: grain 60s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/b0/4d/3a/b04d3a0946bbe86a2722ce7fc2f4f472.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 200%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

.general-about .details:before {
content: "They/Them";
font-family: hug-me-tight;
font-size: 11.5px;
color: #9ec3f0;

}
<style>
<p><img src="https://pixel.crd.co/assets/images/gallery05/50f1cb4a.gif?v=c07c1b49" width="200"/>

  @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
p{font-family: 'Indie Flower', cursive;
color: white;
}
h1,h2,h3,h4,h5{
  font-family: 'Indie Flower', cursive;
  font-size: 20px;  
  color: white;
}
  body {
   background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPWQPp2_hOH9bkk87RYBQo-UK0Zq0c-i7nNQ&usqp=CAU);

}
.profile {
   background-color: rgb(78, 122, 191) ;
}
.icon {
content: url(https://cdn.discordapp.com/attachments/1027694230346416131/1122159662637252638/Untitled246_20230624084144.png);
display: inline-block;
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.3em;
color: rgba(0,0,0,0);

}
main {
    background: transparent;
    color: blue;
    padding: 6px 0px;
    font-size: 80%;
   background:#8bace0;
   backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius:25px;
    padding:25px;
    color:#e3edfc;
}

.profile .friends{
text-align: center;
}

.profile .friends-grid .person p{
color: white;
}

.profile .blurbs .section h4{
color: white;
padding: .5em;
}

.profile .comments-table{
background-color: #9ec3f0;
border-radius: 20px;
border: 2px solid #9ec3f0;
box-shadow: inset 2px 3px 5px #9ec3f0;
font-style: italic;
color: white;
}

.profile .comments-table td{
background-color: transparent;
}

.profile .comments-table .comment-replies{
background-color: ;#e3edfc
border-radius: 20px;
border: 2px solid #4178ba;
box-shadow: inset 2px 3px 5px ;
font-style: italic;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}

footer {
    border-radius: 15px;
    background-image: url(https://cdn.discordapp.com/attachments/1027694230346416131/1122098918063357982/Z.png);
    color: white;
}

table.comments-table td {
    color: rgb(204, 129, 155);
}

:root {
    --logo-blue: ;
    --darker-blue: white;
    --lighter-blue: #9ec3f0;
    --even-lighter-blue:;
    --lightest-blue: ;
    --dark-orange: white;
    --light-orange: #9ec3f0;
    --even-lighter-orange: ;
    --green: white;
 }

*{cursor: url(https://cdn.discordapp.com/attachments/1027694230346416131/1122159662637252638/Untitled246_20230624084144.png), auto !important;}

}
.profile a {
	transition: all .1s!important;
}
.profile a:hover, .profile a:hover p {
	background: var(--pdg_linkTexture)!important;
	;
	color: white!important;
	text-shadow: 1px 1px 0 #9ec3f0!important;
	;
}
.profile .section p, .details-table td:last-child p{
	background-color:#9ec3f0;
	padding:.5em;
}
.profile .left h1 {
	text-transform: uppercase;
	font-size: 30px;
	color: white;
	text-shadow: 3px 3px 0 #9ec3f0;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading {
	background-image: var(--pdg_titleTexture)!important;
	background-size: cover;
	background-position: bottom;
	color: white;
	-webkit-text-stroke: 1px ;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--pdg_urlInfoBox);
	background-position: center;
	text-align: center;
	padding:6em 0;
}
.details-table tr {
	border-bottom: 1px solid ;
}
.profile .blurbs .section h4 {
	color: white;
	font-size: 1.3rem;
}
.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: white;
	padding:6em 0;
}
.profile-info h3 a {
	color: #FFF;
}
nav .top{
background-color: #a1c6d1;
border-radius: 20px;
border: 2px solid #a1c6d1;
box-shadow: inset 2px 3px 5px #a1c6d1;
margin: 1em 0;
nav .links{
background-color: #a1c6d1;
border-radius: 20px;
border: 2px solid #a1c6d1;
box-shadow: inset 2px 3px 5px #a1c6d1;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}
.profile .friends{
text-align: center;
}

.profile .friends .heading:before {
    content: "cuties";
    font-size: .9rem;
    font-weight: bold;
    color: #fb7aab;
}

.profile .blurbs .section h4{
color: white;
padding: .5em;
}

.profile .comments-table{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}

.profile .comments-table td{
background-color: transparent;
}

.profile .comments-table .comment-replies{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}

</style>
<style>



    .profile .friends .person img:not(.icon){

        

border: 10px pink !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 10 of 10 comments ( View all | Add Comment )

Dee	1709517833 Using Report Comment
mimikyu	1699210460 using <<3 Report Comment
Bloobis_Blobis._.	1694251905 Using! ^^ Report Comment
☁️cody☁️	1692682549 using!! :P Report Comment
doug >:3c	1691445599 using!! Report Comment
chris' layout test account (don't friend req)	1690533265 using :) Report Comment
José Michael Nelly	1688767599 yoooooo im usin it ty Report Comment
crmldrzzl	1688630679 using (insert 100 emoji) Report Comment
n	1687869189 using! :> Report Comment
Ray	1687624834 using :)! Report Comment