Woebegone
mellifluous;
[class=bkgd]
position: relative;
box-sizing: border-box;
width: 400px;
height: 435px;
background-color: #262B2F;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
border: 2px solid black;
[/class]
[class=header]
position: absolute;
overflow: hidden;
width: 400px;
height: 160px;
left: 0px;
top: 0px;
background: url(https://images2.alphacoders.com/215/215400.jpg);
background-size: 100%;
[/class]
[class=name1]
position: absolute;
overflow: visible;
width: 225px;
height: 50px;
left: 88px;
top: 55px;
background-color: #0B1A2D;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
line-height: 50px;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
[/class]
[class=name]
position: absolute;
font-size: 42px;
width: 225px;
height: 50px;
overflow: visible;
font-weight: 500;
color: #99ab79;
left: 88px;
top: 35px;
text-align: center;
transform: rotate(-10deg);
line-height: 50px;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
color: #fff;
[/class]
[class=one]
position: absolute;
overflow: visible;
width: 102px;
height: 25px;
left: -2px;
top: 160px;
background-color: #660000;
border: 2px solid #fff;
font-size: 11px;
text-align: center;
text-transform: uppercase;
line-height: 25px;
font-weight: 700;
color: #fff;
[/class]
[class=two]
position: absolute;
overflow: visible;
width: 100px;
height: 25px;
left: 100px;
top: 160px;
background-color: #7B8A68;
border: 2px solid #fff;
font-size: 11px;
text-align: center;
text-transform: uppercase;
line-height: 25px;
font-weight: 700;
color: #fff;
[/class]
[class=three]
position: absolute;
overflow: visible;
width: 100px;
height: 25px;
left: 200px;
top: 160px;
background-color: #792929;
border: 2px solid #fff;
font-size: 11px;
text-align: center;
text-transform: uppercase;
line-height: 25px;
font-weight: 700;
color: #fff;
[/class]
[class=four]
position: absolute;
overflow: visible;
width: 100px;
height: 25px;
left: 300px;
top: 160px;
background-color: #000F70;
border: 2px solid #fff;
font-size: 11px;
text-align: center;
text-transform: uppercase;
line-height: 25px;
font-weight: 700;
color: #fff;
[/class]
[class=pic1]
position: absolute;
overflow: visible;
width: 124px;
height: 200px;
left: 251px;
top: 210px;
background: url(https://i.pinimg.com/originals/8c/6d/da/8c6ddaddca433a07cc211a168b491b05.jpg);
background-size: 120%;
border: 2px solid #fff;
[/class]
[class=pic2]
position: absolute;
overflow: visible;
width: 124px;
height: 200px;
left: 251px;
top: 210px;
background: url(https://i.pinimg.com/originals/8c/6d/da/8c6ddaddca433a07cc211a168b491b05.jpg);
background-size: 100%;
border: 2px solid #fff;
[/class]
[class=pic3]
position: absolute;
overflow: visible;
width: 124px;
height: 200px;
left: 251px;
top: 210px;
background: url(https://i.pinimg.com/originals/8c/6d/da/8c6ddaddca433a07cc211a168b491b05.jpg);
background-size: 120%;
border: 2px solid #fff;
[/class]
[class=pic4]
position: absolute;
overflow: visible;
width: 124px;
height: 200px;
left: 251px;
top: 210px;
background: url(https://i.pinimg.com/originals/8c/6d/da/8c6ddaddca433a07cc211a168b491b05.jpg);
background-size: 120%;
border: 2px solid #fff;
[/class]
[class=text]
position: relative;
overflow: auto;
width: 210px;
height: 185px;
color: #fff;
font-size: 10px;
line-height: 12px;
text-align: justify;
padding: 5px 30px 5px 15px;
background-color: #262B2F;
text-transform: lowercase;
[/class]
[class=textcontainer]
position: absolute;
overflow: hidden;
width: 250px;
height: 200px;
left: 15px;
top: 210px;
[/class]
[class=tag]
position: relative;
overflow: visible;
display: inline;
width: auto;
height: auto;
border: 1px solid black;
font-size: 7px;
text-align: center;
margin-right: 2px;
padding-left: 4px;
padding-right: 4px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
[/class]
[class=pink]
background-color: #680101;
font: creepster;
[/class]
[class=cyan]
background-color: #00A2F1;
[/class]
[class=yellow]
background-color: #FAB36B;
[/class]
[class=navy]
background-color: #000F70;
[/class]
[class=tab]
position: absolute;
overflow: visible;
border-color: black;
border-size: .5px;
[/class]
[class name=tab state=hover]
background-color: #fff;
color: #0B1A2D;
transition-duration: 0.3s;
[/class]
[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} zach) (fadeIn 600 tabsContentZach)
if (eq ${currentTab} IC) (fadeIn 600 tabsContentOutbreak)
if (eq ${currentTab} inventory) (fadeIn 600 tabsContentInventory)
if (eq ${currentTab} condition) (fadeIn 600 tabsContentCondition)
[/script]
[class=credit]
position: relative;
overflow: hidden;
width: 100%;
height: 10px;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 8px;
color: #00A2F1;
opacity: 0.3;
[/class]
[div class=bkgd]
[div class=header][/div]
[div class=name]Zachary Gray[/div]
[div class="tab one"]zach[/div]
[div class="tab two"]IC[/div]
[div class="tab three"]inventory[/div]
[div class="tab four"]condition[/div]
[div class="tabsContent tabsContentZach"]
[div class=textcontainer][div class=text]
[div class="tag pink"]name[/div]Zachary Gray Elliot
[div class="tag pink"]nickname[/div]Zach
[div class="tag pink"]age[/div]eighteen
[div class="tag pink"]gender[/div] ♂
[div class="tag pink"]role[/div]1st year college student
[div class="tag pink"]major[/div]linguistics
[div class="tag pink"]height[/div]5'10
[div class="tag pink"]weight[/div]he doesn't measure
[div class="tag pink"]hair color[/div]black
[div class="tag pink"]eye color[/div]brown
[div class="tag pink"]unique marks[/div]minor freckles
[/div][/div][div class=pic1][/div][/div]
[div class="tabsContent tabsContentOutbreak" style="display: none;"]
[div class=textcontainer][div class=text]
Colorless Spectrum
[/div][/div][div class=pic2][/div][/div]
[div class="tabsContent tabsContentInventory" style="display: none;"]
[div class=textcontainer][div class=text]
[div class="tabsContent tabsContentCondition" style="display: none;"][div class=pic4][/div]
[div class=textcontainer][div class=text]
Slighlty encumbered by his college materials
[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by [COLOR=#00A2F1]sox[/COLOR][/div]
[div class=bkgd]
[div class=header][/div]
[div class=name]Zachary Gray[/div]
[div class="tab one"]zach[/div]
[div class="tab two"]IC[/div]
[div class="tab three"]inventory[/div]
[div class="tab four"]condition[/div]
[div class="tabsContent tabsContentZach"]
[div class=textcontainer][div class=text]
[div class="tag pink"]name[/div]Zachary Gray Elliot
[div class="tag pink"]nickname[/div]Zach
[div class="tag pink"]age[/div]eighteen
[div class="tag pink"]gender[/div] ♂
[div class="tag pink"]role[/div]1st year college student
[div class="tag pink"]major[/div]linguistics
[div class="tag pink"]height[/div]5'10
[div class="tag pink"]weight[/div]he doesn't measure
[div class="tag pink"]hair color[/div]black
[div class="tag pink"]eye color[/div]brown
[div class="tag pink"]unique marks[/div]minor freckles
[/div][/div][div class=pic1][/div][/div]
[div class="tabsContent tabsContentOutbreak" style="display: none;"]
[div class=textcontainer][div class=text]
Colorless Spectrum
[/div][/div][div class=pic2][/div][/div]
[div class="tabsContent tabsContentInventory" style="display: none;"]
[div class=textcontainer][div class=text]
- Knapsack
- College Textbooks (mostly literature and languages)
- half-eaten peanut butter sandwich
- Orange juice
[div class="tabsContent tabsContentCondition" style="display: none;"][div class=pic4][/div]
[div class=textcontainer][div class=text]
Slighlty encumbered by his college materials
[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by [COLOR=#00A2F1]sox[/COLOR][/div]
Last edited: