Theme 1

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

<style type="text/css">

html{
 height: 100%;
}

body{
background-image: url('https://i.imgur.com/ZozLbWG.jpg');
margin:0;
padding:0;
line-height: 1.5em;
background-color: #B5CEC7;
height: 100%;
overflow-x: hidden;
font-family: 'Itim', cursive;
}

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

a:visited{
  color: #FFBAA7;
}

a:hover{
  color: #CADCD7;
}

  #maincontainer{
   margin: auto;
   width: 625px;
   margin-top: 15px;
  }

  #sidebar{
    float: right;
    width: 175px;
  }

  #sidebartop{
    background-image: url('https://i.imgur.com/4Htre8x.png'); <!-- sidebar image, 175px radius -->
    background-repeat: no-repeat;
    background-size: cover;
    border: 5px inset #F6FAF9;
    border-radius: 100px;
    width: 175px;
    height: 175px;
    margin-bottom: 10px;
  }

  #sidebarbottom{
    background-image: url('');
    border: 5px inset #F6FAF9;
    border-radius: 10px;
    width: 175px;
    background-color: #fff;
    text-align: center;
  }

  #contentcontainer{
    background-image: url('');
    width: 425px;
    border: 5px inset #F6FAF9;
    border-radius: 10px;
    clear: left;
    background-color: #fff;
  }

  #contentheader{
    background-color: #cadcd7;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px 5px 0px 0px;
    text-align: left;
    border-bottom: 1px solid #A3A6A5;
  }

  #contentheader h1{
    font-size: 35px;
    margin: 0px;
  }

  #contentheader h5{
    margin: 0px;
  }

  #sidebarheader{
    background-color: #cadcd7;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
    border-bottom: 1px solid #A3A6A5;
  }

  #sidebarheader h1{
    margin: 0px;
  }

  ul li{
    background-image: url('https://i.imgur.com/RHBlH2G.gif');
    background-repeat: no-repeat;
    padding-left: 25px;
    font-size: 25px;
    line-height: 25px;
    text-align: left;
    list-style: none;
    font-weight: bold;
  }

  #list{
    margin: 0 auto;
  }

  #content{
    padding: 15px;
    color: #7f8382;
  }

::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
width: 2px;
background-color: #fff;
}

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

::-webkit-scrollbar-thumb:hover {

}

</style>


</head>
<body>
<div id="maincontainer">


<div id="sidebar">

<div id="sidebartop">
</div>

<div id="sidebarbottom">

<div id="sidebarheader">

<h1>Navigate</h1>

</div>

<div id="list">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Misc</a></li>
<li><a href="">Idk</a></li>
</ul>
</div>

<div id="sidebarmisc">
<img src="https://i.imgur.com/YHtkjs0.gif"><img>
</div>

</div>

</div>

<div id="contentcontainer">

<div id="contentheader">
<h1>Welcome</h1>
<h5>sub header</h5>
</div>

<div id="content">
<h1 style="margin:0px;color:#FFBAA7">This is a header</h1>
<p>In hac habitasse platea dictumst. Phasellus condimentum aliquet lorem eget blandit. Curabitur vestibulum dolor neque, et egestas diam feugiat eu. Integer tempus pellentesque tempus. Vestibulum facilisis id ligula a condimentum. Etiam ac neque vehicula, hendrerit nisi at, varius ipsum. Duis blandit purus vitae dictum dapibus.</p>

<img src="https://i.imgur.com/lRJj5OV.gif" style="display:block;margin:0 auto"><img>
<p style="margin:0px;text-align:center">here's an image</p>
<h3 style="margin-bottom:0;color:#FFBAA7">More header</h3>
<p style="margin:0px">Etiam ac neque vehicula, hendrerit nisi at, varius ipsum. Duis blandit purus vitae dictum dapibus. Phasellus condimentum aliquet lorem eget blandit.</p>
</div>

</div>

</div>

</body>
</html>