Table Layout!

gradient table layout

Welcome!

This is a free layout for anyone who wants a website but doesn't know what they're doing! This is the same bones I originally use for my Sayuri pages. I would appreciate a link back or a comment in my guestbook so I can see your site (for funsies) but you're free to do what you want. Have fun!

How do I Get the Code?

Copy paste it from here:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title> 
        
        <meta charset="utf-8">
        <meta name="description" content="description"> 
        
        
        <style type=text/css>
        /* feel free to mess around and see what things do but padding and margin might mess up dimentions so just remember that padding (extra space inside things) and margins (extra space around things) take up space that are not acounted for in % widths */
        /* if you can't figure out how invisible divs or table parts are affecting others give them a noticible background to track to figure it out */
        
        /*@font-face { font-family: FontName; src: url(".ttf"); }  to add a font file you can call on (neocities doesn't allow .ttf files anymore if your not a supporter) */
        /*font-family: FontName;  To asign something to be that font */
        
        body { 
        background-color: grey;
        background-image: linear-gradient(red, orange, yellow, green, blue, purple, red);
        /*background-image: url(".png"); if you want a picture background (you can only have a gradient or an image not both) */
        background-repeat: repeat;
        background-size: 20px;
        padding: 0px;
        margin: 0px;
        margin-bottom: 50px;
        overflow-x: hidden;
        overflow-y: auto; /* shows scrollbar only when overflowing*/
        }
        
        div {
        padding: 0;
        margin: 0;
        }
        
        table {
        width: 100%;
        }
        
        td {
        padding: 0;
        margin: 0;
        vertical-align: top;
        }
        
        h1 {
        color: red;
        }
        
        h2 {
        color: green;
        }
        
        h3 {
        color: orange;
        }
        
        h4 {
        color: blue;
        }
        
        h5 {
        color: gold;
        }
        
        h6 {
        color: purple;
        }
        
        p {
        color: black;
        }
        
        /*lists*/
        li {
        color: black;
        }
        
        /*links*/
        a {
        text-decoration: none;
        color: blue;
        background: none; 
        }

/*links when a mouse hovers*/
        a:hover {
        text-decoration: none;
        color: white;
        background: blue; 
        }
        
        /*when someone highlights text*/
        ::selection {
        color: white;
        background: blue; 
        }
        
        /* main div width */
        #main {
        width: 70%;
        padding: 0;
        margin: 0;
        }
        
        /* side divs width */
        #side {
        width: 30%;
        padding: 0;
        margin: 0;
        }
        
        #top {
        background-color: white;
        border: 5px solid black;
        width: 75%;
        height: 130px;
        padding: 1%;
        margin: 3%;
        }
        
        #mainbar {
        background-color: lightgrey;
        border: 5px solid black;
        width: 90%;
        height: 500px;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: auto;
        }
        
        #sidebar {
        background-color: white;
        border: 5px solid black;
        padding: 1%;
        margin: 0px;
        margin-left: 5%;
        margin-top:  3%;
        margin-bottom:  2%;
        width: 80%;
        }
        
        #div {
        background-color: white;
        border: 5px solid black;
        width: 80%;
        padding: 1%;
        margin: 0;
        margin-left: 5%;
        margin-top:  3%;
        }
        
        #fill {
        height: 40px;
        width: 260px;
        }
        
        #gradient_text {
        background: linear-gradient(to right, blue, purple, red, orange, green, blue, purple, red, orange); /*gradient spans entire div so I extended it to center it more on the text*/
        -webkit-text-fill-color: transparent; 
        -webkit-background-clip: text; 
        font-size: 3em;
        margin: 0px;
        margin-top: 15px;
        }
        </style>
    </head>
<body>
<table>

<tr>
<td colspan="2" align="center">
        <div align="center" id="top">

<h1 id="gradient_text">Table Layout!</h1>
            
            <p>gradient table layout</p>
            
        </div>
</td>
</tr>

<tr>
<td id="side">
        <div id="sidebar">
            
            <h2 align="center">Index</h2>
            
            <p align="left"><a href="https://the-322nd-void.neocities.org/layout.side">Sidebar Layout</a></p>
            <p align="left"><a href="home.html">Back</a></p>
            
        </div>
        
        
        
        <div id="sidebar">
            
            <h2 align="center">Another sidebar div</h2>
            
            <p align="left">Because you can</p>
            
        </div>
</td>
<td id="main">
<div id="mainbar">
        <div align="center" id="div">
            
            <h2>Welcome!</h2>
            <p align="left" id="ind">This is a free layout for anyone who wants a website but doesn't know what they're doing! This is the same bones I originally use for my <a href="sayuri.html">Sayuri pages</a>. I would appreciate a link back or a comment in my guestbook so I can see your site (for funsies) but you're free to do what you want. Have fun!</p>
            </div>
            
            <div align="center" id="div">
            <h3>How do I Get the Code?</h3>
            <p>You already have it silly!</p>
            </div>
            
            <div align="center" id="div">
            <h5>Website Resources:</h5>
            <ul align="left">
            <li><a href="https://www.w3schools.com/" target="_blank">W3 Schools</a>- css and html tag reference</li>
            <li><a href="https://neocities.org/" target="_blank">Neocities</a>- free website hosting</li>
            <li><a href="https://www.dragonflycave.com/webmasters" target="_blank">Cave of Drgonflies</a>- guide to html and other tips</li>
            <li><a href="https://www.favicon.cc/" target="_blank">Favicon.cc</a>- free online favicon maker</li>
            </ul>
            </div>
            
            <div align="center" id="div">
            <h5>Graphics:</h5>
            <ul align="left">
            <li><a href="https://foollovers.com/" target="_blank">Fool Lovers</a>- backgrounds and graphics</li>
            <li><a href="https://cinni.net/" target="_blank">Cinni.net</a>- backgrounds, fonts, and graphics</li>
            <li><a href="https://www.asterism-m.com/" target="_blank">Asterism</a>- fonts and graphics</li>
            <li><a href="https://99gifshop.neocities.org/" target="_blank">99 Gif Shop</a>- old web gifs</li>
            <li><a href="https://gifcities.org/" target="_blank">Gif Cities</a>- gifs from old websites</li>
            </ul>
            </div>
            
            <div id="fill"><p></p></div> 
            
            <h6 align="center">Sources:</h6>
            <h6 align="center"><a href="" target="_blank">Link artists when they ask you to!</a></h6>
            
        </div>
</td>
</tr>
</table>
</body>
</html>

Website Resources:

W3 Schools- css and html tag reference
Neocities- free website hosting
Cave of Drgonflies- guide to html and other tips
Favicon.cc- free online favicon maker

Graphics:

Fool Lovers- backgrounds and graphics
Cinni.net- backgrounds, fonts, and graphics
Asterism- fonts and graphics
99 Gif Shop- old web gifs
Gif Cities- gifs from old websites