🦌 Elad's Profile Pet: Peachy the Fawn! 🦌

Peachy is a simple interactive pet, that can be easily costumized to fit any profile!

Peachy's basically a few images/GIFs, each representing a different state: sleeping, awake, eating, or playing.

Each button links to a different section using `href="#deer-awake"` (for example). CSS uses `:target` to show the selected section and hide the others.

To make your own:
1. Paste the code into your Kwenk Custom HTML section.
2. Replace Peachy's images/GIFs with your own pet.
3. Change the name, dialogue, colors, backgrounds, and buttons.
4. Save and test it!

You can make basically any little creature you want, as long as you have images for its different actions!

I have a full guide on how to customize her as a blog!
Code

<style>
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap");
[data-skin-part="custom-html"] .deer-pet{
	box-sizing:border-box;
	background-color:#432818;
	background-image:url("https://i.ibb.co/hRCZ78RD/a52933f3a05927f1cb29efbcf904931b-removebg-preview.png"),
    url("https://i.pinimg.com/736x/0a/94/db/0a94db570d034c403298615ec7616d1a.jpg");
	background-position:center,center;
	background-repeat:no-repeat,repeat;
	background-size:100% 100%,auto;
	border:none;
	border-radius:0;
	padding:55px 48px;
	text-align:center;
	color:#FFE6A7;
	width:100%;
	max-width:420px;
	margin:16px auto;
	overflow:hidden;
	font-family:"Fredoka",sans-serif;
}
[data-skin-part="custom-html"] .deer-title{
	font-size:22px;
	font-weight:700;
	color:#FFE6A7;
	text-align:center;
	margin:0 auto 4px;
	text-shadow:1px 2px 3px #432818;
}
[data-skin-part="custom-html"] .peachy-title-gif{
	display:inline-block;
	width:32px;
	height:32px;
	object-fit:contain;
	vertical-align:middle;
	margin:0 5px;
}
[data-skin-part="custom-html"] .deer-divider{
	display:block;
	width:100%;
	height:35px;
	background-image:url("https://i.imgur.com/4wCbEeQ.png");
	background-position:center;
	background-repeat:repeat-x;
	background-size:auto 35px;
	margin:3px auto;
}
[data-skin-part="custom-html"] .deer-state{
	display:none;
}
[data-skin-part="custom-html"] #deer-sleep{
	display:block;
}
[data-skin-part="custom-html"] .deer-state:target{
	display:block;
}
[data-skin-part="custom-html"] #deer-awake:target ~ #deer-sleep,
[data-skin-part="custom-html"] #deer-eating:target ~ #deer-sleep,
[data-skin-part="custom-html"] #deer-running:target ~ #deer-sleep{
	display:none;
}
[data-skin-part="custom-html"] .deer-nest{
	display:grid;
	box-sizing:border-box;
	width:240px;
	height:240px;
	max-width:100%;
	margin:6px auto;
	padding:0;
	border:none;
	border-radius:0;
	background:transparent;
	overflow:visible;
	isolation:isolate;
}
[data-skin-part="custom-html"] .deer-nest::before{
	content:"";
	display:block;
	grid-column:1;
	grid-row:1;
	width:100%;
	height:100%;
	background-color:#B4AD57;
	background-image:url("https://i.ibb.co/MDRXGry5/image-5.png");
	background-position:center;
	background-repeat:repeat;
	background-size:cover;
	border-radius:15%;
	transform:scale(.73);
	z-index:0;
}
[data-skin-part="custom-html"] .deer-nest::after{
	content:"";
	display:block;
	grid-column:1;
	grid-row:1;
	width:100%;
	height:100%;
	background-image:url("https://i.ibb.co/fVBFrc34/90f8d5cc7b0e3d2e27537d68a772527b-removebg-preview.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	pointer-events:none;
	z-index:2;
}
[data-skin-part="custom-html"] .deer-image{
	display:block;
	grid-column:1;
	grid-row:1;
	align-self:center;
	justify-self:center;
	width:155px;
	max-width:100%;
	height:155px;
	object-fit:contain;
	margin:0 auto;
	border:none;
	box-shadow:none;
	background:transparent;
	z-index:1;
}
[data-skin-part="custom-html"] .deer-pet-link{
	display:grid;
	grid-column:1;
	grid-row:1;
	width:100%;
	height:100%;
	align-items:center;
	justify-items:center;
	text-decoration:none;
	z-index:1;
}
[data-skin-part="custom-html"] .deer-pet-link .deer-image{
	grid-column:1;
	grid-row:1;
}
[data-skin-part="custom-html"] .deer-status{
	color:#FFE6A7;
	font-size:14px;
	margin:5px auto;
	text-shadow:1px 1px 2px #432818;
}
[data-skin-part="custom-html"] .deer-status-icon{
	display:inline-block;
	width:20px;
	height:20px;
	object-fit:contain;
	vertical-align:middle;
	margin-right:5px;
}
[data-skin-part="custom-html"] .deer-button{
	display:inline-flex;
	box-sizing:border-box;
	align-items:center;
	justify-content:center;
	gap:4px;
	vertical-align:middle;
	min-height:44px;
	max-width:100%;
	padding:10px 15px;
	margin:4px 5px;
	background-color:#FFE6A7;
	background-image:url("https://64.media.tumblr.com/35f96525c83015a77239562cc2a20327/e7a46821cfe7af87-9c/s250x400/9ed040cd1eb7d5f29375467dfeff745aaa2fa878.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#432818;
	border:none;
	border-radius:10px;
	font-family:"Fredoka",sans-serif;
	font-size:14px;
	font-weight:700;
	line-height:1.25;
	text-decoration:none;
	text-align:center;
	white-space:nowrap;
}
[data-skin-part="custom-html"] .deer-button:hover{
	color:#6F1D1B;
	transform:scale(1.05);
}
[data-skin-part="custom-html"] .deer-button-icon{
	display:inline-block;
	flex-shrink:0;
	width:20px;
	height:20px;
	object-fit:contain;
	vertical-align:middle;
	margin:0;
}
[data-skin-part="custom-html"] .deer-running-area{
	width:100%;
	overflow:hidden;
	border-radius:12px;
	background:#6F1D1B;
	padding:8px 0;
}
[data-skin-part="custom-html"] .deer-running-image{
	width:85px;
	height:85px;
	object-fit:contain;
	display:block;
	animation:deerRun 1.5s linear infinite alternate;
}
@keyframes deerRun{
	0%{
		transform:translateX(0) scaleX(-1);
	}
	49.9%{
		transform:translateX(180px) scaleX(-1);
	}
	50%{
		transform:translateX(180px) scaleX(1);
	}
	100%{
		transform:translateX(0) scaleX(1);
	}
}
</style>



<div class="deer-pet">

  <div class="deer-title">
    <img class="peachy-title-gif" src="https://graphic.neocities.org/Tiergem_33.gif" alt="" />
    peachy the fawn
    <img class="peachy-title-gif" src="https://graphic.neocities.org/Tiergem_33.gif" alt="" />
  </div>

  <div class="deer-divider"></div>

  

  <div class="deer-state" id="deer-awake">

    <div class="deer-nest">
      <img class="deer-image" src="https://i.ibb.co/7xst8M2b/awake-removebg-preview.png" alt="Awake Peachy" />
    </div>

    <p class="deer-status">
      <img class="deer-status-icon" src="https://maguro.carrd.co/assets/images/gallery12/794e4a50.gif?v=fc5e202a" alt="" />
      pet! pet! pet! pet! pet!
    </p>

    <a href="#deer-eating" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/apple-fruit-014.gif" alt="" /> Feed
    </a>

    <a href="#deer-running" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/applause-0037.gif" alt="" /> Play
    </a>

    <a href="#deer-sleep" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/sleep-0032.gif" alt="" /> Sleep
    </a>

  </div>

  

  <div class="deer-state" id="deer-eating">

    <div class="deer-nest">
      <img class="deer-image" src="https://i.ibb.co/7t8r77QR/apple-ezgif-com-remove-background.gif" alt="Peachy eating" />
    </div>

    <p class="deer-status">
      <img class="deer-status-icon" src="https://maguro.carrd.co/assets/images/gallery04/490a5f1b.gif?v=fc5e202a" alt="" />
      munch munch crunch crunch
    </p>

    <a href="#deer-awake" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/heart-0561.gif" alt="" /> All done
    </a>

    <a href="#deer-sleep" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/sleep-0032.gif" alt="" /> Sleep
    </a>

  </div>

  

  <div class="deer-state" id="deer-running">

    <div class="deer-running-area">
      <img class="deer-running-image" src="https://media.tenor.com/bcQrnFFc6CYAAAAj/fawn-run-transparent.gif" alt="Peachy playing" />
    </div>

    <p class="deer-status">
      <img class="deer-status-icon" src="https://maguro.carrd.co/assets/images/gallery04/693e2229.gif?v=fc5e202a" alt="" />
      zoomies! woah so fast
    </p>

    <a href="#deer-sleep" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/house-0012.gif" alt="" /> Come home
    </a>

  </div>

  

  <div class="deer-state" id="deer-sleep">

    <div class="deer-nest">
      <a href="#deer-awake" class="deer-pet-link" rel="nofollow noopener noreferrer">
        <img class="deer-image" src="https://i.ibb.co/xqb3jR32/squash-strech-breathing.gif" alt="Sleeping Peachy" />
      </a>
    </div>

    <p class="deer-status">
      <img class="deer-status-icon" src="https://pixelsea.neocities.org/icons/sleep-0042.gif" alt="" />
      eepy,,,,,
    </p>

    <a href="#deer-awake" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/heart-0561.gif" alt="" /> Pet
    </a>

    <a href="#deer-eating" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/apple-fruit-014.gif" alt="" /> Feed
    </a>

    <a href="#deer-running" class="deer-button" rel="nofollow noopener noreferrer">
      <img class="deer-button-icon" src="https://pixelsea.neocities.org/icons/applause-0037.gif" alt="" /> Play
    </a>

  </div>

  <div class="deer-divider"></div>

  <p class="deer-status">
    <img class="deer-status-icon" src="https://pixelsafari.neocities.org/favicon/nature/plant/leaf2.gif" alt="" />
    the sleepiest little deer around
    <img class="deer-status-icon" src="https://pixelsafari.neocities.org/favicon/nature/plant/leaf2.gif" alt="" />
  </p>

</div>
Comments

No comments yet.