My Website

copy and paste this into your HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link href="https://fonts.googleapis.com/css?family=Balsamiq Sans" rel="stylesheet"> 
 <title>My Website</title>
<style>
* {
  box-sizing: border-box;
}
  
  /* this is to center the page */
html {
  display: flex;
  justify-content: center;
}

/* highlight color */
::selection {
  background: #f1f5ec;
  color: #c2d8a5;
}

body {
  font-size: 16px;
  font-family: Balsamiq Sans;
  position: relative;
  color: #4d5047;
  background-color: #FCF5F6;
  line-height: 1.5em;
}

.wrapper {
  border: 2px solid lightgrey;
  background-color: white;
  width: 800px;
}

.grid {
  display: grid;
  width: auto;
  height: 100%;
}
  
.grid > div {
 /* every element in .grid, will have these attributes*/
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #b5cea3;
}
  
.element1 > div {
  display: block;
  border-bottom: 1px solid #b5cea3;
  font-size: 20px;
}
  
.element3 {
  background-color: #F5EBE9;
  height: 300px;
}

.element4 {
  height: 300px;
}

.element7 {
  background-color: #EBE6E8;
}

.element {
  background-color: #E8EBE6;
  border-right: 1px solid #b5cea3;
  height: 300px;
}
  
.element1 a {
  text-decoration: none;
}

.element1 a:hover {
  text-decoration: underline;
}

a {
  color: #95ad89;
}

a:hover {
  text-decoration: none;
}
  
.foot {
  padding: 10px;
  border: 1px solid #b5cea3;
  text-align: center;
  background-color: #E8EBE6;
}
</style>
 </head>
  <body>
<div class="border">
  <div class="wrapper">
<div class="grid" style="grid-template-columns: 30% 70%;height:300px;">
  <div class="element">
    <div class="element1">
<div>
 <strong style="color:#BFA6B3">naviagtion</strong> 
</div>
<div>
  <a href="https://neocities.org/">link 1</a>
</div>
<div>
  <a href="https://neocities.org/">link 2</a>
</div>
<div>
  <a href="https://neocities.org/">link 3</a>
  </div>
<div>
  <a href="https://neocities.org/">link 4</a>
</div>
  <div>
  <a href="https://neocities.org/">link 5</a>
</div>
   <div>
  <a href="https://neocities.org/">link 6</a>
</div>
         <div style="border:none;">
  <a href="https://fuchi.neocities.org/">link 7</a>
</div>
    </div>
  </div>
  <div class="element2">
 <img src="https://i.imgur.com/1a6PIjC.jpg" width="200" style="float:right;"> This is my first version 6.0 index. I cleaned the code up and stripped it. You can credit me or don't. I don't really care this is just a bunch of grids.
  </div>
</div>
  <div class="grid" style="grid-template-columns:50% 50%;">
<div class="element3">
  put anything you want in these
    </div>
    <div class="element4">
  </div>
  </div>
      <div class="grid" style="grid-template-columns:26% 54% 20%;height:300px;">
        <div class="element5">
        </div>
<div class="element6">
 </div>
    <div class="element7">
      it's 11:18 PM
    </div>
    </div> 
<div class="foot">
this is your footer.
</div>
 </div>
      </div>
  </body>
</html>

naviagtion

link 1

link 2

link 3

link 4

link 5

link 6

link 7

This is my first version 6.0 index. I cleaned the code up and stripped it. You can credit me or don't. I don't really care this is just a bunch of grids.

put anything you want in these

it's 11:18 PM

this is your footer.