I believe this is what the viewers call "Thiefshipping"

1997/08/26

So, I won't lie, this layout wasn't exactly planned. But a friend wanted to make a site and asked for help on the design so I ended up making this layout for them. I feel like all I really have going for most of my designs is that I know how to make blends and fake UI designs so yeah... that's what we went with here. Fake UI design. Redrawing the buttons in photoshop was honestly harder than it looked, believe it or not. And all they did was come out okayish at best. I didn't commit fully to the bit with this one, but then again when do I ever. Either way, have fun with it, I suppose.

Anyways, it's experimental, thought I'd do something new, and I honestly just did a really quick asset and color swap between this one and the one I coded for my friend. But you guys get a little bit of extra stuff.

Also, I won't lie to you all. I completely coded this layout based on my splash page for my site so yeah... this is just that but with a few things swapped here and there. You get a bonus friend in the corner of your page, making it fun and whimsical. Also as usual this stuff is completely on mobile because coding with mobile responsiveness in mind completely eludes me to this day. I'm going to need to take a class on that at some point or another because it feels bad to make a bunch of designs that break on other devices, but at the same time I just enjoy messing around and seeing what I can do with CSS. Also I 100% saw someone else with a highlight code like this and was like "I want to try that" so I tried it here, so they're 100% the inspiration for the heavy use of dropshadows both in the text & the layout in general.

Not a lot of credits this time around. Here you go, either way:

As usual, you can put my credit wherever on the site as long as you link back to it. I have it at the bottom of the layout, but you're not required to keep it there. You can toss it on a links page with credits or something. Assets aren't required to stay the same either, you're free to customize this as you see fit. Honestly, once my layouts are in your guys hands, I'm just hands off.

Maybe the real Battle City was the Duels we had along the way

Anyways, we're talking assets here. We have quite a few this time, and you're free to pick and choose whichever you want to use. Let's not talk about how this says it's related to thiefshipping and I didn't include a single picture of Marik this is Bakura's journal just TRUST.

100x100 journal icon 1 100x100 journal icon 2 100x100 journal icon 3

This layout has quite a few parts due to being reliant on iframes. You have 2 CSS files and 2 different pages you need to make. I'll start with doing the outer frame first. This is going to be your index file.

Main page's HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>YOUR TITLE HERE</title>
<meta name="description" content="personal blog">
<link rel="icon" href="Favicon Icon Here" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<link href="./style/style.css" rel="stylesheet" type="text/css" media="all"> 
</head>

<div class="topbanner">
<div class="inner">
HEADER TITLE ON TOP OF BLOG HERE
</div>
</div>

<div id="stack">
<div id="sidecontainer">
<div id="avatar">

<img src="https://files.catbox.moe/s1xyic.png" alt="">
<center>

<a href="index.html" target="_top">home</a> ◆
<a href="inner.html" target="bodyframe">links</a> ◆
<a href="inner.html" target="bodyframe">profile</a>
</center>
</div>
<nav id="sidenavigation">

<a href="./logs/2025-05-17.html" target="bodyframe">► 2025/05/17 log</a>
<a href="inner.html" target="bodyframe">► 2025/05/16 log</a>
<a href="inner.html" target="bodyframe">► 2025/05/15 log</a>
<a href="inner.html" target="bodyframe">► 2025/05/14 log</a>
<a href="inner.html" target="bodyframe">► 2025/05/13 log</a>

</div>

</div>

<footer id="bottombanner">

Written by <a href="mailto:YOUREMAILHERE@HOST">NAMEHERE</a>. Layout by <a href="https://ordainedmotion.neocities.org/" target="_blank">Mizumiya</a>.
</footer>
</div>
</div>

<img src="https://files.catbox.moe/3te92q.png" width="30%" style="position: fixed; right: -5%; bottom: -5%; z-index: -1;" alt="">
</body>
</html>

Main page's CSS

