juno themed layout

Tags: juno, 2000s, autumn, simple, layouts, layout, animation

Description:

feel free to change anything but comment if ur using!! includes custom cursor :3

Preview:

click on the image for a larger preview

Code:

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

<style>

    body{
background-image:url(https://i.pinimg.com/564x/50/8f/20/508f20095d8d4f00279f4ea36b22ab61.jpg);
overflow:hidden;
}

    .container{
width: 1000px;
border:solid black 2px;
}

main{
height: 460px;
overflow-y: scroll;
}

  

  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
p{
font-family: 'Shadows Into Light', cursive;
font-size:15px;
color:black;
}

  
h1,h2,h3,h4,h5{
font-family: 'Lilita One', cursive;
font-size:17px;
color:black;
}

  
nav .links{
background-color:transparent;
}

  

  nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: "★" ;
color: goldenrod;}
}

  

  .profile .blurbs .inner{
color: black;
text-align: center;
border-radius: 10px;
background: url(https://i.pinimg.com/564x/50/a1/34/50a13436511482b0a03c10b19323a3f8.jpg);
}

  

  .profile {
background-image:;
background-color:white;
}

  

  .profile h1:before{
content:url(https://wilardo.crd.co/assets/images/gallery27/c7d4e93a.gif?v=47044b3a);
}

  .profile h1:after{
content:url(https://64.media.tumblr.com/1e4c292cf659d3c2343c621e79727e68/bcbc505c32a166c1-01/s75x75_c1/da77d33e18ebc5f203ef93161d63a081f43684e8.gifv);
}

  DIV.mood > P:nth-child(1):after{
display: block;
height: 13px;
width: auto;
content:url(https://wilardo.crd.co/assets/images/gallery04/df7946a8.gif?v=47044b3a);
margin-bottom:-5px;
}

  

  .mood{
 text-align:center;
}

 .online{
content: url(https://wilardo.crd.co/assets/images/gallery06/30fdf554.gif?v=47044b3a);
}

  .profile .blog-preview p:before{
content:url(https://literature.crd.co/assets/images/gallery05/a2f05d33.gif?v=0b76180b);}
}

  

  h1{ 
font-size: 45px !important;
text-transform:none !important;
padding-left:10px !important;
}

  

  main .right:before{
content: " ";
display:block;
background-image:url('https://i.pinimg.com/736x/10/4e/40/104e40d326238b3ea60bcd969fb4c421.jpg');
height:450px;
background-repeat:no-repeat;
background-position:center;
background-size: 530px;
margin-bottom:15px;
}

  

   .mood:after{
content: " ";
display:block;
background-image:url('https://i.pinimg.com/564x/d1/ac/c7/d1acc74edd1764919ae752714ce80f79.jpg');
height:105px;
background-repeat:no-repeat;
background-position:center;
background-size: 230px;
margin-bottom: 10px;
}

main:before {
width: auto;
margin-bottom: 0px;
margin-top: 0px;
border: 1px solid black;
height: 210px;
display: block;
content: "";
background-image: url(https://i.pinimg.com/564x/74/b5/97/74b5974ccb4390f2c06c38d80f08806e.jpg);
background-position: center 
center;
background-size: cover;
box-shadow: 0px 0px 30px 5px #080600;
}

  nav .top{
background-image: url(https://i.pinimg.com/564x/c0/db/91/c0db91e5f67b13662f47c3fb0331cf02.jpg);
box-shadow: 0px 2px 4px 2px black;
border-radius: 10px;
}

  .general-about .profile-pic img, .comments-table td:first-child img, .profile .friends .person img:not(.icon){
border: 10px solid transparent;
border-image: url("https://storage.needpix.com/rsynced_images/baroque-frame-1518461230BTv.jpg") 60 fill round;
box-shadow: 0px 0px 20px 0px black;
} 

  

 FOOTER > UL.links{

    display: none;

}



FOOTER > P:nth-child(1){

    display: none;

}

FOOTER > P:nth-child(2){

    display: none;

}



P.copyright{

    display: none;
}

footer{
background:white;
height:3px;}
}

  table.comments-table td {
background-image:url(https://i.pinimg.com/564x/f9/f0/71/f9f071654eb05080b502eb5df1547689.jpg);  
color: rgb(insert rgb);
box-shadow: 0px 2px 4px 2px black;
border-radius: 10px;
}

  

  .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

content: url(https://wilardo.crd.co/assets/images/gallery23/32d30778.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url(https://wilardo.crd.co/assets/images/gallery23/bbd7092f.png?v=47044b3a)

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url(https://wilardo.crd.co/assets/images/gallery14/4bb10a61.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: url(https://wilardo.crd.co/assets/images/gallery28/67095b56.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url(https://wilardo.crd.co/assets/images/gallery04/78f60a0e.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url(https://wilardo.crd.co/assets/images/gallery04/751256ef.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group  */

content: url(https://wilardo.crd.co/assets/images/gallery20/e2bafc2f.gif?v=47044b3a)

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url(https://wilardo.crd.co/assets/images/gallery27/79b994c6.gif?v=47044b3a)
}   

  :root {
--logo-blue:;
--darker-blue: rgb(250, 191, 62);
--lighter-blue: rgb(97, 75, 56);
--even-lighter-blue: white;
--lightest-blue: white;
--dark-orange: rgb(250, 191, 62);
--light-orange: rgb(97, 75, 56);
--even-lighter-orange: green;
 --green: pink;
}
</style>

  

<style>
table.comments-table {
display: block;
height: 250px;
overflow-y: scroll;
}
</style>



<style>
::-webkit-scrollbar {
 width: 14px;
}
::-webkit-scrollbar-thumb {

  background:linear-gradient(to left, #c8c8c8 6px, #e8e8e8 5px);

  border: solid black 1px;

  border-radius: 5px;

  background-clip: padding-box;
}
::-webkit-scrollbar-track {

  background:transparent;

  

}
::-webkit-scrollbar-button:single-button {

  background-color: transparent;

  display: block;

  border-style: solid;

  height: 12px;

  width: 14px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {

  border-width: 0 8px 8px 8px;

  border-color: transparent transparent black transparent;

}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {

  border-color: transparent transparent black transparent;

}
::-webkit-scrollbar-button:single-button:vertical:increment {

  border-width: 8px 8px 0 8px;

  border-color: black transparent transparent transparent;

}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {

  border-color: black transparent transparent transparent;

}
</style>



<style>
 .profile .friends .person img:not(.icon){
border: 3px solid rgb(61, 1, 1) !important;   
</style>


<style>
li.active .icon { 
  content:url('https://wilardo.crd.co/assets/images/gallery27/23c73031.png?v=47044b3a'); 
}
</style>



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

 {

  0% {

    opacity: 0.27861;

  }

  5% {

    opacity: 0.34769;

  }

  10% {

    opacity: 0.23604;

  }

  15% {

    opacity: 0.90626;

  }

  20% {

    opacity: 0.18128;

  }

  25% {

    opacity: 0.83891;

  }

  30% {

    opacity: 0.65583;

  }

  35% {

    opacity: 0.67807;

  }

  40% {

    opacity: 0.26559;

  }

  45% {

    opacity: 0.84693;

  }

  50% {

    opacity: 0.96019;

  }

  55% {

    opacity: 0.08594;

  }

  60% {

    opacity: 0.20313;

  }

  65% {

    opacity: 0.71988;

  }

  70% {

    opacity: 0.53455;

  }

  75% {

    opacity: 0.37288;

  }

  80% {

    opacity: 0.71428;

  }

  85% {

    opacity: 0.70419;

  }

  90% {

    opacity: 0.7003;

  }

  95% {

    opacity: 0.36108;

  }

  100% {

    opacity: 0.24387;

  }

}

@keyframes textShadow {

  0% {

    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  5% {

    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  10% {

    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  15% {

    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  20% {

    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  25% {

    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  30% {

    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  35% {

    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  40% {

    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  45% {

    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  50% {

    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  55% {

    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  60% {

    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  65% {

    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  70% {

    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  75% {

    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  80% {

    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  85% {

    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  90% {

    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  95% {

    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

  100% {

    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;

  }

}

body::after {

  content: " ";

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  background: rgba(18, 16, 16, 0.1);

  opacity: 0;

  z-index: 2;

  pointer-events: none;

  animation: flicker 0.15s infinite;

}

body::before {

  content: " ";

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));

  z-index: 2;

  background-size: 100% 2px, 3px 100%;

  pointer-events: none;

}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/toons/too-4/too390.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2006/04/18/too390.html" target="_blank" title="Woodstock"><img src="https://cur.cursors-4u.net/cursor.png" alt="Woodstock" style="position:absolute; top: 0px; right: 0px;"/></a>

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

Mcmuffinrobber	1706361423 might use Report Comment
goober !	1697506505 using :))) Report Comment
janebug (FROM HOMESTUCK!!!)	1695029265 Using >< Report Comment
julianna	1694453715 using :) Report Comment
iknowwhatyouaree	1692495203 Using Report Comment
Işık Atlas	1691877007 I was the first to comment on this and now this layout is my life basically HELP Report Comment
ノ sean ⦻	1690896539 USING THIS IS SO COOL!!1! Report Comment
rey	1690464767 using Report Comment
Whisker._.Collective	1690437771 Using Report Comment
Narwhal!	1690302427 Usinggg!! ^ ^ Report Comment
Oliver!!	1689303310 using!! Report Comment
brooklynn	1689214595 using!! :P Report Comment
juno	1689177546 usingg! Report Comment
kinetics✰	1689113786 its literally so cute {using} Report Comment
૮ ˃̵֊ ˂̵ ა！sunny ִ✮	1688713231 omg it's sooo cute Report Comment
lily :{P	1688586531 this is the cutest!!! using currently. thanks!!! Report Comment
lucyy	1688581788 using :D! Report Comment
[REDACTED]	1688501594 This is so pretty! Using <3 Report Comment
will	1688421289 using Report Comment
Bella ☆	1688359645 using! and IM me please Report Comment