CHUUYAS_HAT
ᴏɴᴇ ᴋɪꜱꜱ ɪꜱ ᴀʟʟ ɪᴛ ᴛᴀᴋᴇꜱ
I didn't name mine to be traditional >.<
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
that would be absurd to be a need!We don't need to be using codes for the rp, do we? I um... don't exactly know how to do fancy codes and the like well...
appeals round, honestly I think I just want good impressions, not too worried.I've decided on my appeals mon, and am between two pokemon for the battle round.
I figured that later on (presuming we use these characters for more contests) the Misdreavus can be a great support mon during contests. And Mawile might in the future get a mega stone (if they will be allowed later). So thank you for loving the last two.
In the future Anju might send Volcarona back home (it having belonged to her late mother) so she can finally 'begin to stand in on her own') and replace Vesta with something else. But for now she's keeping her mother's partner.
We don't need to be using codes for the rp, do we? I um... don't exactly know how to do fancy codes and the like well...
[div=/*SECTION - Design Container */
box-sizing: border-box; padding: 2.5%; position: relative;
display: flex;
width: 100%; height: var(--height);
background: repeat center/auto var(none);
cursor: url(https://archives.bulbagarden.net/media/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png), pointer;
/*ANCHOR - Font Sizes */
--fs-header: calc(var(--fs-body) * 1.5);
--fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em);
--fs-mini: calc(var(--fs-body) * 0.6);
/*ANCHOR - Code Size */
--height: 800px;
/*ANCHOR - Accent Color */
--accent-c: #A27EFA;
--shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000;
/*ANCHOR - Text Color */
color: #fff;
/*ANCHOR - Character Image */
--char-img: url(https://i.imgur.com/mDaFSk0.png);
/*SECTION - Pokémon */
/*ANCHOR - Pyrrha */
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
--PyrPrimType: #A27EFA;
--PyrSecType: #7D58D6;
--PyrGender: var(--female);
--PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);
/*ANCHOR - Halay-Alae */
--HalImg: url(https://play.pokemonshowdown.com/sprites/gen5/houndour.png);
--HalPrimType: #A29288;
--HalSecType: #9C531F;
--HalGender: var(--female);
--HalItem: url();
/*ANCHOR - Pari */
--PariImg: url(https://play.pokemonshowdown.com/sprites/gen5/munna.png);
--PariPrimType: #FA92B2;
--PariSecType: #A13959;
--PariGender: var(--female);
--PariItem: url();
/*ANCHOR - Ciera */
--CieImg: url(https://play.pokemonshowdown.com/sprites/gen5/bounsweet.png);
--CiePrimType: #A7DB8D;
--CieSecType: #57913A;
--CieGender: var(--female);
--CieItem: url();
/*ANCHOR - L'Basseau */
--SusuImg: url(https://play.pokemonshowdown.com/sprites/gen5/surskit.png);
--SusuPrimType: #C6D16E;
--SusuSecType: #506899;
--SusuGender: var(--female);
--SusuItem: url();
/*ANCHOR - Kasriel */
--KasImg: url(https://play.pokemonshowdown.com/sprites/gen5/zigzagoon-galar.png);
--KasPrimType: #A29288;
--KasSecType: #6D6D4E;
--KasGender: var(--male);
--KasItem: url();
/*ANCHOR – Istha */
--IstImg: url(https://play.pokemonshowdown.com/sprites/gen5-shiny/feebas.png);
--IstPrimType: #9DB7F5;
--IstSecType: #4A66AB;
--IstGender: var(--female);
--IstItem: url();
/*ANCHOR – Jecroix */
--JeImg: url(https://play.pokemonshowdown.com/sprites/gen5/drifloon.png);
--JePrimType: #A284A2;
--JeSecType: #58789B;
--JeGender: var(--male);
--JeItem: url();
/*ANCHOR - P1 */
--P1Img: var(--PyrImg);
--P1PrimType: var(--PyrPrimType);
--P1SecType: var(--PyrSecType);
--P1Gender: var(--PyrGender);
--P1Item: var(--PyrItem);
/*ANCHOR - P2 */
--P2Img: var(--HalImg);
--P2PrimType: var(--HalPrimType);
--P2SecType: var(--HalSecType);
--P2Gender: var(--HalGender);
--P2Item: var(--HalItem);
/*ANCHOR - P3 */
--P3Img: var(--JeImg);
--P3PrimType: var(--JePrimType);
--P3SecType: var(--JeSecType);
--P3Gender: var(--JeGender);
--P3Item: var(--JeItem);
/*ANCHOR - P4 */
--P4Img: var(--CieImg);
--P4PrimType: var(--CiePrimType);
--P4SecType: var(--CieSecType);
--P4Gender: var(--CieGender);
--P4Item: var(--CieItem);
/*ANCHOR - P5 */
--P5Img: var(--SusuImg);
--P5PrimType: var(--SusuPrimType);
--P5SecType: var(--SusuSecType);
--P5Gender: var(--SusuGender);
--P5Item: var(--SusuItem);
/*ANCHOR - P6 */
--P6Img: var(--IstImg);
--P6PrimType: var(--IstPrimType);
--P6SecType: var(--IstSecType);
--P6Gender: var(--IstGender);
--P6Item: var(--IstItem);
/*!SECTION */]
[div=/*SECTION - Post Container */
box-sizing: border-box; margin: auto; height: 95%; width: 88%;
background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%);
border-radius: 15px; border: solid 2px #fff;
position: relative;]
[div=/*SECTION - Char Img */
box-sizing: border-box;
border-radius: 100px; box-shadow: var(--shadow);
background: var(--char-img) no-repeat center/90%;
height: clamp(55px, calc(4.5em + 5%), 125px); aspect-ratio: 1;
position: absolute; left: -50px; top: 75px; z-index: 2;
/*!SECTION */][/div]
[div=/*SECTION - Header */
border: 1px solid transparent; border-radius: 15px;
position: absolute; top: 0px;
box-sizing: border-box;
max-width: 100%; min-width: 250px; height: 125px; width: 100%;
line-height: 1.5; letter-spacing: 1px;
margin: 0px auto; padding: 0px;
display: flex; flex-direction: column;
box-shadow: 0px 2px 2.5px var(--accent-c);
font-family: Laila, Georgia;
background: linear-gradient(350deg, rgba(255,255,255,0.6) 2.5%, rgba(22,176,238,0.6) 60%);]
[div=/*ANCHOR - Location */
box-sizing: border-box; font-size: var(--fs-header); margin: auto; padding-left: 50px;] PokéCenter [div=box-sizing: border-box; font-size: var(--fs-mini);] Seafolk Village [Poni Island], Alola[/div][/div]
[div=/*ANCHOR - Date/Time & Mention/Interactions */
box-sizing: border-box; font-size: var(--fs-mini); margin: -15px 0 20px 0; padding-left: 55px;]August, 11[div=box-sizing: border-box; font-variant-position: super; display: inline;]th[/div] | 8:15 a.m. [/div]
[div=/*ANCHOR - Weather Icon */
box-sizing: border-box;
padding: 0px;
/* List
Harsh Sun
fa-solid fa-sun
Regular Sun
fa-regular fa-sun
Clear Night
fa-solid fa-moon
Snow
fa-solid fa-snowflake
Foggy
fa-solid fa-smog
Windy
fa-solid fa-wind
Cloudy
fa-solid fa-cloud-sun
fa-solid fa-cloud-moon
Thunder Storm Bolt
fa-solid fa-cloud-bolt
Sparse Rain
fa-solid fa-cloud-sun-rain
fa-solid fa-cloud-moon-rain
Heavy Rain
fa-solid fa-cloud-showers-heavy */
/*ANCHOR - Sun/Moon Colors */
--sun-color: #FFFD37;
--evening-sun-color: #FFA500;
--moon-color: #dcdcdc;
--icon-f-s: 2em;
--r-r: rotate(-45deg);
color: var(--evening-sun-color);
font-size: var(--icon-f-s);
font-weight: bold;
line-height: 1;
transform: var(--r-r);
position: absolute; top: max(5%, 5px); right: min(2.5%, 30px);][fa]fa-regular fa-sun[/fa][/div]
[div=/*!SECTION */][/div][/div]
[div=/*SECTION - Pokémon Section */
--p-height: 45px;
--p-micro: calc(var(--p-height)/2.5);
--bg-color: transparent;
--p-size: 150%;
--held-right: -7.5px;
--gen-left: -7.5px;
box-sizing: border-box; display: flex; width: calc(10px + var(--p-height)); position: absolute; bottom: 20%; left: -30px; font-size: var(--fs-mini); justify-content: space-evenly; border-radius: 15px; flex-flow: column nowrap; gap: 5px; align-items: center;
background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%);
box-shadow: var(--shadow);
/*ANCHOR Gender Images */
--male: #89CFF0; url(https://i.imgur.com/4FI7ot0.png);
--female: #F4C2C2; url(https://i.imgur.com/wpBhCjV.png);]
[div=/*SECTION - Pokemon 1 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P1Img) var(--P1PrimType); border: 2px solid var(--P1SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P1PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P1Gender); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P1Item) var(--bg-color); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 2 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P2Img) var(--P2PrimType); border: 2px solid var(--P2SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P2PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P2Gender); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P2Item) var(--bg-color); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 3 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P3Img) var(--P3PrimType); border: 2px solid var(--P3SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P3PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P3Gender); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P3Item) var(--bg-color); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 4 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P4Img) var(--P4PrimType); border: 2px solid var(--P4SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P4PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P4Gender); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P4Item) var(--bg-color); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 5 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P5Img) var(--P5PrimType); border: 2px solid var(--P5SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P5PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P5Gender); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P5Item) var(--bg-color); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 6 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P6Img) var(--P6PrimType); border: 2px solid var(--P6SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P6PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P6Gender); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P6Item) var(--bg-color); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*!SECTION */ display: none;][/div][/div]
[div=/*ANCHOR - Text Section */
--esther-c: #f05656;
--shayan-c: #b22222;
border: transparent;
position: absolute; top: 175px;
box-sizing: border-box;
padding: 15px 25px 15px 50px;
font-size: var(--fs-body);
line-height: 1.5; letter-spacing: 1px; height: 75%;
display: block;
overflow: scroll;
scrollbar-width: none;
white-space: collapse; text-align: justify;
font-family: 'Nunito', Georgia;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat.
Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur.
[/div]
[div=/*!SECTION */][/div][/div]
[div=/*!SECTION */][/div][/div]
/*ANCHOR - Font Sizes */
--fs-header: calc(var(--fs-body) * 1.5);
--fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em);
--fs-mini: calc(var(--fs-body) * 0.6);
/*ANCHOR - Code Size */
--height: 800px;
/*ANCHOR - Accent Color */
--accent-c: #b42222;
--shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000;
/*ANCHOR - Text Color */
color: #fff;
/*ANCHOR - Character Image */
--char-img: url(https://i.imgur.com/mDaFSk0.png);
--accent-c: #A27EFA; (This is the Hex-code for the shade of purple I'm using)
/*ANCHOR - Pyrrha */
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
--PyrPrimType: #A27EFA;
--PyrSecType: #7D58D6;
--PyrGender: var(--female);
--PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);
/*ANCHOR - P1 */
--P1Img: var(--PyrImg);
--P1PrimType: var(--PyrPrimType);
--P1SecType: var(--PyrSecType);
--P1Gender: var(--PyrGender);
--P1Item: var(--PyrItem);
/*ANCHOR - P2 */
--P2Img: var(--HalImg);
--P2PrimType: var(--HalPrimType);
--P2SecType: var(--HalSecType);
--P2Gender: var(--HalGender);
--P2Item: var(--HalItem);
This is why you're the bestIf you'd like to use my code then here's the template for it.
Code:[div=/*SECTION - Design Container */ box-sizing: border-box; padding: 2.5%; position: relative; display: flex; width: 100%; height: var(--height); background: repeat center/auto var(none); cursor: url(https://archives.bulbagarden.net/media/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png), pointer; /*ANCHOR - Font Sizes */ --fs-header: calc(var(--fs-body) * 1.5); --fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em); --fs-mini: calc(var(--fs-body) * 0.6); /*ANCHOR - Code Size */ --height: 800px; /*ANCHOR - Accent Color */ --accent-c: #A27EFA; --shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000; /*ANCHOR - Text Color */ color: #fff; /*ANCHOR - Character Image */ --char-img: url(https://i.imgur.com/mDaFSk0.png); /*SECTION - Pokémon */ /*ANCHOR - Pyrrha */ --PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png); --PyrPrimType: #A27EFA; --PyrSecType: #7D58D6; --PyrGender: var(--female); --PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png); /*ANCHOR - Halay-Alae */ --HalImg: url(https://play.pokemonshowdown.com/sprites/gen5/houndour.png); --HalPrimType: #A29288; --HalSecType: #9C531F; --HalGender: var(--female); --HalItem: url(); /*ANCHOR - Pari */ --PariImg: url(https://play.pokemonshowdown.com/sprites/gen5/munna.png); --PariPrimType: #FA92B2; --PariSecType: #A13959; --PariGender: var(--female); --PariItem: url(); /*ANCHOR - Ciera */ --CieImg: url(https://play.pokemonshowdown.com/sprites/gen5/bounsweet.png); --CiePrimType: #A7DB8D; --CieSecType: #57913A; --CieGender: var(--female); --CieItem: url(); /*ANCHOR - L'Basseau */ --SusuImg: url(https://play.pokemonshowdown.com/sprites/gen5/surskit.png); --SusuPrimType: #C6D16E; --SusuSecType: #506899; --SusuGender: var(--female); --SusuItem: url(); /*ANCHOR - Kasriel */ --KasImg: url(https://play.pokemonshowdown.com/sprites/gen5/zigzagoon-galar.png); --KasPrimType: #A29288; --KasSecType: #6D6D4E; --KasGender: var(--male); --KasItem: url(); /*ANCHOR – Istha */ --IstImg: url(https://play.pokemonshowdown.com/sprites/gen5-shiny/feebas.png); --IstPrimType: #9DB7F5; --IstSecType: #4A66AB; --IstGender: var(--female); --IstItem: url(); /*ANCHOR – Jecroix */ --JeImg: url(https://play.pokemonshowdown.com/sprites/gen5/drifloon.png); --JePrimType: #A284A2; --JeSecType: #58789B; --JeGender: var(--male); --JeItem: url(); /*ANCHOR - P1 */ --P1Img: var(--PyrImg); --P1PrimType: var(--PyrPrimType); --P1SecType: var(--PyrSecType); --P1Gender: var(--PyrGender); --P1Item: var(--PyrItem); /*ANCHOR - P2 */ --P2Img: var(--HalImg); --P2PrimType: var(--HalPrimType); --P2SecType: var(--HalSecType); --P2Gender: var(--HalGender); --P2Item: var(--HalItem); /*ANCHOR - P3 */ --P3Img: var(--JeImg); --P3PrimType: var(--JePrimType); --P3SecType: var(--JeSecType); --P3Gender: var(--JeGender); --P3Item: var(--JeItem); /*ANCHOR - P4 */ --P4Img: var(--CieImg); --P4PrimType: var(--CiePrimType); --P4SecType: var(--CieSecType); --P4Gender: var(--CieGender); --P4Item: var(--CieItem); /*ANCHOR - P5 */ --P5Img: var(--SusuImg); --P5PrimType: var(--SusuPrimType); --P5SecType: var(--SusuSecType); --P5Gender: var(--SusuGender); --P5Item: var(--SusuItem); /*ANCHOR - P6 */ --P6Img: var(--IstImg); --P6PrimType: var(--IstPrimType); --P6SecType: var(--IstSecType); --P6Gender: var(--IstGender); --P6Item: var(--IstItem); /*!SECTION */] [div=/*SECTION - Post Container */ box-sizing: border-box; margin: auto; height: 95%; width: 88%; background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%); border-radius: 15px; border: solid 2px #fff; position: relative;] [div=/*SECTION - Char Img */ box-sizing: border-box; border-radius: 100px; box-shadow: var(--shadow); background: var(--char-img) no-repeat center/90%; height: clamp(55px, calc(4.5em + 5%), 125px); aspect-ratio: 1; position: absolute; left: -50px; top: 75px; z-index: 2; /*!SECTION */][/div] [div=/*SECTION - Header */ border: 1px solid transparent; border-radius: 15px; position: absolute; top: 0px; box-sizing: border-box; max-width: 100%; min-width: 250px; height: 125px; width: 100%; line-height: 1.5; letter-spacing: 1px; margin: 0px auto; padding: 0px; display: flex; flex-direction: column; box-shadow: 0px 2px 2.5px var(--accent-c); font-family: Laila, Georgia; background: linear-gradient(350deg, rgba(255,255,255,0.6) 2.5%, rgba(22,176,238,0.6) 60%);] [div=/*ANCHOR - Location */ box-sizing: border-box; font-size: var(--fs-header); margin: auto; padding-left: 50px;] PokéCenter [div=box-sizing: border-box; font-size: var(--fs-mini);] Seafolk Village [Poni Island], Alola[/div][/div] [div=/*ANCHOR - Date/Time & Mention/Interactions */ box-sizing: border-box; font-size: var(--fs-mini); margin: -15px 0 20px 0; padding-left: 55px;]August, 11[div=box-sizing: border-box; font-variant-position: super; display: inline;]th[/div] | 8:15 a.m. [/div] [div=/*ANCHOR - Weather Icon */ box-sizing: border-box; padding: 0px; /* List Harsh Sun fa-solid fa-sun Regular Sun fa-regular fa-sun Clear Night fa-solid fa-moon Snow fa-solid fa-snowflake Foggy fa-solid fa-smog Windy fa-solid fa-wind Cloudy fa-solid fa-cloud-sun fa-solid fa-cloud-moon Thunder Storm Bolt fa-solid fa-cloud-bolt Sparse Rain fa-solid fa-cloud-sun-rain fa-solid fa-cloud-moon-rain Heavy Rain fa-solid fa-cloud-showers-heavy */ /*ANCHOR - Sun/Moon Colors */ --sun-color: #FFFD37; --evening-sun-color: #FFA500; --moon-color: #dcdcdc; --icon-f-s: 2em; --r-r: rotate(-45deg); color: var(--evening-sun-color); font-size: var(--icon-f-s); font-weight: bold; line-height: 1; transform: var(--r-r); position: absolute; top: max(5%, 5px); right: min(2.5%, 30px);][fa]fa-regular fa-sun[/fa][/div] [div=/*!SECTION */][/div][/div] [div=/*SECTION - Pokémon Section */ --p-height: 45px; --p-micro: calc(var(--p-height)/2.5); --bg-color: transparent; --p-size: 150%; --held-right: -7.5px; --gen-left: -7.5px; box-sizing: border-box; display: flex; width: calc(10px + var(--p-height)); position: absolute; bottom: 20%; left: -30px; font-size: var(--fs-mini); justify-content: space-evenly; border-radius: 15px; flex-flow: column nowrap; gap: 5px; align-items: center; background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%); box-shadow: var(--shadow); /*ANCHOR Gender Images */ --male: #89CFF0; url(https://i.imgur.com/4FI7ot0.png); --female: #F4C2C2; url(https://i.imgur.com/wpBhCjV.png);] [div=/*SECTION - Pokemon 1 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P1Img) var(--P1PrimType); border: 2px solid var(--P1SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P1PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P1Gender); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P1Item) var(--bg-color); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 2 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P2Img) var(--P2PrimType); border: 2px solid var(--P2SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P2PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P2Gender); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P2Item) var(--bg-color); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 3 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P3Img) var(--P3PrimType); border: 2px solid var(--P3SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P3PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P3Gender); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P3Item) var(--bg-color); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 4 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P4Img) var(--P4PrimType); border: 2px solid var(--P4SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P4PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P4Gender); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P4Item) var(--bg-color); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 5 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P5Img) var(--P5PrimType); border: 2px solid var(--P5SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P5PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P5Gender); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P5Item) var(--bg-color); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 6 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P6Img) var(--P6PrimType); border: 2px solid var(--P6SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P6PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P6Gender); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P6Item) var(--bg-color); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*!SECTION */ display: none;][/div][/div] [div=/*ANCHOR - Text Section */ --esther-c: #f05656; --shayan-c: #b22222; border: transparent; position: absolute; top: 175px; box-sizing: border-box; padding: 15px 25px 15px 50px; font-size: var(--fs-body); line-height: 1.5; letter-spacing: 1px; height: 75%; display: block; overflow: scroll; scrollbar-width: none; white-space: collapse; text-align: justify; font-family: 'Nunito', Georgia;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. [/div] [div=/*!SECTION */][/div][/div] [div=/*!SECTION */][/div][/div]
I left in the details for my own character mostly so I could illustrate how the code is used. For a beginner, the only parts you need to concern yourself with are:
Code:/*ANCHOR - Font Sizes */ --fs-header: calc(var(--fs-body) * 1.5); --fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em); --fs-mini: calc(var(--fs-body) * 0.6); /*ANCHOR - Code Size */ --height: 800px; /*ANCHOR - Accent Color */ --accent-c: #b42222; --shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000; /*ANCHOR - Text Color */ color: #fff; /*ANCHOR - Character Image */ --char-img: url(https://i.imgur.com/mDaFSk0.png);
These are close to the top, you shouldn't need to scroll too far to find them. The variables are labeled but a few might require explanation.
I don't recommend changing any of the sizes, but feel free to change the colors. BBcode (the code used in the forum) accepts three (technically four) ways to declare a color: hex codes, HSL (Hue, Saturation, Lightness), RGB (Red, Green, Blue), and colors names. The first three are the preferred since they allow you a more customizable color and the recommended way to use them is to google search "Hex-code for Green" or something similar. Usually, you'll get something like this:
View attachment 1193543
Remember you need the '#' sign followed by six digits for hex-code to work.
e.g. #276221
You can use color names like Red, Blue, Green, but the shade might not be exactly what you want.
Back to the variables
Text color
Is of course, the color of the text and #fff (what it's set to right now) is the hex-code for white.
You might be wondering why this is three digits instead of six, and the answer is #fff is short-hand for #ffffff. When all the digits are the same you can get away with just the first three digits (sorta).
Accent Color
Is all shadows and gradients in the code, it's currently set to red because that's my characters color and here's what it would look like if I changed the accent color to purple:
Code:--accent-c: #A27EFA; (This is the Hex-code for the shade of purple I'm using)
Character Image
Called char-img in the code, this is the URL link to whatever picture represents your character. The code works best with direct links (links that end in .png or .jpeg) and as long as you put your link between the parentheses.
Now just below all those are the Pokemon on the side-bar.
Code:/*ANCHOR - Pyrrha */ --PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png); --PyrPrimType: #A27EFA; --PyrSecType: #7D58D6; --PyrGender: var(--female); --PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);
We use variables for these and you can declare a variable by doing:
--variable_name: variable_value;
example:
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
This is a variable called 'PyrImg', which is short for Pyrrha Image, and the value is url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png) which is a url link to Jangmo-o's sprite.
The next variables at the Hex-code colors for Pyrrha's Primary Type and Secondary Type, a variable for her Gender, and a url link to the item she's holding.
Since I have more than 6 Pokemon I find it easier to declare the details for all my OCs pokemon and then copy-paste them into the variables called P1, P2, P3, etc.
Those are the values actually used in the code and represent their position in the side-bar, P1 is first Pokemon, P2 is second Pokemon, etc.
You can see that here:
Code:/*ANCHOR - P1 */ --P1Img: var(--PyrImg); --P1PrimType: var(--PyrPrimType); --P1SecType: var(--PyrSecType); --P1Gender: var(--PyrGender); --P1Item: var(--PyrItem); /*ANCHOR - P2 */ --P2Img: var(--HalImg); --P2PrimType: var(--HalPrimType); --P2SecType: var(--HalSecType); --P2Gender: var(--HalGender); --P2Item: var(--HalItem);
So Pyrrha's variables go into P1 to put her in slot one, and P2 is Halay, my OC's Houndour.
You can, of course, skip the extra variables and directly add your pokemon's information to P1, P2, etc. You can even skip the colors if it makes things easier, just grab a sprite/image and put that link between the url parantheses.
Once you're done all your edits, save it somewhere so you can re-use it as often as you'd like. You can remove the Lorem Ipsum dummy text and put your actual post there.
This is a kind of a lot, so if you'd like I'm totally willing to edit things for you and then hand over the finished code so you can skip the hassle. ^^
You can also check out Uxie's great guide to getting started with BBCode:
Tutorial - 𝚌𝚛𝚊𝚜𝚑 𝚌𝚘𝚞𝚛𝚜𝚎 💥 — a guide to using code
boom! it's crash course title body ----title---- crash course ----header---- ----* * * text starts here---- hi, it's me again! i'm back! let's talk asap... would you do me a favour and read this ( . .) ----header end---- ----body text---- ----* * * text starts...www.rpnation.com
yep, Dm me your character and you can jump right inGot a new idea im working on. This still open?
Will have it finished by Tuesday i reckon, if all goes well. Thank youyep, Dm me your character and you can jump right in
No probs, as long as you get the CS in before the Contest itself starts then you're good.Will have it finished by Tuesday i reckon, if all goes well. Thank you
yep, she's unfamiliar with the name so she's added an 'h' sound to it.it's heizou not heizhou :>
unless of accent
correction, I take it back >.<ME ME-
I want to do that ^^