simple cute yellow

Tags: simple, cute, orange, yellow, animation, music

Description:

a simple cute orange and yellow theme ^o^ erm this is my first time coding and i a lot of inspo and watched many tutorials so hopefully its .. ok!!!!!! LOL

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Moirai+One&display=swap');

p{
font-family: 'Jost', sans-serif;
font-size: 132%;
color: rgb(71, 56, 53);

}
h1,h2,h3,h4{
font-family: 'Moirai One', cursive;
font-size: 220%
} 
h5{
  font-family: 'Nerko One', cursive;
  font-size: 200%;  
}
  body {

text-align: center;

}
body{
background-image:url(https://i.pinimg.com/originals/89/78/2f/89782f959a6a5d447a3df31848d75843.gif);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

}

.profile {
   background-color: rgb(252, 248, 235); 
}
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:#e0ad60; 
text-shadow: 0 0 1px black;
background: #fffdf7; 

}

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 3px solid #f5c773;
    height: 120px;
    display: block;
    content: "";
    box-shadow: 0px 0px 5px 1px #f5c773;
    background-image: url(https://i.ibb.co/yFgCWx8/3f848c72c925b86911ce99ec280a22b5.gif);
    background-position: center center;
    background-size: cover;

}
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "🍮"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🍮"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🍮"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🍮"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🍮"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🍮"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🍮"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🍮"

}

:root {
    --logo-blue: rgb(245, 202, 122);
    --darker-blue: orange;
    --lighter-blue: rgb(245, 202, 122);
    --even-lighter-blue: rgb(255, 236, 173);
    --lightest-blue: ;
    --dark-orange: rgb(105, 79, 70);
    --light-orange: rgb(255, 239, 191);
    --even-lighter-orange: rgb(105, 79, 70);
    --green: orange;li

}


}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}

</style>

<div class="about"> 


<div>




<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "FRIENDS! (＞. O)"; font-size:.8rem; font-weight:bold; 
color:Brown; } 
}
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "COMMENTS!"; font-size:.8rem; font-weight:bold;
color:Brown; } 
}
.profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "(-‿-)"; font-size:.8rem; font-weight:bold; 
color:Brown; }
}
.contact .heading{ font-size:0; }
.contact .heading:before{ content: (≧▽≦)"; font-size:.8rem; font-weight:bold; 
color:Brown; }
}
.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "(𝗼˳★)？"; font-size:.8rem; font-weight:bold; color:Brown; 
}
.profile .friends{
text-align: center;
}
.profile .comments-table td{
background-color: transparent;
}
.comments-table img,
.person img{
border-radius: 15px;
box-shadow: 1px 1px 2px #b89858;
filter: opacity(98%);
opacity: .5;
}
}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}



</style>


<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}
/*setting color variables*/
:root{
  --red: #ffe0a1;
  --orange: #fffade;
  --yellow: #ffe0a1;
  --green: #fffade;
  --cyan: #ffe0a1;
  --purple: #fffade;
  --pink: #ffe0a1;


}

@keyframes glowrainbow{
  0%{
    box-shadow: 0 0 5em 2em var(--red);
  }
  16%{
    box-shadow:0 0 5em 2em var(--orange);
  }
  32%{
    box-shadow: 0 0 5em 2em var(--yellow);
  }
  48%{
    box-shadow: 0 0 5em 2em var(--green);
  }
  64%{
    box-shadow: 0 0 5em 2em var(--cyan);
  }
  80%{
    box-shadow: 0 0 5em 2em var(--purple);
  }
  90%{
    box-shadow: 0 0 5em 2em var(--pink);
  }
  100%{
    box-shadow:0 0 5em 2em var(--red);
  }
}

body &gt; .container{
  animation:30s glowrainbow infinite;
}
.person:hover {
  animation: shake 2.0s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}

}

.profile-pic {
    background: #fff;
    padding: 5px 5px 196px;
    box-shadow: 3px 3px 10px silver;}
.player {
  opacity: 0;
  left: 0;
  bottom: 0;
}
.player:hover {
  opacity: 100%;
  transition: 0.3s;
}
<style>
.online { visibility: hidden; } .online img { content: url("https://watermelon.crd.co/assets/images/gallery02/06bdfbf9.gif?v=d05b6a2d"); 
animation-name: none; visibility: visible; height: 25px; width: 25px; color: orange; }

}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: none;
    scrollbar-color: #3a2c2e #f0d17a;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 19px;
  }

  *::-webkit-scrollbar-track {
    background: #f0d17a;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #3a2c2e;
    border-radius: 14px;
    border: 3px ridge #ffd68a;
  }

HTML,BODY{cursor: 
url(https://cur.cursors-4u.net/others/oth-8/oth709.cur),
auto;}


A:hover{cursor: 
url(https://cur.cursors-4u.net/others/oth-8/oth709.cur),
auto;}


</style></div></div>


<iframe width="0" height="0" src="https://www.youtube.com/embed/hS5SGXJfL2E//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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

⋆˚࿔ 𝒂𝒓𝒓𝒐𝒛𝜗𝜚˚⋆	1738989491 using Report Comment
🌺 ୨ ׂ αввєу” . :𑜞᭠	1736541163 Usingg!! Report Comment
★bawseu!ミ★	1724886809 Using !!! Report Comment
arrozdoce	1724086281 usando!! Report Comment
luana/len!! >_<	1710552701 using! i'll change some things, I hope you don't mind! Report Comment
L0st_girl	1710453534 Using! ty Report Comment
geupir	1707163149 usando Report Comment
Fairy !	1705814943 using !! tysm:3 Report Comment
Len🥐 (Kristen)	1701547579 Using :D Report Comment
emerald	1692943002 using! super cute Report Comment
ella	1691566657 usingg Report Comment
mandeezy	1689134794 using this, thank you! Report Comment
sam	1688353491 VIRAL HIT?? Report Comment
david	1687918068 using!! Report Comment
Cari ౨ৎ	1687394669 using :D Report Comment
Shibe	1687380617 Using! Tysm :3 Report Comment
7un4 74k30v3r	1687197385 Using!! :3 Report Comment
asshole	1686849356 using!! Report Comment
CoolPudding7048	1686804843 Im using this, thanks!!! Report Comment
valbixx	1686753754 using!! :) Report Comment