Biosheet Grid - Live Preview Code

<center>

<div style="border: 0px solid;width: 745px;overflow:hidden;height:475px;">

<div style="border: 10px solid #d4881e;display:inline-block;height: 450px;width: 450px;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;overflow:hidden;">



<!--START-->
<a name="start"></a> <div style="width: 450px; height:450px; background: url(https://i.imgur.com/EbiSObS.png);background-position:center;background-size:cover;">

<div style="text-align:right;margin-right: 10px;padding-top:170px;color: #000;font-family:helvetica;font-weight:bold;text-shadow: -2px 1px #fff;font-variant:small-caps;letter-spacing: 4px;">
<span style="font-size: 25px;">
Sakhmet
</span>
<div style="height: 2px;background: rgba(255,255,255,0.5);width: 50%;margin: 5px 0 5px 220px;"></div>
<span style="font-size: 15px;font-weight:normal">
The Wicked + The Divine
</span>
</div>

</div>



<!---HISTORY--->
<a name="history"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/9S79mNJ.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
History<br />
⮟
</div></div>

<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">

<div style="color: #f5b153;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;float:left;font-style:italic;">"Quote"</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

<div style="color: #f5b153;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;float:left;font-style:italic;">"Quote"</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.


</div>

</div>



<!---Personality--->
<a name="personality"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/1xelxqX.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Personality<br />
⮟
</div></div>


<div style="display:inline-block;;width: 40px;height: 150px;border-radius: 15px;margin: 5px;"><div style="background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;width: 100%;height: 58%;border-radius: 15px;box-shadow: -2px 2px #000;color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;padding-top: 2px;">I</div></div>

<div style="display:inline-block;;width: 40px;height: 150px;border-radius: 15px;margin: 5px;"><div style="background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;width: 100%;height: 58%;border-radius: 15px;box-shadow: -2px 2px #000;color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;padding-top: 2px;">S</div></div>

<div style="display:inline-block;;width: 40px;height: 150px;border-radius: 15px;margin: 5px;"><div style="background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;width: 100%;height: 74%;border-radius: 15px;box-shadow: -2px 2px #000;color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;padding-top: 2px;">F</div></div>

<div style="display:inline-block;;width: 40px;height: 150px;border-radius: 15px;margin: 5px;"><div style="background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;width: 100%;height: 86%;border-radius: 15px;box-shadow: -2px 2px #000;color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;padding-top: 2px;">J</div></div>

<div style="display:inline-block;;width: 40px;height: 150px;border-radius: 15px;margin: 5px;"><div style="background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;width: 100%;height: 60%;border-radius: 15px;box-shadow: -2px 2px #000;color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;padding-top: 2px;">A</div></div>


<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.


</div>

</div>



<!---Appearance--->
<a name="appearance"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/Vi0PzQV.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Appearance<br />
⮟
</div></div>

<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">

<div style="float:right;width: 120px;height: 250px;margin: 5px;background: url(https://i.imgur.com/NyCr082.jpg);background-position:center;background-size:cover;box-shadow: -2px 2px #000;border-radius: 15px;"></div>

<table style="width:250px"><tbody style="font-family:helvetica;font-size: 12px;color: #333;font-variant:small-caps;text-align:center;"><tr><td style="width: 50%;">
<u>hair</u><br />Lorem Ipsum
</td><td style="width: 50%;">
<u>height</u><br />Lorem Ipsum
</td></tr><tr><td>
<u>eyes</u><br />Lorem Ipsum
</td><td>
<u>build</u><br />Lorem Ipsum
</td></tr></tbody></table>

<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.<br /><br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet. Phasellus laoreet, tellus non hendrerit interdum, nisl dolor rutrum nibh, ultrices venenatis tortor est at ipsum. Fusce in tempus augue. In dui ligula, elementum at leo sed, efficitur rhoncus nunc. Pellentesque vitae pretium leo, ut auctor ex. Mauris viverra tempus mi, eu suscipit odio iaculis eu.


</div>

</div>



<!---Abilities--->
<a name="abilities"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/3pY4N5M.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Abilities<br />
⮟
</div></div>

<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">


<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 18px;color: #d4881e;text-shadow: -1px 1px #000;">ability</span><br />

<div style="padding-left: 15px;margin-left: 15px;border-left: 5px ridge #d4881e;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet.
</div><br />


<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 18px;color: #d4881e;text-shadow: -1px 1px #000;">ability</span><br />

<div style="padding-left: 15px;margin-left: 15px;border-left: 5px ridge #d4881e;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet.
</div><br />


