It’s called a blunt…

I suppose I should do something with this layout, instead of leaving this ancient meme on it. Yes, the copypaste that was originally on here was from an infamous tumblr post, about the 3 weed smoking girlfriends (Hence the title. Y'know, 3 weed girlfriends, 3 blue eyes. It's practically the same thing.)

Anyways, this layout is based off of an old website layout I had on one of my graphics sites from long ago. I decided to remake the assets for it, and thus you now have a Kaiba layout, free to use.

Like anything I make in terms of this site, you don't have to ask me to use it, you can just grab it. It's there to be used. You can leave my code at the bottom of the Navigation, or you could move it somewhere else if you really prefer to do so. I don't care, just leave a link to me that is clearly labeled somewhere if you use this layout. Assets can be swapped out if you desire, and you can modify the CSS to be whatever colors you desire. This is just a template for a reason. It's meant to give you something quick and "structured" if you're struggling. Or alternatively it's there for people who want to try something new. Or in this case, something that's a bit more Mid-Late 2000's web design.

This layout was made using Adobe Photoshop. It was made with a bunch of textures I had on my dropbox for ages, and thus I can't pinpoint which exact ones were used. My masterlist of credits is Here for the time being. A lot of those files were not properly named so my apologies, names are definitely lost to time, as well as several old accounts that had creators favorited.

The style of the gradient text was by Loveberry. Please check them out if you want some cool text effects.

Not weed cigarette…

Okay let's go over the assets for this.

This layout comes with 3 images: a 600x360 Header, a 100x100 journal icon, and a background.

If you plan on using this layout, make sure to upload these to your own web server or replace them with whatever. If you're going to replace the header, I would definitely aim for something around 600 pixels if you're not going to make the layout larger.

Stick your images in "/images" & stick your style.css in "/style"

Speaking of Style, here it is, annotated

body {
 font-family: 'Zen Maru Gothic';  /*you can change this font, just make sure to link the proper font in the html as well*/
 color: #3399ff;
 font-weight: bold;
 line-height: 1.3em;
 background-image: url(https://files.catbox.moe/v6lskb.png);
 background-position: top;
 overflow-x: hidden;
 }
 
 #layout { /*this block makes up the main layout*/
 background: rgba(245, 245, 245, 0.6);
 width: 37.5em;
 height: auto;
 position: relative;
 margin: auto;
 }
 
 .header { /*the main image. it's around 600px if you want to replace without resizing everything*/
 background-image: url(https://files.catbox.moe/zy9a2h.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 22.5em;
 overflow-x: auto;
}

h5 { /*style for the headers on the image*/
 font-family: 'Zen Maru Gothic';
 color: #ffffff;
 font-size: 1em;
 line-height: 1.3em;
 background: -webkit-linear-gradient(pink, #52a9d6);
 position: absolute;
 top: 45%;
 right: 2%;
 margin: 1%;
 padding: 2%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

h6 {
 font-family: 'Zen Maru Gothic';
 color: #ffffff;
 font-size: .75em;
 letter-spacing: 5px;
 background: -webkit-linear-gradient(pink, #52a9d6);
 position: absolute;
 top: 50%;
 right: 1%;
 margin: 1%;
 padding: 2%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

h1 {  /*this header is used for the main content*/
font-family: 'Zen Maru Gothic';
color: #60adb8;
margin: 7px;
padding: 5px;
background: #0f3f54;
font-size: 1.7em;
margin-bottom: 1px;
text-align: right;
border-bottom: 3px solid #60adb8;
}

h2 { /*this header is used for navigation*/
font-family: 'Zen Maru Gothic';
color: #60adb8;
margin: 7px;
padding: 5px;
background: #0f3f54;
font-size: 1em;
margin-bottom: 1px;
text-align: center;
border-bottom: 3px solid #60adb8;
}

#nav{ 
width: 15em;
text-align: left;
font-size: .75em;
font-family: century gothic;
color: #60adb8;}

#nav A:link, #nav A:visited, #nav A:active { /*style for the links in the navigation*/
margin: 7px;
padding: 5px;
text-align: left;
color: #60adb8; 
font-family: 'Zen Maru Gothic';
font-size: 11px;
line-height: 13px;
text-decoration: none;
display: block;
align: justify;
background-color: #0e4460;
font-weight: bold;
}

#nav A:hover {
color: #9dd7df;
cursor: crosshair;
font-family: 'Zen Maru Gothic';
text-decoration: line-through;
font-weight: bold;
}

#content { /*this is the styling for the box with the light background*/
width: 100%; 
font-size: 12px; 
line-height: 13px;
font-family: 'Zen Maru Gothic';
color: #0e4460;
}

#content strong {
font-weight: strong;
color: #0f94bf;
font-size: 12px;
}

#content i {
font-size: 12px;
color: #0f94bf;
text-decoration: italic;
}

