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

Luz	1749631648 usinghhsjhfs Report Comment
ectoBiologist	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
𝔰𝔬𝔲𝔩	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
T6rrify	1736133951 UsandooGHAAA Report Comment
matt	1735232810 Using :3 Report Comment
goreweb	1734122884 using !! Report Comment
Miško	1733437274 usinggg Report Comment
Fred	1733346966 using Report Comment
MYTHOMANIA	1733103815 using! Report Comment
xXR4NFR3NXx	1731374665 Using!!1! Report Comment
zaiinee	1730253396 Using! Report Comment
EerieGirlMarmar	1730030421 how do i remove the bouncy thing that the profile does? it makes the whole thing kinda laggy ;( Report Comment