<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 18px;color: #d4881e;text-shadow: -1px 1px #000;">ability</span><br />

<div style="padding-left: 15px;margin-left: 15px;border-left: 5px ridge #d4881e;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet.
</div><br />



</div>

</div>



<!---Relations--->
<a name="relations"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/ey7ZN19.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Relationships<br />
⮟
</div></div>

<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">


<div style="padding: 10px;">
<center><img src="https://i.imgur.com/zYVddgp.jpg" style="width: 75px;height: 75px;border-radius: 50px;border: 8px double #adadad;"><br />
<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;letter-spacing: 2px;font-size: 18px;">Laura Wilson</span></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet.
</div>


<div style="height: 2px;background: #d4881e;"></div>


<div style="padding: 10px;">
<center><img src="https://i.imgur.com/gwsay0R.jpg" style="width: 75px;height: 75px;border-radius: 50px;border: 8px double #adadad;"><br />
<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;letter-spacing: 2px;font-size: 18px;">Baal</span></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris.
</div>


<div style="height: 2px;background: #d4881e;"></div>


<div style="padding: 10px;">
<center><img src="https://i.imgur.com/zYVddgp.jpg" style="width: 75px;height: 75px;border-radius: 50px;border: 8px double #adadad;"><br />
<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;letter-spacing: 2px;font-size: 18px;">Laura Wilson</span></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris. Nulla fringilla, diam sit amet eleifend congue, ex augue facilisis mauris, eget gravida augue mi eu turpis. Donec sed ultrices leo, vitae vestibulum ligula. Fusce scelerisque erat nec sem faucibus laoreet.
</div>


<div style="height: 2px;background: #d4881e;"></div>


<div style="padding: 10px;">
<center><img src="https://i.imgur.com/gwsay0R.jpg" style="width: 75px;height: 75px;border-radius: 50px;border: 8px double #adadad;"><br />
<span style="font-family:helvetica;font-weight:bold;font-variant:small-caps;letter-spacing: 2px;font-size: 18px;">Baal</span></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui a turpis tempor euismod non eu leo. Curabitur vitae faucibus sem. Vivamus libero nibh, vehicula nec lacinia a, maximus ut mauris.
</div>


</div>

</div>



<!---Visuals--->
<a name="visuals"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/XDGf5Kh.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Visualosities<br />
⮟
</div></div>


<div style="display:inline-block;background: url(https://i.pinimg.com/originals/b3/6a/5a/b36a5a358f593eb24d439645e210419f.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/04b98acc9d5926c55e6e38f2c6d2719c/tumblr_pprf9uBTSI1vxt811_640.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://www.arce.org/sites/default/files/styles/slideshow/public/2019-02/Sekhmet%20statues_Mut%20at%20Karnak_S.JPG);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/6f396f5f3dcc17befc76c32374828006/tumblr_pprf9v34nY1vxt811_540.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://i.pinimg.com/originals/b3/6a/5a/b36a5a358f593eb24d439645e210419f.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/04b98acc9d5926c55e6e38f2c6d2719c/tumblr_pprf9uBTSI1vxt811_640.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://www.arce.org/sites/default/files/styles/slideshow/public/2019-02/Sekhmet%20statues_Mut%20at%20Karnak_S.JPG);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/6f396f5f3dcc17befc76c32374828006/tumblr_pprf9v34nY1vxt811_540.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://i.pinimg.com/originals/b3/6a/5a/b36a5a358f593eb24d439645e210419f.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/04b98acc9d5926c55e6e38f2c6d2719c/tumblr_pprf9uBTSI1vxt811_640.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://www.arce.org/sites/default/files/styles/slideshow/public/2019-02/Sekhmet%20statues_Mut%20at%20Karnak_S.JPG);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>

<div style="display:inline-block;background: url(https://66.media.tumblr.com/6f396f5f3dcc17befc76c32374828006/tumblr_pprf9v34nY1vxt811_540.jpg);width: 125px; height: 125px;background-position:center;background-size:cover;"></div>


</div>



<!---Music--->
<a name="music"></a> <div style="width: 450px; height:450px; background: #fff;overflow-y:scroll;overflow-x:hidden;">

<div style="width: 450px;height:200px;background: url(https://i.imgur.com/34mBtJI.jpg);background-position:center;background-size:cover;">
<div style="color: #fff;font-family:helvetica;font-weight:bold;text-shadow: -2px 2px #000;font-variant:small-caps;letter-spacing: 4px;font-size: 25px;padding: 63px 0 63px 0;background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255));">
Soundtrack<br />
⮟
</div></div>

