The Drawing Board

EVERGREEN

<html>
  <head>
    <title>Evergreen</title>
      <link rel="icon" type="image/x-icon" href="https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/pixels/favicons/1361.gif">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Lay in the meadow, breath in the air">
</head>
<body>
<div id="wrapper">
<main>
<header>
<div id="title">
Your Title Here
</div>
</header>
<div id="flexbox">
<aside>
<div id="outer1">
<div id="inner1">
<div id="nav">
<h3 id="side">
placeholder
</h3>
<div id="links">
<a href=""><button>link 1</button></a>
<a href=""><button>link 1</button></a>
<a href=""><button>link 1</button></a>
<a href=""><button>link 1</button></a>
<a href=""><button>link 1</button></a>
<a href=""><button>link 1</button></a>
</div>
</div>
<img id="stamp" src="https://file.garden/ZeMv0T685jeI5jqP/stamps/1844.gif">
<img id="stamp" src="https://file.garden/ZeMv0T685jeI5jqP/stamps/261.gif">
<img id="stamp" src="https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/stamps/1947.jpg">
</div>
</div>
</aside>
<div id="content">
<div id="outer1">
<div id="inner1">
<div id="inner2">

<div id="box1"><h3>NAME <img src="https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/pixels/favicons/1433.png"> AGE <img src="https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/pixels/favicons/1433.png"> PRONOUNS</h3></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus faucibus dolor, quis rhoncus nibh venenatis vel. Nullam justo felis, iaculis mollis pulvinar aliquam, maximus tempor urna. Sed sit amet turpis ullamcorper, molestie tortor nec, semper odio. Suspendisse a arcu sit amet diam fermentum finibus eget id sem. Maecenas mollis augue non luctus venenatis. Phasellus porttitor leo eu augue ullamcorper dignissim at ut nisl. Suspendisse congue malesuada diam vel dignissim. Sed luctus eros ut fringilla aliquam. Maecenas eget enim quam. Maecenas faucibus dolor turpis, eu bibendum urna dictum at. Suspendisse sed nunc elit. Nam orci erat, elementum vitae arcu rutrum, tincidunt commodo odio. Donec eget pharetra quam. Quisque ligula lectus, porttitor nec aliquam et, facilisis id justo.

Praesent nec ornare sem. Nunc nec feugiat diam. Nullam eu libero pulvinar, consequat ipsum vitae, dignissim dui. Phasellus feugiat imperdiet porta. Duis iaculis consequat elit, sed eleifend nisi placerat at. Donec molestie massa non ipsum sagittis sollicitudin. Nunc id libero sed velit consequat aliquam. Praesent leo neque, commodo a pretium a, elementum vel mauris. Pellentesque vulputate, ipsum eu molestie dignissim, neque erat varius ipsum, non feugiat nisl nulla ullamcorper nunc. Etiam bibendum urna urna, rhoncus rhoncus justo fringilla non. Nulla mauris risus, accumsan interdum enim eget, posuere fringilla nisi. Sed at odio pretium, ullamcorper dolor vel, rutrum diam. Nulla sollicitudin semper accumsan. 
</div>
</div>
</div>
</div>
</div>
<footer>
2025 - 2025
hosted on <a href="https://neocities.org/">neocities</a>
</footer>
</main>
</div>
<img id="pagedoll" src="https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/1483.gif">
<style>

body {
background-image:url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/foregrounds%20-%20Image%2079.png),url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/backgrounds/dither4.png);
background-position:center bottom;
background-size:cover;
  scrollbar-color: #ccffaa white;
  scrollbar-width: thin;
}

main {
margin:0 auto;
width:50%;
background-image:linear-gradient(rgba(212, 248, 255,0.6),rgba(255,255,255,0.6),rgba(204,255,170,0.4) 42%,rgba(118, 150, 63,0.3) 45%,rgba(204,255,170,0.4) 48%,rgba(255,255,255,0.6) 80%),url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/184.png);
border:1px solid #76963f;
background-position:center bottom;
background-size:cover;
border-radius:5px;
box-shadow:0 1px 5px #ccc;
box-sizing:border-box;
margin:1em auto;
padding:10px;
}

header {
background-image:linear-gradient(#ffffff, #ccffaa);
height:100px;
border:2px outset #ccffaa;
}

#title {
text-align:center;
box-sizing:border-box;
padding:25px;
width:100%;
font-size:40px;
font-weight:bold;
}

#nav {
background:#fff;
border:1px solid black;
box-sizing:border-box;
text-align:center;
font-size:12px;
}

#side {
background-color:#ccffaa;
background-image:linear-gradient(#ffffff, #ccffaa);
width:100%;
margin:0 auto;
border:1px outset #ccffaa;
border-width:0px 0px 1px 0px;
font-size:90%;
}

#links {
background-image:url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/foregrounds%20-%20Image%2026.png);
background-size:cover;
}

li {

}

a {
width:50px;
font-weight:bold;
color:black;
transition:0.1s;
}

a:hover {
color:#400000;
font-style:italic;
}

#flexbox {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
background-image:linear-gradient(rgba(204,255,170,0.5),rbga(204,255,170,0.0));
height:420px;
}

#outer1 {
background-image:url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/borders/1.gif),url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/borders/3.gif);
background-position:top left,bottom left;
background-repeat:repeat-x,repeat-x;
margin:3px 0;
padding:30px 0;
height:100%;
}

#outer2 {
border:1px solid ;
}

#inner1 {
background-color:#fff;
background-image:linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,1)),url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/foregrounds%20-%20Image%2026.png);
background-size:cover;
padding:10px;
height:100%;
}

#inner2 {
box-sizing:border-box;
padding:5px;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
background-image:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/metro_9.png);
background-size:cover;
text-shadow:0px 0px 5px white;
}

aside {
max-width:25%;
height:350px;
box-sizing:border-box;
padding:5px;
margin:0 auto;
text-align:center;
}

#content {
margin:0 auto;
height:350px;
max-width:75%;
box-sizing:border-box;
padding:5px;
}

#box1 {
width:100%;
background-color:white;
text-align:center;
color:#76963f;
}

button {
width:100%;
border:0px solid transparent;
background-color:transparent;
background-image:linear-gradient(transparent, white),linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0));
height:auto;
transition:0.1s;
text-align:left;
}

button:hover {
background-image:linear-gradient(transparent, white),linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
font-weight:bold;
}

#stamp {
margin:3px;
}
footer {
text-align:center;
background-color:white;
padding:7px;
background-image:url(https://file.garden/ZeMv0T685jeI5jqP/website/general/graphics/transparents/foregrounds%20-%20Image%2080.png);
background-size:100% 50px;
background-position:bottom;
margin:6px;
}

#pagedoll {
position:fixed;
right:10px;
bottom:10px;
max-width:300px;
display:block;
}

@media only screen and (max-width:800px) {

#stamp {
width:90%;
}
aside {
width:100%;
box-sizing:border-box;
}

main {
width:90%;
}

#pagedoll {
display:none;
}

#content {
margin:0 auto;
width:100%;
box-sizing:border-box;
padding:5px;
}

}
</style>
</body>
</html>

credits :
foollovers for the scalloped border
frutiger aero archive for some of the images
stamp credits can be found on my graphics page