(Older Student) All Hail Scarlett Moon! Queen Of the WolfBloods!
- Joined November 2016
- Member of Slytherin
- 45 House Points
- 1st Year
- United States
Backstory
<style>
/* VARIABLES TO CHANGE - feel free to change the colors here! */
:root {
--color1: #637C87; /* dark color */
--color2: #A7C2D0; /* medium color */
--color3: #E2F0F7; /* light color */
--font1: 'Cormorant Garamond', serif; /* title & chapter font */
--trans1: rgba(167,194,208,0.4); /* filter light #1 */
--trans2: rgba(167,194,208,0.1); /* filter light #2 */
--trans3: rgba(99,124,135,0.8); /* filter dark #1 */
/* END OF VARIABLES*/
}
</style>
<!--
NOTE BEFORE YOU START CODING:
You can add more about lines, relations, and pictures by copying the elements. I already marked the parts where it starts and where it ends, so it should be easy for you to navigate. Have fun! -Issie
-->
<center>
<div class="lemainbox">
<div class="lehead">
<div style="background: url(https://i.postimg.cc/pXn0N48x/Scar.jpg) center; background-size: cover;" class="leimghead"><div class="leimgblur2"></div></div>
<div style="background: url(https://i.postimg.cc/WbMHFx48/Scarlett.webp) center; background-size: cover;" class="leimghead"><div class="leimgblur2"></div></div>
<div style="background: url(https://i.postimg.cc/0ynXZmDJ/Scar-1.jpg) center; background-size: cover;" class="leimghead"><div class="leimgblur2"></div></div>
<div style="background: url(https://i.postimg.cc/L4PywGjS/Scarlett-M.jpg) center; background-size: cover;" class="leimghead"><div class="leimgblur2"></div></div>
<div style="background: url(https://i.postimg.cc/XvXL8PnT/Scarlett-C.jpg) center; background-size: cover;" class="leimghead"><div class="leimgblur2"></div></div>
</div>
<div class="leheader">
<h1 class="lename">Scarlett</h1>
Cresenta Moon
</div>
<hr class="lehr1">
<hr class="lehr2">
<div class="lebody">
<div class="lesub">
<div class="lesubsub">
<h1 class="leh1">About</h1>
<table>
<!--start one line-->
<tr>
<td class="leques">Name</td>
<td class="leanswer">Scarlett Moon</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Nickname</td>
<td class="leanswer">Scar</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Gender</td>
<td class="leanswer">Female</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Sexual Orientation</td>
<td class="leanswer">Bisexual and Polyamours</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Relationship Status</td>
<td class="leanswer">Single</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">IRL Career/In Game Career</td>
<td class="leanswer">Hogwarts Caretaker/College Student/Future High School English Teacher</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Birthday</td>
<td class="leanswer">May 18th</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Star Sign</td>
<td class="leanswer">Taurus</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Hair</td>
<td class="leanswer">Long Dark Brown</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Eyes</td>
<td class="leanswer">Blue</td>
</tr>
<!--end one line-->
<!--start one line-->
<tr>
<td class="leques">Skin</td>
<td class="leanswer">Pale/Fair</td>
</tr>
<!--end one line-->
</table>
</div>
<!--start image-->
<div style="background: url(https://i.postimg.cc/Y0BxtqQH/Scarlett-1.jpg) top center; background-size: cover;" class="leimg"><div class="leimgblur"></div></div>
<!--end image-->
</div>
<hr class="lehr1">
<hr class="lehr2">
<div class="lesub">
<!--start image-->
<div style="background: url(https://i.postimg.cc/wBt5JsVz/Scar-2.jpg) top center; background-size: cover;" class="leimg"><div class="leimgblur"></div></div>
<!--end image-->
<div class="lesubsub">
<h1 class="leh1">Personality</h1>
She presents herself as a captivating gothic tomboy, her style a striking reflection of her individuality that instantly draws attention. Her wardrobe consists entirely of deep, rich blacks, showcasing an array of oversized graphic tees that hang loosely from her shoulders, their fabric soft and inviting yet bold with evocative designs. These tees are often paired with distressed jeans that bear the marks of her adventurous spirit—faded patches, frayed hems, and subtle tears that speak to her love for comfort and rebellion. On her feet, she wears rugged combat boots, their sturdy soles worn from countless steps through the castle's ancient corridors, effortlessly completing her casual yet daring ensemble. To the untrained eye, she may seem aloof, her demeanor shrouded in a veil of mystery. Yet, there’s an undeniable allure to her quiet presence. When in small gatherings, her dark eyes shimmer with curiosity, revealing a depth of character that shines through. She listens with a keen intensity, absorbing every word spoken around her, and when she responds, it’s with thoughtful insights that often catch others off guard, showcasing a surprising wisdom that belies her age. Her sense of humor is delightfully twisted, infused with a morbid charm that evokes both laughter and contemplation. Friends may find themselves chuckling nervously at her darkly humorous quips about life's absurdities, while her candid remarks reflect a profound understanding of the world’s complexities. Beneath her edgy exterior lies a nurturing spirit, especially evident in her interactions with children and younger students at Hogwarts. She often kneels to meet them at eye level, her expression softening as she shares encouraging words or whimsical tales. With a twinkle in her eye, she spins enchanting ghost stories, captivating her young audience and making them feel cherished. It’s this gentle side that reveals the multifaceted beauty of her character, seamlessly blending an air of mystery with a heartfelt connection to the vulnerable.
<br /><br />
</div>
</div>
<hr class="lehr1">
<hr class="lehr2">
<div class="lesub">
<div class="lerel">
<h1 class="leh1">Relations</h1>
<div class="lerelrel">
<!--start relation-->
<div style="background: url() center; background-size: cover;" class="leimgrel"><div class="leimgblur1"><div class="lerelname"><b>Name</b><br />Relation</div></div></div>
<!--end relation-->
<!--start relation-->
Message me if you want a relation?
</div>
</div>
</div>
<hr class="lehr1">
<hr class="lehr2">
<div class="lesub">
<div class="lesubsub">
<h1 class="leh1">Fun Facts</h1>
Disabilities: ADHD, Autism, Mood Disorder, Bipolar 2, OCD, Anemia, PTSD, and Insomnia
Wand: 12 3/4" Redwood with a Dragon Heartstring. Patronus: Artic Wolf
Hobbies: I’m passionate about writing song lyrics and novels, letting my imagination thrive. I also love exploring various genres of literature for inspiration. Additionally, I practice archery, enjoying the focus it requires, and I find swimming refreshing and peaceful as I glide through the water.Contact Outside of HIH: Discord: mystic_nyx Email: AmberTannlund2023@gmail.com My Quote: Remember, Life may lead you where you least expect, but have faith that you are exactly where you are meant to be. - Snow Buddies
<br /><br />
</div>
<!--start image-->
<div style="background: url(https://i.postimg.cc/k5VZ4GR6/Scarlett-Moon-as-a-baby.jpg) top center; background-size: cover;" class="leimg"><div class="leimgblur"></div></div>
<!--end image-->
</div>
<hr class="lehr1">
<hr class="lehr2">
<div class="lesub">
<div class="lerel">
<h1 class="leh1">Aesthetics</h1>
<div class="lerelrel">
<!--start image-->
<div style="background: url(https://wallpapersok.com/images/thumbnail/gothic-gold-black-crown-p2wdksst71k71ueg.webp) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://preview.redd.it/x0r844xbgol71.jpg?width=640&crop=smart&auto=webp&s=bf6c5a80bb7ef6251a4df002b3979a1a227ca14c) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://wallpapers.com/images/hd/goth-aesthetic-black-sx38gaxfrmo92v5c.jpg) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://wallpapercave.com/wp/wp7032278.jpg) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://e0.pxfuel.com/wallpapers/454/716/desktop-wallpaper-goth-aesthetic-purple-gothic.jpg) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://i.pinimg.com/originals/56/13/d3/5613d37429234ac9e64accf0bb1e945b.png) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://wallpapers.com/images/hd/gothic-computer-ps0yp6xfqdb060fs.jpg) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
<!--start image-->
<div style="background: url(https://wallpapers.com/images/hd/gothic-computer-vylq4va8kuep3cb7.jpg) center; background-size: cover;" class="leimgaes"><div class="leimgblur"></div></div>
<!--end image-->
</div>
</div>
</div>
<center><a href="https://issiecodes.tumblr.com" style="text-decoration: none; font-size: 10px; color: var(--color3); letter-spacing: 0.5px;">coded by Issie</a></center>
</div>
</div>
</center>
<style>
.lemainbox {width: 600px; background: var(--color1); color: var(--color3); font-family: var(--font1); font-weight: 300; font-size: 15px; line-height: 16px; filter: grayscale(40%);}
.lehead {display: flex; width: 100%;}
.leimghead {width: calc(100%/5); aspect-ratio: 3/8; object-fit: cover;}
.leimgblur2 {width: 100%; height: 100%; background: var(--trans1); outline: 1px solid var(--color3); outline-offset: -5px; transition: 0.3s;}
.leimgblur2:hover {width: 100%; height: 100%; background: var(--trans2); outline-offset: 0; outline: 1px solid var(--trans2);}
.leimgblur, .leimgblur1 {width: 100%; height: 100%; background: var(--trans1); outline: 1px solid var(--color2); outline-offset: -5px; transition: 0.3s;}
.leimgblur:hover {width: 100%; height: 100%; background: var(--trans2); outline-offset: 0; outline: 1px solid var(--trans2);}
.leheader {padding: 25px 0 10px; font-style: italic; line-height: 36px; font-family: var(--font1); font-size: 30px; letter-spacing: 1.5px;}
.lename {margin: 5px 0; font-size: 70px; text-transform: uppercase; letter-spacing: 5px;}
.lehr1, .lehr2 {border: none; border-top: 1px solid var(--color2); margin: 4px auto;}
.lehr1 {width: 85%;}
.lehr2 {width: 70%;}
.lebody {padding: 0 15px 5px; text-align: justify;}
.lesub {padding: 15px 0; display: flex; gap: 5px;}
.lesubsub {border: 1px solid var(--color2); padding: 10px; width: 80%; height: 220px; overflow-y: auto; overflow-x: hidden;}
.leimg {float: left; width: 150px;}
.lerel {border: 1px solid var(--color2); padding: 10px; width: 100%; padding-bottom: 10px;}
.lerelrel {display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center;}
.leimgrel {width: calc(100%/4 - 6px); aspect-ratio: 1;}
.leimgblur1 {display: flex; justify-content: center; align-items: center; color: rgba(255,255,255,0); width: 100%; height: 100%;}
.leimgblur1:hover {color: var(--color3); background: var(--trans3); outline-offset: 0; outline: 1px solid var(--trans3);}
.lerelname {text-align: center;}
.lerelname > b {font-size: 20px;}
.leh1 {margin: 0 0 10px; line-height: 1em; font-style: italic; padding: 0 50px 4px 5px; border-bottom: 1px solid var(--color2); width: max-content; color: var(--color2);}
table {color: var(--color3); font-family: var(--font1); font-weight: 300; font-size: 15px; line-height: 16px; width: 100%; border-collapse: collapse;}
.leques, .leanswer {border-bottom: 1px solid var(--color2); padding: 7px 0 1px;}
.leques {font-weight: 700; text-transform: lowercase; color: var(--color2);}
.leanswer {text-align: right;}
.leimgaes {width: calc(100%/4 - 6px); aspect-ratio: 3/5;}
::-webkit-scrollbar {width: 4px; height: 4px;}
::-webkit-scrollbar-track {background: rgba(255,255,255,0.3);}
::-webkit-scrollbar-thumb {background: var(--color2);}
::-webkit-scrollbar-thumb:hover {background: var(--color3);}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">