Theme 14

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

<style>

body{
background-color: #f0e6df;
color: #5f5e5c;
}

#container{
background-color: #fff;
width: 700px;
margin: 7% auto auto auto;
padding: 10px;
overflow: hidden;
}

#header{
position: relative;
border: 1px solid #a79184;
height: 170px;
text-transform: uppercase;
font-size: 12px;
font-family: 'Georgia', serif;
letter-spacing: 2px;
text-shadow: 0px 0px 10px #fff;
color: #a79184;
margin-bottom: 10px;
background-image: url('https://i.imgur.com/wrS20wW.png');
}

#header h1{
margin: 0px;
position: absolute;
right: 15px;
bottom: 55px;
font-weight: normal;
}

#header h2{
margin: 0px;
position: absolute;
right: 15px;
bottom: 40px;
font-weight: normal;
font-size: 11px;
}

#side{
border: 1px solid #7a9d98;
width: 185px;
margin-right: 10px;
float: left;
overflow: hidden;
}

#sideheader{
text-align: right;
text-transform: uppercase;
font-size: 12px;
font-family: 'Georgia', serif;
padding: 5px;
letter-spacing: 2px;
color: #a79184;
}

#sideheader h2{
margin: 0px;
font-weight: normal;
border-bottom: 2px solid #d6dbda;
}

#profilecontent{
padding: 0px 5px 5px 5px;
font-family: 'Tahoma', sans-serif;
font-size: 12px;
}

#profilecontent p{
margin: 0px;
}

#nav{
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0px 5px 0px;
font-family: serif;
}

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

a{
text-decoration: none;
color: #7a9d98;
}

a:visited{
}

a:hover{
text-decoration: underline;
}

#nav a{
text-transform: uppercase;
background-color: #7a9d98;
padding: 1px 0px 1px 0px;
display: block;
margin-bottom: 2px;
width: 175px;
text-align: center;
text-decoration: none;
color: #fff;
}

#nav a:visited{
}

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

#main{
border: 1px solid #7a9d98;
float: right;
width: 501px;
}

.mainheader{
text-align: right;
text-transform: uppercase;
font-size: 12px;
font-family: 'Georgia', serif;
padding: 5px;
letter-spacing: 2px;
padding: 5px;
color: #a79184;
}

.mainheader h2{
font-weight: normal;
margin: 0px;
border-bottom: 2px solid #dbcdc5;
}

.maincontent{
padding: 0px 5px 5px 5px;
font-family: 'Tahoma', sans-serif;
font-size: 12px;
text-align: justify;
}

.maincontent p{
margin: 0px;
}

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

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

::-webkit-scrollbar-thumb{
background-color: #7a9d98;
}

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

</style>

<body>

<div id="container">

<div id="header"><h1>header here</h1>
<h2>sub header here</h2>
</div>

<div id="side">

<div id="sideheader"><h2>profile</h2></div>

<div id="profilecontent">
<p><b>name:</b> name</p>
<p><b>interests:</b> interests</p>
<p><b>hobbies:</b> hobbies</p>
<p><b>likes:</b> likes</p>
<p><b>dislikes:</b> dislikes</p>
</div>

<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">gallery</a></li>
<li><a href="URL HERE">blog</a></li>
<li><a href="URL HERE">other</a></li>
<li><a href="URL HERE">misc</a></li>
<li><a href="URL HERE">misc</a></li>
</ul>
</div>

</div>

<div id="main">

<div class="mainheader"><h2>title here</h2></div>

<div class="maincontent">

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

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut velit quis tellus viverra vestibulum. Nulla gravida, lorem at congue posuere, elit nisi cursus ipsum, sed consectetur elit purus id erat. Integer imperdiet, metus vehicula pharetra volutpat, est neque pellentesque turpis, a tempor mauris velit finibus nulla. Vestibulum fringilla facilisis odio, pulvinar ornare mauris malesuada id.</p>
<br>
<p><b>Suspendisse</b> <i>odio</i> <a href="">magna</a></p>

</div>

<div id="othercontent">
<div class="mainheader"><h2>title here</h2></div>

<div class="maincontent">

<p>Donec at pharetra magna. Proin sit amet ligula quis nisl euismod euismod. Nunc feugiat, massa nec condimentum mollis, mi nibh pretium dolor, sed maximus velit odio sed dolor. Proin ac orci eget eros aliquam bibendum sit amet ac orci. Nulla felis ante, aliquam eget fermentum eu, condimentum sit amet arcu. Duis pretium massa turpis, vel iaculis eros placerat sit amet. Cras interdum erat sit amet orci lobortis gravida. Vivamus fringilla nibh quis justo convallis, id vestibulum purus pretium. Donec erat quam, ultricies sed hendrerit.</p>

<!-- END CONTENT -->

</div>

</div>

</div>

</div>

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

</body>

</html>