Profile
HTML
<!-- CREDIT: DO NOT REMOVE
code by maplem0th :] feel free to frankenstein/edit
probably not mobile or wysiwyg friendly--><div class="framing">
<!-- BASICS -->
<!--NAME--><div class="testBox"><h1 class="textAccent">NAME</h1><div class="twoBlocks"><!-- ICON --><div class="iconContainer" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/72940342_rxy1pHdDH187bEL.png);"><br></div><div class="textBoxBasics">
<!-- BASIC INFO
can change these to whatever is needed + add more. the box scrolls
-->
<b class="textAccent">
name :
</b>
Lorem Ipsum, Dolor Sit Amet
<br><b class="textAccent">
aka :</b>
Lorem Ipsum<br><b class="textAccent">
pronouns :</b>
pro/noun
<br><b class="textAccent">
titles :
</b>
Count of 8 living blocks, Counselor of 16, Grand Master of the Twelfth Pillar of Community
<br><b class="textAccent">
residence :
</b>
<!-- could link the iterator they live on? -->
<a class="textAccent" href=
"LINKHERE">
placeholder
</a><br><b class="textAccent">
status :
</b>
example<br><b class="textAccent">
theme :</b>
example
</div></div></div>
<!-- DESIGN AND TRIVIA --><div class="testBox"><h1 class="textAccent">
ABOUT
<br></h1><div class="twoBlocks">
<!-- TALL IMAGE -->
<div class="imageContainer"
style='background-image:url(
"https://f2.toyhou.se/file/f2-toyhou-se/images/72322546_bdk87j5jA6fKt2f.png"
);'><br></div><div class="textBoxFacts"><h2 class="textAccent">
<!-- can add another title where this comment is if you want -->
<br></h2>Description of the character here. This box scrolls! It is the genome for a purposed organism. A small slug to clean the insides of pipes. Do you know what a purposed organism is? Actually you are talking to one right now! Although, a small fraction of one. Nowadays I am mostly just my puppet.
<h2 class="textAccent">
DESIGN/TRIVIA
</h2>
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul></div></div></div>
<!-- STORY --><div class="testBox"><h1 class="textAccent">
STORY
</h1>
<h2 class="textAccent">
PARAGRAPH 1
</h2>
<div class="textBoxStory">Its entire memory is filled with a mantra repeated... 5061 times - and then a termination verse. It was worn as an amulet, probably together with many identical others forming a pattern on some garment.The repeating mantra is important because it symbolizes the cyclical nature of life and death, and the termination verse is a symbol for ascension above and beyond it. I don't know how familiar you are with the nature of life and death, but I imagine like all living creatures you have some intuitive knowledge?<br>Then you know that death isn't the end - birth and death are connected to each other like a ring, or some say a spiral. Some say a spiral that in turn forms a ring. Some ramble in agonizing longevity. But the basis is agreed upon: like sleep like death, you wake up again - whether you want to or not.This is true for all living things, but some actually break the cycle. That doesn't apply to you or me though, you are too entangled in your animal struggles, and for me not breaking that cycle is an integral part of the design.<br>Our mantras keep repeating.</div><br>
<h2 class="textAccent">
PARAGRAPH 2
</h2>
<div class="textBoxStory">It's an old text. The verses are familiar to me, but I don't remember by whom they were written. The language is very old and intricate.<br>The first verse starts by drawing a comparison between the world and a tangled rug. It says that the world is an unfortunate mess. Like a knot, the nature of its existence is the fact that the parts are locking each other, none able to spring free. Then as it goes on the world becomes a furry animal hide, I suppose... because now us living beings are like insects crawling in the fur. And then it's a fishing net, because the more we struggle and squirm, the more entangled we become.<br>It says that only the limp body of the jellyfish cannot be captured in the net. So we should try to be like the jellyfish, because the jellyfish doesn't try. This was an eternal dilemma to them - they were burdened by great ambition, yet deeply convinced that striving in itself was an unforgivable vice. They tried very hard to be effortless. Perhaps that's what we were to them, someone to delegate that unrestrained effort to.<br>I know I have tried very hard.</div></div>
<!-- LINKS -->
<div class="testBox" style="height:400px;overflow:scroll;">
<h1 class="textAccent">
LINKS
</h1><div>
<!-- CHARACTER 1 -->
<div class="twoBlocks">
<div class="twoBlocks"><div class="iconContainerFriend" style='background-image:url(
"https://static.miraheze.org/rainworldwiki/6/63/Karma_Wrath.png"
);'></div>
<div class="textBoxFriend"><a class="textAccent" href=
"LINKHERE"
><h2 class="textAccent">
NAME
</h2></a><h4>
RELATIONSHIP
</h4>
Imagine having skin parasites that also ask for advice and have opinions... I'm sorry, that was disrespectful. They were our parents after all.</div></div><br>
<!-- CHARACTER 2 --><div class="twoBlocks"><div class="iconContainerFriend" style='background-image:url(
"https://static.miraheze.org/rainworldwiki/0/0b/Karma_Attachment.png"
);'></div><div class="textBoxFriend"><a class="textAccent" href=
"LINKHERE"
><h2 class="textAccent">
NAME
</h2></a><h4>
RELATIONSHIP
</h4>
Imagine having skin parasites that also ask for advice and have opinions... I'm sorry, that was disrespectful. They were our parents after all.</div></div><br>
<!-- CHARACTER 3 -->
<div class="twoBlocks"><div class="iconContainerFriend" style='background-image:url(
"https://static.miraheze.org/rainworldwiki/3/30/Karma_Self_Preservation.png"
);'><br></div><div class="textBoxFriend"><a class="textAccent" href=
"LINKHERE"
><h2 class="textAccent">
NAME
</h2></a><h4>
RELATIONSHIP
</h4>
Imagine having skin parasites that also ask for advice and have opinions... I'm sorry, that was disrespectful. They were our parents after all.
</div></div>
<br>
<!-- duplicate code between here and character 3 start to add more characters! the box scrolls so add as many as youd like -->
<a class="textAccent" href="https://toyhou.se/24192470.sofanthiel-wip"><h4>CODE</h4></a></div></div></div>
CSS
/*COLORS TO FIND/REPLACE:
BACKGROUND: #460e16
TEXT: #ffffff
ACCENT: #ffe373
*/
.testBox {
background-color:#460e16;
color:#ffffff;
padding:1% 5% 1% 5%;
border-style: solid;
border-color:white;
}
.a{
color:#ffe373;
}
a:hover{
color:#ffe373;
}
.framing{
max-width: 60%;
margin:auto;
}
.imageContainer{
text-align:left;
width:40%;
overflow:hidden;
display: inline-block;
background-color:#4f3438;
vertical-align:top;
border-style: solid;
border-color:white;
height:400px;
background-size:contain;
}
.iconContainer{
text-align:left;
width:200px;
overflow:hidden;
height:200px;
display: inline-block;
background-color:#4f3438;
vertical-align:top;
border-style: solid;
border-color:white;
background-size:cover;
background-repeat:no-repeat;
}
.textBoxBasics {
background-color:#4f3438;
text-align:left;
width:60%;
display: inline-block;
vertical-align:top;
font-size:100%;
padding:2% 5% 2% 5%;
border-style: solid;
border-color:white;
overflow:scroll;
height:200px;
}
.textBoxFacts {
background-color:#4f3438;
text-align:left;
width:50%;
display: inline-block;
vertical-align:top;
font-size:100%;
padding:2% 5% 2% 5%;
border-style: solid;
border-color:white;
overflow:scroll;
height:400px;
margin:auto;
}
.twoBlocks{
margin:auto;
}
.textBoxStory{
background-color:#4f3438;
text-align:left;
display: inline-block;
vertical-align:top;
font-size:100%;
padding:2% 5% 2% 5%;
border-style: solid;
border-color:white;
overflow:scroll;
height:200px;
margin:auto;}
.textBoxFriend {
background-color:#4f3438;
text-align:left;
width:75%;
display: inline-block;
vertical-align:top;
font-size:100%;
padding:2% 5% 2% 5%;
border-style: solid;
border-color:white;
overflow:scroll;
height:150px;
}
.iconContainerFriend{
text-align:left;
width:150px;
overflow:hidden;
height:150px;
display: inline-block;
background-color:#4f3438;
vertical-align:top;
border-style: solid;
border-color:white;
background-size:contain;
}
.textAccent{
text-align:center;
color:#ffe373;
}