Kazuma Kiryu's Blog of Revelation (Y3 Orange Ver.) | Profile Layout

Tags: yakuza, kiryu kazuma, orange, simple, basic, ryu ga gotoku, y3

Description:

WELCOME KYOUDAI

Long story short, I thought of making "Kiryu's Blog of Revelation"-inspired layout due to nostalgia for Yakuza 3. This is my first attempt in making a layout for people to use and unfortunately, I dont have the creativity to push this further. I did the best I could to replicate the blog Kiryu had in Y3 but this still seems bareboned. So by all means feel free to customize it or even improve it. I apologize if it becomes difficult to repurpose this layout. ^^;;

There's 2 kinds of blog layouts in the series:

This orange version in Y3;

And the updated black version in Y4 and Dead Souls.

~~I was hoping to also make the Y4/Dead Souls after this one but idk yet.~~

~~Making this has been really a struggle for me already LMAO~~

UPDATE #1: Well.. as it turns out, the Y4/DS version is now available. LOL

The alternate Profile Layout and Blog Layout can be found here and here.

I can now finally sleep.

UPDATE #2: Finally made the orange panel more narrower to be accurate as possible by adding more width to the right panel.

RESOURCES

Kamurucho: 1 (using) - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11
Sotenbori: 1 - 2 - 3
Okinawa: 1 - 2
Fukuoka: 1
Dead Souls: 1 - 2
Others: Don Quijote / Kenzan

CREDITS

@Cory: CSS for Banner and Contact icons
@Bela: for most of HTML/CSS I'm relearning
@Bacon: CSS for renaming section on Interests
@Nole: Generic Profile Editor site I used to make this layout (test code here)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* LAYOUT CREATED USING GENERIC PROFILE EDITOR */

/* This is where the mess I made begins.. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* Feel free to use any background! */

body {
  background-image: url('https://moniker.neocities.org/ykzimg/bg/kamu1.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Noto Sans JP', sans-serif;
}

nav .top {
  background: transparent;
}

nav .links {
  background: white;
  text-align: right;
  border-radius: 4px 4px 0 0;
  background-image: url('https://moniker.neocities.org/ykzimg/ico/kamublo.png');
  background-position: bottom left;
  background-repeat: no-repeat;
}

main .left {
  background: darkorange;
}

main .right {
  padding: 0px;
  width: 80%;

}

.profile .blurbs .heading,
.profile .friends .heading {
  background: gray;
  color: white;
  padding: 5px;
}

.profile .contact .heading,
.profile .table-section .heading,
.profile .table-section .heading,
.profile .contact,
.profile .url-info,
.profile .table-section,
.profile .blurbs .section h4 {
  background: transparent;
  color: black;
  border: 0px;
}

.profile .url-info,
.profile .table-section .heading,
.profile .contact .heading {
  display: none;
}

.general-about .profile-pic {
    float: none;
    height: auto;
  }

button {
  color: white;
  background: black;
}

.count {
  color: red
}

.online {
  content: url('https://moniker.neocities.org/ykzimg/ico/ketai.gif');
}

a {
  color: black;
}

nav .links a {
  color: black;
}

footer {
  background: rgba(255, 255, 255, 0.9);
}

footer p {
  color: darkorange;
}

footer .links {
  color: white;
}


/* How to change section text by Bacon: https://blog.spacehey.com/entry?id=49124 */

/* This is where Kiryu Kazuma's profile is located. Feel free to edit/customize! */

:root {
  --topic1: "Nickname:";
  --topic2: "Gender: ";
  --topic3: "DOB:";
  --topic4: "Blood Type:";
  --topic5: "Hometown:";
  --topic6: "Intro:";
}

.table-section:not(:last-child) .details-table tr td:first-child p {
  color: transparent;
  text-shadow: none;
  letter-spacing: -100px;
}

.details-table tr td:first-child p::after {
  color: black;
  letter-spacing: normal;
  filter: brightness(0.1%);
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
  content: var(--topic1);
}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
  content: var(--topic2);
}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
  content: var(--topic3);
}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
  content: var(--topic4);
}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
  content: var(--topic5);
}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
  content: var(--topic6);
}

.comments-table td:first-child,
.comments-table td,
.comment-replies,
.details-table td:first-child,
.details-table td {
  background: transparent;
  color: black;
}


/* Cory's CSS Banner: https://blog.spacehey.com/entry?id=5169  */

/* I honestly dont know what banner should I use so put whatever you feel like putting here lol */

main:before {
  width: 100%;
  height: 300px;
  display: block;
  content: "";
  background-image: url('https://wallpaperaccess.com/full/25177.jpg');
  background-position: center center;
  background-size: cover;
}

/* This is here to make it mobile-friendly */

@media only screen and (max-width: 600px) {
  main:before {
    height: 200px;
  }

  .blog-preview,
    .profile .blurbs .heading,
    .profile .blurbs .inner,
    .profile .friends .heading,
    .profile .friends .inner {
      width: 96.8vw;
}


/*Cory's CSS Contact Icons: https://blog.spacehey.com/entry?id=7464 */

/* Customize the icons here, you can also use images using url() */

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

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

Sunniest Sekai	1742944384 using ty Report Comment
Joe Finsters	1738638660 Using! Domo Aniki!! Report Comment
Jakcet	1737618472 using kyodai Report Comment
Safi Starie	1733763614 using! love this layout Report Comment
𝙙𝙚𝙫𝙤𝙣 𝙩𝙝𝙚𝙚 𝙜𝙪𝙣 𝙚𝙡𝙚𝙥𝙝𝙖𝙣𝙩	1732028149 best layout ever Report Comment
Klavier (Autoplay)	1715306510 peak layout Report Comment
forwardObserver	1707788080 yoinked. Report Comment
⋆˚࿔ van 𝜗𝜚˚⋆	1691097751 HAHA i love this!! great work!! Report Comment
Nazaan	1647682660 Yooooo man I love this bro, it's one of the things we didn't necessarily want but definitely needed. Good job bro ️ Report Comment