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
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
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
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
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
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);
}
