Theme 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme 4</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=Berkshire+Swash&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=Libre+Baskerville&display=swap" rel="stylesheet">

<style>

   html{
height: 100%;
}

   body{
height: 100%;
background-color: #d1b0a9;
background-image: url('https://i.imgur.com/buXqoMP.gif');
background-repeat: repeat-x;
background-position: top left;
}

#container{
background-image: url('https://i.imgur.com/QHvYhSS.png');
background-repeat: no-repeat;
width: 637px;
height: 660px;
border: 1px solid black;
margin: 0 auto;
}

#header{
text-align: center;
font-family: 'Berkshire Swash', cursive;
color: #afa650;
text-shadow: 2px 2px #646041;
}

#header h1{
margin: 10px;
}

#innercontainer{
display: flex;
justify-content: center;
align-items: center;
}

#box{
background-color: rgba(255, 255, 255, 0.6);
height: 531px;
width: 505px;
text-align: center;
color: #7f6c5d;
overflow: scroll;
overflow-x: hidden;
padding: 0px 15px 15px 15px;
text-shadow: 1px 1px #fff;
font-family: 'Libre Baskerville', serif;
font-size: 14px;
}

#nav{
background-color: rgba(232, 203, 201);
width: auto;
margin-left: -15px;
margin-right: -15px;
}

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

#box h2{
font-family: 'Berkshire Swash', cursive;
font-size: 25px;
color: #ce9e9c;
}

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

a:hover{
color: #a7a05f;
}

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

::-webkit-scrollbar-track{

}

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

</style>

</head>

<body>

<div id="container">

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

<div id="innercontainer">

<div id="box">

<div id="boxcontent">
<div id="nav">
<ul>
<li><a href="">Link 1</a> |</li>
<li><a href="">Link 2</a> |</li>
<li><a href="">Link 3</a> |</li>
<li><a href="">Link 4</a> |</li>
<li><a href="">Link 5</a></li>
</ul>
</div>

<h2>Header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dolor quis ante sollicitudin hendrerit. Fusce porta mollis dui, a interdum dolor iaculis id. Cras tincidunt mauris ut mauris fringilla, sed cursus tellus sodales.</p>

<img src="https://i.imgur.com/Zwl7xRU.gif" style="width:90px;"><img>

<p>Nunc sed turpis augue. Curabitur sollicitudin eros rhoncus justo tempus, a suscipit risus posuere. Vivamus lacinia orci vel urna feugiat, et tempor neque vestibulum. Morbi volutpat odio sed urna commodo, vehicula euismod massa pellentesque. Sed eleifend aliquam tellus.</p>

<img src="https://i.imgur.com/jGiFiwr.png" style="width:90%;"><img>

<p><b>Nam nec tempor nisi, in viverra dolor. Donec neque nunc, tempus at augue ut, dapibus luctus neque. Vivamus porttitor purus quis metus condimentum finibus. Aenean eget augue cursus, dapibus risus non, dapibus diam. Ut a rutrum mi, eget egestas sem.</b></p>

<p>Sed id arcu tristique velit sagittis tristique. Vestibulum dapibus et massa vitae iaculis. Praesent in est ultricies, imperdiet sem quis, volutpat libero. Quisque rhoncus vel quam ut finibus. In quis nunc vel nunc feugiat tempor et nec massa. Ut porta varius sagittis.
</p>

<p>Nunc sed turpis augue. Curabitur sollicitudin eros rhoncus justo tempus, a suscipit risus posuere. Vivamus lacinia orci vel urna feugiat, et tempor neque vestibulum. Morbi volutpat odio sed urna commodo, vehicula euismod massa pellentesque. Sed eleifend aliquam tellus.</p>

<p>Nam nec tempor nisi, in viverra dolor. Donec neque nunc, tempus at augue ut, dapibus luctus neque. Vivamus porttitor purus quis metus condimentum finibus. Aenean eget augue cursus, dapibus risus non, dapibus diam. Ut a rutrum mi, eget egestas sem.</p>
</div>

</div>

</div>

</div>

</body>

</html>