Theme 16

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

<style>

body{
background-color: #c6bfa2;
}

#all{
position: absolute;
right: 20%;
}

#container{
width: 495px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

#header{
position: relative;
z-index: 3;
width: 495px;
height: 493px;
background-image: url('https://i.imgur.com/ZiPV1RT.png');
background-size: 100% 100%;
}

#header h1{
text-transform: uppercase;
font-weight: normal;
font-size: 20px;
font-family: serif;
letter-spacing: 2px;
color: #948061;
text-shadow: 0px 0px 8px #fff;
position: absolute;
right: 60px;
top: 35px;
}

#box{
background-color: #fff;
font-family: serif;
width: 380px;
position: absolute;
top: 400px;
padding: 78px 10px 10px 10px; /* you can change the 78px to adjust where your content starts */
text-align: justify;
}

#box h2{
margin: 0px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 2px;
color: #9c8b72;
font-size: 14px;
text-align: right;
}

#box p{
margin: 0px;
letter-spacing: 1px;
font-size: 12px;
color: #635641;
}

#nav{
position: relative;
z-index: 5;
}

#nav ul, li{
display: inline;
list-style-type: none;
padding: 0px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
}

a{
text-decoration: none;
color: #997ea8;
}

a:visited{
color: #997ea8;
}

a:hover{
color: #6f4f80;
}

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

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

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

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

#credit a{
color: #fff;
}

#credit a:hover{
color: #6f4f80;
}

</style>

</head>

<body>

<div id="all">

<div id="container">

<div id="header">
<h1>title here</h1>
</div>

<div id="box">

<div id="nav">
<ul>
<li><a href="">home</a> |</li>
<li><a href="">about</a> |</li>
<li><a href="">gallery</a> |</li>
<li><a href="">blog</a> |</li>
<li><a href="">misc</a></li>
</ul>
</div>

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

<h2>title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec magna placerat, eleifend augue eu, pharetra augue. Duis feugiat purus id nulla dictum, eget malesuada eros vestibulum. Vestibulum ullamcorper pharetra felis ac laoreet. Donec vehicula varius justo, et tristique augue commodo at. Nullam feugiat dolor at libero suscipit iaculis. Phasellus fermentum velit at lacus euismod pellentesque.</p>

<!-- END OF CONTENT -->

</div>

</div>

</div>

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

</body>

</html>