ranfren layout

Tags: #ranfren;#red; #black; #layout;

Description:

ranfren layout! ;3

Preview:

click on the image for a larger preview

Code:

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

<style>html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/17/6f/b5/176fb547189cbdb4f745d425e84167f3.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style>

<style>
.general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<div class="about">

</div>
  
<style>  .logo {
  
  content:url("https://i.ibb.co/gPtk9xm/Shace-Hey-ancom.png")
  
  }
</style>
  
<style>
p.online {font-size: 0px;}
p.online::after{content:url(https://64.media.tumblr.com/e533e5c22a256c39a6958440fb8db055/3ab37b35962881fb-6c/s75x75_c1/bcd7685c7eb252ab4e6d0c9a0d0f8c3e115716b4.gifv)
color: black;
font-size: 10px;}

    </style>

<style>
    body {
          background-image:url(https://i.pinimg.com/originals/1a/1c/cb/1a1ccbabe137e9819ea69373049cfc36.gif)
    }
</style>

<style>* {cursor: url(https://pixels.crd.co/assets/images/gallery02/88488dee.gif?v=379361a4), url(https://pixels.crd.co/assets/images/gallery02/88488dee.gif?v=379361a4), auto !important;}</style>

<style>
.profile-info{
background: url(https://media1.tenor.com/m/TxFDVimIHx0AAAAC/ranfren-randal.gif);
no-repeat fixed;
    background-size: cover;
    height: 155px;
    border: none;
    font-size: 0;
    background-size: cover;
    height: 152px;
    border: none;
    font-size: 0;
    background-position-y: top;
}

    .profile {
       
 
background:url(https://i.pinimg.com/originals/23/6b/fd/236bfd8261c1e866d4555cd004c8e2f2.gif);
color:white;
text-shadow: 0 0 9px red;
    }

.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:#A50000; 
background:#161616;
}

/* 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: "☆"


}
footer {
border-radius: 15px;
background-image: 
url(https://media1.tenor.com/m/aHH3aCgH1kQAAAAC/ranfren-randal.gif);
color:White; 
}
  

nav .top {
        background: url("");
    }
    
    nav { background: black url(""); }

:root {
--logo-blue:#FFFFFF;
--darker-blue: #FFFFFF;
--lighter-blue: #A3291B;
--even-lighter-blue: url(https://i.pinimg.com/564x/7b/ca/e1/7bcae1c78868dfadd44164c555a0596a.jpg);
--lightest-blue:#C19090;
--dark-orange:#000000;
--light-orange: url(https://i.pinimg.com/564x/7b/ca/e1/7bcae1c78868dfadd44164c555a0596a.jpg);
--even-lighter-orange:#C19090;
--green: #FFFFFF;
}


<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "fellow qweenz "; font-size:.8rem; font-weight:bold; 
color:black; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "comments !!"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "more!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "i don't bite!! (mostly)"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "me!!"; font-size:.8rem; font-weight:bold; color:White; }
<style>

h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.online {
    content: url(https://i7.glitter-graphics.org/pub/104/104607x61kd02dl0.gif);
}
</style>

<div style="float:  ; max-height: 300px; position: fixed; left: 1px; bottom: 0px; z-index: 400;">
<img src="https://ranfren.neocities.org/art/dot/laughcolour.gif"/></div>

<div style="float:  ; max-height: 300px; position: fixed; right: 6px; bottom: 9px; z-index: 200;">
<img src="https://ranfren.neocities.org/art/dot/falling.gif"/></div>


<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://media.discordapp.net/attachments/1115051011871096897/1178505670232916039/IMG_2172.gif?ex=657663ef&is=6563eeef&hm=54e573c6de09bc039bbed53b64cd05e488ae6d25c268a9578103f6572291af4d&);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1.5s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>
.profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://64.media.tumblr.com/276a193424fdf1cf1b7c9c57d9cde34d/f68f283abcef9711-b6/s250x400/b0a3ca4fe505b3a0a8967d6b0f125eb2ff09896d.pnj);  width: auto; height: 70px; background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</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 20 of 56 comments ( View all | Add Comment )

RAKU!	1786950743 Using Report Comment
sylvette	1786435987 using !! Report Comment
angelneocities	1783234754 using ^_^ Report Comment
🐁4ri🍰	1774426838 using!!!! Report Comment
Cas the confused being	1771103595 using Report Comment
cole_p	1767530422 might use:b Report Comment
Logan !	1764953110 using Report Comment
ೃ༄◡̈ Asterisk**ೃ༄◡̈	1761829504 Using! Report Comment
Urimachina	1759082021 Using Report Comment
aflairfor.alex	1748353792 USING :3 Report Comment
Cole	1743638455 using!! :3 Report Comment
mothie	1743286926 using!!! Report Comment
˚꒦꒷♱𝔸𝕝𝕝𝕖𝕟/𝔸𝕟𝕒𝕤𝕥𝕒𝕤𝕚𝕤♱꒷꒦˚	1740230571 using! Report Comment
Alissou	1737734350 Using :D Report Comment
zenn	1737003043 using!!! :3 Report Comment
RAINBOWW	1736745400 Using Report Comment
RAINBOWW	1736745400 Using Report Comment
RAINBOWW	1736745398 Using Report Comment
Rarrat	1736402249 using!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Report Comment