nara's profile picture

Published by

published
updated

Privacy: Link-only
Category: Friends

layout for koi!

Screenshot-2026-02-13-at-11-44-40-PM

  • red color theme!
  • ms sans serif font
  • lace border around entire profile
  • border image around pfp
  • cute baby chick dancing next to display name (my fave part :3)
  • simple online icon and custom cursor
  • hidden friendlist and comments
  • pictochat message in the corner!
  • optional heart dividers for bio (see instructions at very beginning of code)

here is the code!! remember the style tags ehehe ^_^



/* if you would like, place this img code in your "about me" and "who i'd like to meet" sections to match how the dividers are placed in the image! */

<center><img src="https://i8.glitter-graphics.org/pub/1372/1372028c5qnmeyvpt.gif"/></center>

/* actual code starts here!!! font, general format, link hovers */

@font-face{
src:url(https://external-media.spacehey.net/media/s71PDqEcscPHb-BKUwUqZmJ8CIyrWmkS1yaAAkTiLz20=/https://dl.dropbox.com/scl/fi/2o9jsm2m2eqgb7j47j1n5/ms-sans-serif.ttf?rlkey=dne9omazv21w5gosune5bhoja&dl=0);
font-family: pixel; }

body {
background: url(https://64.media.tumblr.com/5ac6dc8b94a7679057b76ae5aa2d82b9/tumblr_oy8jn4lz9n1vjadpco1_400.gif); }

.container {
border: 8px solid;
border-image: url(https://file.garden/ZtBzpPPK_QLwMww6/IMG_8836.gif) 7 fill round;
font-family: pixel;
letter-spacing: 0.3px;
width: 800px;
margin-top: 10px;
padding: 5px; }

:root {
--logo-blue: #f08d8d;
--lighter-blue: transparent;
--darker-blue: #d6443a;
--gray: #f08d8d; }

*, .logout-btn {
text-transform: lowercase; }

nav, main, footer {
border: 1px solid #b54e4e;
margin: 0; }

main {
border-top: 0;
border-bottom: 0; }

nav .top, nav .links a, main, main p, .logout-btn {
font-family: pixel;
font-size: 13px; }

footer, footer a, footer .links li:not(:last-child)::after, footer a:hover {
color: white; }

a:hover {
color: #d6443a; }

/* searchbar, button, navigation links */

input, button {
border: 1px solid #b54e4e;
border-radius: 0;
text-transform: lowercase; }

button {
background: linear-gradient(#f08d8d, #e37676);
color: white; }

nav .links {
background: var(--logo-blue)!important;
padding: 10px 0 10px 0; }

nav .links li:not(:last-child)::after {
content: ""; }

nav .links a {
background: linear-gradient(#f08d8d, #e37676);
border: 1px solid #b54e4e;
padding: 2px;
margin: 3px;
text-shadow: none; }

nav .links a:hover, button:hover {
border: 1px inset #b54e4e;
color: white; }

/* profile pic, profile headings, blurbs, td */

.profile h1 {
font-size: 30px; }

.profile-pic img {
border: 12px solid;
border-image: url(https://i.postimg.cc/BvbgPr4v/fl32-003-a.gif) 9 fill round; }

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .blurbs .section h4, .profile .friends .heading, .details-table td:first-child {
display: none; }

.profile .contact, .blurbs, .profile-info {
background: linear-gradient(#fff, #ffe0e0);
border: 1px dotted #b54e4e; }

.details-table td {
background: #fff;
border: 0.9px outset #b54e4e;
padding: 5px; }

table {
background: linear-gradient(#fff, #ffe0e0);
border: 1px dotted #b54e4e;
border-spacing: 3px; }

/* hidden */

.url-info, .blog-preview, .friends {
display: none; }

/* icons & cursor */

.profile h1:before {
content: url(https://64.media.tumblr.com/2e59d8a766e8ef6f73b0b74aa307caec/tumblr_inline_nm35jlrtxg1qid2nw.gif);
margin-right: 10px; }

.online {
content: url(https://dl.glitter-graphics.com/pub/3267/3267888prjytzko9c.gif); 
height: 15px; }

nav .links li .icon {
content: url(https://files.catbox.moe/js1a4m.gif); }

* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat997.cur), auto !important;}

/* scrollbar */

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,var(--logo-blue),var(--darker-blue));
border-radius:0; }

/* corner image */

.pictochat {
background: url(https://files.catbox.moe/vbe2kz.png) no-repeat;
background-size: 100%!important;
position: fixed;
right: 20px;
bottom: -100px;
height: 350px;
width: 400px;
z-index: 1000;
opacity: 1; }

@media (max-width: 600px) {
.pictochat{display:none;}}

.pictochat:hover {
transform: scale(1.1);
transition: 0.5s ease; }

<div class="pictochat"></div>




Comments

Displaying 0 of 0 comments ( View all | Add Comment )