SN 2021 HeaderEdited

ModerNeopets Pet Page Layouts

The below Pet Page Layouts are used specifically for ModerNeopets. 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 Page Layouts as well!

Bio – Roses

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://images.pexels.com/photos/931177/pexels-photo-931177.jpeg[/img][/div]

[div id="box"]
[url="https://sketchedneo.com/"][div id="code" class="fas fa-code"][/div][/url]

[div class="info"]
[p][div class="smallimg"][img]https://static.wikia.nocookie.net/wingsoffirefanon/images/4/4c/Roses.jpg[/img][/div][/p]


[div class="far fa-address-card fl"][/div]
[h1]Name[/h1][h2]info[/h2][hr]

[div class="fas fa-user fl"][/div]
[h1]Nickname[/h1][h2]info[/h2][hr]

[div class="far fa-calendar-alt fl"][/div]
[h1]Age[/h1][h2]info[/h2][hr]

[div class="fas fa-birthday-cake fl"][/div]
[h1]Birthday[/h1][h2]info[/h2][hr]

[div class="fas fa-venus-mars fl"][/div]
[h1]Gender[/h1][h2]info (pronouns)[/h2][hr]

[div class="fas fa-heart fl"][/div]
[h1]Orientation[/h1][h2]info[/h2][hr]

[div class="fas fa-briefcase fl"][/div]
[h1]Occupation[/h1][h2]info[/h2][hr]

[div class="fas fa-brain fl"][/div]
[h1]MBTI[/h1][h2]info[/h2][hr]

[div class="fas fa-cog fl"][/div]
[h1]Other[/h1][h2]info[/h2][hr]


[div class="grid-container"]
[div class="bg1"][/div][div class="bg2"][/div][div class="bg3"][/div][div class="bg4"][/div][div class="bg5"][/div]
[/div][/div]


[div class="text"]
[p][i]italics[/i] [u]underline[/u] [b]bold[/b] [url="/"]link[/url][/p][p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]
[/div][/div][/div]

CSS

/* use [h4] for line breaks instead of [br]! use [p] for paragraphs! */

/* use the swatches below to show off your pet's color scheme! NOTE if you change # of colors you will have to edit the grid-container class below! */
:root {
  --color1: #75675D;
  --color2: #e48a7d;
  --color3: #c47471;
  --color4: #f7c8b9;
  --color5: #d79e95;
  
  --div-bg: #F9E1D9;
  --top-bg-color: #f2b9b0;
  --bottom-bg-color: #a64e4a;

  --main-body-text-color: #492b2a;
  --link-color: #E48A7D;
  --icon-color: #f2b9b0;

  --h1-color: var(--bottom-bg-color);
  --h2-color:var(--link-color);

  --italics-color:var(--link-color);
  --bold-color: var(--bottom-bg-color);
  --underline-color: var(--top-bg-color);
  --link-hover-color: var(--bottom-bg-color);
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: var(--link-color);
  --credit-text-color: var(--bottom-bg-color);
  --hr-color: var(--icon-color);
}

/* MAKE SURE the number of autos is equal to the number of swatches above! */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  height:50px;
}

------------------------------------------------------------------------

a, a b, a:link, a:visited {
color: var(--link-color);
  transition: .5s!important;
}

a:hover {
color: var(--link-hover-color) ;
  transition: .5s!important;
}

i {
color: var(--italics-color);
}

b {
color: var(--bold-color);
}

u {
color: var(--top-bg-color);
}

#code {
padding:16px;
position:absolute;
bottom: -15px;
right: -15px;
text-align: center;
background-color: var(--credit-bg-color);
height: 50px;
width:50px;
border-radius: 50%;
color: var(--credit-text-color);
transition: .5s!important;
}

#code:hover {
background-color: var(--credit-bg-hover-color);
transition: .5s!important;
}

h4 {
margin: 5px auto;
font-weight:normal;
}

