Latest Neopets News:

Sorry our News gathering isn't working right now :(
Sorry our News gathering isn't working right now :(

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!

Grundo Moon Landing

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/GrundoMoon.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/GrundoMoonProfile.png[/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-globe fl"][/div]
[h2]layout bysketchedneo.com[/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: #99adae;
  --color2: #a94400;
  --color3: #0f6d79;
  --color4: #505f80;
  --color5: #5f8e3f;
  
  --div-bg: #252c3b;


  --main-body-text-color: #505f80;
  --link-color: #5f8e3f;
  --icon-color: #a94400;

  --h1-color: #a94400;
  --h2-color: #ff6600;

  --italics-color: #a94400;
  --bold-color: #0f6d79;
  --underline-color: #99adae;
  --link-hover-color: #ffffff;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #e9d5e1;
  --credit-text-color: #000000;
  --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: #99adae;
}

#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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/starBG.png);
  background-size: cover;



 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Jhudora’s Stargaze

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/JhudoraEyesSkySide.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/contellationsideimageV2.png[/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-globe fl"][/div]
[h2]layout bysketchedneo.com[/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: #ff78dd;
  --color2: #ffcf0f;
  --color3: #310921;
  --color4: #302a8d;
  --color5: #133c52;
  
  --div-bg: #310921;


  --main-body-text-color: #ad5da0;
  --link-color: #ebddf6;
  --icon-color: #f47acf;

  --h1-color: #f47acf;
  --h2-color: #ad5da0;

  --italics-color: #b43c83;
  --bold-color: #ff78dd;
  --underline-color: #99adae;
  --link-hover-color: #ffffff;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #e9d5e1;
  --credit-text-color: #000000;
  --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: #99adae;
}

#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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/PurpleStarBG.jpg);
  background-size: cover;



 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Snow Hill Fireworks

snow hill fireworks pet page layout moderneo

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/SnowFirework.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/MNSmallImgSnowVillage.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #e8f1f2;
  --color2: #063e95;
  --color3: #582fb6;
  --color4: #96d1e7;
  --color5: #247d2d;
  
  --div-bg: #55a0d6;


  --main-body-text-color: #a8dfee;
  --link-color: #582fb6;
  --icon-color: #e8f1f2;

  --h1-color: #e8f1f2;
  --h2-color: #a8dfee;

  --italics-color: #e8f1f2;
  --bold-color: #247d2d;
  --underline-color: #d1e3e7;
  --link-hover-color: #d1e3e7;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #000000;
  --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: #d1e3e7;
}

#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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/snow-background.png);
    background-repeat-x: repeat;



 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Mystic Forest

mystic forest

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/mystic-forest.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/mysticforestsmall.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #ede1c7;
  --color2: #2cbc0b;
  --color3: #f32785;
  --color4: #b4eff3;
  --color5: #53c8ae;
  
  --div-bg: #0f0f31;


  --main-body-text-color: #53c8ae;
  --link-color: #ffa5e4;
  --icon-color: #f32785;

  --h1-color: #f32785;
  --h2-color: #53c8ae;

  --italics-color: #ede1c7;
  --bold-color: #167469;
  --underline-color: #ede1c7;
  --link-hover-color: #b4eff3;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #ffffff;
  --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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://images.neopets.com/themes/h5/newyears/images/hp-bg-top.png);
    background-repeat-x: repeat;
    background-size: cover;


 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Christmas Acara

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://images.neopets.com/winter/advent/2023/05_a5e9f3ecbd/Advent2023_05.png[/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/winter/advent/2019/18_be82039745/Advent201918.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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #8d0304;
  --color2: #2cbc0b;
  --color3: #dbccaf;
  --color4: #b4eff3;
  --color5: #fce877;
  
  --div-bg: #927148;
  --top-bg-color: #B7CCEE;
  --bottom-bg-color: #467446;

  --main-body-text-color: #dbccaf;
  --link-color: #2cbc0b;
  --icon-color: #d5c382;

  --h1-color: #d5c382;
  --h2-color: #dbccaf;

  --italics-color: #fce877;
  --bold-color: #fce877;
  --underline-color: #b4eff3;
  --link-hover-color: var(--bottom-bg-color);
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #ffffff;
  --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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {
 background-image: url("https://images.neopets.com/ntimes/en/page_backgrounds/christmas_bg_2004.jpg");
background-repeat: repeat;
 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Rainbow Party

rainbow party pet page layout moderneo

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/balloonpartyside.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/colourpartysml.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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][div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/balloonpartyside.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/colourpartysml.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #09c71f;
  --color2: #ffcf0f;
  --color3: #ff1d1f;
  --color4: #1fd5c7;
  --color5: #fbf7df;
  
  --div-bg: #351dc1;


  --main-body-text-color: #fbf7df;
  --link-color: #1fd5c7;
  --icon-color: #ffcf0f;

  --h1-color: #ffcf0f;
  --h2-color: #fbf7df;

  --italics-color: #a1efe5;
  --bold-color: #ffcf0f;
  --underline-color: #09c71f;
  --link-hover-color: #ff1d1f;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #000000;
  --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: #09c71f;
}

#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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/MNRainbowBG.png);
  background-size: cover;



 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Snow Hill Fireworks

snow hill fireworks pet page layout moderneo

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/SnowFirework.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/MNSmallImgSnowVillage.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #e8f1f2;
  --color2: #063e95;
  --color3: #582fb6;
  --color4: #96d1e7;
  --color5: #247d2d;
  
  --div-bg: #55a0d6;


  --main-body-text-color: #a8dfee;
  --link-color: #582fb6;
  --icon-color: #e8f1f2;

  --h1-color: #e8f1f2;
  --h2-color: #a8dfee;

  --italics-color: #e8f1f2;
  --bold-color: #247d2d;
  --underline-color: #d1e3e7;
  --link-hover-color: #d1e3e7;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #000000;
  --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: #d1e3e7;
}

