ModernNeopets Pet Lookups

The below layouts are used specifically for ModernNeopets. You can edit them to your liking through the variables at the very top of each CSS code. Have fun with it and enjoy! Check out our Neopets Pet Lookups as well!

Pastel Playgrounds

BBCode

[center][h4][b][name]'s[/b] Hoard of Treasure [/h4][/center]
[div class="treasure-chest"]
  [list]
    [*][img]https://www.moderneopets.com/images/items/alchemy-experimenter.gif[/img] Alchemy Experimenter
    [*][img]https://www.moderneopets.com/images/items/sparkle-potion.gif[/img] Sparkle Potion
    [*][img]https://www.moderneopets.com/images/items/cooling-balm-of-the-warrior.gif[/img] Cooling Balm of the Warrior
    [*][img]https://www.moderneopets.com/images/items/bubbling-fungus.gif[/img] Bubbling Fungus
  [/list]
  [url="YOUR GALLERY LINK"]Visit Gallery [img]https://www.moderneopets.com/images/petcentral/gallery.png[/img][/url]
  [url="YOUR WISHLIST LINK"]Check Wishlist [img]https://www.moderneopets.com/images/items/ancient-shopping-list-scroll.gif[/img][/url]
[/div]
[div class="credits"]Profile by [url="https://www.moderneopets.com/userlookup/316"]Lyonid[/url]. Get it on [url="https://www.sketchedneo.com/"]SketchedNeo![/url][/div]

CSS

/* Pet Lookup Template "Pastel Playgrounds"
   by Lyonid @SketchedNeo
   https://www.sketchedneo.com/
   https://www.moderneopets.com/userlookup/316 */
/* Import a Google Font here if you like */
@import url('https://fonts.googleapis.com/css2?family=Sen:[email protected];800&display=swap');

:root {
  --main-font: 'Sen', sans-serif;
  --body-background: #fff;
  --link-color: rgba(102, 57, 98, 1);
  --header-font-color: ;
  /* Replace media with another image or a colour value  */
  --header-media: url(https://images.neopets.com/backgrounds/chombybk.gif);
  --header-height: 6em;
  --header-font-size: 3em;
  --header-font-color: #424242;
  --statistics-color: #e8f7ff;
  --greeting-size: 1em;
  --description-background-color: white;
  --description-font-color: #424242;
  --description-header-background-color: #d1d1d1;
  --description-header-font-color: white;
  --button-color: #ffd4fd;
  --page-button-text: 'Pet Page';
  --next-button-text: 'Next';
  --back-button-text: 'Back';
  --message-button-text: 'Message';
}

/* General Styling */

body * {
  font-family: var(--main-font);
}

a,
a:visited {
  font-weight: 800;
  color: var(--link-color);
  opacity: .7;
}

a:hover {
  opacity: 1;
}

.main-sidebar,
.main-site-header,
.site-banner,
hr {
  display: none;
}

.petpet span:first-child,
.pet-images hr {
  display: none;
}

.petpet span:last-child {
  opacity   : 0;
  transition: .3s;
}

.petpet:hover span:last-child {
  opacity: 1;
}


/* Lookup Content */

/* Content Header */
.content:before {
  display          : block;
  content          : '';
  position         : absolute;
  left             : 0;
  right            : 0;
  top              : 0;
  height           : var(--header-height);
  background       : var(--header-media);
  background-size  : var(--header-height);
  background-repeat: repeat;
  z-index          : 0;
}

.content {
  border-radius: 25px;
  /* padding      : calc(var(--header-height) - var(--header-font-size) - 1em) 4em; for overlapping name*/
  padding      : var(--header-height) 4em;
  margin       : 50px auto;
  background   : var(--body-background);
  box-shadow   : 0 1em 1em 1em rgba(0, 0, 0, .1), 0 1em 2em 2em rgba(0, 0, 0, .05);
}

.pet-lookup .pet-statistics {
  background-color: var(--statistics-color);
  border-radius   : 25px;
}

/* Random events take place in the top left  */
.randomevent {
  position: fixed;
  top     : 1em;
  left    : 1em;
  width   : 200px;
}

.wrapper>footer .footer-content {
  margin-left: 0;
}

.pet-lookup-name {
  color        : var(--header-font-color);
  font-size    : var(--header-font-size);
  font-weight  : 800;
  z-index      : 1;
  /* background   : rgba(255, 255, 255, .3);
  border-radius: 10px;  */
}

.pet-greeting {
  font-size: var(--greeting-size);
}

.pet-lookup {
  gap    : 3.3%;
  padding: 20px;
}

.pet-lookup .pet-images,
.pet-lookup .pet-statistics,
.pet-lookup .pet-battledome {
  flex-basis: 30%;
}

.pet-lookup-description img {
  max-width: 100%;
}

.pet-lookup-buttons {
  gap: 10px;
}

.pet-lookup-buttons a,
.credits {
  margin-right : 0;
  display      : inline-block;
  background   : var(--button-color);
  border       : 3px solid white;
  padding      : 5px;
  border-radius: 5px;
  opacity      : .6;
  transition   : .3s;
}

.pet-lookup-buttons a:hover,
.credits:hover {
  opacity: 1;
}

.pet-lookup-buttons img {
  display: none;
}

.visit-pet-page:after {
  content: var(--page-button-text);
}

.next-pet:after {
  content: var(--next-button-text);
}

.previous-pet:after {
  content: var(--back-button-text);
}


.neomail-owner:after {
  content: var(--message-button-text);
}

.pet-lookup-description {
  margin    : 3em auto;
  box-shadow: 0 1em 1em 1em rgba(200, 200, 200, .1), 0 1em 2em 2em rgba(200, 200, 200, .05);
}

.pet-lookup-description .table-bg-two {
  text-align      : center;
  background-color: var(--description-header-background-color);
  font-size       : 1.5rem;
  width           : 100%;
  border-radius   : 0%;
  color           : var(--description-header-font-color);
}

.pet-lookup-description .bg-gray-100 {
  background-color: var(--description-background-color);
  color           : var(--description-font-color);

  padding: 2em 1em;
}

.credits {
  position : fixed;
  bottom   : 3em;
  right    : 3em;
  padding  : 1em;
  max-width: 200px;
}


/* Treasure Chest */
.treasure-chest {
  text-align: center;
  margin    : 0 1em;
}

.treasure-chest br {
  display: none;
}

.treasure-chest ul li img {
  border: solid 1px black;
}

.treasure-chest a {
  display: inline-block;
  margin : 1em 2em;
}

.treasure-chest a img {
  width: 10pt;
}

.treasure-chest ul {
  list-style-type      : none;
  display              : grid;
  gap                  : 1em;
  justify-content      : center;
  align-content        : center;
  grid-template-columns: repeat(4, 1fr);
  font-weight          : bold;
}

Neopets Dailies

Affiliates

© 1999-2022 Neopets, Inc. All rights reserved. Used With Permission
All layout coding and any content not containing Neopets images is © SketchedNeo 2006-2022.
Under no circumstances is any content to be used on any other website. All rights reserved. Redistribution prohibited.