p {
margin: 15px auto;
}

* br {
display: none;
}

.smallimg img {
width:100%;
height:100%;
display:block;
margin-top:-15px;
}

.bg1 {
  background-color: var(--color1);
}

.bg2 {
  background-color: var(--color2);
}

.bg3 {
  background-color: var(--color3);
}

.bg4 {
  background-color: var(--color4);
}

.bg5 {
  background-color: var(--color5);
}

.bg6 {
  background-color: var(--color6);
}
.bg7 {
  background-color: var(--color7);
}
.bg8 {
  background-color: var(--color8);
}

.bg9 {
  background-color: var(--color9);
}

.bg10 {
  background-color: var(--color10);
}

.fl {
  float: left;
margin-right:5px;
color: var(--icon-color);
}

.text {
float:right;
padding:10px;
  scrollbar-width:thin;
width:590px;
height:520px;
overflow:auto;
color: var(--main-body-text-color);
}

.center-container {
  display: inline-table;
  margin: 0 auto;
}

html{
  height: 100vh;
}

body {
  background: linear-gradient(var(--top-bg-color), var(--bottom-bg-color));
  display: flex;
  align-content: center;
  justify-content: center;
  height: 100%;
  align-items: center;
}

hr {
color: var(--hr-color)!important;
margin: 5px auto;

}

.info {
float:left;
padding:5px;
width:250px;
height:550px;
margin-right:30px;
}

#sideimg{
float:left;
display: inline-block;
margin-right:5px;
}

#sideimg img{
height: 550px;
width:375px;
}

#box {
float:left;
padding:10px;
float:left;
margin: auto;
display: inline-block;
background: var(--div-bg);
width:900px;
height:550px;
position: relative;
}

h1 {
text-transform: uppercase;
text-align:left;
font: 15px arial!important;
font-weight:normal!important;
margin-bottom:-18px;
color: var(--h1-color);
}

h2{
text-align:right;
font: 15px arial!important;
font-weight:normal!important;
color: var(--h2-color);
}

Bio – Colorful Birds

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://images.neopets.com/surveyimg/sur_cards/04_island/011.jpg[/img][/div]

[div id="box"]
[url="https://sketchedneo.com/"][div id="code" class="fas fa-code"][/div][/url]

[div class="info"]
[p][div class="smallimg"][img]https://images.neopets.com/images/frontpage/lenny_day_2004.gif[/img][/div][/p]


[div class="far fa-address-card fl"][/div]
[h1]Name[/h1][h2]info[/h2][hr]

[div class="fas fa-user fl"][/div]
[h1]Nickname[/h1][h2]info[/h2][hr]

[div class="far fa-calendar-alt fl"][/div]
[h1]Age[/h1][h2]info[/h2][hr]

[div class="fas fa-birthday-cake fl"][/div]
[h1]Birthday[/h1][h2]info[/h2][hr]

[div class="fas fa-venus-mars fl"][/div]
[h1]Gender[/h1][h2]info (pronouns)[/h2][hr]

[div class="fas fa-heart fl"][/div]
[h1]Orientation[/h1][h2]info[/h2][hr]

[div class="fas fa-briefcase fl"][/div]
[h1]Occupation[/h1][h2]info[/h2][hr]

[div class="fas fa-brain fl"][/div]
[h1]MBTI[/h1][h2]info[/h2][hr]

[div class="fas fa-cog fl"][/div]
[h1]Other[/h1][h2]info[/h2][hr]


[div class="grid-container"]
[div class="bg1"][/div][div class="bg2"][/div][div class="bg3"][/div][div class="bg4"][/div][div class="bg5"][/div]
[/div][/div]


[div class="text"]
[p][i]italics[/i] [u]underline[/u] [b]bold[/b] [url="/"]link[/url][/p][p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]

[p]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/p]
[/div][/div][/div]

CSS

/* use [h4] for line breaks instead of [br]! use [p] for paragraphs! */

