theme 5

<!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=Short+Stack&display=swap" rel="stylesheet">

<style>

html{
height: 100%;
}

body{
height: 100%;
font-family: 'Short Stack', sans-serif;
}

#container{
margin: 0 auto;
width: 545px;
border: 2px solid black;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
}

#innercontainer{
width: 510px;
border: 2px solid black;
padding: 20px;
}

#headerimage{
display: block;
margin-left: auto;
margin-right: auto;
width: 160px;
margin-top: 15px
}

h1{
border-bottom: 8px solid black;
margin-top: 5px;
}

h2{
border-bottom: 2px solid black;
}

h3{
text-align: right;
border-bottom: 2px solid black;
font-weight: normal;
}

#content{
padding: 10px 10px 10px 10px;
border-bottom: 8px solid black;
overflow: hidden;
}

#left{
float: left;
width: 245px;
}

#right{
float: right;
width: 200px;
text-align: right;
}

#content2{
padding: 10px 10px 10px 10px;
overflow: hidden;
}

#left2{
float: left;
width: 245px;
}

#right2{
float: right;
width: 200px;
}

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

#nav{
text-align: right;
border-bottom: 2px solid black;
}

#nav ul,
#nav li{
display: inline;
}

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

a:hover{
color: #dfa900;
}

a:visited{
color: #dfa900;
}

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

::-webkit-scrollbar-track{

}

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

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

</style>

</head>

<body>

<div id="container">

<div id="innercontainer">

<img id="headerimage" src="https://i.imgur.com/st5SKXS.png"><img>

<h1>Header</h1>
<h2>Sub Header</h2>
<div id="nav">
<ul>
<li><a href="">Link |</a></li>
<li><a href="">Link |</a></li>
<li><a href="">Link |</a></li>
<li><a href="">Link</a></li>
<li></li>
</ul>
</div>

<div id="content">
<div id="left">
<p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ligula a diam faucibus, laoreet commodo nulla ultricies.</p>
<p>Integer ultrices dignissim semper. Mauris dolor sem, dignissim et pulvinar quis, laoreet eu lacus.</p>
<p>Duis vel justo nibh. Ut vel fringilla arcu. Aliquam ut gravida felis. Maecenas quis justo aliquam, molestie odio eget, ultrices est.</p>
<p style="margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div id="right">
<img src="https://i.imgur.com/A2EdxxS.png" style="width:200px;"><img>

<p style="margin:0px;text-align:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel justo nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div id="content2">
<div id="left2">
<img src="https://i.imgur.com/eWPXgq6.gif" style="width:245px;"><img>
</div>

<div id="right2">
<p style="margin:0;">Integer ultrices dignissim semper. Mauris dolor sem, dignissim et pulvinar quis, laoreet eu lacus.</p>

<p>Duis vel justo nibh. Ut vel fringilla arcu. Aliquam ut gravida felis. Maecenas quis justo aliquam, molestie odio eget.</p>
</div>
</div>


</div>

</div>

<div id="credit"><a href="https://repth.neocities.org/index.html"><span style="color:#000;">@Repth</span></a></div>

</body>

</html>