html {
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

body {
background: rgb(234,251,255);
background-image: url(https://files.catbox.moe/myn4le.png);
font-family: "Outfit", sans-serif;
color: #3a3a3a;
overflow-x: hidden;
overflow-y: hidden;
}

a:link, a:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #69c4ff;
text-decoration: none;
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

img {
max-width: 100%;
height: auto;
}

.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

#layout {
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
border-radius: 10px;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.7);
width: 70em;
height: auto;
position: relative;
margin: auto;
overflow-x: hidden;
overflow-y: auto;
}

.topbanner {
background-image: url(https://files.catbox.moe/5p4eys.png);
background-repeat: repeat-x;
background-position: right; 
height: 44px;
overflow: hidden;
border-bottom: 1px solid #6b6b6b;
}

.inner {
color: #3a3a3a;
padding: 1%;
text-align: center;
}

#stack {
width: 12em;
display: flex;
float: left;
flex-direction: column;
}

#solo {
width: 82.8%;
position: relative;
display: flex;
float: right;
}

#sidecontainer {
color: #cccccc;
background: rgba(255, 255, 255, 0.2);
border-left: 1px solid #6b6b6b;
width: 12em;
height: 100%;
float: right;
}

#sidecontainer img {
border: 1px solid #6b6b6b;
}

#avatar {
padding: 10px;
}

#sidenavigation{
width: 94%;
height: 32.3em;
font-size: 0.7em;
border-top: 1px solid #6b6b6b;
display: flex;
float: left;
flex-direction: column;
padding: 0.5em;
overflow-y: scroll;
}

#sidenavigation a{
color: #ffffff;
letter-spacing: 2px;
margin: 3px;
}

#sidenavigation a:hover {
color: #69c4ff;
text-decoration: none;
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

#blog {
background: rgba(255, 255, 255, 0.2);
border-right: 1px solid #6b6b6b;
border-left: 1px solid #6b6b6b;
width: 100%;
height: 100%;
position: relative;
float: right;
}

#bodyframe {
height: 37.1em;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}

#bodyframe iframe {
border: none;
width: 100%;
height: 100%;
}

#bottombanner {
font-size: 0.7em;
text-align: right;
background-image: url(https://files.catbox.moe/xqatta.png);
border-top: 1px solid #6b6b6b;
width: 98.35%;
height: 1.25em;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}

#bottombanner a {
color: #333333;
text-decoration: none;
font-weight: bold;
}

#bottombanner a:hover {
color: #666666;
text-decoration: none;
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

.outfit-<uniquifier> {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}

::selection {
color: #1d1d1d;
text-shadow: -1px -1px 0 #69c4ff, 1px -1px 0 #69c4ff, -1px 1px 0 #69c4ff, 1px 1px 0 #69c4ff, 0px 0px 6px #69c4ff;
}

Inner page's HTML:

Inner page's CSS:

html {
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

body {
font-family: "Outfit", sans-serif;
font-size: 1.2em;
color: #cccccc;
padding: 0;
margin: 0 auto;
}

a:link, a:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #69c4ff;
text-decoration: none;
cursor: url(https://files.catbox.moe/24cngw.gif), auto;
}

b {
color: #ff6699;
font-weight: bold;
}

img {
max-width: 100%;
height: auto;
padding: 1%;
}

h1, h2{
color: #333333;
font-size: 1em;
text-align: right;
background-color: #ffffff;
}

h3 {
color: #ffffff;
font-size: .8em;
text-align: left;
}

textarea { /*text area styling if you need them*/
color: #101010; 
background: rgba(255, 255, 255, 0.5);
border: 1px solid #69c4ff;
border-radius: 5px;
width: 98%;
height: 6.7em;
padding: 2px;
}

#content {
padding: 1.5%;
}

.outfit-<uniquifier> {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}

::selection {
color: #1d1d1d;
text-shadow: -1px -1px 0 #69c4ff, 1px -1px 0 #69c4ff, -1px 1px 0 #69c4ff, 1px 1px 0 #69c4ff, 0px 0px 6px #69c4ff;
}

If you don't want to copy and paste that all, here's a direct download to a .7z archive from my catbox files. It contains all of the files set up as is. You will need 7zip or another archival program to extract the files to use it.