<div style="text-align:justify;margin: 10px; font-family:helvetica;font-size: 12px;color: #333;">


<fieldset style="border: 1px solid;text-align:center;font-style:italic;font-weight:bold;font-variant:small-caps;padding: 0 5px;">
<legend style="text-align:center;font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 22px;font-style:italic;text-shadow: -1px 1px #d4881e;">hard</legend><a href="https://www.youtube.com/watch?v=iWKS1pu2gIM" style="text-decoration:none;color: #555;">
They can say whatever, I'ma do whatever<br />
No pain is forever, yup, you know this<br />
Tougher than a lion, ain't no need in tryin'<br />
I live where the sky ends, yup, you know this<br />
<div style="float:right;color: #000;text-shadow: -1px 1px #d4881e;">rihanna</div>
</a></fieldset>


<fieldset style="border: 1px solid;text-align:center;font-style:italic;font-weight:bold;font-variant:small-caps;padding: 0 5px;">
<legend style="text-align:center;font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 22px;font-style:italic;text-shadow: -1px 1px #d4881e;">hard</legend><a href="https://www.youtube.com/watch?v=iWKS1pu2gIM" style="text-decoration:none;color: #555;">
They can say whatever, I'ma do whatever<br />
No pain is forever, yup, you know this<br />
Tougher than a lion, ain't no need in tryin'<br />
I live where the sky ends, yup, you know this<br />
<div style="float:right;color: #000;text-shadow: -1px 1px #d4881e;">rihanna</div>
</a></fieldset>


<fieldset style="border: 1px solid;text-align:center;font-style:italic;font-weight:bold;font-variant:small-caps;padding: 0 5px;">
<legend style="text-align:center;font-family:helvetica;font-weight:bold;font-variant:small-caps;font-size: 22px;font-style:italic;text-shadow: -1px 1px #d4881e;">hard</legend><a href="https://www.youtube.com/watch?v=iWKS1pu2gIM" style="text-decoration:none;color: #555;">
They can say whatever, I'ma do whatever<br />
No pain is forever, yup, you know this<br />
Tougher than a lion, ain't no need in tryin'<br />
I live where the sky ends, yup, you know this<br />
<div style="float:right;color: #000;text-shadow: -1px 1px #d4881e;">rihanna</div>
</a></fieldset>


</div></div>

</div>



<!----NAVIGATION---->
<div style="border: 0px solid blue;
            height:470px;
            display:inline-grid;
            width:250px;
            grid-gap: 10px;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas: 'one one one' 'two three four' 'five three six' 'five seven seven' 'eight eight nine' 'ten ten nine' 'ten ten nine';float:right;">

<div style="grid-area: one;
background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;">
<a href="#start">

<img src="https://img.icons8.com/material-rounded/45/000000/cat-head.png" style="padding-top: 6px;">

</a></div>

<div style="grid-area: two;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 18px">
<a href="#abilities" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
abilities
</a></div>

<div style="grid-area: three;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 53px">
<a href="#history" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
history
</a>
</div>

<div style="grid-area: four;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 18px">
<a href="#visuals" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
visuals
</a>
</div>

<div style="grid-area: five;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 53px">
<a href="#relations" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
relations
</a>
</div>

<div style="grid-area: six;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 18px">
<a href="#music" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
music
</a>
</div>

<div style="grid-area: seven;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 18px">
<a href="#personality" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
personality
</a>
</div>

<div style="grid-area: eight;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 18px">
<a href="#appearance" style="text-decoration:none;color: #000;font-family:helvetica;text-shadow: 1px 1px #fff;font-variant:small-caps;font-size: 13px;font-weight:bold;letter-spacing: 1px;">
appearance
</a>
</div>

<div style="grid-area: nine;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top: 65px">
<a href="URL">

<img src="https://img.icons8.com/ios-filled/45/000000/cat-footprint.png" style="padding-top: 6px;">

</a>
</div>

<div style="grid-area: ten;background: url(https://www.transparenttextures.com/patterns/rice-paper-3.png), #d4881e;box-shadow: -3px 3px 0px rgba(0,0,0,0.8);border-radius: 15px;padding-top:28px;line-height: 15px;">
<span style="font-family:helvetica;font-variant:small-caps;font-size: 15px;font-weight:bold;letter-spacing: 1px;color:#000;">


<span style="font-size: 22px;text-shadow: 1px 1px #fff;">alias</span><br />
<a href="URL" style="text-decoration:none;color: #000;">plurk</a><br />
discord<br />
utc<br />
<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #000;font-size: 10px;">© killthecake</a></span>


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