Theme 13

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme 12</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=Lora:ital@1&display=swap" rel="stylesheet">

<style>

body{
background-color: #d1bfb6;
}

#container{
position: absolute;
top: 8%;
left: 14%;
background-color: #fff;
width: 447px;
padding: 20px;
}

#headercontainer{
position: relative;
width: 447px;
height: 327px;
background-image: url('https://i.imgur.com/qGJhXuG.png'); /* 447x327 image */
background-size: 100% 100%;
}

#header{
position: absolute;
bottom: -12px;
font-size: 23px;
text-align: right;
font-family: 'Lora', serif;
width: 100%;
letter-spacing: 28px;
text-shadow: 0px 0px 4px #fdfdfc;
color: #FDFDFC;
}

#header h1{
margin: 0px;
}

#nav{
position: absolute;
left: 0%;
top: 35%;
}

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

#nav a{
font-family: 'Arial';
letter-spacing: 5px;
padding: 1.5px;
font-size: 8px;
text-transform: uppercase;
background-color: #fff;
display: block;
margin-bottom: 11px;
width: 120px;
text-align: center;
text-decoration: none;
color: #89605e;
}

#content a{
text-decoration: none;
color: #ada39c;
}

#credit a{
text-decoration: none;
}

#credit a:hover{
color: #fff;
}

a:visited{
color: #89605e;
}

#nav a:hover{
color: #d1bfb6;
}

#content a:hover{
color: #89605e;
}

#content{
font-family: 'Tahoma', sans-serif;
text-align: justify;
}

#content h2{
margin: 20px 0px 0px 0px;
font-family: 'Verdana', sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 11px;
color: #ada39c;
font-weight: normal;
}

#content p{
margin: 5px 0px 0px 0px;
letter-spacing: 1px;
font-size: 11px;
line-height: 14px;
color: #636159;
}

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

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

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

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

</style>

</head>

<body>

<div id="container">

<div id="headercontainer">

<div id="nav">
<ul>
<li><a href="URL HERE">home</a></li>
<li><a href="URL HERE">about</a></li>
<li><a href="URL HERE">blog</a></li>
<li><a href="URL HERE">stuff</a></li>
<li><a href="URL HERE">misc</a></li>
</ul>
</div>

<div id="header"><h1>welcome</h1></div>

</div>

<div id="content">

<!-- REPLACE CONTENT BELOW WITH YOUR CONTENT -->

<h2>Heading here</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit pharetra porta. Cras massa mi, placerat sit amet nisi sed, imperdiet varius ante. Vestibulum ullamcorper vitae nisi et sodales. Aenean nisl mi, dapibus id interdum et, bibendum sed elit. Fusce molestie, est vitae sollicitudin scelerisque, lacus odio tincidunt tellus, finibus volutpat mauris massa id est. Nunc fermentum ligula quis finibus feugiat.</p>

<p><i>Ut justo nibh, <a href="">ornare</a> ut blandit at.</i></p>

<p><b>In a rhoncus erat.</b></p>

<!-- END CONTENT -->

</div>

</div>

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

</body>

</html>