Affection (HTML)

<div class="body">
	<div class="nav">
		<div class="left">
			<a class="bubble" href="https://dappervolk.com/profile/YOURID">
				<img src="https://dappervolk.com/img/avatars/11/11982-header.png?t=1595814430">
			</a>
			<h1>Affection</h1>
		</div>
		<div class="right">
			<img src="https://i.imgur.com/WtOP3ql.png">
			<a href="/">exit</a>
		</div>

		<div class="clr"></div>
	</div>

	<div class="container">

		<div class="pet">
			<img src="https://dappervolk.com/img/pets/0/15-q8TwYPvxCs-emerald-dragonlet.png">
			<h2>NAME</h2>
			<div class="meter"></div>
		</div>

		<div class="pet">
			<a href="https://dappervolk.com/pet/<PET-ID>"><img src="https://dappervolk.com/img/pets/0/70-wkcgiXqIVy-dark-crystal-skulling.png"></a>
			<h2>NAME</h2>
			<div class="meter meter-one"></div>
		</div>

		<div class="pet">
			<a href="https://dappervolk.com/pet/<PET-ID>"><img src="https://dappervolk.com/img/pets/0/17-sRLJvPac04-pointed-gryphon.png"></a>
			<h2>NAME</h2>
			<div class="meter meter-two"></div>
		</div>

		<div class="pet">
			<a href="https://dappervolk.com/pet/<PET-ID>"><img src="https://dappervolk.com/img/pets/0/69-PuaQ6GHyiG-sneering-pirate-eel.png"></a>
			<h2>NAME</h2>
			<div class="meter meter-three"></div>
		</div>

		<div class="pet">
			<a href="https://dappervolk.com/pet/<PET-ID>"><img src="https://dappervolk.com/img/pets/0/48-7RdTbh7my3-golden-oliphant.png"></a>
			<h2>NAME</h2>
			<div class="meter meter-four"></div>
		</div>

		<div class="pet">
			<a href="https://dappervolk.com/pet/<PET-ID>"><img src="https://dappervolk.com/img/pets/0/55-0IaO9kgoUH-quickened-turnipling-evolved.png"></a>
			<h2>NAME</h2>
			<div class="meter meter-full"></div>
		</div>

		<br class="clr">

	</div>

	<div class="footer">
		<a href="https://dappervolk.com/profile/YOURID">name</a>'s pets  |  coding by <a href="https://dappervolk.com/forum/topic/13689">blankspace</a>
	</div>
</div>