Hopeful

<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">
<style>
.np1-body{
 width: 500px;
 background: #f1f1f1;
 padding: 2px;
 border: 1px solid #ccc;
 margin: 20px auto;
}

.np1-extra{
 background: #fbfbfb;
border: 1px solid #ccc;
padding: 5px;
}

.np1-header{
 height: 90px;
 background: #161616;
 padding: 10px;
 border: 1px solid #fbfbfb;
}

.np1-header-text{
 text-transform: uppercase;
 font-family: 'VT323', monospace;
 color: #fbfbfb;
 font-size: 45px;
 margin-left: 37px;
 margin-top: 30px;
 letter-spacing: 4px;
}

.np1-header b{
 color: #26D481;
}

.np1-header-text-sub{
 font-family: 'Overpass Mono', monospace;
 font-size: 10px;
 margin-left: 25px;
 color: #fbfbfb;
}

.np1-right{
 background: url(https://via.placeholder.com/150x400);
 width: 150px;
 height: 400px;
 margin-left: 336px;
 border: 1px solid #26D481;
 margin-top: 1px;
}

.np1-post{
 border: 1px solid #ccc;
 padding: 40px;
 width: 253px;
 margin-top: -402px;
 height: 280px;
 overflow: scroll;
 text-align: justify;
 font-size: 14px;
}

.np1-post b{
 font-family: 'Overpass Mono', monospace;
 color: #26D481;
 font-size: 20px;
}

.np1-bottom{
 padding: 10px;
 background: #26D481;
 width: 315px;
 margin-top: 1px;
 font-family: 'Overpass Mono', monospace;
 font-size: 10px;
 text-align: center;
 color: #fbfbfb;
}
</style>
<div class="np1-body">
<div class="np1-extra">
 <div class="np1-header">
 <div class="np1-header-text">

<b>hope</b>ful

</div>
 <div class="np1-header-text-sub">

feeling or inspiring optimism

</div>
 </div>
 <div class="np1-right"></div>
 <div class="np1-post">

Lorem <b>ipsum dolor sit amet</b>, consectetur adipiscing elit. Etiam quis nibh commodo, laoreet dolor nec, viverra nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec faucibus leo at nunc laoreet bibendum. Quisque malesuada dui vel justo molestie, sed luctus mauris facilisis. Nullam interdum, nulla in convallis venenatis, tortor enim elementum felis, sed consequat neque tellus in orci. Vestibulum eu tortor quis eros mollis vestibulum ullamcorper a dolor. Integer maximus pretium dolor ac lacinia. Phasellus ut ante in sapien scelerisque pharetra nec eu lorem.<p>

Aenean molestie nibh quis bibendum pulvinar. Quisque a quam orci. Nulla volutpat turpis ac elit ullamcorper, ut mollis sem mollis. Praesent semper consectetur lacinia. Aenean vestibulum orci vitae mi gravida, at convallis sem euismod. Morbi turpis purus, egestas quis accumsan eu, congue sed augue. Aenean at mauris at massa scelerisque pretium. Sed eget ex elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit amet lacus sit amet enim lobortis posuere. Sed hendrerit, ex vitae luctus rhoncus, purus lacus pulvinar tortor, ac facilisis neque libero at lorem. Sed sed velit nulla. Nam ut maximus sapien. Fusce imperdiet sit amet ante nec sollicitudin.<p>

Vivamus fringilla ante eu nibh hendrerit, sit amet posuere risus rhoncus. Donec mattis, orci feugiat mattis vehicula, massa felis finibus tortor, id congue massa quam nec tellus. Aliquam efficitur id ligula sit amet viverra. Aliquam ac bibendum augue, nec bibendum lorem. Curabitur aliquam imperdiet maximus. Cras sem est, iaculis et maximus nec, euismod hendrerit augue. Vivamus at tellus at elit efficitur efficitur. Nullam vulputate mauris et ante aliquam vestibulum. Donec aliquam nibh in lacinia fermentum. Aenean vehicula varius urna, nec aliquam nibh ornare et. Integer posuere lorem eu quam aliquam sollicitudin.

</div>
 <div class="np1-bottom">

notes/tag

</div>
 </div>
</div>