Piplup is ready to take on God

I wont lie, I'm straight up using the same base of HTML & CSS to start all my layouts so far, but that's honestly because I'm lazy. Anyways, this layout is based off my original layout for this website. The one where I made it real quick in photoshop and just basically abused iframes right away. It's kind of funny that despite hating iframes, here I am back to using iframes again. Whatever. It means that when I want to join 80 webrings and what not, I don't have to add it to about 40+ journal entries and another 30 regular pages. Seriously, I looked and my site has like 70 pages or something. That's a lot. And they're all pretty unfinished.

The header of this image is just a place holder yet again. I kinda had no idea what to put on it, and I knew I couldn't make every single layout of YGO or I was just going to bore people. And I couldn't just make every single layout of Kangel or I was also probably going to bore people. So I just did what I did best and grabbed an image, made a blend for a header, and started drawing out all the assets before tossing stuff on this site.

Because of my overwhelming desire to not code iframes, this layout has been drastically modified. It basically doesn't have frames. But if you wanted to convert it to iframes, I wouldn't blame you. Hell, I might include a variant of it that's made to have iframes for the main frame at the very least. Either way, you can stylize this how you want. You can have 1 big frame that has every bit of content in it, or you could have a bunch of smaller posts. Up to you. I kind of honestly keep making these and thinking "Oh yeah, probably good for a blog." Mostly because I'm really bad at responsive design. One day I should really sit down and learn how to do that. Today isn't that day, because unfortunately its 6 am and my remainng braincell is quivering and dying in the distance, as I should have gone to sleep a long time ago. Whatever though.

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.

Outside of your local Waffle House

Alright it's assets time.

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

There's a lot of images this time around. I included the template for the header in case you want to edit it with your own image as well, versus the last one where you'd have to make a whole new header yourself. If you want to change the colors on it & the two headers, feel free to. I don't really care. I make these for fun, and as long as you include a link to me on the credits of your page, I'm not going to care too much. Besides, I made these to be used rather than people lifting people's entire sites and posting them as their own. The background tiles are stuff that came from one of the many pixel resource tumblrs that have been passed around over the ages. I don't know the definitive sources on them, sadly. If you happen to know, please tell me. I'll gladly credit.

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/jefd6a.png');
 background-position: top;
 overflow-x: hidden;
 }
 
 #layout { /*this block makes up the main layout*/
 background: none;
 width: 46.875em;
 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/p594h9.png');
 background-repeat: repeat-x;
 background-position: right; 
 height: 20em;
 overflow-x: auto;
}

h5 {
 font-family: 'Hachi Maru Pop';
 color: #ffffff;
 font-size: 1.5em;
 line-height: 1.5em;
 background: -webkit-linear-gradient(pink, #ff6699);
 position: absolute;
 top: 35%;
 right: 0%;
 margin: 1%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

h6 {
 font-family: 'Hachi Maru Pop';
 color: #ffffff;
 font-size: 1em;
 letter-spacing: 5px;
 background: -webkit-linear-gradient(pink, #ff6699);
 position: absolute;
 top: 45%;
 right: 0%;
 margin: 1%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

h1, h2 {  /*this header is used for the main content*/
font-family: 'Zen Maru Gothic';
color: #d0658e;
margin: 4px;
padding: 3px;
font-size: 1.7em;
margin-bottom: 1px;
}

h3 { /*this header is used for navigation*/
font-family: 'Zen Maru Gothic';
color: #d0658e;
margin: 2px;
padding: 2px;
font-size: 12px;
text-align: left;
}

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

.navcont { /*this groups together the navigation boxes*/
 text-align: center;
 background-image: url('https://files.catbox.moe/nagid0.png');
 border: 4px solid #e699b7;
 width: 13.75em;
 float: right;
 margin: 0.5em;
 }

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

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

.navhead { /*this is the background of the header ontop of the navigation sections*/
 background-image: url('https://files.catbox.moe/j3gu3b.png');
 background-repeat: repeat-x;
 background-position: right; 
 height: 32px;
 overflow: hidden;
}

#content { 
width: 100%; 
}

.contentinner { /*this is a container to put a border around the post. don't add padding to this, or it will mess up how the header looks*/
 font-size: 14px; 
 line-height: 16px;
 font-family: 'Zen Maru Gothic';
 color: #d0658e;
 background-image: url('https://files.catbox.moe/nagid0.png');
 border: 4px solid #e699b7;
 width: 100%;
 position: relative;
 float: right;
 margin: 0.5em;
}

#content A:link, #content A:visited, #content A:active {
color: #b40b50;
text-decoration: none;
font-weight: bold;
}

#content A:hover{ 
color: #ff3487;
text-decoration: line-through;
font-weight: bold;}

.contenthead { /*this is the background of the header above your posts*/
 background-image: url('https://files.catbox.moe/p3suwp.png');
 background-repeat: repeat-x;
 background-position: right; 
 height: 32px;
 overflow: hidden;
}

#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 {
 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: #b40b50; 
 background: rgba(255, 255, 255, 0.5);
 border: 1px solid #e498b7;
 border-radius: 5px;
 width: 98%;
 height: 6.7em;
 padding: 2px;
}

.postliner { /*this is just padding. adjust this to your heart's desire*/
 padding: 1.5%;
}

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 Name</title>
<meta name="description" content="personal blog">
<link rel="icon" href="Favicon URL 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 if you want</h6>
</div>

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

<div class="contentinner">
<div class="contenthead"> 
<h1>Header 1</h1>
</div>
<div class="postliner">
<div class="postav"><img src="./images/av.png" align="left" alt=""></div> 
This is a first content box
</div>
</div>

<div class="contentinner">
<div class="contenthead">
<h2>Header 2</h2>
</div>
<div class="postliner">			
This is a 2nd content box.
</div>
</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.

i'm procrastinating again

arceus take the wheel

Piplup is ready to take on God

Outside of your local Waffle House