NOTEBOOK CR CHART V3: ALL IN ONE

Directions: https://efryndiel.dreamwidth.org/7022.html
Credit to Laena @ efryndiel.dreamwidth.org

<raw-code>
<!--BOOK CONTAINER-->
<div style="margin: auto; width: 500; height: 375px; overflow: hidden;">

<!--COVER PAGE-->
<a name="char0" style="height: 0; font-size: 0px;"></a>
<div style="margin: auto; width: 500px; height: 375px;">
<div style="margin: auto; margin-top: 5px; width: 330px; height: 330px; border-right: 5px double #d3cec0; border-left: 2px solid #473c2f; border-radius: 5px 15px 15px 5px; background-color: #866a4c; font-family: georgia, serif; text-align: center; padding-top: 30px;">

<!--COVER INFO CONTAINER-->
<div style="margin: auto; width: 300; height: 300px; line-height: 1; overflow: hidden; text-align: center;"> 
<!--ICON-->
<img src="ICONURL" style="border-radius: 8px;"><br />
<!--TITLE TEXT-->
<span style="font-size: 18pt; color: #ccc496;">Title Page</span><br/>
<!--SUBTITLE TEXT-->
<span style="font-size: 12pt; color: #d3cec0">subtitle text</span>
</div></div>

<!--NEXT PAGE-->
<div style="position: relative; float: right; margin-top: -25px; margin-right: 100px;">
<a href="#char1" style="text-decoration: none; font-size: 11pt; color: #ccc496;">»»</a>
</div></div>
<!--END COVER PAGE-->

<!--CHARACTER PAGES-->

<!--CHARACTER START-->
<a name="char1" style="height: 0; font-size: 0px;"></a>
<div style="margin: auto; width: 500px; height: 375px;">

<!--LEFT BOOKMARK CONTAINER-->
<div style="margin-top: 10px; width: 120px; text-align: center;">
<!--BOOKMARK GRAPHIC-->
<div style="margin: auto; background-color: #d3cec0; width: 90px; height: 350px; clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);"></div>

<!--BOOKMARK INFO CONTAINER-->
<div style="width: 100px; margin: auto; position: relative; margin-top: -300px;">

<!--ICON-->
<img src="IconURL" style="border-radius: 8px; width: 100px; height: 100px; box-shadow: 0px 0px 10px 0px #5a5852;">
<!--TEXT-->
<div style="margin: auto; margin-top: 5px; width: 85px; height: 152px; font-size: 10pt; line-height: 1; overflow: hidden;">
<!--QUOTE-->
<span style="font-family: georgia, serif; color: #804024;">
<i>"Quote"</i> 
</span>
<!--RATING-->
<br /><br /><span style="color: #ac3b25;">● ● ● ○ ○</span>
<br /><span style="color: #73604b;">☼ ♥ ♪ ✦ ✖</span> 
</div></div></div> 

<!--MIDDLE DIVIDER-->
<div style="position: relative; margin-top: -315px; margin-left: 124px; max-width: 2px; height: 360px; background-color: #d3cec0; border-left: 1px solid #84704e; border-right: 1px solid #84704e;"></div>

<!--RIGHT NOTEBOOK PAGE-->
<div style="position: relative; float: right; margin-top: -347px; margin-right: 10px; width: 330px; height: 283px; color: #3e2f22; font-family: times new roman, serif; font-size: 11pt; line-height: 19px; border: solid 1px #84704e; padding: 20px 10px 19px 10px; border-radius: 5px; background: white; background: -webkit-linear-gradient(top, #d3cec0 0%, #f9f9f7 8%) 0 55px; background: -moz-linear-gradient(top, #d3cec0 0%, #f9f9f7 8%) 0 55px; background: linear-gradient(top, #d3cec0 0%, #f9f9f7 8%) 0 55px; background-size: 100% 19px; box-sizing: content-box;">
<div style="height: 285px; overflow: hidden; text-align: justify; box-sizing: content-box;">
<b>Name:</b> Name
<br /><b>Canon:</b> Canon
<br /><b>Notes:</b> Extra notes yay
</div></div> 

<!--PREV PAGE-->
<div style="position: relative; float: right; margin-top: -46px; margin-right: 330px; z-index: 100;">
<a href="#char0" style="text-decoration: none; font-size: 11pt; color: #804024;">««</a>
</div>
<!--NEXT PAGE: delete if last page-->
<div style="position: relative; float: right; margin-top: -44px; margin-right: 22px; z-index: 100;">
<a href="#char2" style="text-decoration: none; font-size: 11pt; color: #804024;">»»</a>
</div>

</div> <!--DO NOT DELETE THIS-->
<!--END CHARACTER-->

</div>
<!--END BOOK-->

<!--NAVIGATION SELECTION: if more than 9 characters, remove <center> tags-->
<div style="margin: auto; width: 575px; margin-top: 20px;">
<center>
<a href="#char1"><img src="IconURL" style="width: 60px; height: 60px; border-radius: 10px;"></a>
<a href="#char2"><img src="IconURL" style="width: 60px; height: 60px; border-radius: 10px;"></a> 
</center> 
</div> 
<!--END NAVIGATION-->

<!--CREDIT-->
<center><a href="https://efryndiel.dreamwidth.org/7022.html" style="font-family: tahoma, sans serif; font-size: 8pt; text-decoration:none;">code</a> @ <a href="https://efryndiel.dreamwidth.org" style="font-family: tahoma, sans serif; font-size: 8pt; color: #4e6965; text-decoration: none;"><b>efryndiel</b></a></center>
</raw-code>