Theme 7

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme 7</title>

<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=VT323&display=swap" rel="stylesheet">

<style>

html{
height: 100%;
}

body{
height: 100%;
background-image: url('https://i.imgur.com/0fbQIP6.png');
color: #733100;
font-family: 'VT323', monospace;
}

#container{
width: 800px;
margin: 0 auto;
}

#header{
border: 8px solid #CECECE;
border-radius: 25px;
box-shadow: 0px 0px 5px 0px #cecece;
padding: 10px;
text-align: center;
margin: 0px 0px 12px 0px;
background-color: #fff;
font-size: 25px;
}

#header h1{
margin: 0px;
text-shadow: 1px 1px 3px #bcbcbc;
}

#contentcontainer{
margin: 0px 0px 15px 0px;
overflow: hidden;
}

#nav{
float: left;
width: 150px;
border-radius: 8px 0px 0px 8px;
text-align: center;
margin: 5px;
}

#navheader{
background-color: #FF8400;
padding: 10px;
border-radius: 8px 0px 0px 0px;
font-size: 20px;
box-shadow: 0px 0px 3px 0px #bcbcbc;
}

#nav h2{
margin: 0px;
}

#nav ul, li{
list-style-type: none;
padding-left: 0px;
margin: 0px;
font-size: 22px;
}

#nav li{
background-color: #F7EFA5;
margin: 5px 0px 5px 0px;
padding: 10px;
box-shadow: 0px 0px 3px 0px #bcbcbc;
}

a{
text-decoration: none;
color: #733100;
}

a:hover{
color: #FF8400;
}

a:visited{
color: #733100;
}

#lastlink{
border-radius: 0px 0px 0px 8px;
}

#content{
float: right;
width: 630px;
background-color: #F7EFCE;
border-radius: 5px;
border: 0px solid #DECEC6;
box-shadow: 0px 0px 5px 0px #bcbcbc;
margin: 5px;
}

#contentheader{
background-color: #FF8400;
border-radius: 5px 5px 0px 0px;
padding: 8px 8px 8px 15px;
font-size: 20px;
}

#contentheader h2{
margin: 0px;
}

#innercontent{
padding: 0px 15px 15px 15px;
font-size: 19px;
}

#innercontent h3{
border-bottom: 3px dotted #733100;
}

#footer{
border: 2px solid #B5BDA5;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #cecece;
background-color: #DEE7D6;
padding: 3px
font-size: 12px;
}

#footer p{
margin: 0px;
text-align: center;
}

::-webkit-scrollbar{
width: 8px;
}

::-webkit-scrollbar-track{
background-color: #fff;
}

::-webkit-scrollbar-thumb{
background-color: #cecece;
}

#credit{
   font-size: 15px;
   position: fixed;
   bottom: 0;
   right: 0;
}

</style>

</head>

<body>

<div id="container">

<div id="header"><h1>Site Header</h1></div>

<div id="contentcontainer">

<div id="nav">
<div id="navheader"><h2>Nav</h2></div>

<!-- links go here -->
<ul>
<li><a href="URL HERE">Link</a></li>
<li><a href="URL HERE">Link</a></li>
<li><a href="URL HERE">Link</a></li>
<li><a href="URL HERE">Link</a></li>
<li id="lastlink"><a href="URL HERE">Link</a></li> <!--put last link here -->
</ul>
</div>

<div id="content">
<div id="contentheader"><h2>Header</h2></div>

<div id="innercontent"> <!-- main content goes here -->

<h3>Welcome</h3>

<p style="clear:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit vestibulum nulla, vitae eleifend ligula consequat vitae. Aenean est erat, feugiat eu arcu sit amet, ornare efficitur velit. Phasellus vitae ultrices augue. Aenean non risus ut nisl eleifend scelerisque.<br><br>

<img src="https://i.imgur.com/YHtkjs0.gif" style="float:left;margin:0px 10px 0px 0px;"><img>

In viverra suscipit nisi nec accumsan. Pellentesque aliquam lorem vitae porta congue. Sed mollis in ipsum nec dapibus. Praesent consectetur ut ex a gravida. Aliquam eu quam porta, convallis metus finibus, finibus odio.<br><br>

Nam tincidunt at velit et sollicitudin. Phasellus consectetur dignissim risus, eget finibus nisl pellentesque sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit vestibulum nulla, vitae eleifend ligula consequat vitae. Aenean est erat, feugiat eu arcu sit amet, ornare efficitur velit. Phasellus vitae ultrices augue. Aenean non risus ut nisl eleifend scelerisque.</p>

</div> <!-- end of main content -->

</div>

</div>

<div id="footer"><p>footer 2021</p></div>

</div>

<div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>

</body>

</html>