cool html journal thinggygy :)))

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>topbar title</title>
  <link rel="icon" href="https://website-link.neocities.org/images/topbar-image.png" sizes="any">
	<!-- embed stuff -->
    <meta content="embed title" property="og:title" />
    <meta content="embed description" property="og:description" />
    <meta content="https://website-link.neocities.org/" property="og:url" />
    <meta content="https://website-link.neocities.org/images/embed-image.png" property="og:image" />
    <meta content="#99eaf0" data-react-helmet="true" name="theme-color" />
<!-- i forgot what this below does tbh -->
<meta property="twitter:card" content="summary_large_image">
<meta name="description" content="">


  <!-- dont touch this stuff unless u know what ur during... -->
  <!-- if you wanna change it just mess with the font-family, font-size, a:font-style (how links will look) and background-color properties, save and refresh the site to see if u like it or not!! also note u can click arrows beside the numbers at style to hide them-->
<style>

body{
background-color: #3b5e43;
background-image: url('https://neocities.org/dashboard#');
margin: 0px;
color: #FFFFFF;
}

#all{
width: 630px;
}

#side{
text-align: center;
width: 120px;
height: 97vh;
float: left;
background-color: #00565c;
padding: 10px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #17004a;
}

#sideicon{
border: 1px solid #000000;
}

.sideheader{
font-weight: normal;
margin: 0px 0px 0px 5px;
font-size: 30px;
font-family: 'Special Elite', serif;
}

#aboutheader{
margin: 0px 0px -5px 0px;
}

#about{
text-align: justify;
margin: 0px 0px 0px 0px;
letter-spacing: -0.8px;
}

.divider{
border-bottom: 1px dashed #bbffc4;
}

ul{
padding: 0px;
margin: 0px;
}

li{
list-style-type: none;
margin: 5px 0;
}

#main{
width: 485px;
height: 100vh;
float: left;
background-color: #313c74;
overflow: scroll;
overflow-x: hidden;
}

#header{
background-image: url('https://i.imgur.com/HRdzoxk.png');
background-color: #2a00a2;
height: 70px;
border-bottom: 1px solid #2a00a2;
}

#header h1{
margin: 0px;
font-weight: normal;
color: #ffe6ff;
font-size: 70px;
line-height: 105px;
text-transform: uppercase;
font-family: 'Special Elite', serif;
}

.subheader{
font-weight: normal;
font-size: 30px;
margin: 0px 0px -5px 0px;
padding: 10px 10px 0px 10px;
font-family: 'Special Elite', serif;
}

.postcontainer{
padding: 10px;
position: relative;
}

.iconanddatecontainer{
height: 92px;
border-bottom: 2px dashed #bbffc4;
font-family: 'Special Elite', serif;
}

.icon{
border: 1px solid #3d2120;
}

.posttext{
padding: 0px 15px 0px 15px;
letter-spacing: 0.4px;
text-align: justify;
margin-top: -4px;
}

.icon{
position: absolute;
}

.date{
position: absolute;
right: 10px;
}

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

a:visited{
color: ;
}

a:hover{
font-style: italic;
font-weight: bold;
}

a:active{
font-weight: bold;
font-style: italic;
}

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

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

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

#bg{
position:fixed;
bottom: 0px;
right: 0;
opacity: 0.9;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
z-index: 2;

}

</style>
</head>
<body>
<div id="all">

<div id="main">
 <!-- HEADER TEXT -->
<div id="header"><h1>Journal</h1></div>

<div class="divider"></div>
<div class="divider"></div>
<!-- POST 1 -->
<h2 class="subheader">post 1 title</h2>

<!-- ICON, DATE, MOOD, ETC HERE -->
<div class="postcontainer">
<div class="iconanddatecontainer">
<img src="https://media1.tenor.com/m/O0lyhfKLMFIAAAAC/rofl-emoji.gif" class="icon" width="80px" height="80px">
<div class="date">
<p style="margin:0px;">date: date</p>
<p style="margin:0px;">mood: mood</p>
<p style="margin:0px;">days: status</p>
<p style="margin:0px;">time awake: Xam-Ypm</p>
</div>
</div>
</div>
<!-- dont ask why this needs 3 div end tags, if it works it works, dont question janky looking code as long as it functions -->

<!-- START ENTRY HERE -->
<div class="posttext">
<p style="margin:0px 0px 0px 0px;">texty text text!!! you can add as many p things as u want btw just keep them seperate (p is for paragraph, basic text format :)) )<p>

<p>example of a 2nd p tag being used</p>

</div>
<div class="divider"></div>
</div>
<!-- END OF ENTRY -->



<!-- SIDEBAR STUFF -->
<div id="side">
<!-- SIDE ICON -->
<img src="https://i.postimg.cc/cCB6n5KR/ninja.jpg" id="sideicon">
<!-- SIDE TEXT -->
<h2 class="sideheader" id="aboutheader">zank</h2>
<p id="about">site has been archived no longer in use</p>
<div class="divider"></div>

<h2 class="sideheader">Links</h2>
<ul>
<li><a href="https://zank-funland.neocities.org/">home</a></li>
<li><a href="https://zank-funland.neocities.org/art">art</a></li>
<li><a href="https://zank-funland.neocities.org/studystuff">html games</a></li>

</ul>
<div class="divider"></div>
<div class="divider"></div>
</div>
<!-- CORNER STUFF HERE -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
<div id="bg"><img src="https://i.kym-cdn.com/photos/images/original/000/962/261/2b4.png" width="350px"></div>

<div id="credit"><a href="https://zank-funland.neocities.org/index.html">LOVE URSELF!</a></div>
</div>

</html>