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

𝙙𝙚𝙫𝙤𝙣 𝙩𝙝𝙚𝙚 𝙜𝙪𝙣 𝙚𝙡𝙚𝙥𝙝𝙖𝙣𝙩	1732028149 best layout ever Report Comment
⚣｡ Klavier	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