Red Hot Chilli Peppers Layout

Tags: rhcp, retro, computer, red, 90s. simple, ibuprofen barbie

Description:

Comment or friend me if using please !!

Preview:

click on the image for a larger preview

Code:

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

<style>

body {
background-image: url('https://i.pinimg.com/564x/e2/44/91/e24491209e2940f4ba5c075b143e820b.jpg');
background-attachment: fixed;
    font-family: 'Jim Nightshade', serif !important;
    font-size: 25px;
    font-color: white
}
</style>


<style>    

nav .top{
     background-image: url('https://i.pinimg.com/564x/d0/8b/a4/d08ba4265e8e62175599be1a161d9e3d.jpg');
     border: dotted;
     border-color: red;
     border-width: 0px;
}
</style>

<style>

.profile{
   background-color: black;
   border: dotted;
   border-color: red;
   border-width: 3px;
}
</style>

<style>
/*=== background color + border for headings + navigation links ===*/

.profile .blurbs .heading, .profile .friends .heading, main, top, links, nav .top, nav .links, details-table {
color: #FFFFFF;
background-color:transparent;
color: darkred;
border: dotted;
border-width:3px;
border-color: transparent;
font-color: #545454;
}
</style>

<style>
/*=== font import ===*/

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


<style>
/*=== online now icon ===*/

.online {
    content: url(https://www.myspacegens.com/images/online_now/002.gif);
}

</style>

<style>
/*=== profile picture border ===*/

.profile-pic {
        border-radius: 250px;
        overflow: hidden;
     border: dotted;
     border-color: darkred;
     border-width: 1px;
}
.profile .friends .person img {
border-radius: 500px;
        overflow: hidden;
     border: dotted;
     border-color: darkred;
     border-width: 1px;
}
    }
</style>

<style>
/*=== custom cursor icon ===*/

HTML,BODY{cursor: 
url(http://www.rw-designer.com/cursor-view/48228.png),
auto;}


A:hover{cursor: 
url(http://www.rw-designer.com/cursor-view/48228.png),
auto;}
</style>

<style>
/*=== contact emojis ===*/

.contact .inner a img {
       font-size: 0;
   }
   .contact .inner a img:before {
       font-size: 0em;
    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 Favorites */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward 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 to Group */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "☆"
   }

</style>

<style>
/*=== contact background image ===*/

.contact {
  border-radius: 8px;
  background-image: url(https://i.pinimg.com/236x/e8/ca/81/e8ca81e7b79b32ae98467bac0e330edc.jpg);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;
border: dotted;
border-color: transparent;
border-width: 1px;</style>


<style>
/*=== color changes ===*/

:root {
    --logo-blue: rgba(9, 9, 9);
    --headers: rgba(255, 255, 255, 25);
    --darker-blue: #42403a;
    --lighter-blue: rgba(0, 0, 0, 0,);
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: #292826;
    --light-orange: transparent;
    --even-lighter-orange: transparent;
    --green: rgba(91, 6, 4, 0.8);
    --links: rgba(91, 6, 4, 0.8);
}

</style>

<style>
/*=== footer image ===*/

footer {
background-image: url(https://i.pinimg.com/236x/85/38/2d/85382da0d8207a1dd14f929517472e80.jpg) 
!important; 
background-position: bottom center !important;
background-repeat: repeat !important;
</style>


<style>
/*=== image for 'about me' section ===*/
</style>

<a href="https://www.deviantart.com"><img src="https://i.pinimg.com/236x/c1/b7/fe/c1b7fe1d84797a824955f5019e5d9529.jpg" width="500" height="250"/></a>

<style>



h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

 }



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

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

pointer-events: none;

}



.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>

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

Jesse Pinkman

1675238098

Thanks

Report Comment

npnp

by Ibuprofen Barbie; 1675238193; Report