TAB NAME HERE

code & instructions

i refuse to package my code as a combined html file. here are the .html and .css files separately. they are self-titled "index.html" and "style.css" so if you rename them, be sure to edit the css link in the head of the html.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<title>TAB NAME HERE</title>
<meta property="og:title" content="EMBED TITLE">
<meta property="og:description" content="EMBED DESCRIPTION">
<meta property="og:image" content="EMBED IMAGE">
<link rel="shortcut icon" href="SHOWS ON TAB">

<link href="./style.css" rel="stylesheet">

<div class="header">
    <h1>this is the “header” div.</h1>
</div>

<div class="side1">
<h4>this is the “side1” div.</h4>
<hr>
<ul>this is an unordered list with link samples.
<li><a href=”/test.html”>list item 1.</a></li>
<li><a href=”/test.html”>list item 2.</a></li>
<li><a href=”/test.html”>list item 3.</a></li>

</div>

<div class="side2">
<h4>this is the “side2” div.</h4>
<hr>
<p>this can be an icon, a navlist, or other information.</p>
</div>

<div class="side3">
<h4>this is the “side3” div.</h4>
<hr>
<p>this can be an icon, a navlist, or other information.</p>
</div>

<div class="content">
<h4>this is the “content” div.</h4>
<hr>
<p>put any main content text in here.</p>
</div>

<div class="footer">
    <h4>this is the “footer” div.</h4>
</div>

</div>
</body>

CSS

body {
    background: #666666;
    background-image: url();
    width: auto;
    height: 120vh;
    padding-top: 5em;
}

h4 {
    text-align: center;
}

.page {
    display: grid;
    grid-template-columns: [left] 3fr [right] 1fr;
    grid-template-rows: [header] auto [top] 1fr [mid] 1fr [bottom] 1fr [footer] auto;
    grid-template-areas:
        "header header"
        "content sidetop"
        "content sidemid"
        "content sidebot"
        "footer footer";
    grid-gap: 1em;
    width: 50vw;
    height: 90vh;
    margin: auto;
    border: 1px solid #ffffff;
    padding: 1em;
    background: #000000;
}

.header {
    grid-area: "header";
    grid-column: left / span 2;
    grid-row: header;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 1em;
}

.content {
    grid-area: "content";
    grid-column: left;
    grid-row: top / span 3;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 1em;
}

.side1 {
    grid-area: "sidetop";
    grid-column: right;
    grid-row: top;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.side2 {
    grid-area: "sidemid";
    grid-column: right;
    grid-row: mid;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.side3 {
    grid-area: "sidebot";
    grid-column: right;
    grid-row: bottom;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.footer {
    grid-area: "footer";
    grid-column: left / span 2;
    grid-row: footer;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 0.5em;
}

kepler's barebones site template

template rules

contact

⠀

code & instructions

HTML

CSS

created by kepler. zomboid.pro