/* use the swatches below to show off your pet's color scheme! you can /* use the swatches below to show off your pet's color scheme! NOTE if you change # of colors you will have to edit the grid-container class below! */
:root {
  --color1: #F00C0D;
  --color2: #EBF504;
  --color3: #31EE39;
  --color4: #4DF7D3;
  --color5: #2966FA;
  
  --div-bg: #DCEEEE;
  --top-bg-color: #B7CCEE;
  --bottom-bg-color: #467446;

  --main-body-text-color: #172b1d;
  --link-color: #C80A07;
  --icon-color: #F6CB04;

  --h1-color: #2966FA;
  --h2-color: #79a0fc;

  --italics-color:var(--link-color);
  --bold-color: var(--bottom-bg-color);
  --underline-color: var(--top-bg-color);
  --link-hover-color: var(--bottom-bg-color);
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #31EE39;
  --credit-text-color: var(--bottom-bg-color);
  --hr-color: var(--icon-color);
}

/* MAKE SURE the number of autos is equal to the number of swatches above! */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  height:50px;
}

------------------------------------------------------------------------

a, a b, a:link, a:visited {
color: var(--link-color);
  transition: .5s!important;
}

a:hover {
color: var(--link-hover-color) ;
  transition: .5s!important;
}

i {
color: var(--italics-color);
}

b {
color: var(--bold-color);
}

u {
color: var(--top-bg-color);
}

#code {
padding:16px;
position:absolute;
bottom: -15px;
right: -15px;
text-align: center;
background-color: var(--credit-bg-color);
height: 50px;
width:50px;
border-radius: 50%;
color: var(--credit-text-color);
transition: .5s!important;
}

#code:hover {
background-color: var(--credit-bg-hover-color);
transition: .5s!important;
}

h4 {
margin: 5px auto;
font-weight:normal;
}

p {
margin: 15px auto;
}

* br {
display: none;
}

.smallimg img {
width:100%;
height:100%;
display:block;
margin-top:-15px;
}

.bg1 {
  background-color: var(--color1);
}

.bg2 {
  background-color: var(--color2);
}

.bg3 {
  background-color: var(--color3);
}

.bg4 {
  background-color: var(--color4);
}

.bg5 {
  background-color: var(--color5);
}

.bg6 {
  background-color: var(--color6);
}
.bg7 {
  background-color: var(--color7);
}
.bg8 {
  background-color: var(--color8);
}

.bg9 {
  background-color: var(--color9);
}

.bg10 {
  background-color: var(--color10);
}

.fl {
  float: left;
margin-right:5px;
color: var(--icon-color);
}

.text {
float:right;
padding:10px;
  scrollbar-width:thin;
width:590px;
height:520px;
overflow:auto;
color: var(--main-body-text-color);
}

.center-container {
  display: inline-table;
  margin: 0 auto;
}

html{
  height: 100vh;
}

body {
  background: linear-gradient(var(--top-bg-color), var(--bottom-bg-color));
  display: flex;
  align-content: center;
  justify-content: center;
  height: 100%;
  align-items: center;
}

hr {
color: var(--hr-color)!important;
margin: 5px auto;

}

.info {
float:left;
padding:5px;
width:250px;
height:550px;
margin-right:30px;
}

#sideimg{
float:left;
display: inline-block;
margin-right:5px;
}

#sideimg img{
height: 550px;
width:375px;
}

#box {
float:left;
padding:10px;
float:left;
margin: auto;
display: inline-block;
background: var(--div-bg);
width:900px;
height:550px;
position: relative;
}

h1 {
text-transform: uppercase;
text-align:left;
font: 15px arial!important;
font-weight:normal!important;
margin-bottom:-18px;
color: var(--h1-color);
}

h2{
text-align:right;
font: 15px arial!important;
font-weight:normal!important;
color: var(--h2-color);
}

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.