#content u {
font-size: 12px;
color: #0f94bf;
text-decoration: underline;
}

#content s {
color: #0f94bf;
font-size: 12px;
text-decoration: line-through;
}

#content A:link, .body A:visited, .body A:active {
color: #0f94bf;
font-size: 11px;
line-height: 12px;
text-decoration: none;
font-weight: bold;
}

#content A:hover{ 
color: #0f94bf;
text-decoration: line-through;
fontweight: bold;}

.deco { /*this is the style for the dark background content.*/
background-color: #0e4460;
border: 2px solid #60adb8;
color: #9dd7df;
margin: .5em;
padding: .5em;
font-family: 'Zen Maru Gothic';
font-size: 1em;
}

.deco A:link, A:visited,  A:active {
color: #0f94bf;
font-size: 11px;
line-height: 12px;
text-decoration: none;
font-weight: bold;
}

.deco A:hover{
color: #0f94bf;
text-decoration: line-through;
font-weight: bold;
}

#stack { /*this is just how i name elements.*/
width: 13.75em;
display: flex;
float: left;
flex-direction: column;
}

#spread {
width: 35em;
display: flex;
float: right;
}

#whole {
 background: rgba(245, 245, 245, 0.6);
 width: 100%;
 position: relative;
 display: flex;
 float: left;
}

.postav img { /*this is just stylistic padding*/
 border: 0px;
 margin: 1% 1% -0.5% 1%;
 vertical-align: center;
}

textarea { /*text area styling if you need them*/
 color: #0e4460;
 background: rgba(215, 242, 250, 0.5);
 border: 1px solid #3fabde;
 border-radius: 5px;
 width: 98%;
 height: 6.7em;
 padding: 2px;
}

As for the main page, here's your index.html, or whatever you wish to name it, annotated.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website Title Here</title>
<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=Hachi+Maru+Pop&family=Kosugi+Maru&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<link href="./style/style.css" rel="stylesheet" type="text/css" media="all">

</head>
<body>

<div id="layout">
<div class="header">
<h5>Site Name</h5>
<h6>Subtitle Here If You Want</h>
</div>

<div id="whole">
<div id="stack">
<nav id="nav">
<h2>Navigation Category 1</h2>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<h2>Navigation Category 2</h2>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<h2>My Link</h2> 
<a href="https://ordainedmotion.neocities.org/" target="_blank">mizumiya</a>
</nav>
</div>

<div id="spread">
<article id="content">
<h1>Content Header</h1>
<div class="postav"><img src="https://files.catbox.moe/tsv0kc.png" align="left" alt=""></div>
<p>Here is the content area with the white background</p>

<h1>Content Header</h1>
<div class="deco">
<div class="postav"><img src="https://files.catbox.moe/tsv0kc.png" align="left" alt=""></div>

<p>This is the content area with a colored background.</p>

</div>
</article>
</div>
</div>
</div>
</body>
</html>

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.

my three girlfriends

and yes they smoke weed

It’s called a blunt…

Not weed cigarette…