#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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/snow-background.png);
    background-repeat-x: repeat;



 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Mystic Forest

mystic forest

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/mystic-forest.png[/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://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/mysticforestsmall.png[/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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #ede1c7;
  --color2: #2cbc0b;
  --color3: #f32785;
  --color4: #b4eff3;
  --color5: #53c8ae;
  
  --div-bg: #0f0f31;


  --main-body-text-color: #53c8ae;
  --link-color: #ffa5e4;
  --icon-color: #f32785;

  --h1-color: #f32785;
  --h2-color: #53c8ae;

  --italics-color: #ede1c7;
  --bold-color: #167469;
  --underline-color: #ede1c7;
  --link-hover-color: #b4eff3;
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #ffffff;
  --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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {

background-image: url(https://images.neopets.com/themes/h5/newyears/images/hp-bg-top.png);
    background-repeat-x: repeat;
    background-size: cover;


 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

Christmas Acara

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://images.neopets.com/winter/advent/2023/05_a5e9f3ecbd/Advent2023_05.png[/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/winter/advent/2019/18_be82039745/Advent201918.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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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: #8d0304;
  --color2: #2cbc0b;
  --color3: #dbccaf;
  --color4: #b4eff3;
  --color5: #fce877;
  
  --div-bg: #927148;
  --top-bg-color: #B7CCEE;
  --bottom-bg-color: #467446;

  --main-body-text-color: #dbccaf;
  --link-color: #2cbc0b;
  --icon-color: #d5c382;

  --h1-color: #d5c382;
  --h2-color: #dbccaf;

  --italics-color: #fce877;
  --bold-color: #fce877;
  --underline-color: #b4eff3;
  --link-hover-color: var(--bottom-bg-color);
  
  --credit-bg-color: var(--icon-color);
  --credit-bg-hover-color: #b4eff3;
  --credit-text-color: #ffffff;
  --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;
margin-top:6px;
scrollbar-width:thin;
width:590px;
height:545px;
overflow:auto;
color: var(--main-body-text-color);
}

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

html{
  height: 100vh;
}

body {
 background-image: url("https://images.neopets.com/ntimes/en/page_backgrounds/christmas_bg_2004.jpg");
background-repeat: repeat;
 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:275px;
height:555px;
margin-right:0px;
}

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

#sideimg img{
height: 578px;

}

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

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

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

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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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);
}

Rainbow Pteri

BBCode

[div class="center-container"]
[div id="sideimg"][img]https://www.sketchedneo.com//wp-content/usercontent/fileupload/Graphics/MNPetPage/pteriside.png[/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/games/new_tradingcards/lg_lenny_day_2005.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-globe fl"][/div]
[h2]layout by sketchedneo.com[/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;
margin-top:6px;

scrollbar-width:thin;
width:590px;
height:552px;
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:10px;
}

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

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

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

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

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

Neopets Time

Snowager Alert

Affiliates

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