Theme 28

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme 28</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=Noto+Serif&display=swap" rel="stylesheet">

<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=Mate+SC&display=swap" rel="stylesheet">

<style>

body{
background-color: #C4A47A;
font-family: 'Noto Serif', serif;
}

#all{
width: 500px;
position: absolute;
left: 8%;
top: 5%;
}

#header{
border: 10px solid #7e644a;
height: 140px;
width: 461px;
background-image: url('https://i.imgur.com/RWA9vyH.png');
position: relative;
padding: 10px;
}

#header h1{
position: absolute;
line-height: 100px;
left: 40px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 27px;
font-family: 'Mate SC', serif;
text-shadow: 0px 0px 10px #cacda1;
color: #9d8974;
}

#headerborder{
width: 451px;
height: 129px;
border: 5px solid #7e644a;
opacity: 0.7;
}

#nav{
padding: 5px;
width: 490px;
text-align: center;
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
}

#box{
background-color: #fff;
width: 460px;
border: 10px solid #7e644a;
padding: 10px;
}

#boxborder{
width: 420px;
border: 5px solid #a3907e;
padding: 15px;
text-align: justify;
font-size: 13px;
letter-spacing: 0px;
color: #524333;
}

#boxborder h2{
font-weight: normal;
letter-spacing: 1px;
font-size: 15px;
text-transform: uppercase;
margin: 0px;
background-image: linear-gradient(to right, #bfc291 , #fff);
padding-left: 2px;
color: #fff;
}

#nav a{
color: #fff;
text-decoration: none;
}

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

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

a:hover{
color: #7e644a;
}

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

::-webkit-scrollbar-track{
background-color: transparent;
}

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

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

#credit a{
color: #fff;
text-decoration: none;
}

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

</style>

</head>

<body>

<div id="all">

<div id="header">

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

</div>

<div id="nav">
<a href="">home</a>
<a href="">about</a>
<a href="">gallery</a>
<a href="">blog</a>
<a href="">links</a>
<a href="">follow</a>
<a href="">other</a>
</div>

<div id="box">

<div id="boxborder">

<h2>header here</h2>

<p><b>Lorem ipsum dolor</b> <i>sit amet, consectetur</i> <u>adipiscing elit. Quisque</u> ultrices neque id ex aliquam pharetra. Nulla turpis ligula, molestie in rutrum vehicula, varius ut nisi. Mauris ac enim arcu. Aliquam consequat nisi vitae nisl egestas, non fringilla nisl pellentesque.</p>

<p><a href="">Aliquam erat</a> volutpat. Cras id gravida justo, sit amet blandit ipsum. Quisque ut ante non felis faucibus elementum. Nunc auctor vel turpis quis pharetra. Etiam sit amet feugiat nisi. Sed eu efficitur tellus.</p>

<p>Fusce dapibus pretium tortor sed molestie. Maecenas in ligula vitae eros rhoncus lacinia. Mauris congue urna id sagittis tempus. Curabitur vel pharetra eros. Sed pellentesque ligula eget rhoncus mollis.</p>

<h2>header here</h2>

<p>Proin nec nisi mauris. Cras dictum ac tellus dictum varius. Curabitur euismod elementum neque quis facilisis. Etiam posuere nisi ac faucibus efficitur. Pellentesque ut lectus erat.</p>

<p>Sed gravida dui ut convallis tincidunt. Nunc eget accumsan justo, in pulvinar purus. Ut leo elit, pharetra tempus diam bibendum, aliquam rutrum libero. Nulla dapibus auctor quam non rutrum.</p>

<img style="width:420px;display:block;margin:0 auto;opacity:0.9" src="https://i.imgur.com/z58ZAyQ.jpg">

</div>

</div>

</div>

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

</body>

</html>