Theme 6

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

<style>

body{
height: 100%;
padding-top: 15px;
background-image: url("https://i.imgur.com/Vny6hJB.png");
font-family: 'Pangolin', cursive;
color: #c59c86;
}

#container{
width: 545px;
margin: 0 auto;
}

#header{
margin-bottom: 10px;
font-family: 'Homemade Apple', cursive;
text-align: center;
font-size: 32px;
text-shadow: 2px 2px #fff;
}

#navcontainer{
display: flex;
justify-content: right;
}

#nav{
width: 196px; /* change this width depending on how many links you have */
padding: 5px 5px 0px 5px;
border: 1px solid #cac6f7;
border-bottom: 0px;
text-align: center;
background-color: #fffbeb;
}

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

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

a:visited{
color: #cac6f7;
}

a:hover{
color: #cac6f7;
}

#header h1{
margin: 0px;
}

#contentcontainer{
border: 1px solid #cac6f7;
height: 645px;
width: 545px;
background-color: #fffbeb;
background-image: url('https://i.imgur.com/QCzIwT8.png');
background-repeat: repeat-y;
background-position: top left;
background-size: 37px;
overflow: scroll;
overflow-x: hidden;
}

#content{
padding: 5px 20px 20px 55px;
}

.date{
text-align: right;
border-bottom: 2px dashed #cac6f7;
}

.date p{
margin: 0px;
}

.date h2{
margin-bottom: 0px;
}

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

::-webkit-scrollbar-track {
width: 8px;
background-color: #fffbeb;
}

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

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

</style>

</head>

<body>
<div id="container">

<div id="header">

<h1>~My Blog~</h1>

</div>

<div id="navcontainer">

<div id="nav">

<ul>
<li><a href="URL HERE">Home</a> <span style="color:#cac6f7;">|</span></li>
<li><a href="URL HERE">Profile</a> <span style="color:#cac6f7;">|</span></li>
<li><a href="URL HERE">Art</a> <span style="color:#cac6f7;">|</span></li>
<li><a href="URL HERE">Themes</a></li>
</ul>

</div>

</div>

<div id="contentcontainer">

<div id="content">

<div class="date">
<h2>[8/30/2021]</h2>
<p><b>Mood:</b> hungry <img src="https://i.imgur.com/3sy5qys.gif"><img></p>
</div>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue non velit sit amet commodo. In aliquam nisl lobortis vulputate luctus. In eget lacus libero. Sed ut dui laoreet, cursus mi quis, tincidunt nibh. Quisque lacinia velit ut posuere fringilla. Sed sagittis augue at luctus congue. Aenean sit amet tincidunt velit. Aliquam ut diam molestie, rhoncus sapien vitae, tincidunt purus. Curabitur fermentum suscipit enim sit amet commodo. Nunc turpis nisi, dignissim non lectus eget, semper sollicitudin quam. Aliquam mi dui, ullamcorper a laoreet sed, sodales in lectus. Etiam dignissim ullamcorper est id tristique.</p>

<img src="https://i.imgur.com/d1xBWNF.jpg" style="width:400px;"><img>

<p>Aenean fringilla tortor faucibus euismod volutpat. Vivamus varius, libero non fringilla posuere, purus sem auctor risus, id fermentum erat est a leo. Nulla scelerisque neque purus, non porta odio consequat ut. Proin a euismod turpis. Maecenas sit amet ante est. Nulla condimentum pharetra fringilla. Cras dapibus libero vitae lacus volutpat rutrum.</p>

<img src="https://i.imgur.com/UgoOZrI.jpg" style="width:400px;"><img>

<p>Nunc eu euismod lacus. Praesent quis tristique mauris, at aliquam neque. Mauris arcu tortor, mollis et auctor non, consequat cursus libero. Vivamus vitae sem vestibulum, placerat sapien at, rhoncus libero. Vivamus tincidunt nisi a tellus pharetra, et convallis mi laoreet. Maecenas eget tellus eu augue ullamcorper venenatis. Cras ornare quam erat, vel vehicula nunc pharetra vel. Ut tellus nisl, semper at fringilla quis, tempus at nibh. Integer ut nisl nisl. Mauris nec nibh quis augue vestibulum blandit eget eget massa. Morbi venenatis massa ut nisl congue, non rutrum orci efficitur.</p>

<p>Nunc magna purus, ultricies eu diam quis, facilisis consequat eros. Mauris sollicitudin orci efficitur ipsum feugiat fringilla. Nulla iaculis semper risus nec faucibus. Mauris urna erat, pretium quis dictum eu, mattis vel velit. Praesent id maximus nunc. Curabitur malesuada ullamcorper ipsum, at posuere tellus blandit id. Curabitur scelerisque diam ac nibh gravida imperdiet. Sed aliquet nibh vulputate tortor gravida vestibulum. Ut vel orci et lectus dapibus viverra.</p>

</div>

</div>

</div>

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

</body>

</html>